pixelfed/resources/views/admin/home.blade.php

@extends('admin.partial.template-full')

@section('section')
</div>
<div class="header bg-primary pb-2 mt-n4">
	<div class="container-fluid">
		<div class="header-body">
			<div class="row align-items-center py-4">
				<div class="col-lg-6 col-7">
					<p class="display-1 text-white d-inline-block mb-0">Dashboard</p>
				</div>
			</div>
			<div v-if="loaded.stats" class="row">
				<div class="col-xl-3 col-md-6">
					<div class="card card-stats">
						<div class="card-body">
							<div class="row">
								<div class="col">
									<h5 class="card-title text-uppercase text-muted mb-0">Total posts</h5>
									<span class="h2 font-weight-bold mb-0" v-text="stats.statuses"></span>
								</div>
								<div class="col-auto">
									<div class="icon icon-shape bg-gradient-primary text-white rounded-circle shadow">
										<i class="ni ni-image"></i>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="col-xl-3 col-md-6">
					<div class="card card-stats">
						<div class="card-body">
							<div class="row">
								<div class="col">
									<h5 class="card-title text-uppercase text-muted mb-0">Total users</h5>
									<span class="h2 font-weight-bold mb-0" v-text="stats.users"></span>
								</div>
								<div class="col-auto">
									<div class="icon icon-shape bg-gradient-primary text-white rounded-circle shadow">
										<i class="ni ni-circle-08"></i>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="col-xl-3 col-md-6">
					<div class="card card-stats">
						<div class="card-body">
							<div class="row">
								<div class="col">
									<h5 class="card-title text-uppercase text-muted mb-0">Reports</h5>
									<span class="h2 font-weight-bold mb-0" v-text="stats.reports"></span>
								</div>
								<div class="col-auto">
									<div class="icon icon-shape bg-gradient-primary text-white rounded-circle shadow">
										<i class="ni ni-bell-55"></i>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="col-xl-3 col-md-6">
					<div class="card card-stats">
						<div class="card-body">
							<div class="row">
								<div class="col">
									<h5 class="card-title text-uppercase text-muted mb-0">Messages</h5>
									<span class="h2 font-weight-bold mb-0" v-text="stats.contact"></span>
								</div>
								<div class="col-auto">
									<div class="icon icon-shape bg-gradient-info text-white rounded-circle shadow">
										<i class="ni ni-chat-round"></i>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="container-fluid mt-4">

	<div class="row">
		<div class="col-md-4">
			<div class="card bg-default">
				<div class="card-header bg-transparent">
					<div class="row align-items-center">
						<div class="col">
							<h6 class="text-light text-uppercase ls-1 mb-1">New</h6>
							<h5 class="h3 text-white mb-0">Accounts</h5>
						</div>
					</div>
				</div>
				<div v-if="!loaded.accounts" class="card-body text-center">
					<b-spinner class="mb-4"></b-spinner>
				</div>
				<div v-else class="list-group list-group-scroll">
					<div
						v-for="(item, index) in accounts"
						class="list-group-item">

						<div class="d-flex align-items-center mr-1">
							<div class="custom-control custom-checkbox account-select-check">
								<input type="checkbox" class="custom-control-input" :id="'ac:' + item.id" :disabled="item.status && item.status == 'deleted' || item.hasOwnProperty('is_admin') && item.is_admin" @@change="handleAccountSelected($event, item, index)">
								<label class="custom-control-label" :for="'ac:' + item.id"></label>
							</div>
							<template v-if="item.hasOwnProperty('user_id')">
								<a :href="`/i/admin/users/show/${item.user_id}`" class="d-flex flex-row align-items-center">
									<img :src="item.avatar" class="avatar" onerror="this.onerror=null;this.src='/storage/avatars/default.jpg?v=0';"/>
									<div v-if="item.status && item.status == 'deleted'">
										<span v-text="item.username" class="font-weight-bold text-danger">Loading...</span>
										<span class="ml-2 badge badge-danger">Deleted</span>
									</div>
									<div v-else>
										<div v-text="item.username" class="font-weight-bold">Loading...</div>
										<div v-if="item.note_text" v-text="renderNote(item.note_text)" class="note">Loading...</div>
									</div>
								</a>
							</template>
							<template v-else>
								<span class="d-flex flex-row align-items-center">
									<img :src="item.avatar" class="avatar" onerror="this.onerror=null;this.src='/storage/avatars/default.jpg?v=0';"/>
									<div v-if="item.status && item.status == 'deleted'">
										<span v-text="item.username" class="font-weight-bold text-danger">Loading...</span>
										<span class="ml-2 badge badge-danger">Deleted</span>
									</div>
									<div v-else>
										<div v-text="item.username" class="font-weight-bold">Loading...</div>
										<div v-if="item.note_text" v-text="renderNote(item.note_text)" class="note">Loading...</div>
									</div>
								</span>
							</template>
						</div>

						<div>
							<div class="d-flex" style="font-size: 13px;">
								<div v-text="timeAgo(item.created_at)" class="small text-light"></div>
							</div>
						</div>
					</div>

					<a v-if="pagination.accounts" class="list-group-item font-weight-bold justify-content-center" href="#" @click.prevent="loadMoreAccounts()">Load more</a>
				</div>

			</div>
			<template v-if="loaded.accounts && accountsSelected && accountsSelected.length">
				<a
					class="btn btn-danger font-weight-bold btn-block mt-n4 mb-3"
					href="#"
					@@click.prevent="handleSelectedDeletes">
					Delete Selected Accounts
				</a>
			</template>
		</div>

		<div class="col-md-4">
			<div class="card bg-default">
				<div class="card-header bg-transparent">
					<div class="row align-items-center">
						<div class="col">
							<h6 class="text-light text-uppercase ls-1 mb-1">New</h6>
							<h5 class="h3 text-white mb-0">Posts</h5>
						</div>
					</div>
				</div>
				<div v-if="!loaded.posts" class="card-body text-center">
					<b-spinner class="mb-4"></b-spinner>
				</div>
				<div v-else class="list-group list-group-scroll">
					<a
						v-for="(item, index) in posts"
						class="list-group-item"
						:href="`/i/web/post/${item.id}`">

						<div v-if="item.account" class="d-flex align-items-center mr-1">
							<img :src="item.account.avatar" class="avatar" onerror="this.onerror=null;this.src='/storage/avatars/default.jpg?v=0';"/>
							<div>
								<div v-text="item.account.acct" class="font-weight-bold">Loading...</div>
								<div v-if="item.content" v-text="renderNote(item.content_text)" class="note">Loading...</div>
								<div v-else class="badge badge-primary" v-text="item.pf_type" style="font-size:9px"></div>
							</div>
						</div>
						<div v-else>
							<div class="text-muted font-weight-bold">Deleted or unavailable post</div>
						</div>

						<div>
							<div v-if="item.account" class="d-flex" style="font-size: 13px;">
								<div v-text="timeAgo(item.created_at)" class="small text-light"></div>
							</div>
						</div>
					</a>

					<a v-if="pagination.posts" class="list-group-item font-weight-bold justify-content-center" href="#" @click.prevent="loadMorePosts()">Load more</a>
				</div>
			</div>
		</div>

		<div class="col-md-4">
			<div class="card bg-default">
				<div class="card-header bg-transparent">
					<div class="row align-items-center">
						<div class="col">
							<h6 class="text-light text-uppercase ls-1 mb-1">New</h6>
							<h5 class="h3 text-white mb-0">Instances</h5>
						</div>
					</div>
				</div>
				<div v-if="!loaded.instances" class="card-body text-center">
					<b-spinner class="mb-4"></b-spinner>
				</div>
				<div v-else class="list-group list-group-scroll">
					<a
						v-for="(item, index) in instances"
						class="list-group-item"
						:href="`/i/admin/instances/show/${item.id}`">

						<div v-text="item.domain" class="font-weight-bold">Loading...</div>

						<div>
							<div class="d-flex" style="font-size: 13px;">
								<div v-if="item.software" class="badge badge-secondary mr-2" v-text="item.software"></div>
								<div v-if="item.user_count" class="badge badge-primary mr-2">
									<span class="mr-1"><i class="far fa-user"></i></span>
									<span v-text="item.user_count"></span>
								</div>
								<div v-text="timeAgo(item.created_at)" class="small text-light"></div>
							</div>
						</div>
					</a>

					<a v-if="pagination.instances" class="list-group-item font-weight-bold justify-content-center" href="#" @click.prevent="loadMoreInstances()">Load more</a>
				</div>
			</div>
		</div>
	</div>
