feat: add ci cd files dont edit those files
This commit is contained in:
mahyargdz
@@ -0,0 +1,23 @@
|
||||
<template>
|
||||
<CSubheader
|
||||
class="custom-subheader px-3"
|
||||
:class="[
|
||||
sidebarShow ? null : 'sideBarClose',
|
||||
sidebarMinimize ? 'sideBarMinimized' : 'sideBarFull'
|
||||
]">
|
||||
<slot/>
|
||||
</CSubheader>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
computed: {
|
||||
sidebarShow() {
|
||||
return this.$store.state.admin.sidebarShow
|
||||
},
|
||||
sidebarMinimize() {
|
||||
return this.$store.state.admin.sidebarMinimize
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,20 @@
|
||||
import Vue from 'vue'
|
||||
|
||||
Vue.component('RenderString', {
|
||||
props: {
|
||||
string: {
|
||||
required: true
|
||||
}
|
||||
},
|
||||
render(h) {
|
||||
const render = {
|
||||
template: "<div>" + this.string + "</div>",
|
||||
methods: {
|
||||
markComplete() {
|
||||
console.log('the method called')
|
||||
}
|
||||
}
|
||||
}
|
||||
return h(render)
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,16 @@
|
||||
<template>
|
||||
<CFooter :fixed="false">
|
||||
<div class="mfs-auto">
|
||||
<div class="copy-right">
|
||||
<span class="mr-1">Powered by</span>
|
||||
<a href="https://danakcorp.com/fa" target="_blank" class="company">Danak Corporation</a>
|
||||
</div>
|
||||
</div>
|
||||
</CFooter>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'TheFooter'
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<CHeader fixed with-subheader light>
|
||||
<CToggler
|
||||
in-header
|
||||
class="ml-3 d-lg-none"
|
||||
@click="$store.commit('admin/toggleSidebarMobile')"
|
||||
/>
|
||||
<CToggler
|
||||
in-header
|
||||
class="ml-3 d-md-down-none"
|
||||
@click="$store.commit('admin/toggleSidebarDesktop')"
|
||||
/>
|
||||
<CHeaderNav class="mr-4 mr-auto">
|
||||
<TheHeaderDropdownAccnt/>
|
||||
</CHeaderNav>
|
||||
</CHeader>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'TheHeader',
|
||||
data() {
|
||||
return {
|
||||
breadcrumb: [
|
||||
{
|
||||
text: 'صفحه اصلی',
|
||||
to: '/admin'
|
||||
},
|
||||
{
|
||||
text: 'لیست دانلود ها',
|
||||
to: {name: 'admin-downloads'}
|
||||
},
|
||||
{
|
||||
text: 'This is a span'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,72 @@
|
||||
<template>
|
||||
<CDropdown
|
||||
inNav
|
||||
class="c-header-nav-items"
|
||||
placement="bottom-end"
|
||||
add-menu-classes="pt-0"
|
||||
>
|
||||
<template #toggler>
|
||||
<CHeaderNavLink>
|
||||
<div class="c-avatar">
|
||||
<img
|
||||
:src="$auth.user.profilePic || '/img/avatar.png'"
|
||||
class="c-avatar-img"
|
||||
alt=""
|
||||
title="حساب کاربری"
|
||||
/>
|
||||
</div>
|
||||
</CHeaderNavLink>
|
||||
</template>
|
||||
<CDropdownHeader tag="div" class="text-center" color="light">
|
||||
<strong v-if="$auth.loggedIn">{{ $auth.user.firstName }}</strong>
|
||||
</CDropdownHeader>
|
||||
|
||||
<CDropdownItem :to="{name: 'admin-users-profile' , params : {profile : 'profile'}}">
|
||||
<CIcon name="cil-user"/>
|
||||
<span>پروفایل</span>
|
||||
</CDropdownItem>
|
||||
|
||||
<CDropdownItem @click="logOut">
|
||||
<CIcon name="cil-lock-locked"/>
|
||||
<span>خروج از حساب</span>
|
||||
</CDropdownItem>
|
||||
</CDropdown>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'TheHeaderDropdownAccnt',
|
||||
data() {
|
||||
return {
|
||||
itemsCount: 42
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
logOut() {
|
||||
this.$confirm('میخواهید از حساب کاربری خارج شوید؟', 'هشدار', {
|
||||
confirmButtonText: 'بله',
|
||||
cancelButtonText: 'لغو',
|
||||
type: 'warning'
|
||||
}).then(async () => {
|
||||
try {
|
||||
await this.$auth.logout()
|
||||
window.location.replace('/admin/login')
|
||||
} catch (e) {
|
||||
console.log(e.response.data)
|
||||
}
|
||||
}).catch(() => {
|
||||
this.$message({
|
||||
type: 'warning',
|
||||
message: 'عملیات لغو شد'
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.c-icon{
|
||||
margin-right: 0.3rem;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,343 @@
|
||||
<template>
|
||||
<CSidebar
|
||||
fixed
|
||||
:minimize="minimize"
|
||||
:show="show"
|
||||
@update:show="
|
||||
(value) =>
|
||||
$store.commit('admin/set', ['sidebarShow', value])
|
||||
">
|
||||
<CSidebarBrand class="d-md-down-none">
|
||||
<a href="/" target="_blank">
|
||||
<span style="color: #fff">پرتال خبری</span>
|
||||
</a>
|
||||
</CSidebarBrand>
|
||||
|
||||
<!-- <CRenderFunction flat :content-to-render="$options.nav"/> -->
|
||||
|
||||
<!-- sidebar content -->
|
||||
<CSidebarNav>
|
||||
<CSidebarNavItem
|
||||
name="صفحه اصلی"
|
||||
:to="{ name: 'admin' }"
|
||||
font-icon="fal fa-home" />
|
||||
|
||||
<CSidebarNavItem
|
||||
name="مدیریت کاربران"
|
||||
:to="{ name: 'admin-users' }"
|
||||
v-if="hasPermission('superAdmin')"
|
||||
fontIcon="fal fa-users"
|
||||
:exact="false" />
|
||||
|
||||
<CSidebarNavItem
|
||||
name="مدیریت صفحات"
|
||||
:to="{ name: 'admin-pages' }"
|
||||
v-if="hasPermission('categories')"
|
||||
fontIcon="fal fa-file"
|
||||
:exact="false" />
|
||||
|
||||
<CSidebarNavItem
|
||||
name="مدیریت عملکرد"
|
||||
:to="{ name: 'admin-pdfManagement' }"
|
||||
v-if="hasPermission('categories')"
|
||||
fontIcon="fal fa-file"
|
||||
:exact="false" />
|
||||
|
||||
<CSidebarNavItem
|
||||
name="مدیریت پرونده خبری"
|
||||
:to="{ name: 'admin-newsFile' }"
|
||||
v-if="hasPermission('newsFile')"
|
||||
font-icon="fal fa-cabinet-filing"
|
||||
:exact="false" />
|
||||
|
||||
<CSidebarNavItem
|
||||
name="مدیریت اخبار"
|
||||
:to="{ name: 'admin-news' }"
|
||||
v-if="hasPermission('news')"
|
||||
font-icon="fal fa-newspaper"
|
||||
:exact="false" />
|
||||
|
||||
<CSidebarNavItem
|
||||
name="مدیریت چند رسانه ای ها"
|
||||
v-if="hasPermission('gallery')"
|
||||
:to="{ name: 'admin-gallery' }"
|
||||
font-icon="fal fa-images"
|
||||
:exact="false" />
|
||||
|
||||
<CSidebarNavItem
|
||||
name="مدیریت نظرسنجی ها"
|
||||
:to="{ name: 'admin-polls', query: { page: 1 } }"
|
||||
font-icon="fal fa-poll-people"
|
||||
:exact="false" />
|
||||
|
||||
<CSidebarNavItem
|
||||
name="مدیریت انتخابات"
|
||||
:exact="false"
|
||||
:to="{ name: 'admin-elections' }"
|
||||
v-if="hasPermission('elections')"
|
||||
font-icon="fal fa-box-ballot" />
|
||||
|
||||
<CSidebarNavDropdown
|
||||
name="میز خدمت"
|
||||
:show="Boolean(unreadMeetingReq)"
|
||||
v-if="hasPermission('superAdmin')"
|
||||
font-icon="fal fa-browser">
|
||||
<CSidebarNavItem
|
||||
name="درخواست های ملاقات با استاندار"
|
||||
:exact="false"
|
||||
:badge="
|
||||
unreadMeetingReq
|
||||
? { text: unreadMeetingReq, color: 'danger' }
|
||||
: null
|
||||
"
|
||||
:to="{ name: 'admin-meeting' }" />
|
||||
</CSidebarNavDropdown>
|
||||
|
||||
<!-- <CSidebarNavItem
|
||||
name="مدیریت محتوا"
|
||||
v-if="hasPermission('contents')"
|
||||
:to="{ name: 'admin-contents' }"
|
||||
icon="cil-speedometer"
|
||||
/> -->
|
||||
|
||||
<CSidebarNavDropdown
|
||||
name="مدیریت پیام ها"
|
||||
:show="
|
||||
Boolean(
|
||||
unreadContactMessages + unreadNewsMessages
|
||||
)
|
||||
"
|
||||
v-if="
|
||||
hasPermission('comment-News') ||
|
||||
hasPermission('comment-ContactUs')
|
||||
"
|
||||
fontIcon="fal fa-envelope">
|
||||
<CSidebarNavItem
|
||||
v-if="hasPermission('comment-News')"
|
||||
name="کامنت های اخبار"
|
||||
:exact="false"
|
||||
:badge="
|
||||
unreadNewsMessages
|
||||
? {
|
||||
text: unreadNewsMessages,
|
||||
color: 'danger',
|
||||
}
|
||||
: null
|
||||
"
|
||||
:to="{
|
||||
name: 'admin-comments-type',
|
||||
params: { type: 'News' },
|
||||
}" />
|
||||
<CSidebarNavItem
|
||||
v-if="hasPermission('comment-ContactUs')"
|
||||
name="پیام های تماس با ما"
|
||||
:exact="false"
|
||||
:badge="
|
||||
unreadContactMessages
|
||||
? {
|
||||
text: unreadContactMessages,
|
||||
color: 'danger',
|
||||
}
|
||||
: null
|
||||
"
|
||||
:to="{
|
||||
name: 'admin-comments-type',
|
||||
params: { type: 'ContactUs' },
|
||||
}" />
|
||||
</CSidebarNavDropdown>
|
||||
|
||||
<CSidebarNavDropdown
|
||||
name="تنظیمات"
|
||||
v-if="hasPermission('superAdmin')"
|
||||
fontIcon="fal fa-cog">
|
||||
<CSidebarNavItem
|
||||
name="اخباری روی صفحه اصلی"
|
||||
:to="{
|
||||
name: 'admin-homePageNews',
|
||||
query: { portal: 'ostandari' },
|
||||
}" />
|
||||
|
||||
<CSidebarNavItem
|
||||
name="مدیریت پیوندها"
|
||||
:to="{ name: 'admin-links' }"
|
||||
:exact="false" />
|
||||
<CSidebarNavItem
|
||||
name="استاندار"
|
||||
:to="{
|
||||
name: 'admin-contents-details',
|
||||
params: { details: 'manager' },
|
||||
}" />
|
||||
<CSidebarNavItem
|
||||
name="مدیریت اسلایدر"
|
||||
:to="{ name: 'admin-slider' }"
|
||||
:exact="false" />
|
||||
<CSidebarNavItem
|
||||
name="عکس شعار سال"
|
||||
:to="{ name: 'admin-yearBanner' }" />
|
||||
<CSidebarNavItem
|
||||
name="دکمه ستاد انتخابات"
|
||||
:to="{ name: 'admin-electionBtn' }" />
|
||||
<CSidebarNavItem
|
||||
name="آدرس ایمیل و شبکه های اجتماعی"
|
||||
:to="{ name: 'admin-socialLinks' }" />
|
||||
<CSidebarNavItem
|
||||
name="مدیریت مناسبت ها"
|
||||
:to="{ name: 'admin-occasion' }"
|
||||
:exact="false" />
|
||||
<CSidebarNavItem
|
||||
name="مدیریت روز شمار"
|
||||
:to="{ name: 'admin-counterDay' }" />
|
||||
<CSidebarNavItem
|
||||
name="پشتیبان گیری از سایت"
|
||||
:to="{ name: 'admin-backup' }" />
|
||||
</CSidebarNavDropdown>
|
||||
|
||||
<CSidebarNavDropdown
|
||||
name="مدیریت صفحات خاص"
|
||||
v-if="hasPermission('contents')"
|
||||
fontIcon="fal fa-file-alt">
|
||||
<CSidebarNavItem
|
||||
name="صفحه اصلی"
|
||||
:to="{
|
||||
name: 'admin-homePageManagement',
|
||||
query: { portal: 'ostandari' },
|
||||
}" />
|
||||
<CSidebarNavItem
|
||||
name="صفحه عملکرد"
|
||||
:to="{
|
||||
name: 'admin-contents-details',
|
||||
params: { details: 'performance' },
|
||||
}" />
|
||||
<CSidebarNavItem
|
||||
name="صفحه سیمای استان"
|
||||
:to="{
|
||||
name: 'admin-contents-details',
|
||||
params: { details: 'sima' },
|
||||
}" />
|
||||
<CSidebarNavItem
|
||||
name="صفحه درباره ما"
|
||||
:to="{
|
||||
name: 'admin-contents-details',
|
||||
params: { details: 'aboutus' },
|
||||
}" />
|
||||
<!-- <CSidebarNavItem-->
|
||||
<!-- name="صفحه خدمات"-->
|
||||
<!-- :to="{ name: 'admin-contents-details' , params : {details : 'services'} }"-->
|
||||
<!-- />-->
|
||||
<!-- <CSidebarNavItem-->
|
||||
<!-- name="صفحه شرایط استفاده"-->
|
||||
<!-- :to="{ name: 'admin-contents-details' , params : {details : 'terms'} }"-->
|
||||
<!-- />-->
|
||||
<CSidebarNavItem
|
||||
name="صفحه حفظ حریم خصوصی"
|
||||
:to="{
|
||||
name: 'admin-contents-details',
|
||||
params: { details: 'privacy' },
|
||||
}" />
|
||||
<!-- <CSidebarNavItem-->
|
||||
<!-- name="صفحه کوکی ها"-->
|
||||
<!-- :to="{ name: 'admin-contents-details' , params : {details : 'cookies'} }"-->
|
||||
<!-- />-->
|
||||
<!-- <CSidebarNavItem-->
|
||||
<!-- name="صفحه امکانات"-->
|
||||
<!-- :to="{ name: 'admin-contents-details' , params : {details : 'facilities'} }"-->
|
||||
<!-- />-->
|
||||
<!-- <CSidebarNavItem-->
|
||||
<!-- name="صفحه آرایی"-->
|
||||
<!-- :to="{ name: 'admin-contents-details' , params : {details : 'layout'} }"-->
|
||||
<!-- />-->
|
||||
<CSidebarNavItem
|
||||
name="سوالات متداول"
|
||||
:to="{
|
||||
name: 'admin-contents-details',
|
||||
params: { details: 'faq' },
|
||||
}" />
|
||||
<CSidebarNavItem
|
||||
name="صفحه قوانین و مقررات"
|
||||
:to="{
|
||||
name: 'admin-contents-details',
|
||||
params: { details: 'rules' },
|
||||
}" />
|
||||
<CSidebarNavItem
|
||||
name="صفحه نقشه سایت"
|
||||
:to="{
|
||||
name: 'admin-contents-details',
|
||||
params: { details: 'sitemap' },
|
||||
}" />
|
||||
</CSidebarNavDropdown>
|
||||
</CSidebarNav>
|
||||
<!-- sidebar content -->
|
||||
|
||||
<CSidebarMinimizer
|
||||
class="d-md-down-none"
|
||||
@click.native="
|
||||
$store.commit('admin/set', [
|
||||
'sidebarMinimize',
|
||||
!minimize,
|
||||
])
|
||||
" />
|
||||
</CSidebar>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import nav from './_nav';
|
||||
import unreadNewsMessages from "./../../mixins/unreadNewsMessages";
|
||||
import unreadContactMessages from "./../../mixins/unreadContactMessages";
|
||||
import unreadMeetingReq from "../../mixins/unreadMeetingReq";
|
||||
|
||||
export default {
|
||||
name: "TheSidebar",
|
||||
// nav,
|
||||
data() {
|
||||
return {
|
||||
errlogOutMessage:
|
||||
"مشکلی هنگام خروج از سیسیتم بوجود امده لطفا دوباره تلاش کنید",
|
||||
};
|
||||
},
|
||||
mixins: [
|
||||
unreadNewsMessages,
|
||||
unreadContactMessages,
|
||||
unreadMeetingReq,
|
||||
],
|
||||
computed: {
|
||||
show() {
|
||||
return this.$store.state.admin.sidebarShow;
|
||||
},
|
||||
minimize() {
|
||||
return this.$store.state.admin.sidebarMinimize;
|
||||
},
|
||||
unreadNewsMessages() {
|
||||
return this.$store.state.admin
|
||||
.unreadNewsMessagesCount;
|
||||
},
|
||||
unreadContactMessages() {
|
||||
return this.$store.state.admin
|
||||
.unreadContactMessagesCount;
|
||||
},
|
||||
unreadMeetingReq() {
|
||||
return this.$store.state.admin.unreadMeetingReqCount;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
hasPermission(permission) {
|
||||
if (this.$auth.loggedIn) {
|
||||
if (
|
||||
this.$auth.user.permissions.includes("superAdmin")
|
||||
) {
|
||||
return true;
|
||||
} else if (
|
||||
this.$auth.user.permissions.includes(permission)
|
||||
) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
} else return false;
|
||||
},
|
||||
async logOut() {
|
||||
await this.$auth.logout();
|
||||
this.$router.push({ name: "admin-login" });
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,19 @@
|
||||
export default [
|
||||
{
|
||||
_name: 'CSidebarNav',
|
||||
_children: [
|
||||
{
|
||||
_name: 'CSidebarNavItem',
|
||||
name: 'صفحه اصلی',
|
||||
to: {name: 'admin'},
|
||||
icon: 'cil-speedometer'
|
||||
},
|
||||
{
|
||||
_name: 'CSidebarNavItem',
|
||||
name: 'مدیریت کابران',
|
||||
to: {name: 'admin-users'},
|
||||
icon: 'cil-speedometer'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
@@ -0,0 +1,23 @@
|
||||
<template>
|
||||
<CChartBar
|
||||
:datasets="defaultDatasets"
|
||||
labels="months"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'CChartBarExample',
|
||||
computed: {
|
||||
defaultDatasets() {
|
||||
return [
|
||||
{
|
||||
label: 'GitHub Commits',
|
||||
backgroundColor: '#f87979',
|
||||
data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,72 @@
|
||||
<template>
|
||||
<CChartBar
|
||||
:datasets="computedDatasets"
|
||||
:options="computedOptions"
|
||||
:labels="labels"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CoreUtils from '~/mixins/CoreUtils'
|
||||
|
||||
export default {
|
||||
name: 'CChartBarSimple',
|
||||
mixins: [CoreUtils],
|
||||
props: {
|
||||
datasets: Array,
|
||||
labels: [Array, String],
|
||||
options: Object,
|
||||
plugins: Array,
|
||||
backgroundColor: {
|
||||
type: String,
|
||||
default: 'rgba(0,0,0,.2)'
|
||||
},
|
||||
pointHoverBackgroundColor: String,
|
||||
dataPoints: {
|
||||
type: Array,
|
||||
default: () => [10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
default: 'Sales'
|
||||
},
|
||||
pointed: Boolean
|
||||
},
|
||||
computed: {
|
||||
defaultDatasets() {
|
||||
return [
|
||||
{
|
||||
data: this.dataPoints,
|
||||
backgroundColor: this.getColor(this.backgroundColor),
|
||||
pointHoverBackgroundColor: this.getColor(this.pointHoverBackgroundColor),
|
||||
label: this.label,
|
||||
barPercentage: 0.5,
|
||||
categoryPercentage: 1
|
||||
}
|
||||
]
|
||||
},
|
||||
defaultOptions() {
|
||||
return {
|
||||
maintainAspectRatio: false,
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
display: false
|
||||
}],
|
||||
yAxes: [{
|
||||
display: false
|
||||
}]
|
||||
}
|
||||
}
|
||||
},
|
||||
computedDatasets() {
|
||||
return this.deepObjectsMerge(this.defaultDatasets, this.datasets || {})
|
||||
},
|
||||
computedOptions() {
|
||||
return this.deepObjectsMerge(this.defaultOptions, this.options || {})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,27 @@
|
||||
<template>
|
||||
<CChartDoughnut
|
||||
:datasets="defaultDatasets"
|
||||
:labels="['VueJs', 'EmberJs', 'ReactJs', 'AngularJs']"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'CChartDoughnutExample',
|
||||
computed: {
|
||||
defaultDatasets() {
|
||||
return [
|
||||
{
|
||||
backgroundColor: [
|
||||
'#41B883',
|
||||
'#E46651',
|
||||
'#00D8FF',
|
||||
'#DD1B16'
|
||||
],
|
||||
data: [40, 20, 80, 10]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,28 @@
|
||||
<template>
|
||||
<CChartLine
|
||||
:datasets="defaultDatasets"
|
||||
labels="months"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'CChartLineExample',
|
||||
computed: {
|
||||
defaultDatasets() {
|
||||
return [
|
||||
{
|
||||
label: 'Data One',
|
||||
backgroundColor: 'rgb(228,102,81,0.9)',
|
||||
data: [30, 39, 10, 50, 30, 70, 35]
|
||||
},
|
||||
{
|
||||
label: 'Data Two',
|
||||
backgroundColor: 'rgb(0,216,255,0.9)',
|
||||
data: [39, 80, 40, 35, 40, 20, 45]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,138 @@
|
||||
<template>
|
||||
<CChartLine
|
||||
:datasets="computedDatasets"
|
||||
:options="computedOptions"
|
||||
:labels="labels"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CoreUtils from '~/mixins/CoreUtils'
|
||||
|
||||
export default {
|
||||
name: 'CChartLineSimple',
|
||||
mixins: [CoreUtils],
|
||||
props: {
|
||||
datasets: Array,
|
||||
labels: [Array, String],
|
||||
options: Object,
|
||||
plugins: Array,
|
||||
borderColor: {
|
||||
type: String,
|
||||
default: 'rgba(255,255,255,.55)'
|
||||
},
|
||||
backgroundColor: {
|
||||
type: String,
|
||||
default: 'transparent'
|
||||
},
|
||||
dataPoints: {
|
||||
type: Array,
|
||||
default: () => [10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
default: 'Sales'
|
||||
},
|
||||
pointed: Boolean,
|
||||
pointHoverBackgroundColor: String
|
||||
},
|
||||
computed: {
|
||||
pointHoverColor() {
|
||||
if (this.pointHoverBackgroundColor) {
|
||||
return this.pointHoverBackgroundColor
|
||||
} else if (this.backgroundColor !== 'transparent') {
|
||||
return this.backgroundColor
|
||||
}
|
||||
return this.borderColor
|
||||
},
|
||||
defaultDatasets() {
|
||||
return [
|
||||
{
|
||||
data: this.dataPoints,
|
||||
borderColor: this.getColor(this.borderColor),
|
||||
backgroundColor: this.getColor(this.backgroundColor),
|
||||
pointBackgroundColor: this.getColor(this.pointHoverColor),
|
||||
pointHoverBackgroundColor: this.getColor(this.pointHoverColor),
|
||||
label: this.label
|
||||
}
|
||||
]
|
||||
},
|
||||
pointedOptions() {
|
||||
return {
|
||||
scales: {
|
||||
xAxes: [
|
||||
{
|
||||
offset: true,
|
||||
gridLines: {
|
||||
color: 'transparent',
|
||||
zeroLineColor: 'transparent'
|
||||
},
|
||||
ticks: {
|
||||
fontSize: 2,
|
||||
fontColor: 'transparent'
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
display: false,
|
||||
min: Math.min.apply(Math, this.dataPoints) - 5,
|
||||
max: Math.max.apply(Math, this.dataPoints) + 5
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderWidth: 1
|
||||
},
|
||||
point: {
|
||||
radius: 4,
|
||||
hitRadius: 10,
|
||||
hoverRadius: 4
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
straightOptions() {
|
||||
return {
|
||||
scales: {
|
||||
xAxes: [{
|
||||
display: false
|
||||
}],
|
||||
yAxes: [{
|
||||
display: false
|
||||
}]
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderWidth: 2
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
hitRadius: 10,
|
||||
hoverRadius: 4
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
defaultOptions() {
|
||||
const options = this.pointed ? this.pointedOptions : this.straightOptions
|
||||
return Object.assign({}, options, {
|
||||
maintainAspectRatio: false,
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
})
|
||||
},
|
||||
computedDatasets() {
|
||||
return this.deepObjectsMerge(this.defaultDatasets, this.datasets || {})
|
||||
},
|
||||
computedOptions() {
|
||||
return this.deepObjectsMerge(this.defaultOptions, this.options || {})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,27 @@
|
||||
<template>
|
||||
<CChartPie
|
||||
:datasets="defaultDatasets"
|
||||
:labels="['VueJs', 'EmberJs', 'ReactJs', 'AngularJs']"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'CChartPieExample',
|
||||
computed: {
|
||||
defaultDatasets () {
|
||||
return [
|
||||
{
|
||||
backgroundColor: [
|
||||
'#41B883',
|
||||
'#E46651',
|
||||
'#00D8FF',
|
||||
'#DD1B16'
|
||||
],
|
||||
data: [40, 20, 80, 10]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<CChartPolarArea
|
||||
:datasets="defaultDatasets"
|
||||
:options="defaultOptions"
|
||||
:labels="[
|
||||
'Eating', 'Drinking', 'Sleeping', 'Designing',
|
||||
'Coding', 'Cycling', 'Running'
|
||||
]"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'CChartPolarAreaExample',
|
||||
computed: {
|
||||
defaultDatasets () {
|
||||
return [
|
||||
{
|
||||
label: 'My First dataset',
|
||||
backgroundColor: 'rgba(179,181,198,0.2)',
|
||||
pointBackgroundColor: 'rgba(179,181,198,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: 'rgba(179,181,198,1)',
|
||||
pointHoverBorderColor: 'rgba(179,181,198,1)',
|
||||
data: [65, 59, 90, 81, 56, 55, 40]
|
||||
},
|
||||
{
|
||||
label: 'My Second dataset',
|
||||
backgroundColor: 'rgba(255,99,132,0.2)',
|
||||
pointBackgroundColor: 'rgba(255,99,132,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: 'rgba(255,99,132,1)',
|
||||
pointHoverBorderColor: 'rgba(255,99,132,1)',
|
||||
data: [28, 48, 40, 19, 96, 27, 100]
|
||||
}
|
||||
]
|
||||
},
|
||||
defaultOptions () {
|
||||
return {
|
||||
aspectRatio: 1.5
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<CChartRadar
|
||||
:datasets="defaultDatasets"
|
||||
:options="defaultOptions"
|
||||
:labels="[
|
||||
'Eating', 'Drinking', 'Sleeping', 'Designing',
|
||||
'Coding', 'Cycling', 'Running'
|
||||
]"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'CChartRadarExample',
|
||||
computed: {
|
||||
defaultDatasets() {
|
||||
return [
|
||||
{
|
||||
label: '2019',
|
||||
backgroundColor: 'rgba(179,181,198,0.2)',
|
||||
borderColor: 'rgba(179,181,198,1)',
|
||||
pointBackgroundColor: 'rgba(179,181,198,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(179,181,198,1)',
|
||||
tooltipLabelColor: 'rgba(179,181,198,1)',
|
||||
data: [65, 59, 90, 81, 56, 55, 40]
|
||||
},
|
||||
{
|
||||
label: '2020',
|
||||
backgroundColor: 'rgba(255,99,132,0.2)',
|
||||
borderColor: 'rgba(255,99,132,1)',
|
||||
pointBackgroundColor: 'rgba(255,99,132,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(255,99,132,1)',
|
||||
tooltipLabelColor: 'rgba(255,99,132,1)',
|
||||
data: [28, 48, 40, 19, 96, 27, 100]
|
||||
}
|
||||
]
|
||||
},
|
||||
defaultOptions() {
|
||||
return {
|
||||
aspectRatio: 1.5
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,103 @@
|
||||
<template>
|
||||
<CChartLine
|
||||
:datasets="defaultDatasets"
|
||||
:options="defaultOptions"
|
||||
:labels="['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su']"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import { CChartLine } from '@coreui/vue-chartjs'
|
||||
// import { getStyle, hexToRgba } from '@coreui/utils/src'
|
||||
import CoreUtils from '~/mixins/CoreUtils'
|
||||
|
||||
function random(min, max) {
|
||||
return Math.floor(Math.random() * (max - min + 1) + min)
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'MainChartExample',
|
||||
mixins: [CoreUtils],
|
||||
computed: {
|
||||
defaultDatasets() {
|
||||
const brandSuccess = this.getStyle('success2') || '#4dbd74'
|
||||
const brandInfo = this.getStyle('info') || '#20a8d8'
|
||||
const brandDanger = this.getStyle('danger') || '#f86c6b'
|
||||
|
||||
let elements = 27
|
||||
const data1 = []
|
||||
const data2 = []
|
||||
const data3 = []
|
||||
|
||||
for (let i = 0; i <= elements; i++) {
|
||||
data1.push(random(50, 200))
|
||||
data2.push(random(80, 100))
|
||||
data3.push(65)
|
||||
}
|
||||
return [
|
||||
{
|
||||
label: 'My First dataset',
|
||||
backgroundColor: this.hexToRgba(brandInfo, 10),
|
||||
borderColor: brandInfo,
|
||||
pointHoverBackgroundColor: brandInfo,
|
||||
borderWidth: 2,
|
||||
data: data1
|
||||
},
|
||||
{
|
||||
label: 'My Second dataset',
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: brandSuccess,
|
||||
pointHoverBackgroundColor: brandSuccess,
|
||||
borderWidth: 2,
|
||||
data: data2
|
||||
},
|
||||
{
|
||||
label: 'My Third dataset',
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: brandDanger,
|
||||
pointHoverBackgroundColor: brandDanger,
|
||||
borderWidth: 1,
|
||||
borderDash: [8, 5],
|
||||
data: data3
|
||||
}
|
||||
]
|
||||
},
|
||||
defaultOptions() {
|
||||
return {
|
||||
|
||||
maintainAspectRatio: false,
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
gridLines: {
|
||||
drawOnChartArea: false
|
||||
}
|
||||
}],
|
||||
yAxes: [{
|
||||
ticks: {
|
||||
beginAtZero: true,
|
||||
maxTicksLimit: 5,
|
||||
stepSize: Math.ceil(250 / 5),
|
||||
max: 250
|
||||
},
|
||||
gridLines: {
|
||||
display: true
|
||||
}
|
||||
}]
|
||||
},
|
||||
elements: {
|
||||
point: {
|
||||
radius: 0,
|
||||
hitRadius: 10,
|
||||
hoverRadius: 4,
|
||||
hoverBorderWidth: 3
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
layout: 'admin'
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,175 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<template v-if="!noCharts">
|
||||
<CCol md="3" sm="6">
|
||||
<CWidgetBrand
|
||||
color="facebook"
|
||||
right-header="89k"
|
||||
right-footer="friends"
|
||||
left-header="459"
|
||||
left-footer="feeds"
|
||||
>
|
||||
<CIcon
|
||||
name="cib-facebook"
|
||||
height="52"
|
||||
class="my-4"
|
||||
/>
|
||||
<CChartLineSimple
|
||||
class="c-chart-brand"
|
||||
background-color="rgba(255,255,255,.1)"
|
||||
:data-points="[65, 59, 84, 84, 51, 55, 40]"
|
||||
label="Friends"
|
||||
labels="months"
|
||||
/>
|
||||
</CWidgetBrand>
|
||||
</CCol>
|
||||
<CCol md="3" sm="6">
|
||||
<CWidgetBrand
|
||||
color="twitter"
|
||||
right-header="973k"
|
||||
right-footer="followers"
|
||||
left-header="1.792"
|
||||
left-footer="tweets"
|
||||
>
|
||||
<CIcon
|
||||
name="cib-twitter"
|
||||
height="52"
|
||||
class="my-4"
|
||||
/>
|
||||
<CChartLineSimple
|
||||
class="c-chart-brand"
|
||||
background-color="rgba(255,255,255,.1)"
|
||||
:data-points="[1, 13, 9, 17, 34, 41, 38]"
|
||||
label="Followers"
|
||||
labels="months"
|
||||
/>
|
||||
</CWidgetBrand>
|
||||
</CCol>
|
||||
<CCol md="3" sm="6">
|
||||
<CWidgetBrand
|
||||
color="linkedin"
|
||||
right-header="500+"
|
||||
right-footer="contracts"
|
||||
left-header="292"
|
||||
left-footer="feeds"
|
||||
>
|
||||
<CIcon
|
||||
name="cib-linkedin"
|
||||
height="52"
|
||||
class="my-4"
|
||||
/>
|
||||
<CChartLineSimple
|
||||
class="c-chart-brand"
|
||||
background-color="rgba(255,255,255,.1)"
|
||||
:data-points="[78, 81, 80, 45, 34, 12, 40]"
|
||||
label="Contracts"
|
||||
labels="months"
|
||||
/>
|
||||
</CWidgetBrand>
|
||||
</CCol>
|
||||
<CCol md="3" sm="6">
|
||||
<CWidgetBrand
|
||||
right-header="12"
|
||||
right-footer="events"
|
||||
left-header="4"
|
||||
left-footer="meetings"
|
||||
color="warning"
|
||||
>
|
||||
<CIcon
|
||||
name="cil-calendar"
|
||||
height="52"
|
||||
class="my-4"
|
||||
/>
|
||||
<CChartLineSimple
|
||||
class="c-chart-brand"
|
||||
background-color="rgba(255,255,255,.1)"
|
||||
:data-points="[35, 23, 56, 22, 97, 23, 64]"
|
||||
label="Followers"
|
||||
labels="months"
|
||||
/>
|
||||
</CWidgetBrand>
|
||||
</CCol>
|
||||
</template>
|
||||
<template v-else>
|
||||
<CCol md="3" sm="6">
|
||||
<CWidgetBrand
|
||||
color="facebook"
|
||||
right-header="89k"
|
||||
right-footer="friends"
|
||||
left-header="459"
|
||||
left-footer="feeds"
|
||||
>
|
||||
<CIcon
|
||||
name="cib-facebook"
|
||||
height="56"
|
||||
class="my-4"
|
||||
/>
|
||||
</CWidgetBrand>
|
||||
</CCol>
|
||||
<CCol md="3" sm="6">
|
||||
<CWidgetBrand
|
||||
color="twitter"
|
||||
right-header="973k"
|
||||
right-footer="followers"
|
||||
left-header="1.792"
|
||||
left-footer="tweets"
|
||||
>
|
||||
<CIcon
|
||||
name="cib-twitter"
|
||||
height="56"
|
||||
class="my-4"
|
||||
/>
|
||||
</CWidgetBrand>
|
||||
</CCol>
|
||||
<CCol md="3" sm="6">
|
||||
<CWidgetBrand
|
||||
color="linkedin"
|
||||
right-header="500+"
|
||||
right-footer="contracts"
|
||||
left-header="292"
|
||||
left-footer="feeds"
|
||||
>
|
||||
<CIcon
|
||||
name="cib-linkedin"
|
||||
height="56"
|
||||
class="my-4"
|
||||
/>
|
||||
</CWidgetBrand>
|
||||
</CCol>
|
||||
<CCol md="3" sm="6">
|
||||
<CWidgetBrand
|
||||
right-header="12"
|
||||
right-footer="events"
|
||||
left-header="4"
|
||||
left-footer="meetings"
|
||||
color="warning"
|
||||
>
|
||||
<CIcon
|
||||
name="cil-calendar"
|
||||
height="56"
|
||||
class="my-4"
|
||||
/>
|
||||
</CWidgetBrand>
|
||||
</CCol>
|
||||
</template>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'WidgetsBrand',
|
||||
props: {
|
||||
noCharts: Boolean
|
||||
},
|
||||
layout: 'admin'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.c-chart-brand {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,136 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol sm="6" lg="3">
|
||||
<CWidgetDropdown color="primary" header="9.823" text="Members online">
|
||||
<template #default>
|
||||
<CDropdown
|
||||
color="transparent p-0"
|
||||
placement="bottom-end"
|
||||
>
|
||||
<template #toggler-content>
|
||||
<CIcon name="cil-settings"/>
|
||||
</template>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here...</CDropdownItem>
|
||||
<CDropdownItem disabled>Disabled action</CDropdownItem>
|
||||
</CDropdown>
|
||||
</template>
|
||||
<template #footer>
|
||||
<CChartLineSimple
|
||||
pointed
|
||||
class="mt-3 mx-3"
|
||||
style="height:70px"
|
||||
:data-points="[65, 59, 84, 84, 51, 55, 40]"
|
||||
point-hover-background-color="primary"
|
||||
label="Members"
|
||||
labels="months"
|
||||
/>
|
||||
</template>
|
||||
</CWidgetDropdown>
|
||||
</CCol>
|
||||
<CCol sm="6" lg="3">
|
||||
<CWidgetDropdown color="info" header="9.823" text="Members online">
|
||||
<template #default>
|
||||
<CDropdown
|
||||
color="transparent p-0"
|
||||
placement="bottom-end"
|
||||
:caret="false"
|
||||
>
|
||||
<template #toggler-content>
|
||||
<CIcon name="cil-location-pin"/>
|
||||
</template>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here...</CDropdownItem>
|
||||
<CDropdownItem disabled>Disabled action</CDropdownItem>
|
||||
</CDropdown>
|
||||
</template>
|
||||
<template #footer>
|
||||
<CChartLineSimple
|
||||
pointed
|
||||
class="mt-3 mx-3"
|
||||
style="height:70px"
|
||||
:data-points="[1, 18, 9, 17, 34, 22, 11]"
|
||||
point-hover-background-color="info"
|
||||
:options="{ elements: { line: { tension: 0.00001 }}}"
|
||||
label="Members"
|
||||
labels="months"
|
||||
/>
|
||||
</template>
|
||||
</CWidgetDropdown>
|
||||
</CCol>
|
||||
<CCol sm="6" lg="3">
|
||||
<CWidgetDropdown
|
||||
color="warning"
|
||||
header="9.823"
|
||||
text="Members online"
|
||||
>
|
||||
<template #default>
|
||||
<CDropdown
|
||||
color="transparent p-0"
|
||||
placement="bottom-end"
|
||||
>
|
||||
<template #toggler-content>
|
||||
<CIcon name="cil-settings"/>
|
||||
</template>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here...</CDropdownItem>
|
||||
<CDropdownItem disabled>Disabled action</CDropdownItem>
|
||||
</CDropdown>
|
||||
</template>
|
||||
<template #footer>
|
||||
<CChartLineSimple
|
||||
class="mt-3"
|
||||
style="height:70px"
|
||||
background-color="rgba(255,255,255,.2)"
|
||||
:data-points="[78, 81, 80, 45, 34, 12, 40]"
|
||||
:options="{ elements: { line: { borderWidth: 2.5 }}}"
|
||||
point-hover-background-color="warning"
|
||||
label="Members"
|
||||
labels="months"
|
||||
/>
|
||||
</template>
|
||||
</CWidgetDropdown>
|
||||
</CCol>
|
||||
<CCol sm="6" lg="3">
|
||||
<CWidgetDropdown
|
||||
color="danger"
|
||||
header="9.823"
|
||||
text="Members online"
|
||||
>
|
||||
<template #default>
|
||||
<CDropdown
|
||||
color="transparent p-0"
|
||||
placement="bottom-end"
|
||||
>
|
||||
<template #toggler-content>
|
||||
<CIcon name="cil-settings"/>
|
||||
</template>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here...</CDropdownItem>
|
||||
<CDropdownItem disabled>Disabled action</CDropdownItem>
|
||||
</CDropdown>
|
||||
</template>
|
||||
<template #footer>
|
||||
<CChartBarSimple
|
||||
class="mt-3 mx-3"
|
||||
style="height:70px"
|
||||
background-color="rgb(250, 152, 152)"
|
||||
label="Members"
|
||||
labels="months"
|
||||
/>
|
||||
</template>
|
||||
</CWidgetDropdown>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'WidgetsDropdown',
|
||||
layout: 'admin'
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user