refactor: update example views
This commit is contained in:
Łukasz Holeczek
+115
-136
@@ -2,15 +2,15 @@
|
||||
<div>
|
||||
<WidgetsStatsA />
|
||||
<CRow>
|
||||
<CCol md="12">
|
||||
<CCol :md="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardBody>
|
||||
<CRow>
|
||||
<CCol sm="5">
|
||||
<CCol :sm="5">
|
||||
<h4 id="traffic" class="card-title mb-0">Traffic</h4>
|
||||
<div class="small text-medium-emphasis">January 2021</div>
|
||||
</CCol>
|
||||
<CCol sm="7" class="d-none d-md-block">
|
||||
<CCol :sm="7" class="d-none d-md-block">
|
||||
<CButton color="primary" class="float-end">
|
||||
<CIcon icon="cil-cloud-download" />
|
||||
</CButton>
|
||||
@@ -91,14 +91,14 @@
|
||||
</CRow>
|
||||
<WidgetsStatsD />
|
||||
<CRow>
|
||||
<CCol md="12">
|
||||
<CCol :md="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader> Traffic & Sales </CCardHeader>
|
||||
<CCardBody>
|
||||
<CRow>
|
||||
<CCol sm="12" lg="6">
|
||||
<CCol :sm="12" :lg="6">
|
||||
<CRow>
|
||||
<CCol sm="6">
|
||||
<CCol :sm="6">
|
||||
<div
|
||||
class="
|
||||
border-start border-start-4 border-start-info
|
||||
@@ -111,7 +111,7 @@
|
||||
<div class="fs-5 fw-semibold">9,123</div>
|
||||
</div>
|
||||
</CCol>
|
||||
<CCol sm="6">
|
||||
<CCol :sm="6">
|
||||
<div
|
||||
class="
|
||||
border-start border-start-4 border-start-danger
|
||||
@@ -192,9 +192,9 @@
|
||||
</div>
|
||||
</div>
|
||||
</CCol>
|
||||
<CCol sm="12" lg="6">
|
||||
<CCol :sm="12" :lg="6">
|
||||
<CRow>
|
||||
<CCol sm="6">
|
||||
<CCol :sm="6">
|
||||
<div
|
||||
class="
|
||||
border-start border-start-4 border-start-warning
|
||||
@@ -207,7 +207,7 @@
|
||||
<div class="fs-5 fw-semibold">78,623</div>
|
||||
</div>
|
||||
</CCol>
|
||||
<CCol sm="6">
|
||||
<CCol :sm="6">
|
||||
<div
|
||||
class="
|
||||
border-start border-start-4 border-start-success
|
||||
@@ -341,7 +341,7 @@
|
||||
<CTableDataCell>
|
||||
<div>{{ item.user.name }}</div>
|
||||
<div class="small text-medium-emphasis">
|
||||
<span>{{ item.user.new ? "New" : "Recurring" }}</span> |
|
||||
<span>{{ item.user.new ? 'New' : 'Recurring' }}</span> |
|
||||
{{ item.user.registered }}
|
||||
</div>
|
||||
</CTableDataCell>
|
||||
@@ -388,139 +388,118 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import avatar1 from "./../assets/images/avatars/1.jpg";
|
||||
import avatar2 from "./../assets/images/avatars/2.jpg";
|
||||
import avatar3 from "./../assets/images/avatars/3.jpg";
|
||||
import avatar4 from "./../assets/images/avatars/4.jpg";
|
||||
import avatar5 from "./../assets/images/avatars/5.jpg";
|
||||
import avatar6 from "./../assets/images/avatars/6.jpg";
|
||||
import MainChartExample from "./charts/MainChartExample";
|
||||
import avatar1 from './../assets/images/avatars/1.jpg'
|
||||
import avatar2 from './../assets/images/avatars/2.jpg'
|
||||
import avatar3 from './../assets/images/avatars/3.jpg'
|
||||
import avatar4 from './../assets/images/avatars/4.jpg'
|
||||
import avatar5 from './../assets/images/avatars/5.jpg'
|
||||
import avatar6 from './../assets/images/avatars/6.jpg'
|
||||
import MainChartExample from './charts/MainChartExample'
|
||||
import WidgetsStatsA from './widgets/WidgetsStatsTypeA.vue'
|
||||
import WidgetsStatsD from './widgets/WidgetsStatsTypeD.vue'
|
||||
|
||||
export default {
|
||||
name: "Dashboard",
|
||||
name: 'Dashboard',
|
||||
components: {
|
||||
MainChartExample,
|
||||
WidgetsStatsA,
|
||||
WidgetsStatsD,
|
||||
},
|
||||
data() {
|
||||
setup() {
|
||||
const tableItems = [
|
||||
{
|
||||
avatar: { src: avatar1, status: 'success' },
|
||||
user: {
|
||||
name: 'Yiorgos Avraamu',
|
||||
new: true,
|
||||
registered: 'Jan 1, 2021',
|
||||
},
|
||||
country: { name: 'USA', flag: 'cif-us' },
|
||||
usage: {
|
||||
value: 50,
|
||||
period: 'Jun 11, 2021 - Jul 10, 2021',
|
||||
color: 'success',
|
||||
},
|
||||
payment: { name: 'Mastercard', icon: 'cib-cc-mastercard' },
|
||||
activity: '10 sec ago',
|
||||
},
|
||||
{
|
||||
avatar: { src: avatar2, status: 'danger' },
|
||||
user: {
|
||||
name: 'Avram Tarasios',
|
||||
new: false,
|
||||
registered: 'Jan 1, 2021',
|
||||
},
|
||||
country: { name: 'Brazil', flag: 'cif-br' },
|
||||
usage: {
|
||||
value: 22,
|
||||
period: 'Jun 11, 2021 - Jul 10, 2021',
|
||||
color: 'info',
|
||||
},
|
||||
payment: { name: 'Visa', icon: 'cib-cc-visa' },
|
||||
activity: '5 minutes ago',
|
||||
},
|
||||
{
|
||||
avatar: { src: avatar3, status: 'warning' },
|
||||
user: { name: 'Quintin Ed', new: true, registered: 'Jan 1, 2021' },
|
||||
country: { name: 'India', flag: 'cif-in' },
|
||||
usage: {
|
||||
value: 74,
|
||||
period: 'Jun 11, 2021 - Jul 10, 2021',
|
||||
color: 'warning',
|
||||
},
|
||||
payment: { name: 'Stripe', icon: 'cib-cc-stripe' },
|
||||
activity: '1 hour ago',
|
||||
},
|
||||
{
|
||||
avatar: { src: avatar4, status: 'secondary' },
|
||||
user: { name: 'Enéas Kwadwo', new: true, registered: 'Jan 1, 2021' },
|
||||
country: { name: 'France', flag: 'cif-fr' },
|
||||
usage: {
|
||||
value: 98,
|
||||
period: 'Jun 11, 2021 - Jul 10, 2021',
|
||||
color: 'danger',
|
||||
},
|
||||
payment: { name: 'PayPal', icon: 'cib-cc-paypal' },
|
||||
activity: 'Last month',
|
||||
},
|
||||
{
|
||||
avatar: { src: avatar5, status: 'success' },
|
||||
user: {
|
||||
name: 'Agapetus Tadeáš',
|
||||
new: true,
|
||||
registered: 'Jan 1, 2021',
|
||||
},
|
||||
country: { name: 'Spain', flag: 'cif-es' },
|
||||
usage: {
|
||||
value: 22,
|
||||
period: 'Jun 11, 2021 - Jul 10, 2021',
|
||||
color: 'primary',
|
||||
},
|
||||
payment: { name: 'Google Wallet', icon: 'cib-cc-apple-pay' },
|
||||
activity: 'Last week',
|
||||
},
|
||||
{
|
||||
avatar: { src: avatar6, status: 'danger' },
|
||||
user: {
|
||||
name: 'Friderik Dávid',
|
||||
new: true,
|
||||
registered: 'Jan 1, 2021',
|
||||
},
|
||||
country: { name: 'Poland', flag: 'cif-pl' },
|
||||
usage: {
|
||||
value: 43,
|
||||
period: 'Jun 11, 2021 - Jul 10, 2021',
|
||||
color: 'success',
|
||||
},
|
||||
payment: { name: 'Amex', icon: 'cib-cc-amex' },
|
||||
activity: 'Last week',
|
||||
},
|
||||
]
|
||||
|
||||
return {
|
||||
selected: "Month",
|
||||
tableItems: [
|
||||
{
|
||||
avatar: { src: avatar1, status: "success" },
|
||||
user: {
|
||||
name: "Yiorgos Avraamu",
|
||||
new: true,
|
||||
registered: "Jan 1, 2021",
|
||||
},
|
||||
country: { name: "USA", flag: "cif-us" },
|
||||
usage: {
|
||||
value: 50,
|
||||
period: "Jun 11, 2021 - Jul 10, 2021",
|
||||
color: "success",
|
||||
},
|
||||
payment: { name: "Mastercard", icon: "cib-cc-mastercard" },
|
||||
activity: "10 sec ago",
|
||||
},
|
||||
{
|
||||
avatar: { src: avatar2, status: "danger" },
|
||||
user: {
|
||||
name: "Avram Tarasios",
|
||||
new: false,
|
||||
registered: "Jan 1, 2021",
|
||||
},
|
||||
country: { name: "Brazil", flag: "cif-br" },
|
||||
usage: {
|
||||
value: 22,
|
||||
period: "Jun 11, 2021 - Jul 10, 2021",
|
||||
color: "info",
|
||||
},
|
||||
payment: { name: "Visa", icon: "cib-cc-visa" },
|
||||
activity: "5 minutes ago",
|
||||
},
|
||||
{
|
||||
avatar: { src: avatar3, status: "warning" },
|
||||
user: { name: "Quintin Ed", new: true, registered: "Jan 1, 2021" },
|
||||
country: { name: "India", flag: "cif-in" },
|
||||
usage: {
|
||||
value: 74,
|
||||
period: "Jun 11, 2021 - Jul 10, 2021",
|
||||
color: "warning",
|
||||
},
|
||||
payment: { name: "Stripe", icon: "cib-cc-stripe" },
|
||||
activity: "1 hour ago",
|
||||
},
|
||||
{
|
||||
avatar: { src: avatar4, status: "secondary" },
|
||||
user: { name: "Enéas Kwadwo", new: true, registered: "Jan 1, 2021" },
|
||||
country: { name: "France", flag: "cif-fr" },
|
||||
usage: {
|
||||
value: 98,
|
||||
period: "Jun 11, 2021 - Jul 10, 2021",
|
||||
color: "danger",
|
||||
},
|
||||
payment: { name: "PayPal", icon: "cib-cc-paypal" },
|
||||
activity: "Last month",
|
||||
},
|
||||
{
|
||||
avatar: { src: avatar5, status: "success" },
|
||||
user: {
|
||||
name: "Agapetus Tadeáš",
|
||||
new: true,
|
||||
registered: "Jan 1, 2021",
|
||||
},
|
||||
country: { name: "Spain", flag: "cif-es" },
|
||||
usage: {
|
||||
value: 22,
|
||||
period: "Jun 11, 2021 - Jul 10, 2021",
|
||||
color: "primary",
|
||||
},
|
||||
payment: { name: "Google Wallet", icon: "cib-cc-apple-pay" },
|
||||
activity: "Last week",
|
||||
},
|
||||
{
|
||||
avatar: { src: avatar6, status: "danger" },
|
||||
user: {
|
||||
name: "Friderik Dávid",
|
||||
new: true,
|
||||
registered: "Jan 1, 2021",
|
||||
},
|
||||
country: { name: "Poland", flag: "cif-pl" },
|
||||
usage: {
|
||||
value: 43,
|
||||
period: "Jun 11, 2021 - Jul 10, 2021",
|
||||
color: "success",
|
||||
},
|
||||
payment: { name: "Amex", icon: "cib-cc-amex" },
|
||||
activity: "Last week",
|
||||
},
|
||||
],
|
||||
tableFields: [
|
||||
{ key: "avatar", label: "", _classes: "text-center" },
|
||||
{ key: "user" },
|
||||
{ key: "country", _classes: "text-center" },
|
||||
{ key: "usage" },
|
||||
{ key: "payment", label: "Payment method", _classes: "text-center" },
|
||||
{ key: "activity" },
|
||||
],
|
||||
};
|
||||
tableItems,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
color(value) {
|
||||
let $color;
|
||||
if (value <= 25) {
|
||||
$color = "info";
|
||||
} else if (value > 25 && value <= 50) {
|
||||
$color = "success";
|
||||
} else if (value > 50 && value <= 75) {
|
||||
$color = "warning";
|
||||
} else if (value > 75 && value <= 100) {
|
||||
$color = "danger";
|
||||
}
|
||||
return $color;
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user