@endsection

@push('scripts')
<script type="text/javascript">
	let app = new Vue({
		el: '#panel',

		data: {
			stats: {
				"contact": 0,
				"contact_monthly": 0,
				"reports": 0,
				"reports_monthly": 0,
				"failedjobs": 0,
				"statuses": 0,
				"statuses_monthly": 0,
				"profiles": 0,
				"users": 0,
				"users_monthly": 0,
				"instances": 0,
				"media": 0,
				"storage": 0,
				"posts_this_week": [],
				"posts_last_week": []
			},
			loaded: {
				stats: false,
				accounts: false,
				posts: false,
				instances: false
			},
			pagination: {
				accounts: false,
				posts: false,
				instances: false
			},
			accounts: [],
			posts: [],
			instances: [],
			accountsSelected: []
		},

		mounted() {
			this.fetchStats();
		},

		methods: {
			fetchStats() {
				axios.get('/i/admin/api/stats')
				.then(res => {
					this.stats = res.data;
					this.loaded.stats = true;
					this.fetchAccounts();
				})
			},

			fetchAccounts() {
				axios.get('/i/admin/api/accounts')
				.then(res => {
					this.accounts = res.data.data;
					this.loaded.accounts = true;
					this.pagination.accounts = res.data.next_page_url;

					this.fetchPosts();
				})
			},

			loadMoreAccounts() {
				axios.get(this.pagination.accounts)
				.then(res => {
					this.accounts.push(...res.data.data);
					this.pagination.accounts = res.data.next_page_url;
				})
			},

			fetchPosts() {
				axios.get('/i/admin/api/posts')
				.then(res => {
					this.posts = res.data.data;
					this.loaded.posts = true;
					this.pagination.posts = res.data.next_page_url;

					this.fetchInstances();
				})
			},

			loadMorePosts() {
				axios.get(this.pagination.posts)
				.then(res => {
					this.posts.push(...res.data.data);
					this.pagination.posts = res.data.next_page_url;
				})
			},

			fetchInstances() {
				axios.get('/i/admin/api/instances')
				.then(res => {
					this.instances = res.data.data;
					this.loaded.instances = true;
					this.pagination.instances = res.data.next_page_url;
				})
			},

			loadMoreInstances() {
				axios.get(this.pagination.instances)
				.then(res => {
					this.instances.push(...res.data.data);
					this.pagination.instances = res.data.next_page_url;
				})
			},

			timeAgo(ts) {
				return App.util.format.timeAgo(ts);
			},

			renderNote(val) {
				if(!val) {
					return '';
				}
				if(val.length > 60) {
					return val.slice(0, 60) + ' ...';
				}
				return val;
			},

			handleAccountSelected(event, item, idx) {
				if(event.target.checked) {
					this.accountsSelected.push(...[item]);
				} else {
					this.accountsSelected = this.accountsSelected.filter(a => {
						return a.id !== item.id;
					})
				}
			},

			async handleSelectedDeletes() {
				let wrapper = document.createElement('div');
				let title = document.createElement('div');
				let list = document.createElement('ul');
				list.classList.add('list-group')
				title.innerHTML = '<p class="font-weight-bold text-danger">Are you sure you want to delete the following accounts:</p>';
				wrapper.appendChild(title);
				this.accountsSelected.map(a => {
					let el = document.createElement('li');
					el.classList.add('list-group-item')
					el.classList.add('text-left')
					el.innerHTML = `<div class="media align-items-center">
						<img src="${a.avatar}" width="40" height="40" class="rounded-circle mr-3" onerror="this.src='/storage/avatars/default.png';this.onerror=null;" />
						<div class="media-body">
							<p class="mb-0 username font-weight-bold">${a.username}</p>
							<div class="note small text-muted">${this.renderNote(a.note_text)}</div>
						</div>
					</div>`
					list.appendChild(el)
				})
				wrapper.appendChild(list);
				swal({
					title: 'Confirm',
					content: wrapper,
					icon: 'warning',
					buttons: {
						cancel: "Cancel",
						delete: {
							text: "Delete",
							value: "delete",
							className: "swal-button--danger"
						}
					}
				})
				.then(async (val) => {
					if (val === 'delete') {
						swal({
							title: 'Deleting accounts...',
							icon: 'success',
							timer: 3000,
						});
						await axios.all(this.accountsSelected.map((acct) => this.deleteAccountById(acct)));
						this.fetchAccounts();
						setTimeout(() => {
							let checkboxes = document.querySelectorAll('input[type=checkbox]')
							checkboxes.forEach(checkbox => checkbox.checked = false)
							this.accountsSelected = [];
						}, 500);
					}
				})
				.finally(() => {
				})
			},

			async deleteAccountById(account) {
				await axios.post('/i/admin/users/delete/' + account.user_id)
			}
		}
	});
</script>
@endpush

@push('styles')
<style type="text/css">
	.list-group-scroll {
		max-height: 300px;
		overflow-y: auto;
	}

	.list-group-scroll .list-group-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.list-group-scroll .avatar {
		width: 30px;
		height: 30px;
		border-radius: 30px;
		margin-right: 1rem;
	}

	.list-group-scroll .note {
		color: #bbb;
		font-size: 10px;
		line-height: 12px;
	}
</style>
@endpush