mirror of
https://github.com/IT4Change/gradido.git
synced 2025-12-13 07:45:54 +00:00
Merge pull request #116 from gradido/delete-unused-files
Delete unused files
This commit is contained in:
Alexander Friedland
GitHub
commit
855d1180c1
@ -1,6 +1,5 @@
|
|||||||
import DashboardLayout from '@/views/Layout/DashboardLayout.vue'
|
import DashboardLayout from '@/views/Layout/DashboardLayout_gdd.vue'
|
||||||
import AuthLayoutGDD from '@/views/Layout/AuthLayout_gdd.vue'
|
import AuthLayoutGDD from '@/views/Layout/AuthLayout_gdd.vue'
|
||||||
import AuthLayout from '@/views/Layout/AuthLayout.vue'
|
|
||||||
|
|
||||||
import NotFound from '@/views/NotFoundPage.vue'
|
import NotFound from '@/views/NotFoundPage.vue'
|
||||||
|
|
||||||
@ -31,11 +30,6 @@ const routes = [
|
|||||||
name: 'Explorer',
|
name: 'Explorer',
|
||||||
component: () => import('../views/Pages/Explorer.vue'),
|
component: () => import('../views/Pages/Explorer.vue'),
|
||||||
},
|
},
|
||||||
{
|
|
||||||
path: '/icons',
|
|
||||||
name: 'Icons',
|
|
||||||
component: () => import('../views/Icons.vue'),
|
|
||||||
},
|
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@ -68,21 +62,6 @@ const routes = [
|
|||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
|
||||||
path: '/admin',
|
|
||||||
redirect: 'admin',
|
|
||||||
component: AuthLayout,
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
path: '/AdminOverview',
|
|
||||||
name: 'Adminübersicht',
|
|
||||||
component: () => import('../views/AdminOverview.vue'),
|
|
||||||
meta: {
|
|
||||||
requiresAuth: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{ path: '*', component: NotFound },
|
{ path: '*', component: NotFound },
|
||||||
]
|
]
|
||||||
|
|
||||||
|
|||||||
@ -1,399 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<base-header class="pb-6 pb-8 pt-5 pt-md-8">
|
|
||||||
<b-row>
|
|
||||||
<b-col xl="3" md="6">
|
|
||||||
<stats-card
|
|
||||||
:title="$t('admin.site.overview.creation')"
|
|
||||||
type="gradient-red"
|
|
||||||
sub-title="350,897"
|
|
||||||
icon="ni ni-active-40"
|
|
||||||
class="mb-4"
|
|
||||||
>
|
|
||||||
<template slot="footer">
|
|
||||||
<span class="text-success mr-2">3.48%</span>
|
|
||||||
<span class="text-nowrap">
|
|
||||||
{{ $t('site.overview.since_last_month') }}
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
</stats-card>
|
|
||||||
</b-col>
|
|
||||||
<b-col xl="3" md="6">
|
|
||||||
<stats-card
|
|
||||||
:title="$t('admin.site.overview.transience')"
|
|
||||||
type="gradient-orange"
|
|
||||||
sub-title="2,356"
|
|
||||||
icon="ni ni-chart-pie-35"
|
|
||||||
class="mb-4"
|
|
||||||
>
|
|
||||||
<template slot="footer">
|
|
||||||
<span class="text-success mr-2">12.18%</span>
|
|
||||||
<span class="text-nowrap">
|
|
||||||
{{ $t('site.overview.since_last_month') }}
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
</stats-card>
|
|
||||||
</b-col>
|
|
||||||
<b-col xl="3" md="6">
|
|
||||||
<stats-card
|
|
||||||
:title="$t('admin.site.overview.exchanged')"
|
|
||||||
type="gradient-green"
|
|
||||||
sub-title="924"
|
|
||||||
icon="ni ni-money-coins"
|
|
||||||
class="mb-4"
|
|
||||||
>
|
|
||||||
<template slot="footer">
|
|
||||||
<span class="text-danger mr-2">5.72%</span>
|
|
||||||
<span class="text-nowrap">
|
|
||||||
{{ $t('site.overview.since_last_month') }}
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
</stats-card>
|
|
||||||
</b-col>
|
|
||||||
<b-col xl="3" md="6">
|
|
||||||
<stats-card
|
|
||||||
:title="$t('admin.site.overview.members')"
|
|
||||||
type="gradient-info"
|
|
||||||
sub-title="49,65%"
|
|
||||||
icon="ni ni-chart-bar-32"
|
|
||||||
class="mb-4"
|
|
||||||
>
|
|
||||||
<template slot="footer">
|
|
||||||
<span class="text-success mr-2">54.8%</span>
|
|
||||||
<span class="text-nowrap">
|
|
||||||
{{ $t('site.overview.since_last_month') }}
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
</stats-card>
|
|
||||||
</b-col>
|
|
||||||
</b-row>
|
|
||||||
</base-header>
|
|
||||||
|
|
||||||
<!--Charts-->
|
|
||||||
<b-container fluid class="mt--7">
|
|
||||||
<b-row>
|
|
||||||
<b-col xl="8" class="mb-5 mb-xl-0">
|
|
||||||
<card type="default" header-classes="bg-transparent">
|
|
||||||
<b-row align-v="center" slot="header">
|
|
||||||
<b-col>
|
|
||||||
<h6 class="text-light text-uppercase ls-1 mb-1">Charts</h6>
|
|
||||||
<h5 class="h3 mb-0">Geschöpft</h5>
|
|
||||||
</b-col>
|
|
||||||
<b-col>
|
|
||||||
<b-nav class="nav-pills justify-content-end">
|
|
||||||
<b-nav-item
|
|
||||||
class="mr-2 mr-md-0"
|
|
||||||
:active="bigLineChart.activeIndex === 0"
|
|
||||||
link-classes="py-2 px-1"
|
|
||||||
@click.prevent="initBigChart(0)"
|
|
||||||
>
|
|
||||||
<span class="d-none d-md-block">geschöpft</span>
|
|
||||||
<span class="d-md-none">M</span>
|
|
||||||
</b-nav-item>
|
|
||||||
<b-nav-item
|
|
||||||
link-classes="py-2 px-1"
|
|
||||||
:active="bigLineChart.activeIndex === 1"
|
|
||||||
@click.prevent="initBigChart(1)"
|
|
||||||
>
|
|
||||||
<span class="d-none d-md-block">geteilt</span>
|
|
||||||
<span class="d-md-none">W</span>
|
|
||||||
</b-nav-item>
|
|
||||||
<b-nav-item
|
|
||||||
link-classes="py-2 px-1"
|
|
||||||
:active="bigLineChart.activeIndex === 2"
|
|
||||||
@click.prevent="initBigChart(2)"
|
|
||||||
>
|
|
||||||
<span class="d-none d-md-block">vergangen</span>
|
|
||||||
<span class="d-md-none">W</span>
|
|
||||||
</b-nav-item>
|
|
||||||
<b-nav-item
|
|
||||||
link-classes="py-2 px-1"
|
|
||||||
:active="bigLineChart.activeIndex === 3"
|
|
||||||
@click.prevent="initBigChart(3)"
|
|
||||||
>
|
|
||||||
<span class="d-none d-md-block">mitglieder</span>
|
|
||||||
<span class="d-md-none">W</span>
|
|
||||||
</b-nav-item>
|
|
||||||
</b-nav>
|
|
||||||
</b-col>
|
|
||||||
</b-row>
|
|
||||||
<line-chart
|
|
||||||
:height="350"
|
|
||||||
ref="bigChart"
|
|
||||||
:chart-data="bigLineChart.chartData"
|
|
||||||
:extra-options="bigLineChart.extraOptions"
|
|
||||||
></line-chart>
|
|
||||||
</card>
|
|
||||||
</b-col>
|
|
||||||
|
|
||||||
<b-col xl="4" class="mb-5 mb-xl-0">
|
|
||||||
<card header-classes="bg-transparent">
|
|
||||||
<b-row align-v="center" slot="header">
|
|
||||||
<b-col>
|
|
||||||
<h6 class="text-uppercase text-muted ls-1 mb-1">Community</h6>
|
|
||||||
<h5 class="h3 mb-0">Neue Einträge</h5>
|
|
||||||
</b-col>
|
|
||||||
</b-row>
|
|
||||||
|
|
||||||
<bar-chart :height="350" ref="barChart" :chart-data="redBarChart.chartData"></bar-chart>
|
|
||||||
</card>
|
|
||||||
</b-col>
|
|
||||||
</b-row>
|
|
||||||
<!-- End charts-->
|
|
||||||
|
|
||||||
<br />
|
|
||||||
<br />
|
|
||||||
<br />
|
|
||||||
|
|
||||||
<!--Tables User Search && New User-->
|
|
||||||
<admin-user-search />
|
|
||||||
|
|
||||||
<br />
|
|
||||||
<br />
|
|
||||||
<br />
|
|
||||||
|
|
||||||
<admin-user-creation />
|
|
||||||
|
|
||||||
<br />
|
|
||||||
|
|
||||||
<b-card-header>
|
|
||||||
<hr />
|
|
||||||
<h3>Admin Participation List</h3>
|
|
||||||
<small>/public/json-example/admin_card_statistic.json</small>
|
|
||||||
<p>
|
|
||||||
{{ cardstatistic }}
|
|
||||||
</p>
|
|
||||||
</b-card-header>
|
|
||||||
<b-card-header>
|
|
||||||
<hr />
|
|
||||||
<h3>Admin Charts Statistic</h3>
|
|
||||||
<small>/public/json-example/admin_charts_statistic.json</small>
|
|
||||||
<p>
|
|
||||||
{{ chartsstatistic }}
|
|
||||||
</p>
|
|
||||||
</b-card-header>
|
|
||||||
<b-card-header>
|
|
||||||
<hr />
|
|
||||||
<h3>Admin Community Statistic</h3>
|
|
||||||
<small>/public/json-example/admin_community_statistic.json</small>
|
|
||||||
<p>
|
|
||||||
{{ communitystatistic }}
|
|
||||||
</p>
|
|
||||||
</b-card-header>
|
|
||||||
<b-card-header>
|
|
||||||
<hr />
|
|
||||||
<h3>Admin User List</h3>
|
|
||||||
<small>/public/json-example/admin_userlist.json</small>
|
|
||||||
<p>
|
|
||||||
{{ userlist }}
|
|
||||||
</p>
|
|
||||||
</b-card-header>
|
|
||||||
<b-card-header>
|
|
||||||
<hr />
|
|
||||||
<h3>Admin Transaction List</h3>
|
|
||||||
<small>/public/json-example/admin_transaction_list.json</small>
|
|
||||||
<p>
|
|
||||||
{{ transactionlist }}
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<hr />
|
|
||||||
</b-card-header>
|
|
||||||
<b-card-header>
|
|
||||||
<h3>Admin Transience List</h3>
|
|
||||||
<small>/public/json-example/admin_transience_list.json</small>
|
|
||||||
<p>
|
|
||||||
{{ transiencelist }}
|
|
||||||
</p>
|
|
||||||
</b-card-header>
|
|
||||||
<!--End tables-->
|
|
||||||
</b-container>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
// Charts
|
|
||||||
import * as chartConfigs from '@/components/Charts/config'
|
|
||||||
import LineChart from '@/components/Charts/LineChart'
|
|
||||||
import BarChart from '@/components/Charts/BarChart'
|
|
||||||
|
|
||||||
// Components
|
|
||||||
import BaseProgress from '@/components/BaseProgress'
|
|
||||||
import StatsCard from '@/components/Cards/StatsCard'
|
|
||||||
import SearchUser from '@/components/SearchUser'
|
|
||||||
|
|
||||||
// Tables
|
|
||||||
|
|
||||||
import PageVisitsTable from './Dashboard/PageVisitsTable'
|
|
||||||
import AdminUserSearch from './AdminOverview/AdminUserSearch'
|
|
||||||
import AdminUserCreation from './AdminOverview/AdminUserCreation'
|
|
||||||
import axios from 'axios'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
LineChart,
|
|
||||||
BarChart,
|
|
||||||
//BaseProgress,
|
|
||||||
StatsCard,
|
|
||||||
//PageVisitsTable,
|
|
||||||
AdminUserSearch,
|
|
||||||
AdminUserCreation,
|
|
||||||
//SearchUser
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
statisticdata: [],
|
|
||||||
cardstatistic: [],
|
|
||||||
chartsstatistic: [],
|
|
||||||
communitystatistic: [],
|
|
||||||
userlist: [],
|
|
||||||
transactionlist: [],
|
|
||||||
transiencelist: [],
|
|
||||||
filter: '',
|
|
||||||
items: [
|
|
||||||
{ id: 1, first_name: 'Mikkel', last_name: 'Hansen', age: 54 },
|
|
||||||
{ id: 2, first_name: 'Kasper', last_name: 'Hvidt', age: 42 },
|
|
||||||
{ id: 3, first_name: 'Lasse', last_name: 'Boesen', age: 39 },
|
|
||||||
{ id: 4, first_name: 'Kasper', last_name: 'Hansen', age: 62 },
|
|
||||||
{ id: 5, first_name: 'Mads', last_name: 'Mikkelsen', age: 31 },
|
|
||||||
],
|
|
||||||
bigLineChart: {
|
|
||||||
allData: [
|
|
||||||
[0, 20, 10, 30, 15, 40, 20, 60, 60],
|
|
||||||
[0, 20, 5, 25, 10, 30, 35, 60, 40],
|
|
||||||
[0, 2, 5, 7, 10, 30, 15, 9, 10],
|
|
||||||
[0, 2, 5, 7, 10, 14, 29, 78, 120],
|
|
||||||
],
|
|
||||||
activeIndex: 0,
|
|
||||||
chartData: {
|
|
||||||
datasets: [
|
|
||||||
{
|
|
||||||
label: 'Performance',
|
|
||||||
data: [0, 20, 10, 30, 15, 40, 20, 60, 60],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
labels: ['May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
|
||||||
},
|
|
||||||
extraOptions: chartConfigs.blueChartOptions,
|
|
||||||
},
|
|
||||||
redBarChart: {
|
|
||||||
chartData: {
|
|
||||||
labels: ['Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
|
||||||
datasets: [
|
|
||||||
{
|
|
||||||
label: 'Sales',
|
|
||||||
data: [25, 20, 30, 22, 17, 29],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
extraOptions: chartConfigs.blueChartOptions,
|
|
||||||
},
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
TransienceList() {
|
|
||||||
axios.get('/json-example/admin_transience_list.json').then(
|
|
||||||
(d) => {
|
|
||||||
//console.log(d);
|
|
||||||
this.transiencelist = d.data
|
|
||||||
},
|
|
||||||
(error) => {
|
|
||||||
//console.log(error)
|
|
||||||
},
|
|
||||||
)
|
|
||||||
},
|
|
||||||
TransactionList() {
|
|
||||||
axios.get('/json-example/admin_transaction_list.json').then(
|
|
||||||
(d) => {
|
|
||||||
//console.log(d);
|
|
||||||
this.transactionlist = d.data
|
|
||||||
},
|
|
||||||
(error) => {
|
|
||||||
//console.log(error)
|
|
||||||
},
|
|
||||||
)
|
|
||||||
},
|
|
||||||
UserList() {
|
|
||||||
axios.get('/json-example/admin_userlist.json').then(
|
|
||||||
(d) => {
|
|
||||||
//console.log(d);
|
|
||||||
this.userlist = d.data
|
|
||||||
},
|
|
||||||
(error) => {
|
|
||||||
//console.log(error)
|
|
||||||
},
|
|
||||||
)
|
|
||||||
},
|
|
||||||
CommunityStatistic() {
|
|
||||||
axios.get('/json-example/admin_community_statistic.json').then(
|
|
||||||
(d) => {
|
|
||||||
//console.log(d);
|
|
||||||
this.communitystatistic = d.data
|
|
||||||
},
|
|
||||||
(error) => {
|
|
||||||
//console.log(error)
|
|
||||||
},
|
|
||||||
)
|
|
||||||
},
|
|
||||||
ChartsStatistic() {
|
|
||||||
axios.get('/json-example/admin_charts_statistic.json').then(
|
|
||||||
(d) => {
|
|
||||||
//console.log(d);
|
|
||||||
this.chartsstatistic = d.data
|
|
||||||
},
|
|
||||||
(error) => {
|
|
||||||
//console.log(error)
|
|
||||||
},
|
|
||||||
)
|
|
||||||
},
|
|
||||||
CardStatistic() {
|
|
||||||
axios.get('/json-example/admin_card_statistic.json').then(
|
|
||||||
(d) => {
|
|
||||||
//console.log(d);
|
|
||||||
this.cardstatistic = d.data
|
|
||||||
},
|
|
||||||
(error) => {
|
|
||||||
//console.log(error)
|
|
||||||
},
|
|
||||||
)
|
|
||||||
},
|
|
||||||
StatisticDatas() {
|
|
||||||
axios.get('/json-example/admin_statisticdatas.json').then(
|
|
||||||
(d) => {
|
|
||||||
//console.log(d);
|
|
||||||
this.userdata = d.data
|
|
||||||
},
|
|
||||||
(error) => {
|
|
||||||
//console.log(error)
|
|
||||||
},
|
|
||||||
)
|
|
||||||
},
|
|
||||||
initBigChart(index) {
|
|
||||||
let chartData = {
|
|
||||||
datasets: [
|
|
||||||
{
|
|
||||||
label: 'Performance',
|
|
||||||
data: this.bigLineChart.allData[index],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
labels: ['May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
|
||||||
}
|
|
||||||
this.bigLineChart.chartData = chartData
|
|
||||||
this.bigLineChart.activeIndex = index
|
|
||||||
},
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.initBigChart(0)
|
|
||||||
this.TransienceList()
|
|
||||||
this.TransactionList()
|
|
||||||
this.UserList()
|
|
||||||
this.CommunityStatistic()
|
|
||||||
this.ChartsStatistic()
|
|
||||||
this.CardStatistic()
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
.el-table .cell {
|
|
||||||
padding-left: 0px;
|
|
||||||
padding-right: 0px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,347 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<b-card-header>Gradido Schüpfung</b-card-header>
|
|
||||||
<!--Tables-->
|
|
||||||
<b-row class="mt-5">
|
|
||||||
<b-col xl="8" class="mb-5 mb-xl-0">
|
|
||||||
<vue-good-table
|
|
||||||
:columns="columns"
|
|
||||||
:rows="rows"
|
|
||||||
max-height="370px"
|
|
||||||
:fixed-header="true"
|
|
||||||
:line-numbers="false"
|
|
||||||
styleClass="vgt-table"
|
|
||||||
theme="nocturnal"
|
|
||||||
@on-row-click="onRowClick"
|
|
||||||
@on-search="onSearch"
|
|
||||||
:search-options="{
|
|
||||||
enabled: true,
|
|
||||||
|
|
||||||
skipDiacritics: true,
|
|
||||||
searchFn: mySearchFn,
|
|
||||||
placeholder: 'durchsuche die tabelle',
|
|
||||||
}"
|
|
||||||
:pagination-options="{
|
|
||||||
enabled: true,
|
|
||||||
mode: 'pages',
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
<div slot="table-actions">Einträge suchen .</div>
|
|
||||||
</vue-good-table>
|
|
||||||
</b-col>
|
|
||||||
<b-col xl="4" class="mb-5 mb-xl-0">
|
|
||||||
<b-card body-class="p-0" header-class="border-0">
|
|
||||||
<template v-slot:header>
|
|
||||||
<b-row align-v="center">
|
|
||||||
<b-col>
|
|
||||||
<h3 class="mb-0"></h3>
|
|
||||||
</b-col>
|
|
||||||
<b-col class="text-right">
|
|
||||||
<a href="#!" class="btn btn-sm btn-primary">speichern</a>
|
|
||||||
</b-col>
|
|
||||||
</b-row>
|
|
||||||
</template>
|
|
||||||
<b-card-body>
|
|
||||||
<p>{{ creation.createdAt }}</p>
|
|
||||||
<p>{{ creation.group }}</p>
|
|
||||||
<p>{{ creation.id }}</p>
|
|
||||||
<p>{{ creation.name }}</p>
|
|
||||||
<p>{{ creation.originalIndex }}</p>
|
|
||||||
<p>{{ creation.text }}</p>
|
|
||||||
<p>{{ creation.vgt_id }}</p>
|
|
||||||
</b-card-body>
|
|
||||||
</b-card>
|
|
||||||
</b-col>
|
|
||||||
</b-row>
|
|
||||||
<!--End tables-->
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'admin-user-creation',
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
creation: {
|
|
||||||
createdAt: '',
|
|
||||||
group: '',
|
|
||||||
id: '',
|
|
||||||
name: '',
|
|
||||||
originalIndex: '',
|
|
||||||
text: '',
|
|
||||||
vgt_id: '',
|
|
||||||
},
|
|
||||||
columns: [
|
|
||||||
{
|
|
||||||
label: 'Name',
|
|
||||||
field: 'name',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Gruppe',
|
|
||||||
field: 'group',
|
|
||||||
type: 'group',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'eingereicht',
|
|
||||||
field: 'createdAt',
|
|
||||||
type: 'date',
|
|
||||||
dateInputFormat: 'yyyy-MM-dd',
|
|
||||||
dateOutputFormat: 'dd.MM.yyyy',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Text',
|
|
||||||
field: 'text',
|
|
||||||
type: 'text',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
rows: [
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
createdAt: '2021-01-25',
|
|
||||||
name: 'Sellora',
|
|
||||||
group: 'gruppe1',
|
|
||||||
text: 'aASDASdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 2,
|
|
||||||
createdAt: '2021-01-31',
|
|
||||||
name: 'Jane',
|
|
||||||
group: 'gruppe14',
|
|
||||||
text: 'WQadCXhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 3,
|
|
||||||
createdAt: '2021-01-30',
|
|
||||||
name: 'Susan',
|
|
||||||
group: 'gruppe31',
|
|
||||||
text: 'IaYXCYdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 4,
|
|
||||||
createdAt: '2020-01-11',
|
|
||||||
name: 'Chris',
|
|
||||||
group: 'gruppe12',
|
|
||||||
text: 'TZadhhCYXCda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 5,
|
|
||||||
createdAt: '2020-12-21',
|
|
||||||
name: 'Dan',
|
|
||||||
group: 'gruppe11',
|
|
||||||
text: 'Wad3323hhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 6,
|
|
||||||
createdAt: '2020-12-31',
|
|
||||||
name: 'zBohn',
|
|
||||||
group: 'gruppe71',
|
|
||||||
text: 'Tadh hD da hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 7,
|
|
||||||
createdAt: '2020-12-31',
|
|
||||||
name: 'xyTellohn',
|
|
||||||
group: 'gruppe31',
|
|
||||||
text: 'Fad AD31 hhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 8,
|
|
||||||
createdAt: '2021-01-25',
|
|
||||||
name: 'uSellora',
|
|
||||||
group: 'gruppe1',
|
|
||||||
text: 'aASDASdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 9,
|
|
||||||
createdAt: '2021-01-31',
|
|
||||||
name: 'yJane',
|
|
||||||
group: 'gruppe14',
|
|
||||||
text: '55 55 55 WQadCXhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 10,
|
|
||||||
createdAt: '2021-01-20',
|
|
||||||
name: 'kSusan',
|
|
||||||
group: 'gruppe31',
|
|
||||||
text: 'IaYXCYdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 11,
|
|
||||||
createdAt: '2021-01-25',
|
|
||||||
name: 'qSellora',
|
|
||||||
group: 'gruppe12',
|
|
||||||
text: 'aASDASdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 12,
|
|
||||||
createdAt: '2021-01-31',
|
|
||||||
name: 'fJane',
|
|
||||||
group: 'gruppe15',
|
|
||||||
text: 'WQadCXhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 13,
|
|
||||||
createdAt: '2021-01-38',
|
|
||||||
name: 'aSusan',
|
|
||||||
group: 'gruppe1',
|
|
||||||
text: 'asssss IaYXCYdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 14,
|
|
||||||
createdAt: '2020-01-11',
|
|
||||||
name: 'uChris',
|
|
||||||
group: 'gruppe12',
|
|
||||||
text: 'TZadhhCYXCda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 15,
|
|
||||||
createdAt: '2020-12-21',
|
|
||||||
name: 'tzDan',
|
|
||||||
group: 'gruppe11',
|
|
||||||
text: 'Wad33 23hhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 16,
|
|
||||||
createdAt: '2020-12-31',
|
|
||||||
name: 'fBohn',
|
|
||||||
group: 'gruppe71',
|
|
||||||
text: '3f Tadh hD da hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 17,
|
|
||||||
createdAt: '2020-12-31',
|
|
||||||
name: 'aEsau',
|
|
||||||
group: 'gruppe15',
|
|
||||||
text: '2324 adhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 18,
|
|
||||||
createdAt: '2021-01-25',
|
|
||||||
name: 'gSellora',
|
|
||||||
group: 'gruppe1',
|
|
||||||
text: '5h aASDASdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 19,
|
|
||||||
createdAt: '2021-01-31',
|
|
||||||
name: 'sJane',
|
|
||||||
group: 'gruppe14',
|
|
||||||
text: 'as sdsd WQadCXhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 20,
|
|
||||||
createdAt: '2021-01-30',
|
|
||||||
name: 'oSusan',
|
|
||||||
group: 'gruppe31',
|
|
||||||
text: 'sd IaYXCYdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 21,
|
|
||||||
createdAt: '2021-01-25',
|
|
||||||
name: 'Sellora',
|
|
||||||
group: 'gruppe1',
|
|
||||||
text: '3 aASDASdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 22,
|
|
||||||
createdAt: '2021-01-13',
|
|
||||||
name: 'rtJane',
|
|
||||||
group: 'gruppe14',
|
|
||||||
text: 'q WQadCXhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 23,
|
|
||||||
createdAt: '2021-01-16',
|
|
||||||
name: 'rSusan',
|
|
||||||
group: 'gruppe31',
|
|
||||||
text: 'Iare YXCYdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 24,
|
|
||||||
createdAt: '2020-01-15',
|
|
||||||
name: 'sChris',
|
|
||||||
group: 'gruppe12',
|
|
||||||
text: '43 TZad hhCYXCda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 25,
|
|
||||||
createdAt: '2020-12-14',
|
|
||||||
name: 'dDan',
|
|
||||||
group: 'gruppe11',
|
|
||||||
text: 'aas aWad3323hhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 26,
|
|
||||||
createdAt: '2020-12-13',
|
|
||||||
name: 'fBohn',
|
|
||||||
group: 'gruppe71',
|
|
||||||
text: 'Ta adh hD da hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 27,
|
|
||||||
createdAt: '2020-12-12',
|
|
||||||
name: 'gTellohn',
|
|
||||||
group: 'gruppe31',
|
|
||||||
text: '55 Fad AD31 hhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 28,
|
|
||||||
createdAt: '2021-01-12',
|
|
||||||
name: 'zSellora',
|
|
||||||
group: 'gruppe1',
|
|
||||||
text: 'e q raASDASdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 29,
|
|
||||||
createdAt: '2021-01-12',
|
|
||||||
name: 'uJane',
|
|
||||||
group: 'gruppe14',
|
|
||||||
text: 'erW QadCXhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 30,
|
|
||||||
createdAt: '2021-01-11',
|
|
||||||
name: 'iSusan',
|
|
||||||
group: 'gruppe31',
|
|
||||||
text: '3IaYXCYdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
onRowClick(params) {
|
|
||||||
/*
|
|
||||||
console.log('onRowClick', params.row.createdAt)
|
|
||||||
console.log('onRowClick', params.row.group)
|
|
||||||
console.log('onRowClick', params.row.id)
|
|
||||||
console.log('onRowClick', params.row.name)
|
|
||||||
console.log('onRowClick', params.row.originalIndex)
|
|
||||||
console.log('onRowClick', params.row.text)
|
|
||||||
console.log('onRowClick', params.row.vgt_id)
|
|
||||||
*/
|
|
||||||
|
|
||||||
this.creation.createdAt = params.row.createdAt
|
|
||||||
this.creation.group = params.row.group
|
|
||||||
this.creation.id = params.row.id
|
|
||||||
this.creation.name = params.row.name
|
|
||||||
this.creation.originalIndex = params.row.originalIndex
|
|
||||||
this.creation.text = params.row.text
|
|
||||||
this.creation.vgt_id = params.row.vgt_id
|
|
||||||
|
|
||||||
// params.row - row object
|
|
||||||
// params.pageIndex - index of this row on the current page.
|
|
||||||
// params.selected - if selection is enabled this argument
|
|
||||||
// indicates selected or not
|
|
||||||
// params.event - click event
|
|
||||||
},
|
|
||||||
onSearch(params) {
|
|
||||||
//console.log('onSearch', params)
|
|
||||||
// params.searchTerm - term being searched for
|
|
||||||
// params.rowCount - number of rows that match search
|
|
||||||
},
|
|
||||||
mySearchFn(params) {
|
|
||||||
//console.log("mySearchFn", params)
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@ -1,261 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<b-card-header>User</b-card-header>
|
|
||||||
<!--Tables-->
|
|
||||||
<b-row class="mt-5">
|
|
||||||
<b-col xl="8" class="mb-5 mb-xl-0">
|
|
||||||
<vue-good-table
|
|
||||||
:columns="columns"
|
|
||||||
:rows="rows"
|
|
||||||
max-height="470px"
|
|
||||||
:fixed-header="true"
|
|
||||||
:line-numbers="false"
|
|
||||||
styleClass="vgt-table striped condensed"
|
|
||||||
theme="nocturnal"
|
|
||||||
@on-row-click="onRowClick"
|
|
||||||
@on-search="onSearch"
|
|
||||||
:search-options="{
|
|
||||||
enabled: true,
|
|
||||||
skipDiacritics: true,
|
|
||||||
searchFn: mySearchFn,
|
|
||||||
placeholder: 'durchsuche die tabelle',
|
|
||||||
}"
|
|
||||||
:pagination-options="{
|
|
||||||
enabled: true,
|
|
||||||
mode: 'pages',
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
<div slot="table-actions">Mitglieder suchen .</div>
|
|
||||||
</vue-good-table>
|
|
||||||
</b-col>
|
|
||||||
<b-col xl="4" class="mb-5 mb-xl-0">
|
|
||||||
<!-- card neues mitglied -->
|
|
||||||
<b-card v-if="showNewUser" body-class="p-0" header-class="border-0">
|
|
||||||
<template v-slot:header>
|
|
||||||
<b-row align-v="center">
|
|
||||||
<b-col>
|
|
||||||
<h3 class="mb-0">Neues Mitglied anlegen</h3>
|
|
||||||
</b-col>
|
|
||||||
<b-col class="text-right">
|
|
||||||
<a href="#!" class="btn btn-sm btn-primary">speichern</a>
|
|
||||||
</b-col>
|
|
||||||
</b-row>
|
|
||||||
</template>
|
|
||||||
<b-card-body>
|
|
||||||
<form>
|
|
||||||
<b-row class="">
|
|
||||||
<label class="col-md-3 col-form-label form-control-label">Name</label>
|
|
||||||
<b-col md="10">
|
|
||||||
<base-input placeholder="Jon Snow"></base-input>
|
|
||||||
</b-col>
|
|
||||||
</b-row>
|
|
||||||
<b-row class="">
|
|
||||||
<label for="example-email-input" class="col-md-3 col-form-label form-control-label">
|
|
||||||
Email
|
|
||||||
</label>
|
|
||||||
<b-col md="10">
|
|
||||||
<base-input
|
|
||||||
type="email"
|
|
||||||
placeholder="gradido@example.com"
|
|
||||||
id="example-email-input0"
|
|
||||||
/>
|
|
||||||
</b-col>
|
|
||||||
</b-row>
|
|
||||||
<b-row class="">
|
|
||||||
<label class="col-md-3 col-form-label form-control-label">Gruppe</label>
|
|
||||||
<b-col md="10">
|
|
||||||
<base-input placeholder="Gruppe"></base-input>
|
|
||||||
</b-col>
|
|
||||||
</b-row>
|
|
||||||
</form>
|
|
||||||
</b-card-body>
|
|
||||||
</b-card>
|
|
||||||
|
|
||||||
<!-- card mitglied bearbeiten -->
|
|
||||||
<b-card v-else body-class="p-0" header-class="border-0">
|
|
||||||
<template v-slot:header>
|
|
||||||
<b-row align-v="center">
|
|
||||||
<b-col>
|
|
||||||
<h3 class="mb-0">Mitglied Daten</h3>
|
|
||||||
</b-col>
|
|
||||||
<b-col class="text-right">
|
|
||||||
<a href="#!" @click="showNewUser = true" class="btn btn-sm btn-warning">
|
|
||||||
schliesen
|
|
||||||
</a>
|
|
||||||
</b-col>
|
|
||||||
</b-row>
|
|
||||||
</template>
|
|
||||||
<b-card-body>
|
|
||||||
<img
|
|
||||||
style="width: 147px"
|
|
||||||
src="https://demos.creative-tim.com/argon-dashboard-pro/assets/img/theme/team-4.jpg"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<form>
|
|
||||||
<b-row class="">
|
|
||||||
<label class="col-md-3 col-form-label form-control-label">Name</label>
|
|
||||||
<b-col md="10">
|
|
||||||
<base-input placeholder="name"></base-input>
|
|
||||||
</b-col>
|
|
||||||
</b-row>
|
|
||||||
<b-row class="">
|
|
||||||
<label for="example-email-input" class="col-md-3 col-form-label form-control-label">
|
|
||||||
Email
|
|
||||||
</label>
|
|
||||||
<b-col md="10">
|
|
||||||
<base-input
|
|
||||||
type="email"
|
|
||||||
autocomplete="username email"
|
|
||||||
placeholder="agradido@example.com"
|
|
||||||
id="example-email-input1"
|
|
||||||
/>
|
|
||||||
</b-col>
|
|
||||||
</b-row>
|
|
||||||
<b-row class="">
|
|
||||||
<label class="col-md-3 col-form-label form-control-label">Gruppe</label>
|
|
||||||
<b-col md="10">
|
|
||||||
<base-input placeholder="Gruppe"></base-input>
|
|
||||||
</b-col>
|
|
||||||
</b-row>
|
|
||||||
</form>
|
|
||||||
</b-card-body>
|
|
||||||
</b-card>
|
|
||||||
</b-col>
|
|
||||||
</b-row>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'admin-user-search',
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
showNewUser: true,
|
|
||||||
formSetUser: {
|
|
||||||
name: '',
|
|
||||||
email: '',
|
|
||||||
group: '',
|
|
||||||
},
|
|
||||||
formGetUser: {
|
|
||||||
name: '',
|
|
||||||
email: '',
|
|
||||||
group: '',
|
|
||||||
},
|
|
||||||
columns: [
|
|
||||||
{
|
|
||||||
label: 'Name',
|
|
||||||
field: 'name',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'E-Mail',
|
|
||||||
field: 'email',
|
|
||||||
type: 'email',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Mitglied seid',
|
|
||||||
field: 'createdAt',
|
|
||||||
type: 'date',
|
|
||||||
dateInputFormat: 'yyyy-MM-dd',
|
|
||||||
dateOutputFormat: 'dd.MM.yyyy',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Gruppe',
|
|
||||||
field: 'group',
|
|
||||||
type: 'group',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
rows: [
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
name: 'John',
|
|
||||||
email: 'temail@tutanota.com',
|
|
||||||
createdAt: '1976-10-25',
|
|
||||||
group: 'gruppe1',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 2,
|
|
||||||
name: 'Jane',
|
|
||||||
email: 'temail@tutanota.com',
|
|
||||||
createdAt: '2011-10-31',
|
|
||||||
group: 'gruppe2',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 3,
|
|
||||||
name: 'Susan',
|
|
||||||
email: 'temail@tutanota.com',
|
|
||||||
createdAt: '2011-10-30',
|
|
||||||
group: 'gruppe4',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 4,
|
|
||||||
name: 'Chris',
|
|
||||||
email: 'temail@tutanota.com',
|
|
||||||
createdAt: '2011-10-11',
|
|
||||||
group: 'gruppe3',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 5,
|
|
||||||
name: 'Dan',
|
|
||||||
email: 'temail@tutanota.com',
|
|
||||||
createdAt: '2011-10-21',
|
|
||||||
group: 'gruppe1',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 6,
|
|
||||||
name: 'Bohn',
|
|
||||||
email: 'temail@tutanota.com',
|
|
||||||
createdAt: '2011-10-31',
|
|
||||||
group: 'gruppe2',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 7,
|
|
||||||
name: 'Tellohn',
|
|
||||||
email: 'temail@tutanota.com',
|
|
||||||
createdAt: '2009-10-31',
|
|
||||||
group: 'gruppe2',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 7,
|
|
||||||
name: 'Tellohn',
|
|
||||||
email: 'temail@tutanota.com',
|
|
||||||
createdAt: '2009-10-31',
|
|
||||||
group: 'gruppe5',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
onRowClick(params) {
|
|
||||||
//console.log(params.row)
|
|
||||||
this.showNewUser = false
|
|
||||||
// params.row - row object
|
|
||||||
// params.pageIndex - index of this row on the current page.
|
|
||||||
// params.selected - if selection is enabled this argument
|
|
||||||
// indicates selected or not
|
|
||||||
// params.event - click event
|
|
||||||
},
|
|
||||||
onSearch(params) {
|
|
||||||
//console.log(params)
|
|
||||||
// params.searchTerm - term being searched for
|
|
||||||
// params.rowCount - number of rows that match search
|
|
||||||
},
|
|
||||||
mySearchFn(params) {
|
|
||||||
//console.log(params)
|
|
||||||
},
|
|
||||||
validateEmail(value) {
|
|
||||||
if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(value)) {
|
|
||||||
this.msg['email'] = ''
|
|
||||||
} else {
|
|
||||||
this.msg['email'] = 'Invalid Email Address'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
mail(value) {
|
|
||||||
// binding this to the data value in the email input
|
|
||||||
this.email = value
|
|
||||||
this.validateEmail(value)
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@ -1,14 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>default</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'default',
|
|
||||||
data() {
|
|
||||||
return {}
|
|
||||||
},
|
|
||||||
methods: {},
|
|
||||||
watch: {},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@ -1,215 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<base-header class="pb-6 pb-8 pt-5 pt-md-8">
|
|
||||||
<!-- Card stats -->
|
|
||||||
<b-row>
|
|
||||||
<b-col xl="3" md="6">
|
|
||||||
<stats-card
|
|
||||||
title="Total traffic"
|
|
||||||
type="gradient-red"
|
|
||||||
sub-title="350,897"
|
|
||||||
icon="ni ni-active-40"
|
|
||||||
class="mb-4"
|
|
||||||
>
|
|
||||||
<template slot="footer">
|
|
||||||
<span class="text-success mr-2">3.48%</span>
|
|
||||||
<span class="text-nowrap">Since last month</span>
|
|
||||||
</template>
|
|
||||||
</stats-card>
|
|
||||||
</b-col>
|
|
||||||
<b-col xl="3" md="6">
|
|
||||||
<stats-card
|
|
||||||
title="Total traffic"
|
|
||||||
type="gradient-orange"
|
|
||||||
sub-title="2,356"
|
|
||||||
icon="ni ni-chart-pie-35"
|
|
||||||
class="mb-4"
|
|
||||||
>
|
|
||||||
<template slot="footer">
|
|
||||||
<span class="text-success mr-2">12.18%</span>
|
|
||||||
<span class="text-nowrap">Since last month</span>
|
|
||||||
</template>
|
|
||||||
</stats-card>
|
|
||||||
</b-col>
|
|
||||||
<b-col xl="3" md="6">
|
|
||||||
<stats-card
|
|
||||||
title="Sales"
|
|
||||||
type="gradient-green"
|
|
||||||
sub-title="924"
|
|
||||||
icon="ni ni-money-coins"
|
|
||||||
class="mb-4"
|
|
||||||
>
|
|
||||||
<template slot="footer">
|
|
||||||
<span class="text-danger mr-2">5.72%</span>
|
|
||||||
<span class="text-nowrap">Since last month</span>
|
|
||||||
</template>
|
|
||||||
</stats-card>
|
|
||||||
</b-col>
|
|
||||||
<b-col xl="3" md="6">
|
|
||||||
<stats-card
|
|
||||||
title="Performance"
|
|
||||||
type="gradient-info"
|
|
||||||
sub-title="49,65%"
|
|
||||||
icon="ni ni-chart-bar-32"
|
|
||||||
class="mb-4"
|
|
||||||
>
|
|
||||||
<template slot="footer">
|
|
||||||
<span class="text-success mr-2">54.8%</span>
|
|
||||||
<span class="text-nowrap">Since last month</span>
|
|
||||||
</template>
|
|
||||||
</stats-card>
|
|
||||||
</b-col>
|
|
||||||
</b-row>
|
|
||||||
</base-header>
|
|
||||||
|
|
||||||
<!--Charts-->
|
|
||||||
<b-container fluid class="mt--7">
|
|
||||||
<b-row>
|
|
||||||
<b-col xl="8" class="mb-5 mb-xl-0">
|
|
||||||
<card type="default" header-classes="bg-transparent">
|
|
||||||
<b-row align-v="center" slot="header">
|
|
||||||
<b-col>
|
|
||||||
<h6 class="text-light text-uppercase ls-1 mb-1">Overview</h6>
|
|
||||||
<h5 class="h3 mb-0">Sales value</h5>
|
|
||||||
</b-col>
|
|
||||||
<b-col>
|
|
||||||
<b-nav class="nav-pills justify-content-end">
|
|
||||||
<b-nav-item
|
|
||||||
class="mr-2 mr-md-0"
|
|
||||||
:active="bigLineChart.activeIndex === 0"
|
|
||||||
link-classes="py-2 px-3"
|
|
||||||
@click.prevent="initBigChart(0)"
|
|
||||||
>
|
|
||||||
<span class="d-none d-md-block">Month</span>
|
|
||||||
<span class="d-md-none">M</span>
|
|
||||||
</b-nav-item>
|
|
||||||
<b-nav-item
|
|
||||||
link-classes="py-2 px-3"
|
|
||||||
:active="bigLineChart.activeIndex === 1"
|
|
||||||
@click.prevent="initBigChart(1)"
|
|
||||||
>
|
|
||||||
<span class="d-none d-md-block">Week</span>
|
|
||||||
<span class="d-md-none">W</span>
|
|
||||||
</b-nav-item>
|
|
||||||
</b-nav>
|
|
||||||
</b-col>
|
|
||||||
</b-row>
|
|
||||||
<line-chart
|
|
||||||
:height="350"
|
|
||||||
ref="bigChart"
|
|
||||||
:chart-data="bigLineChart.chartData"
|
|
||||||
:extra-options="bigLineChart.extraOptions"
|
|
||||||
></line-chart>
|
|
||||||
</card>
|
|
||||||
</b-col>
|
|
||||||
|
|
||||||
<b-col xl="4" class="mb-5 mb-xl-0">
|
|
||||||
<card header-classes="bg-transparent">
|
|
||||||
<b-row align-v="center" slot="header">
|
|
||||||
<b-col>
|
|
||||||
<h6 class="text-uppercase text-muted ls-1 mb-1">Performance</h6>
|
|
||||||
<h5 class="h3 mb-0">Total orders</h5>
|
|
||||||
</b-col>
|
|
||||||
</b-row>
|
|
||||||
|
|
||||||
<bar-chart :height="350" ref="barChart" :chart-data="redBarChart.chartData"></bar-chart>
|
|
||||||
</card>
|
|
||||||
</b-col>
|
|
||||||
</b-row>
|
|
||||||
<!-- End charts-->
|
|
||||||
|
|
||||||
<!--Tables-->
|
|
||||||
<b-row class="mt-5">
|
|
||||||
<b-col xl="8" class="mb-5 mb-xl-0">
|
|
||||||
<page-visits-table></page-visits-table>
|
|
||||||
</b-col>
|
|
||||||
<b-col xl="4" class="mb-5 mb-xl-0">
|
|
||||||
<social-traffic-table></social-traffic-table>
|
|
||||||
</b-col>
|
|
||||||
</b-row>
|
|
||||||
<!--End tables-->
|
|
||||||
</b-container>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
// Charts
|
|
||||||
import * as chartConfigs from '@/components/Charts/config'
|
|
||||||
import LineChart from '@/components/Charts/LineChart'
|
|
||||||
import BarChart from '@/components/Charts/BarChart'
|
|
||||||
|
|
||||||
// Components
|
|
||||||
import BaseProgress from '@/components/BaseProgress'
|
|
||||||
import StatsCard from '@/components/Cards/StatsCard'
|
|
||||||
|
|
||||||
// Tables
|
|
||||||
import SocialTrafficTable from './Dashboard/SocialTrafficTable'
|
|
||||||
import PageVisitsTable from './Dashboard/PageVisitsTable'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
LineChart,
|
|
||||||
BarChart,
|
|
||||||
//BaseProgress,
|
|
||||||
StatsCard,
|
|
||||||
PageVisitsTable,
|
|
||||||
SocialTrafficTable,
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
bigLineChart: {
|
|
||||||
allData: [
|
|
||||||
[0, 20, 10, 30, 15, 40, 20, 60, 60],
|
|
||||||
[0, 20, 5, 25, 10, 30, 15, 40, 40],
|
|
||||||
],
|
|
||||||
activeIndex: 0,
|
|
||||||
chartData: {
|
|
||||||
datasets: [
|
|
||||||
{
|
|
||||||
label: 'Performance',
|
|
||||||
data: [0, 20, 10, 30, 15, 40, 20, 60, 60],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
labels: ['May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
|
||||||
},
|
|
||||||
extraOptions: chartConfigs.blueChartOptions,
|
|
||||||
},
|
|
||||||
redBarChart: {
|
|
||||||
chartData: {
|
|
||||||
labels: ['Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
|
||||||
datasets: [
|
|
||||||
{
|
|
||||||
label: 'Sales',
|
|
||||||
data: [25, 20, 30, 22, 17, 29],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
extraOptions: chartConfigs.blueChartOptions,
|
|
||||||
},
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
initBigChart(index) {
|
|
||||||
let chartData = {
|
|
||||||
datasets: [
|
|
||||||
{
|
|
||||||
label: 'Performance',
|
|
||||||
data: this.bigLineChart.allData[index],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
labels: ['May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
|
||||||
}
|
|
||||||
this.bigLineChart.chartData = chartData
|
|
||||||
this.bigLineChart.activeIndex = index
|
|
||||||
},
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.initBigChart(0)
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
.el-table .cell {
|
|
||||||
padding-left: 0px;
|
|
||||||
padding-right: 0px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,150 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<!--Tables-->
|
|
||||||
<b-row class="mt-5">
|
|
||||||
<b-col xl="8" class="mb-5 mb-xl-0">
|
|
||||||
<vue-good-table
|
|
||||||
:columns="columns"
|
|
||||||
:rows="rows"
|
|
||||||
max-height="370px"
|
|
||||||
:fixed-header="true"
|
|
||||||
:line-numbers="true"
|
|
||||||
@on-row-click="onRowClick"
|
|
||||||
@on-search="onSearch"
|
|
||||||
:search-options="{
|
|
||||||
enabled: true,
|
|
||||||
|
|
||||||
skipDiacritics: true,
|
|
||||||
searchFn: mySearchFn,
|
|
||||||
placeholder: 'durchsuche die tabelle',
|
|
||||||
externalQuery: searchQuery,
|
|
||||||
}"
|
|
||||||
:pagination-options="{
|
|
||||||
enabled: true,
|
|
||||||
mode: 'pages',
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
<div slot="table-actions">Mitglieder suchen .</div>
|
|
||||||
</vue-good-table>
|
|
||||||
</b-col>
|
|
||||||
<b-col xl="4" class="mb-5 mb-xl-0">
|
|
||||||
<social-traffic-table></social-traffic-table>
|
|
||||||
</b-col>
|
|
||||||
</b-row>
|
|
||||||
<!--End tables-->
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import SocialTrafficTable from './SocialTrafficTable'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'my-component',
|
|
||||||
components: {
|
|
||||||
SocialTrafficTable,
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
columns: [
|
|
||||||
{
|
|
||||||
label: 'Name',
|
|
||||||
field: 'name',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Alter',
|
|
||||||
field: 'age',
|
|
||||||
type: 'number',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Mitglied seid',
|
|
||||||
field: 'createdAt',
|
|
||||||
type: 'date',
|
|
||||||
dateInputFormat: 'yyyy-MM-dd',
|
|
||||||
dateOutputFormat: 'dd.MM.yyyy',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Prozent',
|
|
||||||
field: 'score',
|
|
||||||
type: 'percentage',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
rows: [
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
name: 'John',
|
|
||||||
age: 20,
|
|
||||||
createdAt: '1976-10-25',
|
|
||||||
score: 0.03343,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 2,
|
|
||||||
name: 'Jane',
|
|
||||||
age: 24,
|
|
||||||
createdAt: '2011-10-31',
|
|
||||||
score: 0.03343,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 3,
|
|
||||||
name: 'Susan',
|
|
||||||
age: 16,
|
|
||||||
createdAt: '2011-10-30',
|
|
||||||
score: 0.03343,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 4,
|
|
||||||
name: 'Chris',
|
|
||||||
age: 55,
|
|
||||||
createdAt: '2011-10-11',
|
|
||||||
score: 0.03343,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 5,
|
|
||||||
name: 'Dan',
|
|
||||||
age: 40,
|
|
||||||
createdAt: '2011-10-21',
|
|
||||||
score: 0.03343,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 6,
|
|
||||||
name: 'Bohn',
|
|
||||||
age: 70,
|
|
||||||
createdAt: '2011-10-31',
|
|
||||||
score: 0.03343,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 7,
|
|
||||||
name: 'Tellohn',
|
|
||||||
age: 56,
|
|
||||||
createdAt: '2009-10-31',
|
|
||||||
score: 0.13343,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 7,
|
|
||||||
name: 'Tellohn',
|
|
||||||
age: 56,
|
|
||||||
createdAt: '2009-10-31',
|
|
||||||
score: 0.03343,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
onRowClick(params) {
|
|
||||||
//console.log(params)
|
|
||||||
// params.row - row object
|
|
||||||
// params.pageIndex - index of this row on the current page.
|
|
||||||
// params.selected - if selection is enabled this argument
|
|
||||||
// indicates selected or not
|
|
||||||
// params.event - click event
|
|
||||||
},
|
|
||||||
onSearch(params) {
|
|
||||||
//console.log(params)
|
|
||||||
// params.searchTerm - term being searched for
|
|
||||||
// params.rowCount - number of rows that match search
|
|
||||||
},
|
|
||||||
mySearchFn(params) {
|
|
||||||
//console.log(params)
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@ -1,80 +0,0 @@
|
|||||||
<template>
|
|
||||||
<b-card body-class="p-0" header-class="border-0">
|
|
||||||
<template v-slot:header>
|
|
||||||
<b-row align-v="center">
|
|
||||||
<b-col>
|
|
||||||
<h3 class="mb-0">Page visits</h3>
|
|
||||||
</b-col>
|
|
||||||
<b-col class="text-right">
|
|
||||||
<a href="#!" class="btn btn-sm btn-primary">See all</a>
|
|
||||||
</b-col>
|
|
||||||
</b-row>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<el-table class="table-responsive table" :data="tableData" header-row-class-name="thead-light">
|
|
||||||
<el-table-column label="Page name" min-width="130px" prop="page">
|
|
||||||
<template v-slot="{ row }">
|
|
||||||
<div class="font-weight-600">{{ row.page }}</div>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="Visitors" min-width="70px" prop="visitors"></el-table-column>
|
|
||||||
<el-table-column label="Unique users" min-width="90px" prop="unique"></el-table-column>
|
|
||||||
|
|
||||||
<el-table-column label="Bounce rate" min-width="90px" prop="bounceRate">
|
|
||||||
<template v-slot="{ row }">
|
|
||||||
{{ row.bounceRate }}
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
</b-card>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
import { Table, TableColumn, DropdownMenu, DropdownItem, Dropdown } from 'element-ui'
|
|
||||||
export default {
|
|
||||||
name: 'page-visits-table',
|
|
||||||
components: {
|
|
||||||
[Table.name]: Table,
|
|
||||||
[TableColumn.name]: TableColumn,
|
|
||||||
[Dropdown.name]: Dropdown,
|
|
||||||
[DropdownItem.name]: DropdownItem,
|
|
||||||
[DropdownMenu.name]: DropdownMenu,
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
tableData: [
|
|
||||||
{
|
|
||||||
page: '/argon/',
|
|
||||||
visitors: '4,569',
|
|
||||||
unique: '340',
|
|
||||||
bounceRate: '46,53%',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
page: '/argon/index.html',
|
|
||||||
visitors: '3,985',
|
|
||||||
unique: '319',
|
|
||||||
bounceRate: '46,53%',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
page: '/argon/charts.html',
|
|
||||||
visitors: '3,513',
|
|
||||||
unique: '294',
|
|
||||||
bounceRate: '36,49%',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
page: '/argon/tables.html',
|
|
||||||
visitors: '2,050',
|
|
||||||
unique: '147',
|
|
||||||
bounceRate: '50,87%',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
page: '/argon/profile.html',
|
|
||||||
visitors: '1,795',
|
|
||||||
unique: '190',
|
|
||||||
bounceRate: '46,53%',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
}
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style></style>
|
|
||||||
@ -1,85 +0,0 @@
|
|||||||
<template>
|
|
||||||
<b-card body-class="p-0" header-class="border-0">
|
|
||||||
<template v-slot:header>
|
|
||||||
<b-row align-v="center">
|
|
||||||
<b-col>
|
|
||||||
<h3 class="mb-0">Social traffic</h3>
|
|
||||||
</b-col>
|
|
||||||
<b-col class="text-right">
|
|
||||||
<base-button size="sm" type="primary">See all</base-button>
|
|
||||||
</b-col>
|
|
||||||
</b-row>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<el-table class="table-responsive table" :data="tableData" header-row-class-name="thead-light">
|
|
||||||
<el-table-column label="Referral" min-width="115px" prop="name">
|
|
||||||
<template v-slot="{ row }">
|
|
||||||
<div class="font-weight-600">{{ row.name }}</div>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
|
|
||||||
<el-table-column label="Visitors" min-width="110px" prop="visitors"></el-table-column>
|
|
||||||
|
|
||||||
<el-table-column min-width="220px" prop="progress">
|
|
||||||
<template v-slot="{ row }">
|
|
||||||
<div class="d-flex align-items-center">
|
|
||||||
<span class="mr-2">{{ row.progress }}%</span>
|
|
||||||
<base-progress :type="row.progressType" :value="row.progress" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
</b-card>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
import { BaseProgress } from '@/components'
|
|
||||||
import { Table, TableColumn, DropdownMenu, DropdownItem, Dropdown } from 'element-ui'
|
|
||||||
export default {
|
|
||||||
name: 'social-traffic-table',
|
|
||||||
components: {
|
|
||||||
BaseProgress,
|
|
||||||
[Table.name]: Table,
|
|
||||||
[TableColumn.name]: TableColumn,
|
|
||||||
[Dropdown.name]: Dropdown,
|
|
||||||
[DropdownItem.name]: DropdownItem,
|
|
||||||
[DropdownMenu.name]: DropdownMenu,
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
tableData: [
|
|
||||||
{
|
|
||||||
name: 'Facebook',
|
|
||||||
visitors: '1,480',
|
|
||||||
progress: 60,
|
|
||||||
progressType: 'gradient-danger',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'LinkedIn',
|
|
||||||
visitors: '5,480',
|
|
||||||
progress: 70,
|
|
||||||
progressType: 'gradient-success',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Google',
|
|
||||||
visitors: '4,807',
|
|
||||||
progress: 80,
|
|
||||||
progressType: 'gradient-primary',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Instagram',
|
|
||||||
visitors: '3,678',
|
|
||||||
progress: 75,
|
|
||||||
progressType: 'gradient-info',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Twitter',
|
|
||||||
visitors: '2,645',
|
|
||||||
progress: 30,
|
|
||||||
progressType: 'gradient-warning',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
}
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style></style>
|
|
||||||
File diff suppressed because it is too large
Load Diff
@ -1,14 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>default</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'default',
|
|
||||||
data() {
|
|
||||||
return {}
|
|
||||||
},
|
|
||||||
methods: {},
|
|
||||||
watch: {},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@ -1,114 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="wrapper">
|
|
||||||
<notifications></notifications>
|
|
||||||
<side-bar>
|
|
||||||
<template slot="links">
|
|
||||||
<sidebar-item
|
|
||||||
:link="{
|
|
||||||
name: 'Kontoübersicht',
|
|
||||||
path: '/overview',
|
|
||||||
icon: 'ni ni-tv-2 text-primary',
|
|
||||||
}"
|
|
||||||
></sidebar-item>
|
|
||||||
<sidebar-item
|
|
||||||
:link="{
|
|
||||||
name: 'User Profile',
|
|
||||||
path: '/profile',
|
|
||||||
icon: 'ni ni-single-02 text-yellow',
|
|
||||||
}"
|
|
||||||
></sidebar-item>
|
|
||||||
<sidebar-item
|
|
||||||
:link="{
|
|
||||||
name: 'Login',
|
|
||||||
path: '/login',
|
|
||||||
icon: 'ni ni-key-25 text-info',
|
|
||||||
}"
|
|
||||||
></sidebar-item>
|
|
||||||
<sidebar-item
|
|
||||||
:link="{
|
|
||||||
name: 'Register',
|
|
||||||
path: '/register',
|
|
||||||
icon: 'ni ni-circle-08 text-pink',
|
|
||||||
}"
|
|
||||||
></sidebar-item>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template slot="links-after">
|
|
||||||
<hr class="my-3" />
|
|
||||||
<h6 class="navbar-heading p-0 text-muted">Community</h6>
|
|
||||||
|
|
||||||
<b-nav class="navbar-nav mb-md-3">
|
|
||||||
<b-nav-item href="https://gradido.net/de/" target="_blank">
|
|
||||||
<i class="ni ni-spaceship"></i>
|
|
||||||
<b-nav-text class="p-0">GRADIDO.net</b-nav-text>
|
|
||||||
</b-nav-item>
|
|
||||||
<b-nav-item href="https://elopage.com/s/gradido/sign_in">
|
|
||||||
<i class="ni ni-palette"></i>
|
|
||||||
<b-nav-text class="p-0">Mitgliederbereich</b-nav-text>
|
|
||||||
</b-nav-item>
|
|
||||||
<b-nav-item href="https://gradido.net/de/memberships/">
|
|
||||||
<i class="ni ni-ui-04"></i>
|
|
||||||
<b-nav-text class="p-0">Mitgliedschaft</b-nav-text>
|
|
||||||
</b-nav-item>
|
|
||||||
</b-nav>
|
|
||||||
</template>
|
|
||||||
</side-bar>
|
|
||||||
<div class="main-content">
|
|
||||||
<dashboard-navbar :type="$route.meta.navbarType"></dashboard-navbar>
|
|
||||||
|
|
||||||
<div @click="$sidebar.displaySidebar(false)">
|
|
||||||
<fade-transition :duration="200" origin="center top" mode="out-in">
|
|
||||||
<!-- your content here -->
|
|
||||||
<router-view></router-view>
|
|
||||||
</fade-transition>
|
|
||||||
</div>
|
|
||||||
<content-footer v-if="!$route.meta.hideFooter"></content-footer>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
/* eslint-disable no-new */
|
|
||||||
import PerfectScrollbar from 'perfect-scrollbar'
|
|
||||||
import 'perfect-scrollbar/css/perfect-scrollbar.css'
|
|
||||||
|
|
||||||
function hasElement(className) {
|
|
||||||
return document.getElementsByClassName(className).length > 0
|
|
||||||
}
|
|
||||||
|
|
||||||
function initScrollbar(className) {
|
|
||||||
if (hasElement(className)) {
|
|
||||||
new PerfectScrollbar(`.${className}`)
|
|
||||||
} else {
|
|
||||||
// try to init it later in case this component is loaded async
|
|
||||||
setTimeout(() => {
|
|
||||||
initScrollbar(className)
|
|
||||||
}, 100)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
import DashboardNavbar from './DashboardNavbar.vue'
|
|
||||||
import ContentFooter from './ContentFooter.vue'
|
|
||||||
import DashboardContent from './Content.vue'
|
|
||||||
import { FadeTransition } from 'vue2-transitions'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
DashboardNavbar,
|
|
||||||
ContentFooter,
|
|
||||||
//DashboardContent,
|
|
||||||
FadeTransition,
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
initScrollbar() {
|
|
||||||
let isWindows = navigator.platform.startsWith('Win')
|
|
||||||
if (isWindows) {
|
|
||||||
initScrollbar('sidenav')
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.initScrollbar()
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style lang="scss"></style>
|
|
||||||
@ -1,173 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="main-content bg-default">
|
|
||||||
<base-nav
|
|
||||||
v-model="showMenu"
|
|
||||||
:transparent="true"
|
|
||||||
menu-classes="justify-content-end"
|
|
||||||
class="navbar-horizontal navbar-main navbar-top navbar-dark"
|
|
||||||
expand="lg"
|
|
||||||
>
|
|
||||||
<div slot="brand" class="navbar-wrapper">
|
|
||||||
<b-navbar-brand to="/overview">
|
|
||||||
<img src="img/brand/white.png" />
|
|
||||||
</b-navbar-brand>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="navbar-collapse-header">
|
|
||||||
<b-row>
|
|
||||||
<b-col cols="6" class="collapse-brand">
|
|
||||||
<router-link to="/overview">
|
|
||||||
<img src="img/brand/green.png" />
|
|
||||||
</router-link>
|
|
||||||
</b-col>
|
|
||||||
<b-col cols="6" class="collapse-close">
|
|
||||||
<button type="button" class="navbar-toggler" @click="showMenu = false">
|
|
||||||
<span></span>
|
|
||||||
<span></span>
|
|
||||||
</button>
|
|
||||||
</b-col>
|
|
||||||
</b-row>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</base-nav>
|
|
||||||
|
|
||||||
<div class="main-content">
|
|
||||||
<zoom-center-transition :duration="pageTransitionDuration" mode="out-in">
|
|
||||||
<router-view></router-view>
|
|
||||||
</zoom-center-transition>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<footer class="py-5" id="footer-main">
|
|
||||||
<b-container>
|
|
||||||
<b-row align-v="center" class="justify-content-xl-between">
|
|
||||||
<b-col xl="6">
|
|
||||||
<div class="copyright text-center text-xl-left text-muted">
|
|
||||||
© {{ year }}
|
|
||||||
<a href="https://gradido.net/" class="font-weight-bold ml-1" target="_blank">
|
|
||||||
Gradido-Akademie
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</b-col>
|
|
||||||
<b-col xl="6" class="col-xl-6">
|
|
||||||
<b-nav class="nav-footer justify-content-center justify-content-lg-end">
|
|
||||||
<b-nav-item ref="https://www.creative-tim.com" target="_blank">Gradido</b-nav-item>
|
|
||||||
<b-nav-item href="https://www.creative-tim.com/presentation" target="_blank">
|
|
||||||
Impressum
|
|
||||||
</b-nav-item>
|
|
||||||
<b-nav-item href="http://blog.creative-tim.com" target="_blank">
|
|
||||||
Datenschutzerklärung
|
|
||||||
</b-nav-item>
|
|
||||||
</b-nav>
|
|
||||||
</b-col>
|
|
||||||
</b-row>
|
|
||||||
</b-container>
|
|
||||||
</footer>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
import { BaseNav } from '@/components'
|
|
||||||
import { ZoomCenterTransition } from 'vue2-transitions'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
BaseNav,
|
|
||||||
ZoomCenterTransition,
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
backgroundColor: {
|
|
||||||
type: String,
|
|
||||||
default: 'black',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
showMenu: false,
|
|
||||||
menuTransitionDuration: 250,
|
|
||||||
pageTransitionDuration: 200,
|
|
||||||
year: new Date().getFullYear(),
|
|
||||||
pageClass: 'login-page',
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
title() {
|
|
||||||
return `${this.$route.name} Page`
|
|
||||||
},
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
toggleNavbar() {
|
|
||||||
document.body.classList.toggle('nav-open')
|
|
||||||
this.showMenu = !this.showMenu
|
|
||||||
},
|
|
||||||
closeMenu() {
|
|
||||||
document.body.classList.remove('nav-open')
|
|
||||||
this.showMenu = false
|
|
||||||
},
|
|
||||||
setBackgroundColor() {
|
|
||||||
document.body.classList.add('bg-default')
|
|
||||||
},
|
|
||||||
removeBackgroundColor() {
|
|
||||||
document.body.classList.remove('bg-default')
|
|
||||||
},
|
|
||||||
updateBackground() {
|
|
||||||
if (!this.$route.meta.noBodyBackground) {
|
|
||||||
this.setBackgroundColor()
|
|
||||||
} else {
|
|
||||||
this.removeBackgroundColor()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
beforeDestroy() {
|
|
||||||
this.removeBackgroundColor()
|
|
||||||
},
|
|
||||||
beforeRouteUpdate(to, from, next) {
|
|
||||||
// Close the mobile menu first then transition to next page
|
|
||||||
if (this.showMenu) {
|
|
||||||
this.closeMenu()
|
|
||||||
setTimeout(() => {
|
|
||||||
next()
|
|
||||||
}, this.menuTransitionDuration)
|
|
||||||
} else {
|
|
||||||
next()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
$route: {
|
|
||||||
immediate: true,
|
|
||||||
handler: function () {
|
|
||||||
this.updateBackground()
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style lang="scss">
|
|
||||||
$scaleSize: 0.8;
|
|
||||||
@keyframes zoomIn8 {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: scale3d($scaleSize, $scaleSize, $scaleSize);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-content .zoomIn {
|
|
||||||
animation-name: zoomIn8;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes zoomOut8 {
|
|
||||||
from {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
opacity: 0;
|
|
||||||
transform: scale3d($scaleSize, $scaleSize, $scaleSize);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-content .zoomOut {
|
|
||||||
animation-name: zoomOut8;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1 +0,0 @@
|
|||||||
export const API_KEY = 'YOUR_API_KEY'
|
|
||||||
@ -1,105 +0,0 @@
|
|||||||
<template>
|
|
||||||
<b-card no-body class="bg-default shadow">
|
|
||||||
<b-card-header class="bg-transparent border-0">
|
|
||||||
<h3 class="mb-0 text-white">Dark table</h3>
|
|
||||||
</b-card-header>
|
|
||||||
|
|
||||||
<el-table
|
|
||||||
class="table-responsive table table-dark"
|
|
||||||
header-row-class-name="thead-dark"
|
|
||||||
:data="projects"
|
|
||||||
>
|
|
||||||
<el-table-column label="Project" min-width="310px" prop="name">
|
|
||||||
<template v-slot="{ row }">
|
|
||||||
<b-media no-body class="align-items-center">
|
|
||||||
<a href="#" class="mr-3">
|
|
||||||
<b-img class="avatar" rounded="circle" alt="Image placeholder" :src="row.img" />
|
|
||||||
</a>
|
|
||||||
<b-media-body>
|
|
||||||
<span class="font-weight-600 name mb-0 text-sm">
|
|
||||||
{{ row.title }}
|
|
||||||
</span>
|
|
||||||
</b-media-body>
|
|
||||||
</b-media>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="Budget" prop="budget" min-width="140px"></el-table-column>
|
|
||||||
|
|
||||||
<el-table-column label="Status" min-width="170px" prop="status">
|
|
||||||
<template v-slot="{ row }">
|
|
||||||
<badge class="badge-dot mr-4">
|
|
||||||
<i :class="`bg-${row.statusType}`"></i>
|
|
||||||
<span class="status" :class="`text-${row.statusType}`">
|
|
||||||
{{ row.status }}
|
|
||||||
</span>
|
|
||||||
</badge>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
|
|
||||||
<el-table-column label="Users" min-width="190px">
|
|
||||||
<div class="avatar-group">
|
|
||||||
<a
|
|
||||||
href="#"
|
|
||||||
class="avatar avatar-sm rounded-circle"
|
|
||||||
data-toggle="tooltip"
|
|
||||||
data-original-title="Ryan Tompson"
|
|
||||||
>
|
|
||||||
<img alt="Image placeholder" src="img/theme/team-1.jpg" />
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
href="#"
|
|
||||||
class="avatar avatar-sm rounded-circle"
|
|
||||||
data-toggle="tooltip"
|
|
||||||
data-original-title="Romina Hadid"
|
|
||||||
>
|
|
||||||
<img alt="Image placeholder" src="img/theme/team-2.jpg" />
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
href="#"
|
|
||||||
class="avatar avatar-sm rounded-circle"
|
|
||||||
data-toggle="tooltip"
|
|
||||||
data-original-title="Alexander Smith"
|
|
||||||
>
|
|
||||||
<img alt="Image placeholder" src="img/theme/team-3.jpg" />
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
href="#"
|
|
||||||
class="avatar avatar-sm rounded-circle"
|
|
||||||
data-toggle="tooltip"
|
|
||||||
data-original-title="Jessica Doe"
|
|
||||||
>
|
|
||||||
<img alt="Image placeholder" src="img/theme/team-4.jpg" />
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</el-table-column>
|
|
||||||
|
|
||||||
<el-table-column label="Completion" prop="completion" min-width="240px">
|
|
||||||
<template v-slot="{ row }">
|
|
||||||
<div class="d-flex align-items-center">
|
|
||||||
<span class="completion mr-2">{{ row.completion }}%</span>
|
|
||||||
<div>
|
|
||||||
<base-progress :type="row.statusType" :value="row.completion" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
</b-card>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
import projects from './../projects'
|
|
||||||
import { Table, TableColumn } from 'element-ui'
|
|
||||||
export default {
|
|
||||||
name: 'light-table',
|
|
||||||
components: {
|
|
||||||
[Table.name]: Table,
|
|
||||||
[TableColumn.name]: TableColumn,
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
projects,
|
|
||||||
currentPage: 1,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@ -1,105 +0,0 @@
|
|||||||
<template>
|
|
||||||
<b-card no-body>
|
|
||||||
<b-card-header class="border-0">
|
|
||||||
<h3 class="mb-0">Light table</h3>
|
|
||||||
</b-card-header>
|
|
||||||
|
|
||||||
<el-table class="table-responsive table" header-row-class-name="thead-light" :data="projects">
|
|
||||||
<el-table-column label="Project" min-width="310px" prop="name">
|
|
||||||
<template v-slot="{ row }">
|
|
||||||
<b-media no-body class="align-items-center">
|
|
||||||
<a href="#" class="avatar rounded-circle mr-3">
|
|
||||||
<img alt="Image placeholder" :src="row.img" />
|
|
||||||
</a>
|
|
||||||
<b-media-body>
|
|
||||||
<span class="font-weight-600 name mb-0 text-sm">
|
|
||||||
{{ row.title }}
|
|
||||||
</span>
|
|
||||||
</b-media-body>
|
|
||||||
</b-media>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="Budget" prop="budget" min-width="140px"></el-table-column>
|
|
||||||
|
|
||||||
<el-table-column label="Status" min-width="170px" prop="status">
|
|
||||||
<template v-slot="{ row }">
|
|
||||||
<badge class="badge-dot mr-4" type="">
|
|
||||||
<i :class="`bg-${row.statusType}`"></i>
|
|
||||||
<span class="status" :class="`text-${row.statusType}`">
|
|
||||||
{{ row.status }}
|
|
||||||
</span>
|
|
||||||
</badge>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
|
|
||||||
<el-table-column label="Users" min-width="190px">
|
|
||||||
<div class="avatar-group">
|
|
||||||
<a
|
|
||||||
href="#"
|
|
||||||
class="avatar avatar-sm rounded-circle"
|
|
||||||
data-toggle="tooltip"
|
|
||||||
data-original-title="Ryan Tompson"
|
|
||||||
>
|
|
||||||
<img alt="Image placeholder" src="img/theme/team-1.jpg" />
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
href="#"
|
|
||||||
class="avatar avatar-sm rounded-circle"
|
|
||||||
data-toggle="tooltip"
|
|
||||||
data-original-title="Romina Hadid"
|
|
||||||
>
|
|
||||||
<img alt="Image placeholder" src="img/theme/team-2.jpg" />
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
href="#"
|
|
||||||
class="avatar avatar-sm rounded-circle"
|
|
||||||
data-toggle="tooltip"
|
|
||||||
data-original-title="Alexander Smith"
|
|
||||||
>
|
|
||||||
<img alt="Image placeholder" src="img/theme/team-3.jpg" />
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
href="#"
|
|
||||||
class="avatar avatar-sm rounded-circle"
|
|
||||||
data-toggle="tooltip"
|
|
||||||
data-original-title="Jessica Doe"
|
|
||||||
>
|
|
||||||
<img alt="Image placeholder" src="img/theme/team-4.jpg" />
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</el-table-column>
|
|
||||||
|
|
||||||
<el-table-column label="Completion" prop="completion" min-width="240px">
|
|
||||||
<template v-slot="{ row }">
|
|
||||||
<div class="d-flex align-items-center">
|
|
||||||
<span class="completion mr-2">{{ row.completion }}%</span>
|
|
||||||
<div>
|
|
||||||
<base-progress :type="row.statusType" :value="row.completion" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
|
|
||||||
<b-card-footer class="py-4 d-flex justify-content-end">
|
|
||||||
<base-pagination v-model="currentPage" :per-page="10" :total="50"></base-pagination>
|
|
||||||
</b-card-footer>
|
|
||||||
</b-card>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
import projects from './../projects'
|
|
||||||
import { Table, TableColumn } from 'element-ui'
|
|
||||||
export default {
|
|
||||||
name: 'light-table',
|
|
||||||
components: {
|
|
||||||
[Table.name]: Table,
|
|
||||||
[TableColumn.name]: TableColumn,
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
projects,
|
|
||||||
currentPage: 1,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@ -1,74 +0,0 @@
|
|||||||
export default [
|
|
||||||
{
|
|
||||||
img: 'img/theme/bootstrap.jpg',
|
|
||||||
title: 'Argon Design System',
|
|
||||||
budget: '$2500 USD',
|
|
||||||
status: 'pending',
|
|
||||||
statusType: 'warning',
|
|
||||||
completion: 60,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
img: 'img/theme/angular.jpg',
|
|
||||||
title: 'Angular Now UI Kit PRO',
|
|
||||||
budget: '$1800 USD',
|
|
||||||
status: 'completed',
|
|
||||||
statusType: 'success',
|
|
||||||
completion: 100,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
img: 'img/theme/sketch.jpg',
|
|
||||||
title: 'Black Dashboard',
|
|
||||||
budget: '$3150 USD',
|
|
||||||
status: 'delayed',
|
|
||||||
statusType: 'danger',
|
|
||||||
completion: 72,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
img: 'img/theme/react.jpg',
|
|
||||||
title: 'React Material Dashboard',
|
|
||||||
budget: '$4400 USD',
|
|
||||||
status: 'on schedule',
|
|
||||||
statusType: 'info',
|
|
||||||
completion: 90,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
img: 'img/theme/vue.jpg',
|
|
||||||
title: 'Vue Paper UI Kit PRO',
|
|
||||||
budget: '$2200 USD',
|
|
||||||
status: 'completed',
|
|
||||||
statusType: 'success',
|
|
||||||
completion: 100,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
img: 'img/theme/bootstrap.jpg',
|
|
||||||
title: 'Argon Design System',
|
|
||||||
budget: '$2500 USD',
|
|
||||||
status: 'pending',
|
|
||||||
statusType: 'warning',
|
|
||||||
completion: 60,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
img: 'img/theme/angular.jpg',
|
|
||||||
title: 'Angular Now UI Kit PRO',
|
|
||||||
budget: '$1800 USD',
|
|
||||||
status: 'completed',
|
|
||||||
statusType: 'success',
|
|
||||||
completion: 100,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
img: 'img/theme/sketch.jpg',
|
|
||||||
title: 'Black Dashboard',
|
|
||||||
budget: '$3150 USD',
|
|
||||||
status: 'delayed',
|
|
||||||
statusType: 'danger',
|
|
||||||
completion: 72,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
img: 'img/theme/vue.jpg',
|
|
||||||
title: 'Vue Paper UI Kit PRO',
|
|
||||||
budget: '$2200 USD',
|
|
||||||
status: 'completed',
|
|
||||||
statusType: 'success',
|
|
||||||
completion: 100,
|
|
||||||
},
|
|
||||||
]
|
|
||||||
@ -1,42 +0,0 @@
|
|||||||
export default [
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
name: 'John Michael',
|
|
||||||
image: 'img/theme/team-1.jpg',
|
|
||||||
createdAt: '10/09/2018',
|
|
||||||
product: 'Argon Dashboard PRO',
|
|
||||||
active: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 2,
|
|
||||||
name: 'Alexandra Smith',
|
|
||||||
image: 'img/theme/team-2.jpg',
|
|
||||||
createdAt: '08/09/2018',
|
|
||||||
product: 'Argon Design System',
|
|
||||||
active: false,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 3,
|
|
||||||
name: 'Samantha Ivy',
|
|
||||||
image: 'img/theme/team-3.jpg',
|
|
||||||
createdAt: '30/08/2018',
|
|
||||||
product: 'Black Dashboard',
|
|
||||||
active: false,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 4,
|
|
||||||
name: 'John Michael',
|
|
||||||
image: 'img/theme/team-1.jpg',
|
|
||||||
createdAt: '10/09/2018',
|
|
||||||
product: 'Argon Dashboard PRO',
|
|
||||||
active: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 5,
|
|
||||||
name: 'Alexandra Smith',
|
|
||||||
image: 'img/theme/team-2.jpg',
|
|
||||||
createdAt: '30/09/2018',
|
|
||||||
product: 'Vue Argon Dashboard',
|
|
||||||
active: true,
|
|
||||||
},
|
|
||||||
]
|
|
||||||
@ -1,14 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>default</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'default',
|
|
||||||
data() {
|
|
||||||
return {}
|
|
||||||
},
|
|
||||||
methods: {},
|
|
||||||
watch: {},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
Loading…
x
Reference in New Issue
Block a user