mirror
/
pixelfed
mirror of https://github.com/pixelfed/pixelfed.git
1
0
Fork 1
Code Issues Releases Wiki Activity
pixelfed/resources/views/admin/home.blade.php

366 lines
13 KiB
PHP
Raw Normal View History

Update admin dashboard view
2019-02-05 20:52:33 +00:00
@extends('admin.partial.template-full')
Update admin dashboard
2018-05-30 02:51:57 +00:00
@section('section')
New admin dashboard layout
2021-05-25 05:24:42 +00:00
</div>
Improve admin dashboard by moving expensive stats to its page and loading stats and recent data async on the dashboard home page
2022-07-28 07:06:39 +00:00
<div class="header bg-primary pb-2 mt-n4">
New admin dashboard layout
2021-05-25 05:24:42 +00:00
<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>
Improve admin dashboard by moving expensive stats to its page and loading stats and recent data async on the dashboard home page
2022-07-28 07:06:39 +00:00
<div v-if="loaded.stats" class="row">
New admin dashboard layout
2021-05-25 05:24:42 +00:00
<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>
Improve admin dashboard by moving expensive stats to its page and loading stats and recent data async on the dashboard home page
2022-07-28 07:06:39 +00:00
<span class="h2 font-weight-bold mb-0" v-text="stats.statuses"></span>
New admin dashboard layout
2021-05-25 05:24:42 +00:00
</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>
Improve admin dashboard by moving expensive stats to its page and loading stats and recent data async on the dashboard home page
2022-07-28 07:06:39 +00:00
<span class="h2 font-weight-bold mb-0" v-text="stats.users"></span>
New admin dashboard layout
2021-05-25 05:24:42 +00:00
</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>
Improve admin dashboard by moving expensive stats to its page and loading stats and recent data async on the dashboard home page
2022-07-28 07:06:39 +00:00
<span class="h2 font-weight-bold mb-0" v-text="stats.reports"></span>
New admin dashboard layout
2021-05-25 05:24:42 +00:00
</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>
Improve admin dashboard by moving expensive stats to its page and loading stats and recent data async on the dashboard home page
2022-07-28 07:06:39 +00:00
<span class="h2 font-weight-bold mb-0" v-text="stats.contact"></span>
New admin dashboard layout
2021-05-25 05:24:42 +00:00
</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">
Update admin dashboard
2018-05-30 02:51:57 +00:00
New admin dashboard layout
2021-05-25 05:24:42 +00:00
<div class="row">
Improve admin dashboard by moving expensive stats to its page and loading stats and recent data async on the dashboard home page
2022-07-28 07:06:39 +00:00
<div class="col-md-4">
New admin dashboard layout
2021-05-25 05:24:42 +00:00
<div class="card bg-default">
<div class="card-header bg-transparent">
<div class="row align-items-center">
<div class="col">
Improve admin dashboard by moving expensive stats to its page and loading stats and recent data async on the dashboard home page
2022-07-28 07:06:39 +00:00
<h6 class="text-light text-uppercase ls-1 mb-1">New</h6>
<h5 class="h3 text-white mb-0">Accounts</h5>
New admin dashboard layout
2021-05-25 05:24:42 +00:00
</div>
</div>
</div>
Improve admin dashboard by moving expensive stats to its page and loading stats and recent data async on the dashboard home page
2022-07-28 07:06:39 +00:00
<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">
<a
v-for="(item, index) in accounts"
class="list-group-item"
:href="`/i/admin/users/show/${item.user_id}`">
<div class="d-flex align-items-center mr-1">
<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>
</div>
<div>
<div 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.accounts" class="list-group-item font-weight-bold justify-content-center" href="#" @click.prevent="loadMoreAccounts()">Load more</a>
</div>
New admin dashboard layout
2021-05-25 05:24:42 +00:00
</div>
</div>
Improve admin dashboard by moving expensive stats to its page and loading stats and recent data async on the dashboard home page
2022-07-28 07:06:39 +00:00
<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 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>
New admin dashboard layout
2021-05-25 05:24:42 +00:00
<div class="col-md-4">
Improve admin dashboard by moving expensive stats to its page and loading stats and recent data async on the dashboard home page
2022-07-28 07:06:39 +00:00
<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>
New admin dashboard layout
2021-05-25 05:24:42 +00:00
</div>
Update admin dashboard
2018-05-30 02:51:57 +00:00
@endsection
@push('scripts')
New admin dashboard layout
2021-05-25 05:24:42 +00:00
<script type="text/javascript">
Improve admin dashboard by moving expensive stats to its page and loading stats and recent data async on the dashboard home page
2022-07-28 07:06:39 +00:00
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: []
},
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 => {
res.data.data.map(a => console.log(a.id));
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.length > 60) {
return val.slice(0, 60) + ' ...';
}
return val;
}
}
});
New admin dashboard layout
2021-05-25 05:24:42 +00:00
</script>
@endpush
Improve admin dashboard by moving expensive stats to its page and loading stats and recent data async on the dashboard home page
2022-07-28 07:06:39 +00:00
@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