nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-18 16:22:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

dashboard include

Browse Source
This commit is contained in:
carodej
2020-07-05 09:14:17 +02:00
parent e1ebb70035
commit 5a5125967f
61 changed files with 1532 additions and 617 deletions
Download Patch File Download Diff File Expand all files Collapse all files

198
resources/js/views/Admin/Dashboard.vue Normal file
View File

@@ -0,0 +1,198 @@
<template>
<div id="single-page">
<div id="page-content" v-if="! isLoading">
<div class="dashboard-headline">
<div class="logo">
<a href="https://vuefilemanager.com" target="_blank">
<img src="/assets/images/vuefilemanager-horizontal-logo.svg" alt="VueFileManager">
</a>
</div>
<div class="metadata">
<a href="https://vuefilemanager.com/changelog" target="_blank" class="meta">
<span class="meta-title">Version:</span>
<ColorLabel color="purple">
{{ data.app_version }}
</ColorLabel>
</a>
<a href="https://codecanyon.net/item/vue-file-manager-with-laravel-backend/25815986" target="_blank" class="meta">
<span class="meta-title">License:</span>
<ColorLabel color="purple">
Extended
</ColorLabel>
</a>
<a href="https://vuefilemanager.com" target="_blank" class="became-backer">
<div class="icon">
<credit-card-icon size="15"></credit-card-icon>
</div>
<span class="content">
Become a Backer
</span>
</a>
</div>
</div>
<div class="widgets-total">
<WidgetTotals
class="widget"
icon="users"
title="Total Users"
:value="data.total_users"
link-route="Users"
link-name="Show All Users"
></WidgetTotals>
<WidgetTotals
class="widget"
icon="hard-drive"
title="Total Space Used"
:value="data.total_used_space"
link-route="Users"
link-name="Show All Users"
></WidgetTotals>
<WidgetTotals
class="widget"
icon="star"
title="Total Premium Users"
:value="data.total_premium_users"
link-route="Plans"
link-name="Show All Plans"
></WidgetTotals>
</div>
<div class="widget-users">
<WidgetLatestRegistrations
class="widget"
icon="users"
title="Latest Registrations"
/>
</div>
</div>
<div id="loader" v-if="isLoading">
<Spinner></Spinner>
</div>
</div>
</template>
<script>
import WidgetLatestRegistrations from '@/components/Admin/WidgetLatestRegistrations'
import DatatableWrapper from '@/components/Others/Tables/DatatableWrapper'
import MobileActionButton from '@/components/FilesView/MobileActionButton'
import EmptyPageContent from '@/components/Others/EmptyPageContent'
import SwitchInput from '@/components/Others/Forms/SwitchInput'
import MobileHeader from '@/components/Mobile/MobileHeader'
import SectionTitle from '@/components/Others/SectionTitle'
import WidgetTotals from '@/components/Admin/WidgetTotals'
import ButtonBase from '@/components/FilesView/ButtonBase'
import PageHeader from '@/components/Others/PageHeader'
import ColorLabel from '@/components/Others/ColorLabel'
import Spinner from '@/components/FilesView/Spinner'
import {CreditCardIcon} from "vue-feather-icons"
import axios from 'axios'
export default {
name: 'Dashboard',
components: {
WidgetLatestRegistrations,
MobileActionButton,
EmptyPageContent,
DatatableWrapper,
WidgetTotals,
CreditCardIcon,
SectionTitle,
MobileHeader,
SwitchInput,
PageHeader,
ButtonBase,
ColorLabel,
Spinner,
},
data() {
return {
isLoading: false,
data: undefined,
}
},
methods: {
changeStatus(val, id) {
this.$updateText('/plans/' + id + '/update', 'is_active', val)
}
},
created() {
axios.get('/api/dashboard')
.then(response => {
this.data = response.data
this.isLoading = false
})
}
}
</script>
<style lang="scss" scoped>
@import '@assets/vue-file-manager/_variables';
@import '@assets/vue-file-manager/_mixins';
.widgets-total {
display: flex;
flex: 0 0 33%;
margin: 0 -20px 20px;
.widget {
width: 100%;
padding: 20px;
}
}
.dashboard-headline {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}
.became-backer {
background: rgba($yellow, 0.1);
display: inline-block;
padding: 5px 10px;
border-radius: 6px;
margin-left: 40px;
cursor: pointer;
.icon, .content {
display: inline-block;
vertical-align: middle;
}
.icon {
margin-right: 10px;
line-height: 0;
rect, line {
stroke: $yellow;
}
}
.content {
color: $yellow;
font-weight: 700;
@include font-size(14);
}
}
.metadata {
.meta {
display: inline-block;
margin-left: 20px;
}
.meta-title {
@include font-size(14);
font-weight: 700;
}
}
@media only screen and (max-width: 690px) {
}
@media (prefers-color-scheme: dark) {
}
</style>