'删除多余页面
This commit is contained in:
fujiao
parent
0b337ca3e2
commit
d4fa831510
|
|
@ -4,48 +4,69 @@ export const menuItems = [
|
|||
label: 'menuitems.home.text',
|
||||
icon: 'bx-home-circle',
|
||||
link: '/',
|
||||
// subItems: [
|
||||
// {
|
||||
// id: 2,
|
||||
// label: 'menuitems.dashboards.list.default',
|
||||
// parentId: 1
|
||||
// },
|
||||
// {
|
||||
// id: 3,
|
||||
// label: 'menuitems.dashboards.list.saas',
|
||||
// link: '/dashboard/saas',
|
||||
// parentId: 1
|
||||
// },
|
||||
// {
|
||||
// id: 4,
|
||||
// label: 'menuitems.dashboards.list.crypto',
|
||||
// link: '/dashboard/crypto',
|
||||
// parentId: 1
|
||||
// },
|
||||
// {
|
||||
// id: 5,
|
||||
// label: 'menuitems.dashboards.list.blog',
|
||||
// link: '/dashboard/blog',
|
||||
// parentId: 1
|
||||
// },
|
||||
// ]
|
||||
},
|
||||
// {
|
||||
// id: 81,
|
||||
// label: 'menuitems.visa.text',
|
||||
// icon: "bx-tone",
|
||||
// link: '/tables/basic',
|
||||
// // subItems: [
|
||||
// // {
|
||||
// // id: 82,
|
||||
// // label: 'menuitems.visa.list.basic',
|
||||
// // link: '/tables/basic',
|
||||
// // parentId: 81
|
||||
// // },
|
||||
// // ]
|
||||
// },
|
||||
{
|
||||
id: 2,
|
||||
label: 'Add Your Case',
|
||||
icon: "bx-tone",
|
||||
link: '/visa/add',
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
label: 'Monthly Case',
|
||||
icon: 'bx-tone',
|
||||
isUiElement: true,
|
||||
subItems: [
|
||||
{
|
||||
id: 7,
|
||||
label: '2022-10',
|
||||
link: '/home/list?month=2022-10',
|
||||
parentId: 6
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
label: '2022-09',
|
||||
link: '/home/list?month=2022-09',
|
||||
parentId: 6
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
label: '2022-08',
|
||||
link: '/home/list?month=2022-08',
|
||||
parentId: 6
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 66,
|
||||
label: "Complete Case",
|
||||
icon: "bx-detail",
|
||||
subItems: [
|
||||
{
|
||||
id: 67,
|
||||
label: "Last 7 Days' Complete Cases",
|
||||
link: '/home/list?month=2022-10',
|
||||
// link: '/home/list?days=7',
|
||||
parentId: 66
|
||||
},
|
||||
{
|
||||
id: 68,
|
||||
label: "Last 30 Days' Complete Cases",
|
||||
link: '/home/list?month=2022-09',
|
||||
// link: '/home/list?days=30',
|
||||
parentId: 66
|
||||
},
|
||||
{
|
||||
id: 69,
|
||||
label: "Last 90 Days' Complete Cases",
|
||||
link: '/home/list?month=2022-08',
|
||||
// link: '/home/list?days=90',
|
||||
parentId: 66
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 70,
|
||||
label: "menuitems.blog.text",
|
||||
icon: "bx-detail",
|
||||
link: '/blog/list',
|
||||
|
|
|
|||
|
|
@ -194,4 +194,9 @@ export default {
|
|||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
<style scoped>
|
||||
.topnav{
|
||||
margin-top: 100px !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -185,15 +185,15 @@ export default {
|
|||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex save-ad">预留广告位</div>
|
||||
<div class="d-flex">
|
||||
<div class="font-size-16 header-item" style="line-height:70px; margin-right:2rem; cursor: pointer;text-decoration:underline;" @click="goLink()">{{$t('navbar.link.text')}}</div>
|
||||
<select v-model="$i18n.locale" class="lang-dropdown border-0">
|
||||
<option v-for="(locale, i) in languages" :key="`locale-${i}`" :value="locale.language">
|
||||
{{ locale.title }}
|
||||
</option>
|
||||
</select>
|
||||
<div class="dropdown d-none d-lg-inline-block ms-1">
|
||||
<!-- <select v-model="$i18n.locale" class="lang-dropdown border-0">
|
||||
<option v-for="(locale, i) in languages" :key="`locale-${i}`" :value="locale.language">
|
||||
{{ locale.title }}
|
||||
</option>
|
||||
</select> -->
|
||||
<!-- <div class="dropdown d-none d-lg-inline-block ms-1">
|
||||
<button
|
||||
type="button"
|
||||
class="btn header-item noti-icon"
|
||||
|
|
@ -201,7 +201,7 @@ export default {
|
|||
>
|
||||
<i class="bx bx-fullscreen"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<b-dropdown right variant="black" toggle-class="header-item">
|
||||
<template v-slot:button-content>
|
||||
|
|
@ -271,3 +271,18 @@ export default {
|
|||
</div>
|
||||
</header>
|
||||
</template>
|
||||
<style scoped>
|
||||
.navbar-header{
|
||||
max-width: 100% !important;
|
||||
height: 100px;
|
||||
}
|
||||
.save-ad{
|
||||
flex: 1 1 ;
|
||||
font-size: 35px;
|
||||
color: #ffffff;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -21,8 +21,7 @@ export default {
|
|||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="page-title-box d-flex align-items-center justify-content-between">
|
||||
<h4 class="mb-0 font-size-18">{{ title }}</h4>
|
||||
|
||||
<!-- <h4 class="mb-0 font-size-18">{{ title }}</h4> -->
|
||||
<div class="page-title-right">
|
||||
<b-breadcrumb :items="items" class="m-0"></b-breadcrumb>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -8,9 +8,21 @@ export default {
|
|||
Loader,
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
return {
|
||||
userName:''
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
const userInfo = this.$store.getters['auth/getCurrentUser'];
|
||||
console.log('userInfo:',userInfo);
|
||||
this.userName = userInfo?userInfo.userName:''
|
||||
},
|
||||
methods:{
|
||||
linkAdd(){
|
||||
// this.$emit('goAdd')
|
||||
this.$router.push('/visa/add')
|
||||
}
|
||||
},
|
||||
mounted() {},
|
||||
props: {
|
||||
updating: {
|
||||
type: Boolean,
|
||||
|
|
@ -36,7 +48,7 @@ export default {
|
|||
</div>
|
||||
<div class="card-body pt-0">
|
||||
<div class="row">
|
||||
<div class="col-sm-4">
|
||||
<div class="col-sm-3">
|
||||
<div class="avatar-md profile-user-wid mb-4">
|
||||
<img
|
||||
src="@/assets/images/users/avatar-1.jpg"
|
||||
|
|
@ -44,26 +56,23 @@ export default {
|
|||
class="img-thumbnail rounded-circle"
|
||||
/>
|
||||
</div>
|
||||
<h5 class="font-size-15 text-truncate">Henry Price</h5>
|
||||
<p class="text-muted mb-0 text-truncate">UI/UX Designer</p>
|
||||
<h5 class="font-size-15 text-truncate">{{userName}}</h5>
|
||||
<!-- <p class="text-muted mb-0 text-truncate">UI/UX Designer</p> -->
|
||||
</div>
|
||||
|
||||
<div class="col-sm-8">
|
||||
<div class="col-sm-9">
|
||||
<div class="pt-4">
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<h5 class="font-size-15">125</h5>
|
||||
<p class="text-muted mb-0">Projects</p>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<h5 class="font-size-15">$1245</h5>
|
||||
<p class="text-muted mb-0">Revenue</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<a href class="btn btn-primary btn-sm">
|
||||
View Profile
|
||||
<i class="mdi mdi-arrow-right ms-1"></i>
|
||||
<template v-if="!userName">
|
||||
<a href class="btn btn-primary btn-sm">
|
||||
Login
|
||||
</a>
|
||||
<a href class="btn btn-primary btn-sm ml20">
|
||||
Register
|
||||
</a>
|
||||
</template>
|
||||
<a href="javascript: void(0);" @click="linkAdd()" class="btn btn-primary btn-sm ml20">
|
||||
+Add Your Case
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -75,3 +84,8 @@ export default {
|
|||
<!-- end card -->
|
||||
</Loader>
|
||||
</template>
|
||||
<style scoped>
|
||||
.ml20{
|
||||
margin-left: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,42 @@
|
|||
<script>
|
||||
/**
|
||||
* Stat component -- specify the widget icon, title and value.
|
||||
*/
|
||||
export default {
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
list: {
|
||||
type: Array,
|
||||
default: ()=>[]
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="card mini-stats-wid">
|
||||
<div class="card-body">
|
||||
<div class="d-flex">
|
||||
<div class="flex-grow-1">
|
||||
<h2 class="fw-medium mb-2">{{title}}</h2>
|
||||
<!-- <h4 class="mb-0">{{value}}</h4> -->
|
||||
</div>
|
||||
|
||||
<!-- <span class="avatar-title">
|
||||
<i :class="`${icon} font-size-24`"></i>
|
||||
</span> -->
|
||||
<div class="flex-grow-1">
|
||||
<div class="row" v-for="(item,idx) in list" :key="idx">
|
||||
<h4 class="fw-medium mb-2 col-xl-10" style="text-align:right;">{{item.name}}：</h4>
|
||||
<h4 class="mb-0 col-xl-2">{{item.value}}</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end card-body -->
|
||||
</div>
|
||||
<!-- end card -->
|
||||
</template>
|
||||
|
|
@ -665,7 +665,7 @@ body[data-sidebar="colored"].vertical-collpsed .vertical-menu #sidebar-menu ul l
|
|||
padding: 0 calc(24px / 2);
|
||||
-webkit-box-shadow: 0 0.75rem 1.5rem rgba(18, 38, 63, 0.03);
|
||||
box-shadow: 0 0.75rem 1.5rem rgba(18, 38, 63, 0.03);
|
||||
margin-top: 70px;
|
||||
margin-top: 100px;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
left: 0;
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ const service = axios.create({
|
|||
}
|
||||
})
|
||||
|
||||
const needTokenURL = ['/api/visa/AddVisaCase','/visa/update','/auth/user/password/change']
|
||||
const needTokenURL = ['/api/visa/AddVisaCase','/api/visa/UpdateVisaCase','/auth/user/password/change']
|
||||
// 添加请求拦截器
|
||||
service.interceptors.request.use(
|
||||
function (config) {
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
import HorizontalTopbar from "@/components/horizontal-topbar";
|
||||
import HorizontalNav from "@/components/horizontal-nav";
|
||||
import RightBar from "@/components/right-bar";
|
||||
// import Footer from "@/components/footer";
|
||||
import Footer from "@/components/footer";
|
||||
|
||||
import { layoutComputed } from "@/state/helpers";
|
||||
|
||||
|
|
@ -14,7 +14,7 @@ export default {
|
|||
components: {
|
||||
HorizontalTopbar,
|
||||
HorizontalNav,
|
||||
// Footer,
|
||||
Footer,
|
||||
RightBar,
|
||||
},
|
||||
data() {
|
||||
|
|
@ -77,14 +77,16 @@ export default {
|
|||
<!-- Start right Content here -->
|
||||
<!-- ============================================================== -->
|
||||
<div class="main-content">
|
||||
<div class="page-content">
|
||||
<div class="page-content" style="display:flex;">
|
||||
<div class="content-ad">预留广告位</div>
|
||||
<div class="container-fluid">
|
||||
<slot />
|
||||
</div>
|
||||
<div class="content-ad">预留广告位</div>
|
||||
<!-- container-fluid -->
|
||||
</div>
|
||||
<!-- End Page-content -->
|
||||
<!-- <Footer /> -->
|
||||
<Footer />
|
||||
</div>
|
||||
<!-- end main content-->
|
||||
</div>
|
||||
|
|
@ -92,3 +94,21 @@ export default {
|
|||
<RightBar />
|
||||
</div>
|
||||
</template>
|
||||
<style scoped>
|
||||
.page-content{
|
||||
margin-top: 100px !important;
|
||||
}
|
||||
.container-fluid{
|
||||
max-width: 70% !important;
|
||||
}
|
||||
.content-ad{
|
||||
width: 15%;
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
/* writing-mode : lr-tb; */
|
||||
writing-mode: tb-rl;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -7,9 +7,16 @@ export default [
|
|||
meta: {
|
||||
authRequired: true,
|
||||
},
|
||||
// component: () => import("./views/dashboards/default"),
|
||||
component: () => import("./views/home/index"),
|
||||
},
|
||||
{
|
||||
path: "/default",
|
||||
name: "idnex",
|
||||
meta: {
|
||||
authRequired: true,
|
||||
},
|
||||
component: () => import("./views/dashboards/default"),
|
||||
},
|
||||
{
|
||||
path: "/login",
|
||||
name: "login",
|
||||
|
|
@ -498,12 +505,12 @@ export default [
|
|||
// meta: { authRequired: true },
|
||||
// component: () => import("./views/maps/leaflet/index"),
|
||||
// },
|
||||
{
|
||||
path: "/tables/basic",
|
||||
name: "Basic Tables",
|
||||
meta: { authRequired: true },
|
||||
component: () => import("./views/tables/basictable"),
|
||||
},
|
||||
// {
|
||||
// path: "/tables/basic",
|
||||
// name: "Basic Tables",
|
||||
// meta: { authRequired: true },
|
||||
// component: () => import("./views/tables/basictable"),
|
||||
// },
|
||||
// {
|
||||
// path: "/form/advanced",
|
||||
// name: "Form Advanced",
|
||||
|
|
@ -654,42 +661,42 @@ export default [
|
|||
// meta: { authRequired: true },
|
||||
// component: () => import("./views/tasks/task-create"),
|
||||
// },
|
||||
{
|
||||
path: "/auth/login-1",
|
||||
name: "Login sample",
|
||||
meta: { authRequired: true },
|
||||
component: () => import("./views/sample-pages/login-sample"),
|
||||
},
|
||||
// {
|
||||
// path: "/auth/login-1",
|
||||
// name: "Login sample",
|
||||
// meta: { authRequired: true },
|
||||
// component: () => import("./views/sample-pages/login-sample"),
|
||||
// },
|
||||
// {
|
||||
// path: "/auth/login-2",
|
||||
// name: "Login-2-sample",
|
||||
// meta: { authRequired: true },
|
||||
// component: () => import("./views/sample-pages/login-2"),
|
||||
// },
|
||||
{
|
||||
path: "/auth/register-1",
|
||||
name: "Register sample",
|
||||
meta: { authRequired: true },
|
||||
component: () => import("./views/sample-pages/register-sample"),
|
||||
},
|
||||
// {
|
||||
// path: "/auth/register-1",
|
||||
// name: "Register sample",
|
||||
// meta: { authRequired: true },
|
||||
// component: () => import("./views/sample-pages/register-sample"),
|
||||
// },
|
||||
// {
|
||||
// path: "/auth/register-2",
|
||||
// name: "Register-2",
|
||||
// meta: { authRequired: true },
|
||||
// component: () => import("./views/sample-pages/register-2"),
|
||||
// },
|
||||
{
|
||||
path: "/auth/recoverpwd",
|
||||
name: "Recover pwd",
|
||||
meta: { authRequired: true },
|
||||
component: () => import("./views/sample-pages/recoverpw-sample"),
|
||||
},
|
||||
{
|
||||
path: "/auth/recoverpwd-2",
|
||||
name: "Recover pwd-2",
|
||||
meta: { authRequired: true },
|
||||
component: () => import("./views/sample-pages/recoverpwd-2"),
|
||||
},
|
||||
// {
|
||||
// path: "/auth/recoverpwd",
|
||||
// name: "Recover pwd",
|
||||
// meta: { authRequired: true },
|
||||
// component: () => import("./views/sample-pages/recoverpw-sample"),
|
||||
// },
|
||||
// {
|
||||
// path: "/auth/recoverpwd-2",
|
||||
// name: "Recover pwd-2",
|
||||
// meta: { authRequired: true },
|
||||
// component: () => import("./views/sample-pages/recoverpwd-2"),
|
||||
// },
|
||||
// {
|
||||
// path: "/auth/lock-screen",
|
||||
// name: "Lock screen",
|
||||
|
|
@ -702,36 +709,36 @@ export default [
|
|||
// meta: { authRequired: true },
|
||||
// component: () => import("./views/sample-pages/lockscreen-2"),
|
||||
// },
|
||||
{
|
||||
path: "/auth/confirm-mail",
|
||||
name: "confirm-mail",
|
||||
meta: { authRequired: true },
|
||||
component: () => import("./views/sample-pages/confirm-mail"),
|
||||
},
|
||||
// {
|
||||
// path: "/auth/confirm-mail",
|
||||
// name: "confirm-mail",
|
||||
// meta: { authRequired: true },
|
||||
// component: () => import("./views/sample-pages/confirm-mail"),
|
||||
// },
|
||||
// {
|
||||
// path: "/auth/confirm-mail-2",
|
||||
// name: "confirm-mail-2",
|
||||
// meta: { authRequired: true },
|
||||
// component: () => import("./views/sample-pages/confirm-mail-2"),
|
||||
// },
|
||||
{
|
||||
path: "/auth/email-verification",
|
||||
name: "email-verification",
|
||||
meta: { authRequired: true },
|
||||
component: () => import("./views/sample-pages/email-verification"),
|
||||
},
|
||||
// {
|
||||
// path: "/auth/email-verification",
|
||||
// name: "email-verification",
|
||||
// meta: { authRequired: true },
|
||||
// component: () => import("./views/sample-pages/email-verification"),
|
||||
// },
|
||||
// {
|
||||
// path: "/auth/email-verification-2",
|
||||
// name: "email-verification-2",
|
||||
// meta: { authRequired: true },
|
||||
// component: () => import("./views/sample-pages/email-verification-2"),
|
||||
// },
|
||||
{
|
||||
path: "/auth/two-step-verification",
|
||||
name: "two-step-verification",
|
||||
meta: { authRequired: true },
|
||||
component: () => import("./views/sample-pages/two-step-verification"),
|
||||
},
|
||||
// {
|
||||
// path: "/auth/two-step-verification",
|
||||
// name: "two-step-verification",
|
||||
// meta: { authRequired: true },
|
||||
// component: () => import("./views/sample-pages/two-step-verification"),
|
||||
// },
|
||||
// {
|
||||
// path: "/auth/two-step-verification-2",
|
||||
// name: "two-step-verification-2",
|
||||
|
|
|
|||
|
|
@ -1,365 +0,0 @@
|
|||
<script>
|
||||
import FullCalendar from "@fullcalendar/vue3";
|
||||
import dayGridPlugin from "@fullcalendar/daygrid";
|
||||
import timeGridPlugin from "@fullcalendar/timegrid";
|
||||
import interactionPlugin from "@fullcalendar/interaction";
|
||||
import bootstrapPlugin from "@fullcalendar/bootstrap";
|
||||
import listPlugin from "@fullcalendar/list";
|
||||
|
||||
import { required, helpers } from "@vuelidate/validators";
|
||||
import useVuelidate from "@vuelidate/core";
|
||||
|
||||
import Swal from "sweetalert2";
|
||||
|
||||
import Layout from "../../layouts/main";
|
||||
import PageHeader from "@/components/page-header";
|
||||
import appConfig from "@/app.config";
|
||||
|
||||
import { calendarEvents, categories } from "./data-calendar";
|
||||
|
||||
/**
|
||||
* Calendar component
|
||||
*/
|
||||
export default {
|
||||
setup() {
|
||||
return { v$: useVuelidate() };
|
||||
},
|
||||
page: {
|
||||
title: "Calendar",
|
||||
meta: [{ name: "description", content: appConfig.description }],
|
||||
},
|
||||
components: {
|
||||
FullCalendar,
|
||||
Layout,
|
||||
PageHeader,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
title: "Calendar",
|
||||
items: [
|
||||
{
|
||||
text: "Skote",
|
||||
},
|
||||
{
|
||||
text: "Calendar",
|
||||
active: true,
|
||||
},
|
||||
],
|
||||
calendarEvents: calendarEvents,
|
||||
calendarOptions: {
|
||||
headerToolbar: {
|
||||
left: "prev,next today",
|
||||
center: "title",
|
||||
right: "dayGridMonth,timeGridWeek,timeGridDay,listWeek",
|
||||
},
|
||||
plugins: [
|
||||
dayGridPlugin,
|
||||
timeGridPlugin,
|
||||
interactionPlugin,
|
||||
bootstrapPlugin,
|
||||
listPlugin,
|
||||
],
|
||||
initialView: "dayGridMonth",
|
||||
themeSystem: "bootstrap",
|
||||
initialEvents: calendarEvents,
|
||||
editable: true,
|
||||
droppable: true,
|
||||
eventResizableFromStart: true,
|
||||
dateClick: this.dateClicked,
|
||||
eventClick: this.editEvent,
|
||||
eventsSet: this.handleEvents,
|
||||
weekends: true,
|
||||
selectable: true,
|
||||
selectMirror: true,
|
||||
dayMaxEvents: true,
|
||||
},
|
||||
currentEvents: [],
|
||||
showModal: false,
|
||||
eventModal: false,
|
||||
categories: categories,
|
||||
submitted: false,
|
||||
submit: false,
|
||||
newEventData: {},
|
||||
edit: {},
|
||||
deleteId: {},
|
||||
event: {
|
||||
title: "",
|
||||
category: "",
|
||||
},
|
||||
editevent: {
|
||||
editTitle: "",
|
||||
editcategory: "",
|
||||
},
|
||||
};
|
||||
},
|
||||
validations: {
|
||||
event: {
|
||||
title: {
|
||||
required: helpers.withMessage("Title is required", required),
|
||||
},
|
||||
category: {
|
||||
required: helpers.withMessage("Category is required", required),
|
||||
},
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* Modal form submit
|
||||
*/
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
handleSubmit(e) {
|
||||
this.submitted = true;
|
||||
|
||||
// stop here if form is invalid
|
||||
this.v$.$touch();
|
||||
if (this.v$.$invalid) {
|
||||
return;
|
||||
} else {
|
||||
const title = this.event.title;
|
||||
const category = this.event.category;
|
||||
let calendarApi = this.newEventData.view.calendar;
|
||||
|
||||
this.currentEvents = calendarApi.addEvent({
|
||||
id: this.newEventData.length + 1,
|
||||
title,
|
||||
start: this.newEventData.date,
|
||||
end: this.newEventData.date,
|
||||
classNames: [category],
|
||||
});
|
||||
this.successmsg();
|
||||
this.showModal = false;
|
||||
this.newEventData = {};
|
||||
}
|
||||
this.submitted = false;
|
||||
this.event = {};
|
||||
},
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
hideModal(e) {
|
||||
this.submitted = false;
|
||||
this.showModal = false;
|
||||
this.event = {};
|
||||
},
|
||||
/**
|
||||
* Edit event modal submit
|
||||
*/
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
editSubmit(e) {
|
||||
this.submit = true;
|
||||
const editTitle = this.editevent.editTitle;
|
||||
const editcategory = this.editevent.editcategory;
|
||||
|
||||
this.edit.setProp("title", editTitle);
|
||||
this.edit.setProp("classNames", editcategory);
|
||||
this.successmsg();
|
||||
this.eventModal = false;
|
||||
},
|
||||
|
||||
/**
|
||||
* Delete event
|
||||
*/
|
||||
deleteEvent() {
|
||||
this.edit.remove();
|
||||
this.eventModal = false;
|
||||
},
|
||||
/**
|
||||
* Modal open for add event
|
||||
*/
|
||||
dateClicked(info) {
|
||||
this.newEventData = info;
|
||||
this.showModal = true;
|
||||
},
|
||||
/**
|
||||
* Modal open for edit event
|
||||
*/
|
||||
editEvent(info) {
|
||||
this.edit = info.event;
|
||||
this.editevent.editTitle = this.edit.title;
|
||||
this.editevent.editcategory = this.edit.classNames[0];
|
||||
this.eventModal = true;
|
||||
},
|
||||
|
||||
closeModal() {
|
||||
this.eventModal = false;
|
||||
},
|
||||
|
||||
confirm() {
|
||||
Swal.fire({
|
||||
title: "Are you sure?",
|
||||
text: "You won't be able to delete this!",
|
||||
icon: "warning",
|
||||
showCancelButton: true,
|
||||
confirmButtonColor: "#34c38f",
|
||||
cancelButtonColor: "#f46a6a",
|
||||
confirmButtonText: "Yes, delete it!",
|
||||
}).then((result) => {
|
||||
if (result.value) {
|
||||
this.deleteEvent();
|
||||
Swal.fire("Deleted!", "Event has been deleted.", "success");
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Show list of events
|
||||
*/
|
||||
handleEvents(events) {
|
||||
this.currentEvents = events;
|
||||
},
|
||||
|
||||
/**
|
||||
* Show successfull Save Dialog
|
||||
*/
|
||||
successmsg() {
|
||||
Swal.fire({
|
||||
position: "center",
|
||||
icon: "success",
|
||||
title: "Event has been saved",
|
||||
showConfirmButton: false,
|
||||
timer: 1000,
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Layout>
|
||||
<PageHeader :title="title" :items="items" />
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="app-calendar">
|
||||
<FullCalendar
|
||||
ref="fullCalendar"
|
||||
:options="calendarOptions"
|
||||
></FullCalendar>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<b-modal
|
||||
v-model="showModal"
|
||||
title="Add New Event"
|
||||
title-class="text-black font-18"
|
||||
body-class="p-3"
|
||||
hide-footer
|
||||
>
|
||||
<form @submit.prevent="handleSubmit">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="mb-3">
|
||||
<label for="name">Event Name</label>
|
||||
<input
|
||||
id="name"
|
||||
v-model="event.title"
|
||||
type="text"
|
||||
class="form-control"
|
||||
placeholder="Insert Event name"
|
||||
:class="{ 'is-invalid': submitted && v$.event.title.$error }"
|
||||
/>
|
||||
<div
|
||||
v-if="submitted && v$.event.title.$error"
|
||||
class="invalid-feedback"
|
||||
>
|
||||
<span v-if="v$.event.title.required.$message">{{
|
||||
v$.event.title.required.$message
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="mb-3">
|
||||
<label class="control-label">Category</label>
|
||||
<select
|
||||
v-model="event.category"
|
||||
class="form-control"
|
||||
name="category"
|
||||
:class="{ 'is-invalid': submitted && v$.event.category.errors }"
|
||||
>
|
||||
<option
|
||||
v-for="option in categories"
|
||||
:key="option.backgroundColor"
|
||||
:value="`${option.value}`"
|
||||
>
|
||||
{{ option.name }}
|
||||
</option>
|
||||
</select>
|
||||
|
||||
<div
|
||||
v-if="submitted && v$.event.category.$error"
|
||||
class="invalid-feedback"
|
||||
>
|
||||
<span v-if="v$.event.category.required.$message">{{
|
||||
v$.event.category.required.$message
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-end pt-5 mt-3">
|
||||
<b-button variant="light" @click="hideModal">Close</b-button>
|
||||
<b-button type="submit" variant="success" class="ms-1"
|
||||
>Create event</b-button
|
||||
>
|
||||
</div>
|
||||
</form>
|
||||
</b-modal>
|
||||
|
||||
<!-- Edit Modal -->
|
||||
<b-modal
|
||||
v-model="eventModal"
|
||||
title="Edit Event"
|
||||
title-class="text-black font-18"
|
||||
hide-footer
|
||||
body-class="p-3"
|
||||
>
|
||||
<div>Edit Event</div>
|
||||
<form @submit.prevent="editSubmit">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="mb-3">
|
||||
<label for="name">Event Name</label>
|
||||
<input
|
||||
id="name"
|
||||
v-model="editevent.editTitle"
|
||||
type="text"
|
||||
class="form-control"
|
||||
placeholder="Insert Event name"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="mb-3">
|
||||
<label class="control-label">Category</label>
|
||||
<select
|
||||
v-model="editevent.editcategory"
|
||||
class="form-control"
|
||||
name="category"
|
||||
>
|
||||
<option
|
||||
v-for="option in categories"
|
||||
:key="option.backgroundColor"
|
||||
:value="`${option.value}`"
|
||||
>
|
||||
{{ option.name }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-end p-3">
|
||||
<b-button variant="light" @click="closeModal">Close</b-button>
|
||||
<b-button class="ms-1" variant="danger" @click="confirm"
|
||||
>Delete</b-button
|
||||
>
|
||||
<b-button class="ms-1" variant="success" @click="editSubmit"
|
||||
>Save</b-button
|
||||
>
|
||||
</div>
|
||||
</form>
|
||||
</b-modal>
|
||||
</Layout>
|
||||
</template>
|
||||
|
|
@ -1,56 +0,0 @@
|
|||
const categories = [
|
||||
{
|
||||
name: 'Danger',
|
||||
value: 'bg-danger'
|
||||
},
|
||||
{
|
||||
name: 'Success',
|
||||
value: 'bg-success'
|
||||
},
|
||||
{
|
||||
name: 'Primary',
|
||||
value: 'bg-primary'
|
||||
},
|
||||
{
|
||||
name: 'Info',
|
||||
value: 'bg-info'
|
||||
},
|
||||
{
|
||||
name: 'Dark',
|
||||
value: 'bg-dark'
|
||||
},
|
||||
{
|
||||
name: 'Warning',
|
||||
value: 'bg-warning'
|
||||
},
|
||||
];
|
||||
|
||||
const calendarEvents = [
|
||||
{
|
||||
id: 1,
|
||||
title: 'Hey!',
|
||||
start: new Date().setDate(new Date().getDate() + 2),
|
||||
className: 'bg-warning text-white',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: 'See John Deo',
|
||||
start: new Date(),
|
||||
end: new Date(),
|
||||
className: 'bg-success text-white',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: 'Meet John Deo',
|
||||
start: new Date().setDate(new Date().getDate() + 2),
|
||||
className: 'bg-info text-white',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: 'Buy a Theme',
|
||||
start: new Date().setDate(new Date().getDate() + 4),
|
||||
className: 'bg-primary text-white'
|
||||
}
|
||||
];
|
||||
|
||||
export { categories, calendarEvents };
|
||||
|
|
@ -1,239 +0,0 @@
|
|||
<script>
|
||||
import Layout from "../../layouts/main";
|
||||
import PageHeader from "@/components/page-header";
|
||||
import appConfig from "@/app.config";
|
||||
|
||||
import {
|
||||
linewithDataChart,
|
||||
dashedLineChart,
|
||||
splineAreaChart,
|
||||
columnChart,
|
||||
columnDatalabelChart,
|
||||
barChart,
|
||||
mixedChart,
|
||||
radialChart,
|
||||
pieChart,
|
||||
donutChart
|
||||
} from "./data-apex";
|
||||
|
||||
/**
|
||||
* Apex-chart component
|
||||
*/
|
||||
export default {
|
||||
page: {
|
||||
title: "Apex Chart",
|
||||
meta: [{ name: "description", content: appConfig.description }]
|
||||
},
|
||||
components: { Layout, PageHeader },
|
||||
data() {
|
||||
return {
|
||||
linewithDataChart: linewithDataChart,
|
||||
dashedLineChart: dashedLineChart,
|
||||
splineAreaChart: splineAreaChart,
|
||||
columnChart: columnChart,
|
||||
columnDatalabelChart: columnDatalabelChart,
|
||||
barChart: barChart,
|
||||
mixedChart: mixedChart,
|
||||
radialChart: radialChart,
|
||||
pieChart: pieChart,
|
||||
donutChart: donutChart,
|
||||
title: "Apex charts",
|
||||
items: [
|
||||
{
|
||||
text: "Charts",
|
||||
href: "/"
|
||||
},
|
||||
{
|
||||
text: "Apex charts",
|
||||
active: true
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Layout>
|
||||
<PageHeader :title="title" :items="items" />
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title mb-4">Line With Data Labels</h4>
|
||||
<!-- Line with Data Labels chart -->
|
||||
<apexchart
|
||||
class="apex-charts"
|
||||
height="380"
|
||||
type="line"
|
||||
dir="ltr"
|
||||
:series="linewithDataChart.series"
|
||||
:options="linewithDataChart.chartOptions"
|
||||
></apexchart>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title mb-4">Dashed Line</h4>
|
||||
<!-- Dashed Line Chart -->
|
||||
<apexchart
|
||||
class="apex-charts"
|
||||
height="380"
|
||||
type="line"
|
||||
dir="ltr"
|
||||
:series="dashedLineChart.series"
|
||||
:options="dashedLineChart.chartOptions"
|
||||
></apexchart>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title mb-4">Spline Area</h4>
|
||||
<!-- Spline Area chart -->
|
||||
<apexchart
|
||||
class="apex-charts"
|
||||
height="350"
|
||||
type="area"
|
||||
dir="ltr"
|
||||
:series="splineAreaChart.series"
|
||||
:options="splineAreaChart.chartOptions"
|
||||
></apexchart>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title mb-4">Column Chart</h4>
|
||||
<!-- Column Charts -->
|
||||
<apexchart
|
||||
class="apex-charts"
|
||||
height="350"
|
||||
type="bar"
|
||||
dir="ltr"
|
||||
:series="columnChart.series"
|
||||
:options="columnChart.chartOptions"
|
||||
></apexchart>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title mb-4">Column With Data Labels</h4>
|
||||
<!-- Column with Data Labels -->
|
||||
<apexchart
|
||||
class="apex-charts"
|
||||
height="350"
|
||||
type="bar"
|
||||
dir="ltr"
|
||||
:series="columnDatalabelChart.series"
|
||||
:options="columnDatalabelChart.chartOptions"
|
||||
></apexchart>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title mb-4">Bar Chart</h4>
|
||||
<!-- Bar Chart -->
|
||||
<apexchart
|
||||
class="apex-charts"
|
||||
height="350"
|
||||
type="bar"
|
||||
dir="ltr"
|
||||
:series="barChart.series"
|
||||
:options="barChart.chartOptions"
|
||||
></apexchart>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title mb-4">Line, Column & Area Chart</h4>
|
||||
<!-- Line, Column & Area Chart -->
|
||||
<apexchart
|
||||
class="apex-charts"
|
||||
height="350"
|
||||
type="line"
|
||||
dir="ltr"
|
||||
:series="mixedChart.series"
|
||||
:options="mixedChart.chartOptions"
|
||||
></apexchart>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title mb-4">Radial Chart</h4>
|
||||
<!-- Radial Chart -->
|
||||
<apexchart
|
||||
class="apex-charts"
|
||||
height="370"
|
||||
type="radialBar"
|
||||
dir="ltr"
|
||||
:series="radialChart.series"
|
||||
:options="radialChart.chartOptions"
|
||||
></apexchart>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title mb-4">Pie Chart</h4>
|
||||
<!-- Pie Chart -->
|
||||
<apexchart
|
||||
class="apex-charts"
|
||||
height="320"
|
||||
type="pie"
|
||||
dir="ltr"
|
||||
:series="pieChart.series"
|
||||
:options="pieChart.chartOptions"
|
||||
></apexchart>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title mb-4">Donut Chart</h4>
|
||||
<!-- Donut Chart -->
|
||||
<apexchart
|
||||
class="apex-charts"
|
||||
height="320"
|
||||
type="donut"
|
||||
dir="ltr"
|
||||
:series="donutChart.series"
|
||||
:options="donutChart.chartOptions"
|
||||
></apexchart>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</Layout>
|
||||
</template>
|
||||
|
|
@ -1,304 +0,0 @@
|
|||
<script>
|
||||
import Layout from "../../layouts/main";
|
||||
import PageHeader from "@/components/page-header";
|
||||
import appConfig from "@/app.config";
|
||||
|
||||
import {
|
||||
smilAnimationChart,
|
||||
simpleLineChart,
|
||||
polarBarChart,
|
||||
areaLineChart,
|
||||
lineSmoothingChart,
|
||||
overlappingBarChart,
|
||||
stackBarChart,
|
||||
horizontalBarChart,
|
||||
donutAnimateChart,
|
||||
simplePieChart,
|
||||
distributedSeries,
|
||||
labelPlacementChart,
|
||||
extremeConfiguration,
|
||||
lineAreaChart
|
||||
} from "./data-chartist";
|
||||
|
||||
/**
|
||||
* Chartist-chart component
|
||||
*/
|
||||
export default {
|
||||
page: {
|
||||
title: "Chartist Chart",
|
||||
meta: [{ name: "description", content: appConfig.description }]
|
||||
},
|
||||
components: { Layout, PageHeader },
|
||||
data() {
|
||||
return {
|
||||
smilAnimationChart: smilAnimationChart,
|
||||
simpleLineChart: simpleLineChart,
|
||||
polarBarChart: polarBarChart,
|
||||
areaLineChart: areaLineChart,
|
||||
lineSmoothingChart: lineSmoothingChart,
|
||||
overlappingBarChart: overlappingBarChart,
|
||||
stackBarChart: stackBarChart,
|
||||
horizontalBarChart: horizontalBarChart,
|
||||
donutAnimateChart: donutAnimateChart,
|
||||
simplePieChart: simplePieChart,
|
||||
distributedSeries: distributedSeries,
|
||||
labelPlacementChart: labelPlacementChart,
|
||||
extremeConfiguration: extremeConfiguration,
|
||||
lineAreaChart: lineAreaChart,
|
||||
title: "Chartist Charts",
|
||||
items: [
|
||||
{
|
||||
text: "Charts",
|
||||
href: "/"
|
||||
},
|
||||
{
|
||||
text: "Chartist Charts",
|
||||
active: true
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Layout>
|
||||
<PageHeader :title="title" :items="items" />
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body" dir="ltr">
|
||||
<h4 class="card-title mb-4">Advanced Smil Animations</h4>
|
||||
|
||||
<!-- Advanced Smil Animations -->
|
||||
<chartist
|
||||
ratio="ct-chart"
|
||||
:data="smilAnimationChart.data"
|
||||
:options="smilAnimationChart.options"
|
||||
type="Line"
|
||||
></chartist>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body" dir="ltr">
|
||||
<h4 class="card-title mb-4">Simple Line Chart</h4>
|
||||
|
||||
<!-- Simple line chart -->
|
||||
<chartist
|
||||
ratio="ct-chart"
|
||||
:data="simpleLineChart.data"
|
||||
:options="simpleLineChart.options"
|
||||
type="Line"
|
||||
></chartist>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body" dir="ltr">
|
||||
<h4 class="card-title mb-4">Line Chart With Area</h4>
|
||||
|
||||
<!-- Line chart with area -->
|
||||
<chartist
|
||||
ratio="ct-chart"
|
||||
:data="areaLineChart.data"
|
||||
:options="areaLineChart.options"
|
||||
type="Line"
|
||||
></chartist>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title mb-4">Bi-polar Line Chart Wth Area Only</h4>
|
||||
|
||||
<!-- Bi-polar Line chart -->
|
||||
<chartist
|
||||
ratio="ct-chart"
|
||||
:data="lineAreaChart.data"
|
||||
:options="lineAreaChart.options"
|
||||
type="Line"
|
||||
></chartist>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body" dir="ltr">
|
||||
<h4 class="card-title mb-4">Line Interpolation / Smoothing</h4>
|
||||
|
||||
<!-- Line Interpolation / Smoothing chart -->
|
||||
<chartist
|
||||
ratio="ct-chart"
|
||||
type="Line"
|
||||
:data="lineSmoothingChart.data"
|
||||
:options="lineSmoothingChart.options"
|
||||
></chartist>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body" dir="ltr">
|
||||
<h4 class="card-title mb-4">Overlapping Bars On Mobile</h4>
|
||||
|
||||
<!-- Overlapping bars on mobile -->
|
||||
<chartist
|
||||
ratio="ct-chart"
|
||||
:data="overlappingBarChart.data"
|
||||
:options="overlappingBarChart.options"
|
||||
type="Bar"
|
||||
></chartist>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body" dir="ltr">
|
||||
<h4 class="card-title mb-4">Stacked Bar Chart</h4>
|
||||
|
||||
<!-- Stacked bar chart -->
|
||||
<chartist
|
||||
ratio="ct-chart"
|
||||
:data="stackBarChart.data"
|
||||
:options="stackBarChart.options"
|
||||
type="Bar"
|
||||
></chartist>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title mb-4">Horizontal Bar Chart</h4>
|
||||
|
||||
<!-- Horizontal bar chart -->
|
||||
<chartist
|
||||
ratio="ct-chart"
|
||||
:data="horizontalBarChart.data"
|
||||
:options="horizontalBarChart.options"
|
||||
type="Bar"
|
||||
></chartist>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body" dir="ltr">
|
||||
<h4 class="card-title mb-4">Distributed Series</h4>
|
||||
|
||||
<!-- Distributed series -->
|
||||
<chartist
|
||||
ratio="ct-chart"
|
||||
:data="distributedSeries.data"
|
||||
:options="distributedSeries.options"
|
||||
type="Bar"
|
||||
></chartist>
|
||||
</div>
|
||||
<!-- end card-body -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body" dir="ltr">
|
||||
<h4 class="card-title mb-4">Label Placement</h4>
|
||||
|
||||
<!-- Label placement chart -->
|
||||
<chartist
|
||||
ratio="ct-chart"
|
||||
:data="labelPlacementChart.data"
|
||||
:options="labelPlacementChart.options"
|
||||
type="Bar"
|
||||
></chartist>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title mb-4">Extreme Responsive Configuration</h4>
|
||||
|
||||
<chartist
|
||||
ratio="ct-chart"
|
||||
:data="extremeConfiguration.data"
|
||||
:options="extremeConfiguration.options"
|
||||
type="Bar"
|
||||
></chartist>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body" dir="ltr">
|
||||
<h4 class="card-title mb-4">Bi-polar Bar Chart</h4>
|
||||
|
||||
<!-- Bi-polar bar -->
|
||||
<chartist
|
||||
ratio="ct-chart"
|
||||
:data="polarBarChart.data"
|
||||
:options="polarBarChart.options"
|
||||
type="Bar"
|
||||
></chartist>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title mb-4">Donut With Svg.animate</h4>
|
||||
|
||||
<!-- Animating a Donut with Svg.animate -->
|
||||
<chartist
|
||||
ratio="ct-chart"
|
||||
:data="donutAnimateChart.data"
|
||||
:options="donutAnimateChart.options"
|
||||
type="Pie"
|
||||
></chartist>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title mb-4">Simple Pie Chart</h4>
|
||||
|
||||
<!-- Simple pie chart -->
|
||||
<chartist
|
||||
ratio="ct-chart"
|
||||
:data="simplePieChart.data"
|
||||
:options="simplePieChart.options"
|
||||
type="Pie"
|
||||
></chartist>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
</template>
|
||||
|
|
@ -1,240 +0,0 @@
|
|||
const line = {
|
||||
type: "line",
|
||||
data: {
|
||||
labels: [
|
||||
"January",
|
||||
"February",
|
||||
"March",
|
||||
"April",
|
||||
"May",
|
||||
"June",
|
||||
"July",
|
||||
"August",
|
||||
"September",
|
||||
"October",
|
||||
],
|
||||
datasets: [{
|
||||
label: "Sales Analytics",
|
||||
fill: true,
|
||||
lineTension: 0.5,
|
||||
backgroundColor: "rgba(85, 110, 230, 0.2)",
|
||||
borderColor: "#556ee6",
|
||||
borderCapStyle: "butt",
|
||||
borderDash: [],
|
||||
borderDashOffset: 0.0,
|
||||
borderJoinStyle: "miter",
|
||||
pointBorderColor: "#556ee6",
|
||||
pointBackgroundColor: "#fff",
|
||||
pointBorderWidth: 1,
|
||||
pointHoverRadius: 5,
|
||||
pointHoverBackgroundColor: "#556ee6",
|
||||
pointHoverBorderColor: "#fff",
|
||||
pointHoverBorderWidth: 2,
|
||||
pointRadius: 1,
|
||||
pointHitRadius: 10,
|
||||
data: [65, 59, 80, 81, 56, 55, 40, 55, 30, 80],
|
||||
},
|
||||
{
|
||||
label: "Monthly Earnings",
|
||||
fill: true,
|
||||
lineTension: 0.5,
|
||||
backgroundColor: "rgba(235, 239, 242, 0.2)",
|
||||
borderColor: "#ebeff2",
|
||||
borderCapStyle: "butt",
|
||||
borderDash: [],
|
||||
borderDashOffset: 0.0,
|
||||
borderJoinStyle: "miter",
|
||||
pointBorderColor: "#ebeff2",
|
||||
pointBackgroundColor: "#fff",
|
||||
pointBorderWidth: 1,
|
||||
pointHoverRadius: 5,
|
||||
pointHoverBackgroundColor: "#ebeff2",
|
||||
pointHoverBorderColor: "#eef0f2",
|
||||
pointHoverBorderWidth: 2,
|
||||
pointRadius: 1,
|
||||
pointHitRadius: 10,
|
||||
data: [80, 23, 56, 65, 23, 35, 85, 25, 92, 36],
|
||||
},
|
||||
],
|
||||
},
|
||||
options: {
|
||||
defaultFontColor: "#8791af",
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
|
||||
xAxes: [{
|
||||
gridLines: {
|
||||
color: "rgba(166, 176, 207, 0.1)",
|
||||
},
|
||||
},],
|
||||
yAxes: [{
|
||||
ticks: {
|
||||
max: 100,
|
||||
min: 20,
|
||||
stepSize: 10,
|
||||
},
|
||||
gridLines: {
|
||||
color: "rgba(166, 176, 207, 0.1)",
|
||||
},
|
||||
},],
|
||||
},
|
||||
|
||||
};
|
||||
|
||||
const pie = {
|
||||
type: "pie",
|
||||
data: {
|
||||
labels: ["Desktops", "Tablets"],
|
||||
datasets: [
|
||||
{
|
||||
data: [300, 180],
|
||||
backgroundColor: ["#34c38f", "#ebeff2"],
|
||||
hoverBackgroundColor: ["#34c38f", "#ebeff2"],
|
||||
hoverBorderColor: "#fff",
|
||||
},
|
||||
],
|
||||
},
|
||||
options: {
|
||||
maintainAspectRatio: true,
|
||||
responsive: true,
|
||||
},
|
||||
};
|
||||
|
||||
const Doughnut = {
|
||||
type: "doughnut",
|
||||
data: {
|
||||
labels: ["Desktops", "Tablets"],
|
||||
datasets: [
|
||||
{
|
||||
data: [300, 210],
|
||||
backgroundColor: ["#556ee6", "#ebeff2"],
|
||||
hoverBackgroundColor: ["#556ee6", "#ebeff2"],
|
||||
hoverBorderColor: "#fff",
|
||||
borderWidth: 0,
|
||||
radius: "90%",
|
||||
innerRadius: "75%",
|
||||
},
|
||||
],
|
||||
},
|
||||
options: {
|
||||
maintainAspectRatio: true,
|
||||
},
|
||||
};
|
||||
|
||||
const radar = {
|
||||
type: 'radar',
|
||||
data: {
|
||||
labels: [
|
||||
'Eating',
|
||||
'Drinking',
|
||||
'Sleeping',
|
||||
'Designing',
|
||||
'Coding',
|
||||
'Cycling',
|
||||
'Running',
|
||||
],
|
||||
datasets: [
|
||||
{
|
||||
label: 'Desktops',
|
||||
backgroundColor: 'rgba(52, 195, 143, 0.2)',
|
||||
borderColor: '#34c38f',
|
||||
pointBackgroundColor: '#34c38f',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: '#34c38f',
|
||||
data: [65, 59, 90, 81, 56, 55, 40],
|
||||
},
|
||||
{
|
||||
label: 'Tablets',
|
||||
backgroundColor: 'rgba(85, 110, 230, 0.2)',
|
||||
borderColor: '#556ee6',
|
||||
pointBackgroundColor: '#556ee6',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: '#556ee6',
|
||||
data: [28, 48, 40, 19, 96, 27, 100],
|
||||
},
|
||||
],
|
||||
},
|
||||
options: {
|
||||
maintainAspectRatio: true,
|
||||
legend: {
|
||||
position: 'top',
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
const bar = {
|
||||
type: "bar",
|
||||
data: {
|
||||
labels: [
|
||||
"January",
|
||||
"February",
|
||||
"March",
|
||||
"April",
|
||||
"May",
|
||||
"June",
|
||||
"July",
|
||||
],
|
||||
datasets: [
|
||||
{
|
||||
barPercentage: 0.4,
|
||||
label: "Sales Analytics",
|
||||
backgroundColor: "rgba(52, 195, 143, 0.8)",
|
||||
borderColor: "rgba(52, 195, 143, 0.8)",
|
||||
borderWidth: 1,
|
||||
hoverBackgroundColor: "rgba(52, 195, 143, 0.9)",
|
||||
hoverBorderColor: "rgba(52, 195, 143, 0.9)",
|
||||
data: [65, 59, 81, 45, 56, 80, 50, 20],
|
||||
},
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
xAxes: [
|
||||
{
|
||||
gridLines: {
|
||||
color: "rgba(166, 176, 207, 0.1)",
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxes: [
|
||||
{
|
||||
gridLines: {
|
||||
color: "rgba(166, 176, 207, 0.1)",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
const PolarArea = {
|
||||
type: "polarArea",
|
||||
data: {
|
||||
labels: ["Series 1", "Series 2", "Series 3", "Series 4"],
|
||||
datasets: [
|
||||
{
|
||||
data: [11, 16, 7, 18],
|
||||
backgroundColor: ["#f46a6a", "#34c38f", "#f1b44c", "#556ee6"],
|
||||
label: "My dataset", // for legend
|
||||
hoverBorderColor: "#fff",
|
||||
},
|
||||
],
|
||||
},
|
||||
options: {
|
||||
maintainAspectRatio: true,
|
||||
legend: {
|
||||
position: "top",
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export {
|
||||
line,
|
||||
pie,
|
||||
Doughnut,
|
||||
radar,
|
||||
bar,
|
||||
PolarArea
|
||||
};
|
||||
|
|
@ -1,221 +0,0 @@
|
|||
<script>
|
||||
import Layout from "../../../layouts/main";
|
||||
import PageHeader from "@/components/page-header";
|
||||
import appConfig from "@/app.config";
|
||||
import Vue3ChartJs from "@j-t-mcc/vue3-chartjs";
|
||||
|
||||
import { line, pie, Doughnut, radar, bar, PolarArea } from "./data";
|
||||
|
||||
/**
|
||||
* Chartjs-chart component
|
||||
*/
|
||||
export default {
|
||||
page: {
|
||||
title: "Chartjs Charts",
|
||||
meta: [{ name: "description", content: appConfig.description }],
|
||||
},
|
||||
components: {
|
||||
Layout,
|
||||
PageHeader,
|
||||
Vue3ChartJs,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
line: line,
|
||||
pie: pie,
|
||||
Doughnut: Doughnut,
|
||||
radar: radar,
|
||||
bar: bar,
|
||||
PolarArea: PolarArea,
|
||||
title: "Chartjs Charts",
|
||||
items: [
|
||||
{
|
||||
text: "Charts",
|
||||
href: "/",
|
||||
},
|
||||
{
|
||||
text: "Chartjs Charts",
|
||||
active: true,
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Layout>
|
||||
<PageHeader :title="title" :items="items" />
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title mb-4">Line Chart</h4>
|
||||
<div class="row text-center">
|
||||
<div class="col-sm-4">
|
||||
<h5 class="mb-0">86541</h5>
|
||||
<p class="text-muted">Activated</p>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<h5 class="mb-0">2541</h5>
|
||||
<p class="text-muted">Pending</p>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<h5 class="mb-0">102030</h5>
|
||||
<p class="text-muted">Deactivated</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Line Chart -->
|
||||
|
||||
<vue3-chart-js
|
||||
class="chartjs-chart"
|
||||
v-bind="{ ...line }"
|
||||
></vue3-chart-js>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title mb-4">Bar Chart</h4>
|
||||
<div class="row text-center">
|
||||
<div class="col-sm-4">
|
||||
<h5 class="mb-0">2541</h5>
|
||||
<p class="text-muted">Activated</p>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<h5 class="mb-0">84845</h5>
|
||||
<p class="text-muted">Pending</p>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<h5 class="mb-0">12001</h5>
|
||||
<p class="text-muted">Deactivated</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bar Chart -->
|
||||
<vue3-chart-js
|
||||
class="chartjs-chart"
|
||||
v-bind="{ ...bar }"
|
||||
></vue3-chart-js>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title mb-4">Pie Chart</h4>
|
||||
<div class="row text-center">
|
||||
<div class="col-sm-4">
|
||||
<h5 class="mb-0">2536</h5>
|
||||
<p class="text-muted">Activated</p>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<h5 class="mb-0">69421</h5>
|
||||
<p class="text-muted">Pending</p>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<h5 class="mb-0">89854</h5>
|
||||
<p class="text-muted">Deactivated</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Pie Chart -->
|
||||
<vue3-chart-js
|
||||
:height="140"
|
||||
class="chartjs-chart"
|
||||
v-bind="{ ...pie }"
|
||||
></vue3-chart-js>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title mb-4">Donut Chart</h4>
|
||||
<div class="row text-center">
|
||||
<div class="col-sm-4">
|
||||
<h5 class="mb-0">9595</h5>
|
||||
<p class="text-muted">Activated</p>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<h5 class="mb-0">36524</h5>
|
||||
<p class="text-muted">Pending</p>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<h5 class="mb-0">62541</h5>
|
||||
<p class="text-muted">Deactivated</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Donut Chart -->
|
||||
<vue3-chart-js
|
||||
:height="140"
|
||||
class="chartjs-chart"
|
||||
v-bind="{ ...Doughnut }"
|
||||
></vue3-chart-js>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title mb-4">Polar area Chart</h4>
|
||||
<div class="row text-center">
|
||||
<div class="col-sm-4">
|
||||
<h5 class="mb-0">4852</h5>
|
||||
<p class="text-muted">Activated</p>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<h5 class="mb-0">3652</h5>
|
||||
<p class="text-muted">Pending</p>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<h5 class="mb-0">85412</h5>
|
||||
<p class="text-muted">Deactivated</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Polar area Chart -->
|
||||
<vue3-chart-js
|
||||
:height="140"
|
||||
class="chartjs-chart"
|
||||
v-bind="{ ...PolarArea }"
|
||||
></vue3-chart-js>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title mb-4">Radar Chart</h4>
|
||||
<div class="row text-center">
|
||||
<div class="col-sm-4">
|
||||
<h5 class="mb-0">694</h5>
|
||||
<p class="text-muted">Activated</p>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<h5 class="mb-0">55210</h5>
|
||||
<p class="text-muted">Pending</p>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<h5 class="mb-0">489498</h5>
|
||||
<p class="text-muted">Deactivated</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Radar Chart -->
|
||||
<vue3-chart-js
|
||||
:height="140"
|
||||
class="chartjs-chart"
|
||||
v-bind="{ ...radar }"
|
||||
></vue3-chart-js>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
</template>
|
||||
|
|
@ -1,545 +0,0 @@
|
|||
const linewithDataChart = {
|
||||
chartOptions: {
|
||||
chart: {
|
||||
height: 380,
|
||||
type: 'line',
|
||||
zoom: {
|
||||
enabled: false
|
||||
},
|
||||
toolbar: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
colors: ['#556ee6', '#34c38f'],
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
stroke: {
|
||||
width: [3, 3],
|
||||
curve: 'straight'
|
||||
},
|
||||
title: {
|
||||
text: 'Average High & Low Temperature',
|
||||
align: 'left',
|
||||
style: {
|
||||
fontWeight: '500',
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
row: {
|
||||
colors: ['transparent', 'transparent'], // takes an array which will be repeated on columns
|
||||
opacity: 0.2
|
||||
},
|
||||
borderColor: '#f1f1f1'
|
||||
},
|
||||
markers: {
|
||||
style: 'inverted',
|
||||
size: 6
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
|
||||
title: {
|
||||
text: 'Month'
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
title: {
|
||||
text: 'Temperature'
|
||||
},
|
||||
min: 5,
|
||||
max: 40
|
||||
},
|
||||
legend: {
|
||||
position: 'top',
|
||||
horizontalAlign: 'right',
|
||||
floating: true,
|
||||
offsetY: -25,
|
||||
offsetX: -5
|
||||
},
|
||||
responsive: [{
|
||||
breakpoint: 600,
|
||||
options: {
|
||||
chart: {
|
||||
toolbar: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
}
|
||||
}],
|
||||
},
|
||||
series: [{
|
||||
name: "High - 2018",
|
||||
data: [26, 24, 32, 36, 33, 31, 33]
|
||||
},
|
||||
{
|
||||
name: "Low - 2018",
|
||||
data: [14, 11, 16, 12, 17, 13, 12]
|
||||
}
|
||||
],
|
||||
};
|
||||
|
||||
const dashedLineChart = {
|
||||
series: [{
|
||||
name: "Session Duration",
|
||||
data: [45, 52, 38, 24, 33, 26, 21, 20, 6, 8, 15, 10]
|
||||
},
|
||||
{
|
||||
name: "Page Views",
|
||||
data: [36, 42, 60, 42, 13, 18, 29, 37, 36, 51, 32, 35]
|
||||
},
|
||||
{
|
||||
name: 'Total Visits',
|
||||
data: [89, 56, 74, 98, 72, 38, 64, 46, 84, 58, 46, 49]
|
||||
}],
|
||||
chartOptions: {
|
||||
chart: {
|
||||
zoom: {
|
||||
enabled: false
|
||||
},
|
||||
toolbar: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
colors: ['#556ee6', '#f46a6a', '#34c38f'],
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
stroke: {
|
||||
width: [3, 4, 3],
|
||||
curve: 'straight',
|
||||
dashArray: [0, 8, 5]
|
||||
},
|
||||
title: {
|
||||
text: 'Page Statistics',
|
||||
align: 'left',
|
||||
style: {
|
||||
fontWeight: '500',
|
||||
},
|
||||
},
|
||||
markers: {
|
||||
size: 0,
|
||||
hover: {
|
||||
sizeOffset: 6
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['01 Jan', '02 Jan', '03 Jan', '04 Jan', '05 Jan', '06 Jan', '07 Jan', '08 Jan', '09 Jan',
|
||||
'10 Jan', '11 Jan', '12 Jan'
|
||||
],
|
||||
},
|
||||
tooltip: {
|
||||
y: [{
|
||||
title: {
|
||||
formatter: function (val) {
|
||||
return val + " (mins)"
|
||||
}
|
||||
}
|
||||
}, {
|
||||
title: {
|
||||
formatter: function (val) {
|
||||
return val + " per session"
|
||||
}
|
||||
}
|
||||
}, {
|
||||
title: {
|
||||
formatter: function (val) {
|
||||
return val;
|
||||
}
|
||||
}
|
||||
}]
|
||||
},
|
||||
grid: {
|
||||
borderColor: '#f1f1f1',
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const splineAreaChart = {
|
||||
series: [{
|
||||
name: 'series1',
|
||||
data: [34, 40, 28, 52, 42, 109, 100]
|
||||
}, {
|
||||
name: 'series2',
|
||||
data: [32, 60, 34, 46, 34, 52, 41]
|
||||
}],
|
||||
chartOptions: {
|
||||
chart: {
|
||||
toolbar: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
width: 3,
|
||||
},
|
||||
colors: ['#556ee6', '#34c38f'],
|
||||
xaxis: {
|
||||
type: 'datetime',
|
||||
categories: ["2018-09-19T00:00:00", "2018-09-19T01:30:00", "2018-09-19T02:30:00", "2018-09-19T03:30:00", "2018-09-19T04:30:00", "2018-09-19T05:30:00", "2018-09-19T06:30:00"],
|
||||
},
|
||||
grid: {
|
||||
borderColor: '#f1f1f1',
|
||||
},
|
||||
tooltip: {
|
||||
x: {
|
||||
format: 'dd/MM/yy HH:mm'
|
||||
},
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const columnChart = {
|
||||
series: [{
|
||||
name: 'Net Profit',
|
||||
data: [46, 57, 59, 54, 62, 58, 64, 60, 66]
|
||||
}, {
|
||||
name: 'Revenue',
|
||||
data: [74, 83, 102, 97, 86, 106, 93, 114, 94]
|
||||
}, {
|
||||
name: 'Free Cash Flow',
|
||||
data: [37, 42, 38, 26, 47, 50, 54, 55, 43]
|
||||
}],
|
||||
chartOptions: {
|
||||
chart: {
|
||||
toolbar: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false,
|
||||
columnWidth: '45%',
|
||||
endingShape: 'rounded'
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
stroke: {
|
||||
show: true,
|
||||
width: 2,
|
||||
colors: ['transparent']
|
||||
},
|
||||
colors: ['#34c38f', '#556ee6', '#f46a6a'],
|
||||
xaxis: {
|
||||
categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
|
||||
},
|
||||
yaxis: {
|
||||
title: {
|
||||
text: '$ (thousands)',
|
||||
style: {
|
||||
fontWeight: '500',
|
||||
},
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
borderColor: '#f1f1f1',
|
||||
},
|
||||
fill: {
|
||||
opacity: 1
|
||||
},
|
||||
tooltip: {
|
||||
y: {
|
||||
formatter: function (val) {
|
||||
return "$ " + val + " thousands"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const columnDatalabelChart = {
|
||||
series: [{
|
||||
name: 'Inflation',
|
||||
data: [2.5, 3.2, 5.0, 10.1, 4.2, 3.8, 3, 2.4, 4.0, 1.2, 3.5, 0.8]
|
||||
}],
|
||||
chartOptions: {
|
||||
chart: {
|
||||
toolbar: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
dataLabels: {
|
||||
position: 'top', // top, center, bottom
|
||||
},
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
formatter: function (val) {
|
||||
return val + "%";
|
||||
},
|
||||
offsetY: -22,
|
||||
style: {
|
||||
fontSize: '12px',
|
||||
colors: ["#304758"]
|
||||
}
|
||||
},
|
||||
colors: ['#556ee6'],
|
||||
grid: {
|
||||
borderColor: '#f1f1f1',
|
||||
},
|
||||
xaxis: {
|
||||
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
|
||||
position: 'top',
|
||||
labels: {
|
||||
offsetY: -18,
|
||||
|
||||
},
|
||||
axisBorder: {
|
||||
show: false
|
||||
},
|
||||
axisTicks: {
|
||||
show: false
|
||||
},
|
||||
crosshairs: {
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
colorFrom: '#D8E3F0',
|
||||
colorTo: '#BED1E6',
|
||||
stops: [0, 100],
|
||||
opacityFrom: 0.4,
|
||||
opacityTo: 0.5,
|
||||
}
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
enabled: true,
|
||||
offsetY: -35,
|
||||
}
|
||||
},
|
||||
fill: {
|
||||
gradient: {
|
||||
shade: 'light',
|
||||
type: "horizontal",
|
||||
shadeIntensity: 0.25,
|
||||
gradientToColors: undefined,
|
||||
inverseColors: true,
|
||||
opacityFrom: 1,
|
||||
opacityTo: 1,
|
||||
stops: [50, 0, 100, 100]
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
axisBorder: {
|
||||
show: false
|
||||
},
|
||||
axisTicks: {
|
||||
show: false,
|
||||
},
|
||||
labels: {
|
||||
show: false,
|
||||
formatter: function (val) {
|
||||
return val + "%";
|
||||
}
|
||||
}
|
||||
},
|
||||
title: {
|
||||
text: 'Monthly Inflation in Argentina, 2002',
|
||||
floating: true,
|
||||
offsetY: 330,
|
||||
align: 'center',
|
||||
style: {
|
||||
color: '#444',
|
||||
fontWeight: '500',
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
|
||||
const barChart = {
|
||||
series: [{
|
||||
data: [380, 430, 450, 475, 550, 584, 780, 1100, 1220, 1365]
|
||||
}],
|
||||
chartOptions: {
|
||||
chart: {
|
||||
toolbar: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: true,
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
colors: ['#34c38f'],
|
||||
grid: {
|
||||
borderColor: '#f1f1f1',
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['South Korea', 'Canada', 'United Kingdom', 'Netherlands', 'Italy', 'France', 'Japan', 'United States', 'China', 'Germany'],
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const mixedChart = {
|
||||
series: [{
|
||||
name: 'Team A',
|
||||
type: 'column',
|
||||
data: [23, 11, 22, 27, 13, 22, 37, 21, 44, 22, 30]
|
||||
}, {
|
||||
name: 'Team B',
|
||||
type: 'area',
|
||||
data: [44, 55, 41, 67, 22, 43, 21, 41, 56, 27, 43]
|
||||
}, {
|
||||
name: 'Team C',
|
||||
type: 'line',
|
||||
data: [30, 25, 36, 30, 45, 35, 64, 52, 59, 36, 39]
|
||||
}],
|
||||
chartOptions: {
|
||||
chart: {
|
||||
stacked: false,
|
||||
toolbar: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
stroke: {
|
||||
width: [0, 2, 4],
|
||||
curve: 'smooth'
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '50%'
|
||||
}
|
||||
},
|
||||
colors: ['#f46a6a', '#556ee6', '#34c38f'],
|
||||
fill: {
|
||||
opacity: [0.85, 0.25, 1],
|
||||
gradient: {
|
||||
inverseColors: false,
|
||||
shade: 'light',
|
||||
type: "vertical",
|
||||
opacityFrom: 0.85,
|
||||
opacityTo: 0.55,
|
||||
stops: [0, 100, 100, 100]
|
||||
}
|
||||
},
|
||||
labels: ['01/01/2003', '02/01/2003', '03/01/2003', '04/01/2003', '05/01/2003', '06/01/2003', '07/01/2003', '08/01/2003', '09/01/2003', '10/01/2003', '11/01/2003'],
|
||||
markers: {
|
||||
size: 0
|
||||
},
|
||||
xaxis: {
|
||||
type: 'datetime'
|
||||
},
|
||||
yaxis: {
|
||||
title: {
|
||||
text: 'Points',
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
shared: true,
|
||||
intersect: false,
|
||||
y: {
|
||||
formatter: function (y) {
|
||||
if (typeof y !== "undefined") {
|
||||
return y.toFixed(0) + " points";
|
||||
}
|
||||
return y;
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
borderColor: '#f1f1f1'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const radialChart = {
|
||||
series: [44, 55, 67, 83],
|
||||
chartOptions: {
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
dataLabels: {
|
||||
name: {
|
||||
fontSize: '22px',
|
||||
},
|
||||
value: {
|
||||
fontSize: '16px',
|
||||
},
|
||||
total: {
|
||||
show: true,
|
||||
label: 'Total',
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
formatter: function (w) {
|
||||
// By default this function returns the average of all series. The below is just an example to show the use of custom formatter function
|
||||
return 249
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
labels: ['Computer', 'Tablet', 'Laptop', 'Mobile'],
|
||||
colors: ['#556ee6', '#34c38f', '#f46a6a', '#f1b44c'],
|
||||
}
|
||||
};
|
||||
|
||||
const pieChart = {
|
||||
series: [44, 55, 41, 17, 15],
|
||||
chartOptions: {
|
||||
labels: ["Series 1", "Series 2", "Series 3", "Series 4", "Series 5"],
|
||||
colors: ["#34c38f", "#556ee6", "#f46a6a", "#50a5f1", "#f1b44c"],
|
||||
legend: {
|
||||
show: true,
|
||||
position: 'bottom',
|
||||
horizontalAlign: 'center',
|
||||
verticalAlign: 'middle',
|
||||
floating: false,
|
||||
fontSize: '14px',
|
||||
offsetX: 0
|
||||
},
|
||||
responsive: [{
|
||||
breakpoint: 600,
|
||||
options: {
|
||||
chart: {
|
||||
height: 240
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
}
|
||||
}]
|
||||
}
|
||||
};
|
||||
|
||||
const donutChart = {
|
||||
series: [44, 55, 41, 17, 15],
|
||||
chartOptions: {
|
||||
labels: ["Series 1", "Series 2", "Series 3", "Series 4", "Series 5"],
|
||||
colors: ["#34c38f", "#556ee6", "#f46a6a", "#50a5f1", "#f1b44c"],
|
||||
legend: {
|
||||
show: true,
|
||||
position: 'bottom',
|
||||
horizontalAlign: 'center',
|
||||
verticalAlign: 'middle',
|
||||
floating: false,
|
||||
fontSize: '14px',
|
||||
offsetX: 0
|
||||
},
|
||||
responsive: [{
|
||||
breakpoint: 600,
|
||||
options: {
|
||||
chart: {
|
||||
height: 240
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
}
|
||||
}]
|
||||
}
|
||||
};
|
||||
|
||||
export { linewithDataChart, dashedLineChart, splineAreaChart, columnChart, columnDatalabelChart, barChart, mixedChart, radialChart, pieChart, donutChart };
|
||||
|
|
@ -1,274 +0,0 @@
|
|||
const smilAnimationChart = {
|
||||
data: {
|
||||
labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
|
||||
series: [
|
||||
[12, 9, 7, 8, 5, 4, 6, 2, 3, 3, 4, 6],
|
||||
[4, 5, 3, 7, 3, 5, 5, 3, 4, 4, 5, 5],
|
||||
[5, 3, 4, 5, 6, 3, 3, 4, 5, 6, 3, 4],
|
||||
[3, 4, 5, 6, 7, 6, 4, 5, 6, 7, 6, 3]
|
||||
]
|
||||
},
|
||||
options: {
|
||||
height: 300
|
||||
}
|
||||
};
|
||||
|
||||
const simpleLineChart = {
|
||||
data: {
|
||||
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
|
||||
series: [
|
||||
[12, 9, 7, 8, 5],
|
||||
[2, 1, 3.5, 7, 3],
|
||||
[1, 3, 4, 5, 6]
|
||||
]
|
||||
},
|
||||
options: {
|
||||
height: 300,
|
||||
fullWidth: true,
|
||||
}
|
||||
};
|
||||
|
||||
const polarBarChart = {
|
||||
data: {
|
||||
labels: ['W1', 'W2', 'W3', 'W4', 'W5', 'W6', 'W7', 'W8', 'W9', 'W10'],
|
||||
series: [
|
||||
[1, 2, 4, 8, 6, -2, -1, -4, -6, -2]
|
||||
]
|
||||
},
|
||||
options: {
|
||||
height: 300,
|
||||
high: 10,
|
||||
low: -10,
|
||||
axisX: {
|
||||
labelInterpolationFnc: function (value, index) {
|
||||
return index % 2 === 0 ? value : null;
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const areaLineChart = {
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8],
|
||||
series: [
|
||||
[5, 9, 7, 8, 5, 3, 5, 4]
|
||||
]
|
||||
},
|
||||
options: {
|
||||
low: 0,
|
||||
showArea: true,
|
||||
height: 300,
|
||||
}
|
||||
};
|
||||
|
||||
const lineSmoothingChart = {
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5],
|
||||
series: [
|
||||
[1, 5, 10, 0, 1],
|
||||
[10, 15, 0, 1, 2]
|
||||
]
|
||||
},
|
||||
options: {
|
||||
height: 300,
|
||||
low: 0,
|
||||
fullWidth: true,
|
||||
chartPadding: {
|
||||
right: 20
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const overlappingBarChart = {
|
||||
data: {
|
||||
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
||||
series: [
|
||||
[5, 4, 3, 7, 5, 10, 3, 4, 8, 10, 6, 8],
|
||||
[3, 2, 9, 5, 4, 6, 4, 6, 7, 8, 7, 4]
|
||||
]
|
||||
},
|
||||
options: {
|
||||
seriesBarDistance: 10,
|
||||
height: 300,
|
||||
responsiveOptions: [
|
||||
['screen and (max-width: 640px)', {
|
||||
seriesBarDistance: 5,
|
||||
axisX: {
|
||||
labelInterpolationFnc: (value) => {
|
||||
return value[0];
|
||||
}
|
||||
}
|
||||
}]
|
||||
]
|
||||
},
|
||||
};
|
||||
const stackBarChart = {
|
||||
data: {
|
||||
labels: ['Q1', 'Q2', 'Q3', 'Q4', 'Q5', 'Q6'],
|
||||
series: [
|
||||
[800000, 1200000, 1400000, 1300000, 1520000, 1400000],
|
||||
[200000, 400000, 500000, 300000, 452000, 500000],
|
||||
[160000, 290000, 410000, 600000, 588000, 410000]
|
||||
]
|
||||
},
|
||||
options: {
|
||||
stackBars: true,
|
||||
axisY: {
|
||||
labelInterpolationFnc: (value) => {
|
||||
return (value / 1000) + 'k';
|
||||
}
|
||||
},
|
||||
height: 300
|
||||
}
|
||||
};
|
||||
|
||||
const horizontalBarChart = {
|
||||
data: {
|
||||
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
|
||||
series: [
|
||||
[5, 4, 3, 7, 5, 10, 3],
|
||||
[3, 2, 9, 5, 4, 6, 4]
|
||||
]
|
||||
},
|
||||
options: {
|
||||
seriesBarDistance: 10,
|
||||
reverseData: true,
|
||||
horizontalBars: true,
|
||||
axisY: {
|
||||
offset: 70
|
||||
},
|
||||
height: 300
|
||||
}
|
||||
};
|
||||
|
||||
const donutAnimateChart = {
|
||||
data: {
|
||||
series: [10, 20, 50, 20, 5, 50, 15],
|
||||
labels: [1, 2, 3, 4, 5, 6, 7]
|
||||
},
|
||||
options: {
|
||||
donut: true,
|
||||
showLabel: false,
|
||||
height: 300,
|
||||
},
|
||||
};
|
||||
|
||||
const simplePieChart = {
|
||||
data: {
|
||||
series: [5, 3, 4]
|
||||
},
|
||||
options: {
|
||||
height: 300,
|
||||
showLabel: false
|
||||
}
|
||||
};
|
||||
|
||||
const distributedSeries = {
|
||||
data: {
|
||||
labels: ['XS', 'S', 'M', 'L', 'XL', 'XXL', 'XXXL'],
|
||||
series: [20, 60, 120, 200, 180, 20, 10]
|
||||
},
|
||||
options: {
|
||||
height: 300,
|
||||
distributeSeries: true,
|
||||
}
|
||||
};
|
||||
|
||||
const labelPlacementChart = {
|
||||
data: {
|
||||
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
||||
series: [
|
||||
[5, 4, 3, 7, 5, 10, 3],
|
||||
[3, 2, 9, 5, 4, 6, 4]
|
||||
]
|
||||
},
|
||||
options: {
|
||||
height: 300,
|
||||
axisX: {
|
||||
// On the x-axis start means top and end means bottom
|
||||
position: 'start'
|
||||
},
|
||||
axisY: {
|
||||
// On the y-axis start means left and end means right
|
||||
position: 'end'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const extremeConfiguration = {
|
||||
data: {
|
||||
labels: ['Quarter 1', 'Quarter 2', 'Quarter 3', 'Quarter 4'],
|
||||
series: [
|
||||
[5, 4, 3, 7],
|
||||
[3, 2, 9, 5],
|
||||
[1, 5, 8, 4],
|
||||
[2, 3, 4, 6],
|
||||
[4, 1, 2, 1]
|
||||
]
|
||||
},
|
||||
options: {
|
||||
height: 300,
|
||||
axisX: {
|
||||
labelInterpolationFnc: function (value) {
|
||||
return value.split(/\s+/).map(function (word) {
|
||||
return word[0];
|
||||
}).join('');
|
||||
}
|
||||
},
|
||||
axisY: {
|
||||
offset: 20
|
||||
},
|
||||
responsiveOptions: [
|
||||
// Options override for media > 400px
|
||||
['screen and (min-width: 400px)', {
|
||||
reverseData: true,
|
||||
horizontalBars: true,
|
||||
|
||||
axisY: {
|
||||
offset: 60
|
||||
}
|
||||
}],
|
||||
// Options override for media > 800px
|
||||
['screen and (min-width: 800px)', {
|
||||
stackBars: false,
|
||||
seriesBarDistance: 10
|
||||
}],
|
||||
// Options override for media > 1000px
|
||||
['screen and (min-width: 1000px)', {
|
||||
reverseData: false,
|
||||
horizontalBars: false,
|
||||
seriesBarDistance: 15
|
||||
}]
|
||||
]
|
||||
},
|
||||
};
|
||||
|
||||
const lineAreaChart = {
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8],
|
||||
series: [
|
||||
[1, 2, 3, 1, -2, 0, 1, 0],
|
||||
[-2, -1, -2, -1, -2.5, -1, -2, -1],
|
||||
[0, 0, 0, 1, 2, 2.5, 2, 1],
|
||||
[2.5, 2, 1, 0.5, 1, 0.5, -1, -2.5]
|
||||
]
|
||||
},
|
||||
options: {
|
||||
height: 300,
|
||||
high: 3,
|
||||
low: -3,
|
||||
showArea: true,
|
||||
showLine: false,
|
||||
showPoint: false,
|
||||
fullWidth: true,
|
||||
axisX: {
|
||||
showLabel: false,
|
||||
showGrid: false
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
export {
|
||||
smilAnimationChart, simpleLineChart, polarBarChart, areaLineChart, lineSmoothingChart, overlappingBarChart,
|
||||
stackBarChart, horizontalBarChart, donutAnimateChart, simplePieChart, distributedSeries, labelPlacementChart, extremeConfiguration, lineAreaChart
|
||||
};
|
||||
|
|
@ -1,604 +0,0 @@
|
|||
import {
|
||||
graphic
|
||||
} from "echarts";
|
||||
|
||||
let data1 = [];
|
||||
for (let i = 0; i <= 360; i++) {
|
||||
let t = (i / 180) * Math.PI;
|
||||
let r = Math.sin(2 * t) * Math.cos(2 * t);
|
||||
data1.push([r, i]);
|
||||
}
|
||||
|
||||
const polarChart = {
|
||||
polar: {
|
||||
legend: {
|
||||
data: ["line"],
|
||||
textStyle: {
|
||||
color: '#999'
|
||||
}
|
||||
},
|
||||
polar: {
|
||||
center: ["50%", "54%"]
|
||||
},
|
||||
color: ['#34c38f'],
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "cross"
|
||||
}
|
||||
},
|
||||
angleAxis: {
|
||||
type: "value",
|
||||
startAngle: 0
|
||||
},
|
||||
radiusAxis: {
|
||||
min: 0
|
||||
},
|
||||
series: [{
|
||||
coordinateSystem: "polar",
|
||||
name: "line",
|
||||
type: "line",
|
||||
showSymbol: false,
|
||||
data: data1
|
||||
}],
|
||||
animationDuration: 2000
|
||||
}
|
||||
};
|
||||
|
||||
const mixedBarChart = {
|
||||
// Setup grid
|
||||
grid: {
|
||||
zlevel: 0,
|
||||
x: 80,
|
||||
x2: 50,
|
||||
y: 30,
|
||||
y2: 30,
|
||||
borderWidth: 0,
|
||||
backgroundColor: 'rgba(0,0,0,0)',
|
||||
borderColor: 'rgba(0,0,0,0)',
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
crossStyle: {
|
||||
color: '#999'
|
||||
}
|
||||
}
|
||||
},
|
||||
toolbox: {
|
||||
orient: 'center',
|
||||
left: 0,
|
||||
top: 20,
|
||||
feature: {
|
||||
dataView: {
|
||||
readOnly: false,
|
||||
title: "Data View"
|
||||
},
|
||||
magicType: {
|
||||
type: ['line', 'bar'],
|
||||
title: {
|
||||
line: "For line chart",
|
||||
bar: "For bar chart"
|
||||
}
|
||||
},
|
||||
restore: {
|
||||
title: "restore"
|
||||
},
|
||||
saveAsImage: {
|
||||
title: "Download Image"
|
||||
}
|
||||
}
|
||||
},
|
||||
color: ['#34c38f', '#556ee6', '#f46a6a'],
|
||||
legend: {
|
||||
data: ['Evaporation', 'Precipitation', 'Average temperature'],
|
||||
textStyle: {
|
||||
color: '#8791af'
|
||||
}
|
||||
},
|
||||
xAxis: [{
|
||||
type: 'category',
|
||||
data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug'],
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#8791af'
|
||||
},
|
||||
},
|
||||
}],
|
||||
yAxis: [{
|
||||
type: 'value',
|
||||
name: 'Water volume',
|
||||
min: 0,
|
||||
max: 250,
|
||||
interval: 50,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#8791af'
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(166, 176, 207, 0.1)"
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
formatter: '{value} ml'
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
name: 'Temperature',
|
||||
min: 0,
|
||||
max: 25,
|
||||
interval: 5,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#8791af'
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(166, 176, 207, 0.1)"
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
formatter: '{value} °C'
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [{
|
||||
name: 'Evaporation',
|
||||
type: 'bar',
|
||||
data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2]
|
||||
},
|
||||
{
|
||||
name: 'Precipitation',
|
||||
type: 'bar',
|
||||
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2]
|
||||
},
|
||||
{
|
||||
name: 'Average temperature',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
const guageChart = {
|
||||
tooltip: {
|
||||
formatter: "{a} <br/>{b} : {c}%"
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
restore: {
|
||||
title: "Refresh"
|
||||
},
|
||||
saveAsImage: {
|
||||
title: "Download Image"
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: 'Business indicator',
|
||||
type: 'gauge',
|
||||
detail: {
|
||||
formatter: '{value}%'
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: [
|
||||
[0.2, '#34c38f'],
|
||||
[0.8, '#556ee6'],
|
||||
[1, '#f46a6a']
|
||||
],
|
||||
width: 20
|
||||
}
|
||||
},
|
||||
data: [{
|
||||
value: 50,
|
||||
name: 'Completion rate'
|
||||
}]
|
||||
}]
|
||||
};
|
||||
|
||||
const lineChart = {
|
||||
// Setup grid
|
||||
grid: {
|
||||
zlevel: 0,
|
||||
x: 50,
|
||||
x2: 50,
|
||||
y: 30,
|
||||
y2: 30,
|
||||
borderWidth: 0,
|
||||
backgroundColor: 'rgba(0,0,0,0)',
|
||||
borderColor: 'rgba(0,0,0,0)',
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#8791af'
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#8791af'
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(166, 176, 207, 0.1)"
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['Desktops', 'Laptops', 'Tablets'],
|
||||
textStyle: {
|
||||
color: '#999'
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: 'Desktops',
|
||||
type: 'line',
|
||||
stack: 'yes',
|
||||
data: [120, 132, 101, 134, 90, 230, 210]
|
||||
},
|
||||
{
|
||||
name: 'Laptops',
|
||||
type: 'line',
|
||||
stack: 'yes',
|
||||
data: [220, 182, 191, 234, 290, 330, 310]
|
||||
},
|
||||
{
|
||||
name: 'Tablets',
|
||||
type: 'line',
|
||||
stack: 'yes',
|
||||
data: [150, 232, 201, 154, 190, 330, 410]
|
||||
},
|
||||
]
|
||||
};
|
||||
|
||||
const pieChart = {
|
||||
visualMap: {
|
||||
show: false,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b} : {c} ({d}%)'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 'left',
|
||||
data: ['Laptop', 'Tablet', 'Mobile', 'Others', 'Desktop'],
|
||||
textStyle: {
|
||||
color: '#999'
|
||||
}
|
||||
},
|
||||
color: ['#556ee6', '#f1b44c', '#f46a6a', '#50a5f1', '#34c38f'],
|
||||
series: [{
|
||||
name: 'Total sales',
|
||||
type: 'pie',
|
||||
radius: '55%',
|
||||
center: ['50%', '60%'],
|
||||
data: [{
|
||||
value: 335,
|
||||
name: 'Laptop'
|
||||
},
|
||||
{
|
||||
value: 310,
|
||||
name: 'Tablet'
|
||||
},
|
||||
{
|
||||
value: 234,
|
||||
name: 'Mobile'
|
||||
},
|
||||
{
|
||||
value: 135,
|
||||
name: 'Others'
|
||||
},
|
||||
{
|
||||
value: 1548,
|
||||
name: 'Desktop'
|
||||
}
|
||||
],
|
||||
// itemStyle: {
|
||||
// emphasis: {
|
||||
// shadowBlur: 10,
|
||||
// shadowOffsetX: 0,
|
||||
// shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
// }
|
||||
// }
|
||||
}]
|
||||
};
|
||||
|
||||
var data = [
|
||||
[
|
||||
[28604, 77, 17096869, 'Australia', 1990],
|
||||
[31163, 77.4, 27662440, 'Canada', 1990],
|
||||
[1516, 68, 1154605773, 'China', 1990],
|
||||
[13670, 74.7, 10582082, 'Cuba', 1990],
|
||||
[28599, 75, 4986705, 'Finland', 1990],
|
||||
[29476, 77.1, 56943299, 'France', 1990],
|
||||
[31476, 75.4, 78958237, 'Germany', 1990],
|
||||
[28666, 78.1, 254830, 'Iceland', 1990],
|
||||
[1777, 57.7, 870601776, 'India', 1990],
|
||||
[29550, 79.1, 122249285, 'Japan', 1990],
|
||||
[2076, 67.9, 20194354, 'North Korea', 1990],
|
||||
[12087, 72, 42972254, 'South Korea', 1990],
|
||||
[24021, 75.4, 3397534, 'New Zealand', 1990],
|
||||
[43296, 76.8, 4240375, 'Norway', 1990],
|
||||
[10088, 70.8, 38195258, 'Poland', 1990],
|
||||
[19349, 69.6, 147568552, 'Russia', 1990],
|
||||
[10670, 67.3, 53994605, 'Turkey', 1990],
|
||||
[26424, 75.7, 57110117, 'United Kingdom', 1990],
|
||||
[37062, 75.4, 252847810, 'United States', 1990]
|
||||
],
|
||||
[
|
||||
[44056, 81.8, 23968973, 'Australia', 2015],
|
||||
[43294, 81.7, 35939927, 'Canada', 2015],
|
||||
[13334, 76.9, 1376048943, 'China', 2015],
|
||||
[21291, 78.5, 11389562, 'Cuba', 2015],
|
||||
[38923, 80.8, 5503457, 'Finland', 2015],
|
||||
[37599, 81.9, 64395345, 'France', 2015],
|
||||
[44053, 81.1, 80688545, 'Germany', 2015],
|
||||
[42182, 82.8, 329425, 'Iceland', 2015],
|
||||
[5903, 66.8, 1311050527, 'India', 2015],
|
||||
[36162, 83.5, 126573481, 'Japan', 2015],
|
||||
[1390, 71.4, 25155317, 'North Korea', 2015],
|
||||
[34644, 80.7, 50293439, 'South Korea', 2015],
|
||||
[34186, 80.6, 4528526, 'New Zealand', 2015],
|
||||
[64304, 81.6, 5210967, 'Norway', 2015],
|
||||
[24787, 77.3, 38611794, 'Poland', 2015],
|
||||
[23038, 73.13, 143456918, 'Russia', 2015],
|
||||
[19360, 76.5, 78665830, 'Turkey', 2015],
|
||||
[38225, 81.4, 64715810, 'United Kingdom', 2015],
|
||||
[53354, 79.1, 321773631, 'United States', 2015]
|
||||
]
|
||||
];
|
||||
const bubbleChart = {
|
||||
grid: {
|
||||
zlevel: 0,
|
||||
x: 50,
|
||||
x2: 50,
|
||||
y: 30,
|
||||
y2: 30,
|
||||
borderWidth: 0,
|
||||
backgroundColor: 'rgba(0,0,0,0)',
|
||||
borderColor: 'rgba(0,0,0,0)',
|
||||
},
|
||||
legend: {
|
||||
right: 10,
|
||||
data: ['2018', '2019'],
|
||||
textStyle: {
|
||||
color: '#999'
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#8791af'
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
color: "rgba(166, 176, 207, 0.1)"
|
||||
}
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#8791af'
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
color: "rgba(166, 176, 207, 0.1)"
|
||||
}
|
||||
},
|
||||
scale: true
|
||||
},
|
||||
series: [{
|
||||
name: '2018',
|
||||
data: data[0],
|
||||
type: 'scatter',
|
||||
symbolSize(data) {
|
||||
return Math.sqrt(data[2]) / 5e2
|
||||
},
|
||||
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
formatter({
|
||||
data
|
||||
}) {
|
||||
return data[3]
|
||||
},
|
||||
position: 'top'
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
|
||||
shadowBlur: 10,
|
||||
shadowColor: 'rgba(120, 36, 50, 0.5)',
|
||||
shadowOffsetY: 5,
|
||||
color: new graphic.RadialGradient(0.4, 0.3, 1, [{
|
||||
offset: 0,
|
||||
color: 'rgb(134, 204, 255)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(85, 110, 230)'
|
||||
}
|
||||
])
|
||||
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '2019',
|
||||
data: data[1],
|
||||
type: 'scatter',
|
||||
symbolSize(data) {
|
||||
return Math.sqrt(data[2]) / 5e2
|
||||
},
|
||||
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
formatter({
|
||||
data
|
||||
}) {
|
||||
return data[3]
|
||||
},
|
||||
position: 'top'
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowColor: 'rgba(52, 195, 143, 0.5)',
|
||||
shadowOffsetY: 5,
|
||||
color: new graphic.RadialGradient(0.4, 0.3, 1, [{
|
||||
offset: 0,
|
||||
color: 'rgb(111, 255, 203)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(52, 195, 143)'
|
||||
}
|
||||
])
|
||||
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
const doughnutChart = {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
x: 'left',
|
||||
data: ['Laptop', 'Tablet', 'Mobile', 'Others', 'Desktop'],
|
||||
textStyle: {
|
||||
color: '#999'
|
||||
}
|
||||
},
|
||||
color: ['#556ee6', '#f1b44c', '#f46a6a', '#50a5f1', '#34c38f'],
|
||||
series: [{
|
||||
name: 'Total sales',
|
||||
type: 'pie',
|
||||
radius: ['50%', '70%'],
|
||||
avoidLabelOverlap: false,
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
normal: {
|
||||
show: false
|
||||
},
|
||||
data: [{
|
||||
value: 335,
|
||||
name: 'Laptop'
|
||||
},
|
||||
{
|
||||
value: 310,
|
||||
name: 'Tablet'
|
||||
},
|
||||
{
|
||||
value: 234,
|
||||
name: 'Mobile'
|
||||
},
|
||||
{
|
||||
value: 135,
|
||||
name: 'Others'
|
||||
},
|
||||
{
|
||||
value: 1548,
|
||||
name: 'Desktop'
|
||||
}
|
||||
]
|
||||
}]
|
||||
};
|
||||
|
||||
const candleStickChart = {
|
||||
// Setup grid
|
||||
grid: {
|
||||
zlevel: 0,
|
||||
x: 50,
|
||||
x2: 50,
|
||||
y: 30,
|
||||
y2: 30,
|
||||
borderWidth: 0,
|
||||
backgroundColor: 'rgba(0,0,0,0)',
|
||||
borderColor: 'rgba(0,0,0,0)',
|
||||
},
|
||||
xAxis: {
|
||||
data: ['2017-10-24', '2017-10-25', '2017-10-26', '2017-10-27'],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#8791af'
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(166, 176, 207, 0.1)"
|
||||
}
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#8791af'
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(166, 176, 207, 0.1)"
|
||||
}
|
||||
},
|
||||
},
|
||||
series: [{
|
||||
type: 'k',
|
||||
data: [
|
||||
[20, 30, 10, 35],
|
||||
[40, 35, 30, 55],
|
||||
[33, 38, 33, 40],
|
||||
[40, 40, 32, 42]
|
||||
],
|
||||
itemStyle: {
|
||||
color: '#556ee6',
|
||||
color0: '#34c38f',
|
||||
borderColor: '#556ee6',
|
||||
borderColor0: '#34c38f'
|
||||
|
||||
}
|
||||
}]
|
||||
};
|
||||
|
||||
export {
|
||||
polarChart,
|
||||
mixedBarChart,
|
||||
guageChart,
|
||||
lineChart,
|
||||
pieChart,
|
||||
bubbleChart,
|
||||
doughnutChart,
|
||||
candleStickChart
|
||||
};
|
||||
|
|
@ -1,170 +0,0 @@
|
|||
<script>
|
||||
import { VueEcharts } from "vue3-echarts";
|
||||
// import "echarts/lib/chart/line";
|
||||
// import "echarts/lib/chart/bar";
|
||||
// import "echarts/lib/chart/pie";
|
||||
// import "echarts/lib/chart/scatter";
|
||||
// import "echarts/lib/chart/candlestick";
|
||||
// import "echarts/lib/chart/gauge";
|
||||
|
||||
// import "echarts/lib/component/legend";
|
||||
// import "echarts/lib/component/title";
|
||||
// import "echarts/lib/component/tooltip";
|
||||
// import "echarts/lib/component/polar";
|
||||
// import "echarts/lib/component/toolbox";
|
||||
// import "echarts/lib/component/grid";
|
||||
// import "echarts/lib/component/axis";
|
||||
|
||||
import Layout from "../../../layouts/main";
|
||||
import PageHeader from "@/components/page-header";
|
||||
import appConfig from "@/app.config";
|
||||
|
||||
import {
|
||||
polarChart,
|
||||
lineChart,
|
||||
pieChart,
|
||||
bubbleChart,
|
||||
doughnutChart,
|
||||
mixedBarChart,
|
||||
guageChart,
|
||||
candleStickChart,
|
||||
} from "./data";
|
||||
|
||||
export default {
|
||||
page: {
|
||||
title: "Echart Chart",
|
||||
meta: [{ name: "description", content: appConfig.description }],
|
||||
},
|
||||
components: { Layout, PageHeader, VueEcharts },
|
||||
data() {
|
||||
return {
|
||||
// polarChart: polarChart,
|
||||
// lineChart: lineChart,
|
||||
// pieChart: pieChart,
|
||||
// bubbleChart: bubbleChart,
|
||||
// doughnutChart: doughnutChart,
|
||||
// mixedBarChart: mixedBarChart,
|
||||
// candleStickChart: candleStickChart,
|
||||
// guageChart: guageChart,
|
||||
title: "ECharts",
|
||||
items: [
|
||||
{
|
||||
text: "Charts",
|
||||
href: "/",
|
||||
},
|
||||
{
|
||||
text: "ECharts",
|
||||
active: true,
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
option() {
|
||||
return {
|
||||
polarChart: polarChart,
|
||||
lineChart: lineChart,
|
||||
pieChart: pieChart,
|
||||
bubbleChart: bubbleChart,
|
||||
doughnutChart: doughnutChart,
|
||||
mixedBarChart: mixedBarChart,
|
||||
candleStickChart: candleStickChart,
|
||||
guageChart: guageChart,
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Layout>
|
||||
<PageHeader :title="title" :items="items" />
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title mb-4">Line Chart</h4>
|
||||
<vue-echarts
|
||||
:option="option.lineChart"
|
||||
style="height: 300px"
|
||||
ref="chart"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title mb-4">Mix Line-Bar</h4>
|
||||
<vue-echarts
|
||||
:option="option.mixedBarChart"
|
||||
style="height: 300px"
|
||||
ref="chart"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title mb-4">Pie Chart</h4>
|
||||
<vue-echarts :option="option.pieChart" style="height: 300px" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title mb-4">Doughnut Chart</h4>
|
||||
<vue-echarts :option="option.doughnutChart" style="height: 300px" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title mb-4">Candle Stick Chart</h4>
|
||||
<vue-echarts
|
||||
:option="option.candleStickChart"
|
||||
style="height: 300px"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title mb-4">Gauge Chart</h4>
|
||||
<vue-echarts :option="option.guageChart" style="height: 300px" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title mb-4">Bubble Chart</h4>
|
||||
<vue-echarts :option="option.bubbleChart" style="height: 300px" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title mb-4">Polar Chart</h4>
|
||||
<vue-echarts
|
||||
:option="option.polarChart.polar"
|
||||
style="height: 300px"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
</template>
|
||||
|
|
@ -1,88 +0,0 @@
|
|||
const chatData = [
|
||||
{
|
||||
id: 1,
|
||||
image: require('@/assets/images/users/avatar-2.jpg'),
|
||||
name: 'Steven Franklin',
|
||||
message: 'Hey! there I\'m available',
|
||||
time: '05 min',
|
||||
color: 'secondary'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
image: require('@/assets/images/users/avatar-3.jpg'),
|
||||
name: 'Adam Miller',
|
||||
message: 'I\'ve finished it! See you so',
|
||||
time: '12 min',
|
||||
color: 'success'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: 'Keith Gonzales',
|
||||
message: 'This theme is awesome!',
|
||||
time: '24 min',
|
||||
color: 'success'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
image: require('@/assets/images/users/avatar-4.jpg'),
|
||||
name: 'Jose Vickery',
|
||||
message: 'Nice to meet you',
|
||||
time: '1 hr',
|
||||
color: 'warning'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: 'Mitchel Givens',
|
||||
message: 'Hey! there I\'m available',
|
||||
time: '3 hrs',
|
||||
color: 'secondary'
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
image: require('@/assets/images/users/avatar-4.jpg'),
|
||||
name: 'Stephen Hadley',
|
||||
message: 'I\'ve finished it! See you so',
|
||||
time: '5 hrs',
|
||||
color: 'success'
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
image: require('@/assets/images/users/avatar-2.jpg'),
|
||||
name: 'Leord Joseph',
|
||||
message: 'This theme is awesome!',
|
||||
time: '24 min',
|
||||
color: 'success'
|
||||
},
|
||||
];
|
||||
|
||||
const chatMessagesData = [
|
||||
{
|
||||
name: 'Steven Franklin',
|
||||
message: 'Hello!',
|
||||
time: '10:00'
|
||||
},
|
||||
{
|
||||
align: 'right',
|
||||
name: 'Henry Wells',
|
||||
message: 'Hi, How are you? What about our next meeting?',
|
||||
time: '10:02'
|
||||
},
|
||||
{
|
||||
name: 'Steven Franklin',
|
||||
message: 'Yeah everything is fine',
|
||||
time: '10:06'
|
||||
},
|
||||
{
|
||||
name: 'Steven Franklin',
|
||||
message: '& Next meeting tomorrow 10.00AM',
|
||||
time: '10:06'
|
||||
},
|
||||
{
|
||||
align: 'right',
|
||||
name: 'Henry Wells',
|
||||
message: 'Wow that\'s great',
|
||||
time: '10:07'
|
||||
}
|
||||
];
|
||||
|
||||
export { chatData, chatMessagesData };
|
||||
|
|
@ -1,675 +0,0 @@
|
|||
<script>
|
||||
import { SimpleBar } from "simplebar-vue3";
|
||||
|
||||
import Layout from "../../layouts/main";
|
||||
import appConfig from "@/app.config";
|
||||
import PageHeader from "@/components/page-header";
|
||||
|
||||
import { chatData, chatMessagesData } from "./data";
|
||||
|
||||
import { required, helpers } from "@vuelidate/validators";
|
||||
import useVuelidate from "@vuelidate/core";
|
||||
|
||||
/**
|
||||
* Chat Component
|
||||
*/
|
||||
export default {
|
||||
setup() {
|
||||
return { v$: useVuelidate() };
|
||||
},
|
||||
page: {
|
||||
title: "Chat",
|
||||
meta: [
|
||||
{
|
||||
name: "description",
|
||||
content: appConfig.description,
|
||||
},
|
||||
],
|
||||
},
|
||||
components: {
|
||||
Layout,
|
||||
PageHeader,
|
||||
SimpleBar,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chatData: chatData,
|
||||
chatMessagesData: chatMessagesData,
|
||||
title: "Chat",
|
||||
items: [
|
||||
{
|
||||
text: "Skote",
|
||||
href: "/",
|
||||
},
|
||||
{
|
||||
text: "Chat",
|
||||
active: true,
|
||||
},
|
||||
],
|
||||
submitted: false,
|
||||
form: {
|
||||
message: "",
|
||||
},
|
||||
username: "Steven Franklin",
|
||||
};
|
||||
},
|
||||
validations: {
|
||||
form: {
|
||||
message: {
|
||||
required: helpers.withMessage("Message is required", required),
|
||||
},
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* Get the name of user
|
||||
*/
|
||||
chatUsername(name) {
|
||||
this.username = name;
|
||||
this.usermessage = "Hello";
|
||||
this.chatMessagesData = [];
|
||||
const currentDate = new Date();
|
||||
|
||||
this.chatMessagesData.push({
|
||||
name: this.username,
|
||||
message: this.usermessage,
|
||||
time: currentDate.getHours() + ":" + currentDate.getMinutes(),
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Char form Submit
|
||||
*/
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
formSubmit(e) {
|
||||
this.submitted = true;
|
||||
|
||||
// stop here if form is invalid
|
||||
this.v$.$touch();
|
||||
|
||||
if (this.v$.$invalid) {
|
||||
return;
|
||||
} else {
|
||||
const message = this.form.message;
|
||||
const currentDate = new Date();
|
||||
this.chatMessagesData.push({
|
||||
align: "right",
|
||||
name: "Henry Wells",
|
||||
message,
|
||||
time: currentDate.getHours() + ":" + currentDate.getMinutes(),
|
||||
});
|
||||
this.handleScroll();
|
||||
}
|
||||
this.submitted = false;
|
||||
this.form = {};
|
||||
},
|
||||
|
||||
handleScroll() {
|
||||
if (this.$refs.current.$el) {
|
||||
setTimeout(() => {
|
||||
this.$refs.current.SimpleBar.value.getScrollElement().scrollTop =
|
||||
this.$refs.current.SimpleBar.value.getScrollElement().scrollHeight + 1500;
|
||||
}, 500);
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
var container1 = document.querySelector(
|
||||
"#chat-list .simplebar-content-wrapper"
|
||||
);
|
||||
container1.scrollTo({ top: 500, behavior: "smooth" });
|
||||
|
||||
var container2 = document.querySelector(
|
||||
"#containerElement .simplebar-content-wrapper"
|
||||
);
|
||||
container2.scrollTo({ top: 500, behavior: "smooth" });
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Layout>
|
||||
<PageHeader :title="title" :items="items" />
|
||||
<div class="d-lg-flex">
|
||||
<div class="chat-leftsidebar me-lg-4">
|
||||
<div class>
|
||||
<div class="py-4 border-bottom">
|
||||
<div class="d-flex">
|
||||
<div class="align-self-center me-3">
|
||||
<img
|
||||
src="@/assets/images/users/avatar-1.jpg"
|
||||
class="avatar-xs rounded-circle"
|
||||
alt
|
||||
/>
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<h5 class="font-size-15 mt-0 mb-1">Henry Wells</h5>
|
||||
<p class="text-muted mb-0">
|
||||
<i class="mdi mdi-circle text-success align-middle me-1"></i>
|
||||
Active
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<b-dropdown
|
||||
menu-class="dropdown-menu-end"
|
||||
class="chat-noti-dropdown active"
|
||||
right
|
||||
variant="white"
|
||||
>
|
||||
<template v-slot:button-content>
|
||||
<i class="bx bx-bell bx-tada"></i>
|
||||
</template>
|
||||
<b-dropdown-item>Action</b-dropdown-item>
|
||||
<b-dropdown-item>Another action</b-dropdown-item>
|
||||
<b-dropdown-item>Something else here</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="search-box chat-search-box py-4">
|
||||
<div class="position-relative">
|
||||
<input type="text" class="form-control" placeholder="Search..." />
|
||||
<i class="bx bx-search-alt search-icon"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chat-leftsidebar-nav">
|
||||
<b-tabs pills fill content-class="py-4">
|
||||
<b-tab title="Tab 1" active>
|
||||
<template v-slot:title>
|
||||
<i class="bx bx-chat font-size-20 d-sm-none"></i>
|
||||
<span class="d-none d-sm-block">Chat</span>
|
||||
</template>
|
||||
<b-card-text>
|
||||
<div>
|
||||
<h5 class="font-size-14 mb-3">Recent</h5>
|
||||
<SimpleBar style="max-height: 410px" id="chat-list">
|
||||
<ul class="list-unstyled chat-list">
|
||||
<li
|
||||
class
|
||||
v-for="data of chatData"
|
||||
:key="data.id"
|
||||
@click="chatUsername(data.name)"
|
||||
:class="{ active: username == data.name }"
|
||||
>
|
||||
<a href="javascript: void(0);">
|
||||
<div class="d-flex">
|
||||
<div class="align-self-center me-3">
|
||||
<i
|
||||
:class="`mdi mdi-circle text-${data.color} font-size-10`"
|
||||
></i>
|
||||
</div>
|
||||
<div
|
||||
class="align-self-center me-3"
|
||||
v-if="data.image"
|
||||
>
|
||||
<img
|
||||
:src="`${data.image}`"
|
||||
class="rounded-circle avatar-xs"
|
||||
alt
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="avatar-xs align-self-center me-3"
|
||||
v-if="!data.image"
|
||||
>
|
||||
<span
|
||||
class="
|
||||
avatar-title
|
||||
rounded-circle
|
||||
bg-soft bg-primary
|
||||
text-primary
|
||||
"
|
||||
>{{ data.name.charAt(0) }}</span
|
||||
>
|
||||
</div>
|
||||
<div class="flex-grow-1 overflow-hidden">
|
||||
<h5 class="text-truncate font-size-14 mb-1">
|
||||
{{ data.name }}
|
||||
</h5>
|
||||
<p class="text-truncate mb-0">
|
||||
{{ data.message }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="font-size-11">{{ data.time }}</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</SimpleBar>
|
||||
</div>
|
||||
</b-card-text>
|
||||
</b-tab>
|
||||
<b-tab>
|
||||
<template v-slot:title>
|
||||
<i class="bx bx-group font-size-20 d-sm-none"></i>
|
||||
<span class="d-none d-sm-block">Groups</span>
|
||||
</template>
|
||||
<b-card-text>
|
||||
<h5 class="font-size-14 mb-3">Groups</h5>
|
||||
<ul class="list-unstyled chat-list">
|
||||
<li>
|
||||
<a href="#">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="avatar-xs me-3">
|
||||
<span
|
||||
class="
|
||||
avatar-title
|
||||
rounded-circle
|
||||
bg-soft bg-primary
|
||||
text-primary
|
||||
"
|
||||
>G</span
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="flex-grow-1">
|
||||
<h5 class="font-size-14 mb-0">General</h5>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="#">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="avatar-xs me-3">
|
||||
<span
|
||||
class="
|
||||
avatar-title
|
||||
rounded-circle
|
||||
bg-soft bg-primary
|
||||
text-primary
|
||||
"
|
||||
>R</span
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="flex-grow-1">
|
||||
<h5 class="font-size-14 mb-0">Reporting</h5>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="#">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="avatar-xs me-3">
|
||||
<span
|
||||
class="
|
||||
avatar-title
|
||||
rounded-circle
|
||||
bg-soft bg-primary
|
||||
text-primary
|
||||
"
|
||||
>M</span
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="flex-grow-1">
|
||||
<h5 class="font-size-14 mb-0">Meeting</h5>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="#">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="avatar-xs me-3">
|
||||
<span
|
||||
class="
|
||||
avatar-title
|
||||
rounded-circle
|
||||
bg-soft bg-primary
|
||||
text-primary
|
||||
"
|
||||
>A</span
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="flex-grow-1">
|
||||
<h5 class="font-size-14 mb-0">Project A</h5>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="#">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="avatar-xs me-3">
|
||||
<span
|
||||
class="
|
||||
avatar-title
|
||||
rounded-circle
|
||||
bg-soft bg-primary
|
||||
text-primary
|
||||
"
|
||||
>B</span
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="flex-grow-1">
|
||||
<h5 class="font-size-14 mb-0">Project B</h5>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</b-card-text>
|
||||
</b-tab>
|
||||
<b-tab>
|
||||
<template v-slot:title>
|
||||
<i class="bx bx-book-content font-size-20 d-sm-none"></i>
|
||||
<span class="d-none d-sm-block">Contacts</span>
|
||||
</template>
|
||||
<b-card-text>
|
||||
<h5 class="font-size-14 mb-3">Contacts</h5>
|
||||
<SimpleBar style="height: 410px">
|
||||
<div>
|
||||
<div class="avatar-xs mb-3">
|
||||
<span
|
||||
class="
|
||||
avatar-title
|
||||
rounded-circle
|
||||
bg-soft bg-primary
|
||||
text-primary
|
||||
"
|
||||
>A</span
|
||||
>
|
||||
</div>
|
||||
|
||||
<ul class="list-unstyled chat-list">
|
||||
<li>
|
||||
<a href="#">
|
||||
<h5 class="font-size-14 mb-0">Adam Miller</h5>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="#">
|
||||
<h5 class="font-size-14 mb-0">Alfonso Fisher</h5>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<div class="avatar-xs mb-3">
|
||||
<span
|
||||
class="
|
||||
avatar-title
|
||||
rounded-circle
|
||||
bg-soft bg-primary
|
||||
text-primary
|
||||
"
|
||||
>B</span
|
||||
>
|
||||
</div>
|
||||
|
||||
<ul class="list-unstyled chat-list">
|
||||
<li>
|
||||
<a href="#">
|
||||
<h5 class="font-size-14 mb-0">Bonnie Harney</h5>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<div class="avatar-xs mb-3">
|
||||
<span
|
||||
class="
|
||||
avatar-title
|
||||
rounded-circle
|
||||
bg-soft bg-primary
|
||||
text-primary
|
||||
"
|
||||
>C</span
|
||||
>
|
||||
</div>
|
||||
|
||||
<ul class="list-unstyled chat-list">
|
||||
<li>
|
||||
<a href="#">
|
||||
<h5 class="font-size-14 mb-0">Charles Brown</h5>
|
||||
</a>
|
||||
<a href="#">
|
||||
<h5 class="font-size-14 mb-0">Carmella Jones</h5>
|
||||
</a>
|
||||
<a href="#">
|
||||
<h5 class="font-size-14 mb-0">Carrie Williams</h5>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<div class="avatar-xs mb-3">
|
||||
<span
|
||||
class="
|
||||
avatar-title
|
||||
rounded-circle
|
||||
bg-soft bg-primary
|
||||
text-primary
|
||||
"
|
||||
>D</span
|
||||
>
|
||||
</div>
|
||||
|
||||
<ul class="list-unstyled chat-list">
|
||||
<li>
|
||||
<a href="#">
|
||||
<h5 class="font-size-14 mb-0">Dolores Minter</h5>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</SimpleBar>
|
||||
</b-card-text>
|
||||
</b-tab>
|
||||
</b-tabs>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-100 user-chat">
|
||||
<div class="card">
|
||||
<div class="p-4 border-bottom">
|
||||
<div class="row">
|
||||
<div class="col-md-4 col-9">
|
||||
<h5 class="font-size-15 mb-1">{{ username }}</h5>
|
||||
<p class="text-muted mb-0">
|
||||
<i class="mdi mdi-circle text-success align-middle me-1"></i>
|
||||
Active now
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-md-8 col-3">
|
||||
<ul class="list-inline user-chat-nav text-end mb-0">
|
||||
<li class="list-inline-item d-none d-sm-inline-block">
|
||||
<b-dropdown
|
||||
menu-class="dropdown-menu-md dropdown-menu-end"
|
||||
variant="white"
|
||||
right
|
||||
toggle-class="nav-btn"
|
||||
>
|
||||
<template v-slot:button-content>
|
||||
<i class="bx bx-search-alt-2"></i>
|
||||
</template>
|
||||
<form class="p-3">
|
||||
<div class="form-group m-0">
|
||||
<div class="input-group">
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
placeholder="Search ..."
|
||||
aria-label="Recipient's username"
|
||||
/>
|
||||
<div class="input-group-append">
|
||||
<button class="btn btn-primary" type="submit">
|
||||
<i class="mdi mdi-magnify"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</b-dropdown>
|
||||
</li>
|
||||
<li class="list-inline-item d-none d-sm-inline-block">
|
||||
<b-dropdown
|
||||
toggle-class="nav-btn"
|
||||
menu-class="dropdown-menu-end"
|
||||
right
|
||||
variant="white"
|
||||
>
|
||||
<template v-slot:button-content>
|
||||
<i class="bx bx-cog"></i>
|
||||
</template>
|
||||
<b-dropdown-item>View Profile</b-dropdown-item>
|
||||
<b-dropdown-item>Clear chat</b-dropdown-item>
|
||||
<b-dropdown-item>Muted</b-dropdown-item>
|
||||
<b-dropdown-item>Delete</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
</li>
|
||||
|
||||
<li class="list-inline-item">
|
||||
<b-dropdown
|
||||
toggle-class="nav-btn"
|
||||
menu-class="dropdown-menu-end"
|
||||
right
|
||||
variant="white"
|
||||
>
|
||||
<template v-slot:button-content>
|
||||
<i class="bx bx-dots-horizontal-rounded"></i>
|
||||
</template>
|
||||
<b-dropdown-item>Action</b-dropdown-item>
|
||||
<b-dropdown-item>Another action</b-dropdown-item>
|
||||
<b-dropdown-item>Something else</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chat-users">
|
||||
<div class="chat-conversation p-3">
|
||||
<SimpleBar
|
||||
style="max-height: 470px"
|
||||
id="containerElement"
|
||||
ref="current"
|
||||
>
|
||||
<ul class="list-unstyled">
|
||||
<li>
|
||||
<div class="chat-day-title">
|
||||
<span class="title">Today</span>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
v-for="data of chatMessagesData"
|
||||
:key="data.message"
|
||||
:class="{ right: `${data.align}` === 'right' }"
|
||||
>
|
||||
<div class="conversation-list">
|
||||
<b-dropdown
|
||||
variant="white"
|
||||
menu-class="dropdown-menu-end"
|
||||
>
|
||||
<template v-slot:button-content>
|
||||
<i class="bx bx-dots-vertical-rounded"></i>
|
||||
</template>
|
||||
<b-dropdown-item>Copy</b-dropdown-item>
|
||||
<b-dropdown-item>Save</b-dropdown-item>
|
||||
<b-dropdown-item>Forward</b-dropdown-item>
|
||||
<b-dropdown-item>Delete</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
<div class="ctext-wrap">
|
||||
<div class="conversation-name">{{ data.name }}</div>
|
||||
<p>{{ data.message }}</p>
|
||||
<p class="chat-time mb-0">
|
||||
<i class="bx bx-time-five align-middle me-1"></i>
|
||||
{{ data.time }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</SimpleBar>
|
||||
</div>
|
||||
<div class="p-3 chat-input-section">
|
||||
<form @submit.prevent="formSubmit" class="row">
|
||||
<div class="col">
|
||||
<div class="position-relative">
|
||||
<input
|
||||
type="text"
|
||||
v-model="form.message"
|
||||
class="form-control chat-input rounded"
|
||||
placeholder="Enter Message..."
|
||||
:class="{
|
||||
'is-invalid': submitted && v$.form.message.$error,
|
||||
}"
|
||||
/>
|
||||
<div
|
||||
v-if="submitted && v$.form.message.$error"
|
||||
class="invalid-feedback"
|
||||
>
|
||||
<span v-if="v$.form.message.required.$message">{{
|
||||
v$.form.message.required.$message
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="chat-input-links">
|
||||
<ul class="list-inline mb-0">
|
||||
<li class="list-inline-item">
|
||||
<a
|
||||
href="javascript: void(0);"
|
||||
v-b-tooltip.hover
|
||||
placement="top"
|
||||
title="Emoji"
|
||||
>
|
||||
<i class="mdi mdi-emoticon-happy-outline"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="list-inline-item">
|
||||
<a
|
||||
href="javascript: void(0);"
|
||||
v-b-tooltip.hover
|
||||
placement="top"
|
||||
title="Images"
|
||||
>
|
||||
<i class="mdi mdi-file-image-outline"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="list-inline-item">
|
||||
<a
|
||||
href="javascript: void(0);"
|
||||
v-b-tooltip.hover
|
||||
placement="top"
|
||||
title="Add Files"
|
||||
>
|
||||
<i class="mdi mdi-file-document-outline"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<button
|
||||
type="submit"
|
||||
class="btn btn-primary btn-rounded chat-send w-md"
|
||||
>
|
||||
<span class="d-none d-sm-inline-block me-2">Send</span>
|
||||
<i class="mdi mdi-send"></i>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- end row -->
|
||||
</Layout>
|
||||
</template>
|
||||
|
|
@ -1,300 +0,0 @@
|
|||
<script>
|
||||
import Layout from "../../layouts/main";
|
||||
import PageHeader from "@/components/page-header";
|
||||
import appConfig from "@/app.config";
|
||||
|
||||
import { required, helpers } from "@vuelidate/validators";
|
||||
import useVuelidate from "@vuelidate/core";
|
||||
|
||||
import Multiselect from "@vueform/multiselect";
|
||||
|
||||
import { userGridData } from "./data-user";
|
||||
|
||||
/**
|
||||
* Contacts-grid component
|
||||
*/
|
||||
export default {
|
||||
setup() {
|
||||
return { v$: useVuelidate() };
|
||||
},
|
||||
page: {
|
||||
title: "Contact Users Grid",
|
||||
meta: [{ name: "description", content: appConfig.description }],
|
||||
},
|
||||
components: { Layout, PageHeader, Multiselect },
|
||||
data() {
|
||||
return {
|
||||
userGridData: userGridData,
|
||||
title: "Users Grid",
|
||||
items: [
|
||||
{
|
||||
text: "Contacts",
|
||||
href: "/",
|
||||
},
|
||||
{
|
||||
text: "Users Grid",
|
||||
active: true,
|
||||
},
|
||||
],
|
||||
showModal: false,
|
||||
submitted: false,
|
||||
users: {
|
||||
name: "",
|
||||
designation: "",
|
||||
email: "",
|
||||
},
|
||||
value1: null,
|
||||
options: [
|
||||
"Photoshop",
|
||||
"illustrator",
|
||||
"Html",
|
||||
"Css",
|
||||
"Php",
|
||||
"Java",
|
||||
"Python",
|
||||
"Ruby",
|
||||
],
|
||||
};
|
||||
},
|
||||
|
||||
validations: {
|
||||
users: {
|
||||
name: {
|
||||
required: helpers.withMessage("Name is required", required),
|
||||
},
|
||||
designation: {
|
||||
required: helpers.withMessage("Designation is required", required),
|
||||
},
|
||||
email: { required: helpers.withMessage("Email is required", required) },
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* Modal form submit
|
||||
*/
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
handleSubmit(e) {
|
||||
this.submitted = true;
|
||||
|
||||
// stop here if form is invalid
|
||||
this.v$.$touch();
|
||||
if (this.v$.$invalid) {
|
||||
return;
|
||||
} else {
|
||||
this.userGridData.push({
|
||||
id: this.userGridData.length + 1,
|
||||
name: this.users.name,
|
||||
designation: this.users.designation,
|
||||
projects: this.value1,
|
||||
email: this.users.email,
|
||||
});
|
||||
this.showModal = false;
|
||||
this.users = {};
|
||||
this.value1 = [];
|
||||
}
|
||||
this.submitted = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Layout>
|
||||
<PageHeader :title="title" :items="items" />
|
||||
<div class="row">
|
||||
<div class="d-flex">
|
||||
<button class="btn btn-success ms-auto mb-2" @click="showModal = true">
|
||||
Add Customer
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<b-modal v-model="showModal" title="Add Customer" hide-footer>
|
||||
<form @submit.prevent="handleSubmit">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="mb-3">
|
||||
<label for="name">Event Name</label>
|
||||
<input
|
||||
id="name"
|
||||
v-model="users.name"
|
||||
type="text"
|
||||
class="form-control"
|
||||
placeholder="Insert name"
|
||||
:class="{
|
||||
'is-invalid': submitted && v$.users.name.$error,
|
||||
}"
|
||||
/>
|
||||
<div
|
||||
v-if="submitted && v$.users.name.$error"
|
||||
class="invalid-feedback"
|
||||
>
|
||||
<span v-if="v$.users.name.required.$message">{{
|
||||
v$.users.name.required.$message
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="mb-3">
|
||||
<label for="name">Designation</label>
|
||||
<input
|
||||
id="designation"
|
||||
v-model="users.designation"
|
||||
type="text"
|
||||
class="form-control"
|
||||
placeholder="Insert designation"
|
||||
:class="{
|
||||
'is-invalid': submitted && v$.users.designation.$error,
|
||||
}"
|
||||
/>
|
||||
<div
|
||||
v-if="submitted && v$.users.designation.$error"
|
||||
class="invalid-feedback"
|
||||
>
|
||||
<span v-if="v$.users.designation.required.$message">{{
|
||||
v$.users.designation.required.$message
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="mb-3">
|
||||
<label for="email">Email</label>
|
||||
<input
|
||||
id="email"
|
||||
v-model="users.email"
|
||||
type="email"
|
||||
class="form-control"
|
||||
placeholder="Insert email"
|
||||
:class="{
|
||||
'is-invalid': submitted && v$.users.email.$error,
|
||||
}"
|
||||
/>
|
||||
<div
|
||||
v-if="submitted && v$.users.email.$error"
|
||||
class="invalid-feedback"
|
||||
>
|
||||
<span v-if="v$.users.email.required.$message">{{
|
||||
v$.users.email.required.$message
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<label for="projects">Projects</label>
|
||||
<multiselect
|
||||
v-model="value1"
|
||||
:options="options"
|
||||
:multiple="true"
|
||||
></multiselect>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-end mt-3">
|
||||
<b-button variant="light" @click="showModal = false">Close</b-button>
|
||||
<b-button type="submit" variant="success" class="ms-1"
|
||||
>Create event</b-button
|
||||
>
|
||||
</div>
|
||||
</form>
|
||||
</b-modal>
|
||||
<div class="row">
|
||||
<div
|
||||
v-for="user in userGridData"
|
||||
:key="user.id"
|
||||
class="col-xl-3 col-sm-6"
|
||||
>
|
||||
<div class="card text-center">
|
||||
<div class="card-body">
|
||||
<div v-if="!user.image" class="avatar-sm mx-auto mb-4">
|
||||
<span
|
||||
class="
|
||||
avatar-title
|
||||
rounded-circle
|
||||
bg-soft bg-primary
|
||||
text-primary
|
||||
font-size-16
|
||||
"
|
||||
>{{ user.name.charAt(0) }}</span
|
||||
>
|
||||
</div>
|
||||
<div v-if="user.image" class="mb-4">
|
||||
<img
|
||||
class="rounded-circle avatar-sm"
|
||||
:src="`${user.image}`"
|
||||
alt
|
||||
/>
|
||||
</div>
|
||||
<h5 class="font-size-15 mb-1">
|
||||
<a href="javascript: void(0);" class="text-dark">{{
|
||||
user.name
|
||||
}}</a>
|
||||
</h5>
|
||||
<p class="text-muted">{{ user.designation }}</p>
|
||||
|
||||
<div>
|
||||
<a
|
||||
href="javascript: void(0);"
|
||||
class="badge bg-primary font-size-11 m-1"
|
||||
>{{ user.projects[0] }}</a
|
||||
>
|
||||
<a
|
||||
href="javascript: void(0);"
|
||||
class="badge bg-primary font-size-11 m-1"
|
||||
>{{ user.projects[1] }}</a
|
||||
>
|
||||
<a
|
||||
href="javascript: void(0);"
|
||||
class="badge bg-primary font-size-11 m-1"
|
||||
>{{ user.projects[2] }}</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer bg-transparent border-top">
|
||||
<div class="contact-links d-flex font-size-20">
|
||||
<div class="flex-fill">
|
||||
<a
|
||||
v-b-tooltip.hover.top
|
||||
title="Message"
|
||||
href="javascript: void(0);"
|
||||
>
|
||||
<i class="bx bx-message-square-dots"></i>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex-fill">
|
||||
<a
|
||||
v-b-tooltip.hover.top
|
||||
title="Projects"
|
||||
href="javascript: void(0);"
|
||||
>
|
||||
<i class="bx bx-pie-chart-alt"></i>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex-fill">
|
||||
<a
|
||||
v-b-tooltip.hover.top
|
||||
title="Profile"
|
||||
href="javascript: void(0);"
|
||||
>
|
||||
<i class="bx bx-user-circle"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="text-center my-3">
|
||||
<a href="javascript:void(0);" class="text-success">
|
||||
<i class="bx bx-hourglass bx-spin me-2"></i> Load more
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col-->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</Layout>
|
||||
</template>
|
||||
|
|
@ -1,144 +0,0 @@
|
|||
<script>
|
||||
import Layout from "../../layouts/main";
|
||||
import PageHeader from "@/components/page-header";
|
||||
import appConfig from "@/app.config";
|
||||
|
||||
import { userGridData } from "./data-user";
|
||||
|
||||
/**
|
||||
* Contacts-list component
|
||||
*/
|
||||
export default {
|
||||
page: {
|
||||
title: "Contact Users List",
|
||||
meta: [{ name: "description", content: appConfig.description }]
|
||||
},
|
||||
components: { Layout, PageHeader },
|
||||
data() {
|
||||
return {
|
||||
userGridData: userGridData,
|
||||
title: "Users List",
|
||||
items: [
|
||||
{
|
||||
text: "Contacts",
|
||||
href: "/"
|
||||
},
|
||||
{
|
||||
text: "Users List",
|
||||
active: true
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Layout>
|
||||
<PageHeader :title="title" :items="items" />
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="table-responsive">
|
||||
<table class="table align-middle table-nowrap table-hover">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th scope="col" style="width: 70px;">#</th>
|
||||
<th scope="col">Name</th>
|
||||
<th scope="col">Email</th>
|
||||
<th scope="col">Tags</th>
|
||||
<th scope="col">Projects</th>
|
||||
<th scope="col">Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="list in userGridData" :key="list.id">
|
||||
<td>
|
||||
<div v-if="!list.image" class="avatar-xs">
|
||||
|
||||
<span class="avatar-title rounded-circle">{{list.name.charAt(0)}}</span>
|
||||
</div>
|
||||
<div v-if="list.image">
|
||||
<img class="rounded-circle avatar-xs" :src="`${list.image}`" alt />
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<h5 class="font-size-14 mb-1">
|
||||
<a href="#" class="text-dark">{{list.name}}</a>
|
||||
</h5>
|
||||
<p class="text-muted mb-0">{{list.designation}}</p>
|
||||
</td>
|
||||
<td>{{list.email}}</td>
|
||||
<td>
|
||||
<div>
|
||||
<a
|
||||
href="javascript: void(0);"
|
||||
class="badge badge-soft-primary font-size-11 m-1"
|
||||
>{{list.projects[0]}}</a>
|
||||
<a
|
||||
href="javascript: void(0);"
|
||||
class="badge badge-soft-primary font-size-11 m-1"
|
||||
>{{list.projects[1]}}</a>
|
||||
<a
|
||||
href="javascript: void(0);"
|
||||
class="badge badge-soft-primary font-size-11 m-1"
|
||||
>{{list.projects[2]}}</a>
|
||||
</div>
|
||||
</td>
|
||||
<td>125</td>
|
||||
<td>
|
||||
<ul class="list-inline font-size-20 contact-links mb-0">
|
||||
<li class="list-inline-item px-2">
|
||||
<a v-b-tooltip.hover title="Message">
|
||||
<i class="bx bx-message-square-dots"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="list-inline-item px-2">
|
||||
<a v-b-tooltip.hover title="Profile">
|
||||
<i class="bx bx-user-circle"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<ul class="pagination pagination-rounded justify-content-center mt-4">
|
||||
<li class="page-item disabled">
|
||||
<a href="#" class="page-link">
|
||||
<i class="mdi mdi-chevron-left"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="page-item">
|
||||
<a href="#" class="page-link">1</a>
|
||||
</li>
|
||||
<li class="page-item active">
|
||||
<a href="#" class="page-link">2</a>
|
||||
</li>
|
||||
<li class="page-item">
|
||||
<a href="#" class="page-link">3</a>
|
||||
</li>
|
||||
<li class="page-item">
|
||||
<a href="#" class="page-link">4</a>
|
||||
</li>
|
||||
<li class="page-item">
|
||||
<a href="#" class="page-link">5</a>
|
||||
</li>
|
||||
<li class="page-item">
|
||||
<a href="#" class="page-link">
|
||||
<i class="mdi mdi-chevron-right"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
</template>
|
||||
|
|
@ -1,304 +0,0 @@
|
|||
<script>
|
||||
import Layout from "../../layouts/main";
|
||||
import PageHeader from "@/components/page-header";
|
||||
import appConfig from "@/app.config";
|
||||
|
||||
import { revenueChart } from "./data-profile";
|
||||
import Stat from "@/components/widgets/stat";
|
||||
|
||||
/**
|
||||
* Contacts-Profile component
|
||||
*/
|
||||
export default {
|
||||
page: {
|
||||
title: "Profile",
|
||||
meta: [{ name: "description", content: appConfig.description }]
|
||||
},
|
||||
components: { Layout, PageHeader, Stat },
|
||||
data() {
|
||||
return {
|
||||
revenueChart: revenueChart,
|
||||
title: "Profile",
|
||||
items: [
|
||||
{
|
||||
text: "Contacts",
|
||||
href: "/"
|
||||
},
|
||||
{
|
||||
text: "Profile",
|
||||
active: true
|
||||
}
|
||||
],
|
||||
statData: [
|
||||
{
|
||||
icon: "bx bx-check-circle",
|
||||
title: "Completed Projects",
|
||||
value: "125"
|
||||
},
|
||||
{
|
||||
icon: "bx bx-hourglass",
|
||||
title: "Pending Projects",
|
||||
value: "12"
|
||||
},
|
||||
{
|
||||
icon: "bx bx-package",
|
||||
title: "Total Revenue",
|
||||
value: "$36,524"
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Layout>
|
||||
<PageHeader :title="title" :items="items" />
|
||||
<div class="row">
|
||||
<div class="col-xl-4">
|
||||
<div class="card overflow-hidden">
|
||||
<div class="bg-soft bg-primary">
|
||||
<div class="row">
|
||||
<div class="col-7">
|
||||
<div class="text-primary p-3">
|
||||
<h5 class="text-primary">Welcome Back !</h5>
|
||||
<p>It will seem like simplified</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-5 align-self-end">
|
||||
<img src="@/assets/images/profile-img.png" alt class="img-fluid" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body pt-0">
|
||||
<div class="row">
|
||||
<div class="col-sm-4">
|
||||
<div class="avatar-md profile-user-wid mb-4">
|
||||
<img
|
||||
src="@/assets/images/users/avatar-1.jpg"
|
||||
alt
|
||||
class="img-thumbnail rounded-circle"
|
||||
/>
|
||||
</div>
|
||||
<h5 class="font-size-15 text-truncate">Cynthia Price</h5>
|
||||
<p class="text-muted mb-0 text-truncate">UI/UX Designer</p>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-8">
|
||||
<div class="pt-4">
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<h5 class="font-size-15">125</h5>
|
||||
<p class="text-muted mb-0">Projects</p>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<h5 class="font-size-15">$1245</h5>
|
||||
<p class="text-muted mb-0">Revenue</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<a href class="btn btn-primary btn-sm">
|
||||
View Profile
|
||||
<i class="mdi mdi-arrow-right ms-1"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end card -->
|
||||
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title mb-4">Personal Information</h4>
|
||||
|
||||
<p
|
||||
class="text-muted mb-4"
|
||||
>Hi I'm Cynthia Price,has been the industry's standard dummy text To an English person, it will seem like simplified English, as a skeptical Cambridge.</p>
|
||||
<div class="table-responsive ">
|
||||
<table class="table table-nowrap mb-0">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">Full Name :</th>
|
||||
<td>Cynthia Price</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Mobile :</th>
|
||||
<td>(123) 123 1234</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">E-mail :</th>
|
||||
<td>cynthiaskote@gmail.com</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Location :</th>
|
||||
<td>California, United States</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end card -->
|
||||
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title mb-5">Experience</h4>
|
||||
<div class>
|
||||
<ul class="verti-timeline list-unstyled">
|
||||
<li class="event-list active">
|
||||
<div class="event-timeline-dot">
|
||||
<i class="bx bx-right-arrow-circle bx-fade-right"></i>
|
||||
</div>
|
||||
<div class="d-flex">
|
||||
<div class="me-3">
|
||||
<i class="bx bx-server h4 text-primary"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<div>
|
||||
<h5 class="font-size-15">
|
||||
<a href="javascript: void(0);" class="text-dark">Back end Developer</a>
|
||||
</h5>
|
||||
<span class="text-primary">2016 - 19</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="event-list">
|
||||
<div class="event-timeline-dot">
|
||||
<i class="bx bx-right-arrow-circle"></i>
|
||||
</div>
|
||||
<div class="d-flex">
|
||||
<div class="me-3">
|
||||
<i class="bx bx-code h4 text-primary"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<div>
|
||||
<h5 class="font-size-15">
|
||||
<a href="javascript: void(0);" class="text-dark">Front end Developer</a>
|
||||
</h5>
|
||||
<span class="text-primary">2013 - 16</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="event-list">
|
||||
<div class="event-timeline-dot">
|
||||
<i class="bx bx-right-arrow-circle"></i>
|
||||
</div>
|
||||
<div class="d-flex">
|
||||
<div class="me-3">
|
||||
<i class="bx bx-edit h4 text-primary"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<div>
|
||||
<h5 class="font-size-15">
|
||||
<a href="javascript: void(0);" class="text-dark">UI /UX Designer</a>
|
||||
</h5>
|
||||
<span class="text-primary">2011 - 13</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end card -->
|
||||
</div>
|
||||
|
||||
<div class="col-xl-8">
|
||||
<div class="row">
|
||||
<div v-for="stat of statData" :key="stat.icon" class="col-md-4">
|
||||
<Stat :icon="stat.icon" :title="stat.title" :value="stat.value" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title mb-4">Revenue</h4>
|
||||
<apexchart
|
||||
class="apex-charts"
|
||||
type="bar"
|
||||
height="320"
|
||||
:series="revenueChart.series"
|
||||
:options="revenueChart.chartOptions"
|
||||
></apexchart>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title mb-4">My Projects</h4>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-nowrap table-hover mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">Projects</th>
|
||||
<th scope="col">Start Date</th>
|
||||
<th scope="col">Deadline</th>
|
||||
<th scope="col">Budget</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">1</th>
|
||||
<td>Skote admin UI</td>
|
||||
<td>2 Sep, 2019</td>
|
||||
<td>20 Oct, 2019</td>
|
||||
<td>$506</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th scope="row">2</th>
|
||||
<td>Skote admin Logo</td>
|
||||
<td>1 Sep, 2019</td>
|
||||
<td>2 Sep, 2019</td>
|
||||
<td>$94</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3</th>
|
||||
<td>Redesign - Landing page</td>
|
||||
<td>21 Sep, 2019</td>
|
||||
<td>29 Sep, 2019</td>
|
||||
<td>$156</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">4</th>
|
||||
<td>App Landing UI</td>
|
||||
<td>29 Sep, 2019</td>
|
||||
<td>04 Oct, 2019</td>
|
||||
<td>$122</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">5</th>
|
||||
<td>Blog Template</td>
|
||||
<td>05 Oct, 2019</td>
|
||||
<td>16 Oct, 2019</td>
|
||||
<td>$164</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">6</th>
|
||||
<td>Redesign - Multipurpose Landing</td>
|
||||
<td>17 Oct, 2019</td>
|
||||
<td>05 Nov, 2019</td>
|
||||
<td>$192</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">7</th>
|
||||
<td>Logo Branding</td>
|
||||
<td>04 Nov, 2019</td>
|
||||
<td>05 Nov, 2019</td>
|
||||
<td>$94</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</Layout>
|
||||
</template>
|
||||
|
|
@ -1,43 +0,0 @@
|
|||
const revenueChart = {
|
||||
series: [{
|
||||
name: 'Revenue',
|
||||
data: [42, 85, 101, 56, 37, 105, 38, 58, 92, 82, 72, 32]
|
||||
}],
|
||||
chartOptions: {
|
||||
chart: {
|
||||
toolbar: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false,
|
||||
columnWidth: '14%',
|
||||
endingShape: 'rounded'
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
stroke: {
|
||||
show: true,
|
||||
width: 2,
|
||||
colors: ['transparent']
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
||||
},
|
||||
yaxis: {
|
||||
title: {
|
||||
text: '$ (thousands)'
|
||||
}
|
||||
},
|
||||
fill: {
|
||||
opacity: 1
|
||||
|
||||
},
|
||||
colors: ['#556ee6'],
|
||||
}
|
||||
};
|
||||
|
||||
export { revenueChart };
|
||||
|
|
@ -1,65 +0,0 @@
|
|||
const userGridData = [
|
||||
{
|
||||
id: 1,
|
||||
name: 'David McHenry',
|
||||
designation: 'UI/UX Designer',
|
||||
projects: ['Photoshop', 'illustrator'],
|
||||
email: 'david@skote.com'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
image: require('@/assets/images/users/avatar-2.jpg'),
|
||||
name: 'Frank Kirk',
|
||||
designation: 'Frontend Developer',
|
||||
projects: ['Html', 'Css', '2 + more'],
|
||||
email: 'frank@skote.com'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
image: require('@/assets/images/users/avatar-3.jpg'),
|
||||
name: 'Rafael Morales',
|
||||
designation: 'Backend Developer',
|
||||
projects: ['Php', 'Java', 'Python'],
|
||||
email: 'Rafael@skote.com'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: 'Mark Ellison',
|
||||
designation: 'Full Stack Developer',
|
||||
projects: ['Ruby', 'Php', '2 + more'],
|
||||
email: 'mark@skote.com'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
image: require('@/assets/images/users/avatar-4.jpg'),
|
||||
name: 'Minnie Walter',
|
||||
designation: 'Frontend Developer',
|
||||
projects: ['Html', 'Css', '2 + more'],
|
||||
email: 'minnie@skote.com'
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
image: require('@/assets/images/users/avatar-5.jpg'),
|
||||
name: 'Shirley Smith',
|
||||
designation: 'UI/UX Designer',
|
||||
projects: ['Photoshop', 'illustrator'],
|
||||
email: 'shirley@skote.com'
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
name: 'John Santiago',
|
||||
designation: 'Full Stack Developer',
|
||||
projects: ['Ruby', 'Php', '2 + more'],
|
||||
email: 'john@skote.com'
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
image: require('@/assets/images/users/avatar-5.jpg'),
|
||||
name: 'Colin Melton',
|
||||
designation: 'Backend Developer',
|
||||
projects: ['Php', 'Java', 'Python'],
|
||||
email: 'colin@skote.com'
|
||||
},
|
||||
];
|
||||
|
||||
export { userGridData };
|
||||
|
|
@ -1,376 +0,0 @@
|
|||
<script>
|
||||
import Layout from "../../../layouts/main";
|
||||
import appConfig from "@/app.config";
|
||||
import PageHeader from "@/components/page-header";
|
||||
|
||||
/**
|
||||
* Buy/Sell component
|
||||
*/
|
||||
export default {
|
||||
page: {
|
||||
title: "Buy/Sell",
|
||||
meta: [{ name: "description", content: appConfig.description }]
|
||||
},
|
||||
components: { Layout, PageHeader },
|
||||
data() {
|
||||
return {
|
||||
title: "Buy/Sell",
|
||||
items: [
|
||||
{
|
||||
text: "Crypto",
|
||||
href: "/"
|
||||
},
|
||||
{
|
||||
text: "Buy/Sell",
|
||||
active: true
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Layout>
|
||||
<PageHeader :title="title" :items="items" />
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="float-end">
|
||||
<b-dropdown ngbDropdown menu-class="dropdown-menu-md dropdown-menu-end" right variant="light">
|
||||
<template v-slot:button-content>
|
||||
<i class="mdi mdi-wallet me-1"></i>
|
||||
<span class="d-none d-sm-inline-block" ngbDropdownToggle>
|
||||
Wallet Balance
|
||||
<i class="mdi mdi-chevron-down"></i>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<div class="dropdown-item-text">
|
||||
<div>
|
||||
<p class="text-muted mb-2">Available Balance</p>
|
||||
<h5 class="mb-0">$ 9148.23</h5>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dropdown-divider"></div>
|
||||
|
||||
<a class="dropdown-item" href="javascript: void(0);">
|
||||
BTC :
|
||||
<span class="float-end">1.02356</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="javascript: void(0);">
|
||||
ETH :
|
||||
<span class="float-end">0.04121</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="javascript: void(0);">
|
||||
LTC :
|
||||
<span class="float-end">0.00356</span>
|
||||
</a>
|
||||
|
||||
<div class="dropdown-divider"></div>
|
||||
|
||||
<a
|
||||
class="dropdown-item text-primary text-center"
|
||||
href="javascript: void(0);"
|
||||
>Learn more</a>
|
||||
</b-dropdown>
|
||||
</div>
|
||||
<h4 class="card-title mb-4">Buy/Sell Crypto</h4>
|
||||
<b-tabs content-class="crypto-buy-sell-nav-content p-4" nav-class="nav-tabs-custom">
|
||||
<b-tab title="Buy" active>
|
||||
<form>
|
||||
<div class="mb-2">
|
||||
<label>Currency :</label>
|
||||
<div class="row">
|
||||
<div class="col-xl-2 col-sm-4">
|
||||
<div class="mb-3">
|
||||
<label class="card-radio-label mb-2">
|
||||
<input
|
||||
type="radio"
|
||||
name="currency"
|
||||
id="buycurrencyoption1"
|
||||
class="card-radio-input"
|
||||
checked
|
||||
/>
|
||||
|
||||
<div class="card-radio">
|
||||
<div>
|
||||
<i
|
||||
class="mdi mdi-bitcoin font-size-24 text-warning align-middle me-2"
|
||||
></i>
|
||||
<span>Bitcoin</span>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<div>
|
||||
<p class="text-muted mb-1">Current price :</p>
|
||||
<h5 class="font-size-16">0.00016 BTC</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xl-2 col-sm-4">
|
||||
<div class="mb-3">
|
||||
<label class="card-radio-label mb-2">
|
||||
<input
|
||||
type="radio"
|
||||
name="currency"
|
||||
id="buycurrencyoption2"
|
||||
class="card-radio-input"
|
||||
/>
|
||||
|
||||
<div class="card-radio">
|
||||
<div>
|
||||
<i
|
||||
class="mdi mdi-ethereum font-size-24 text-primary align-middle me-2"
|
||||
></i>
|
||||
<span>Ethereum</span>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<div>
|
||||
<p class="text-muted mb-1">Current price :</p>
|
||||
<h5 class="font-size-16">0.0073 ETH</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xl-2 col-sm-4">
|
||||
<div class="mb-3">
|
||||
<label class="card-radio-label mb-2">
|
||||
<input
|
||||
type="radio"
|
||||
name="currency"
|
||||
id="buycurrencyoption3"
|
||||
class="card-radio-input"
|
||||
/>
|
||||
|
||||
<div class="card-radio">
|
||||
<div>
|
||||
<i
|
||||
class="mdi mdi-litecoin font-size-24 text-info align-middle me-2"
|
||||
></i>
|
||||
<span>litecoin</span>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<div>
|
||||
<p class="text-muted mb-1">Current price :</p>
|
||||
<h5 class="font-size-16">0.025 LTC</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-2">
|
||||
<label>Payment method :</label>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-2 col-sm-4">
|
||||
<label class="card-radio-label mb-3">
|
||||
<input
|
||||
type="radio"
|
||||
name="pay-method"
|
||||
id="pay-methodoption1"
|
||||
class="card-radio-input"
|
||||
/>
|
||||
<div class="card-radio">
|
||||
<i
|
||||
class="fab fa-cc-mastercard font-size-24 text-primary align-middle me-2"
|
||||
></i>
|
||||
<span>Credit / Debit Card</span>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="col-xl-2 col-sm-4">
|
||||
<label class="card-radio-label mb-3">
|
||||
<input
|
||||
type="radio"
|
||||
name="pay-method"
|
||||
id="pay-methodoption3"
|
||||
class="card-radio-input"
|
||||
checked
|
||||
/>
|
||||
<div class="card-radio">
|
||||
<i class="fab fa-cc-paypal font-size-24 text-primary align-middle me-2"></i>
|
||||
<span>Paypal</span>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label>Add value :</label>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="input-group mb-2 currency-value">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text">Bitcoin</span>
|
||||
</div>
|
||||
<input type="text" class="form-control" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-6">
|
||||
<div class="input-group mb-2">
|
||||
<input type="text" class="form-control text-sm-right" />
|
||||
|
||||
<div class="input-group-append">
|
||||
<span class="input-group-text">USD Amount</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label>Wallet Address :</label>
|
||||
<input type="text" class="form-control" />
|
||||
</div>
|
||||
<div class="text-center mt-4">
|
||||
<button type="button" class="btn btn-success">Buy Crypto currency</button>
|
||||
</div>
|
||||
</form>
|
||||
</b-tab>
|
||||
<b-tab title="Sell">
|
||||
<form>
|
||||
<div class="mb-2">
|
||||
<label>Currency :</label>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-2 col-sm-4">
|
||||
<div class="mb-3">
|
||||
<label class="card-radio-label mb-2">
|
||||
<input
|
||||
type="radio"
|
||||
name="currency"
|
||||
id="sellcurrencyoption1"
|
||||
class="card-radio-input"
|
||||
checked
|
||||
/>
|
||||
|
||||
<div class="card-radio">
|
||||
<div>
|
||||
<i
|
||||
class="mdi mdi-bitcoin font-size-24 text-warning align-middle me-2"
|
||||
></i>
|
||||
<span>Bitcoin</span>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
<div>
|
||||
<p class="text-muted mb-1">Current price :</p>
|
||||
<h5 class="font-size-16">0.00016 BTC</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xl-2 col-sm-4">
|
||||
<div class="mb-3">
|
||||
<label class="card-radio-label mb-2">
|
||||
<input
|
||||
type="radio"
|
||||
name="currency"
|
||||
id="sellcurrencyoption2"
|
||||
class="card-radio-input"
|
||||
/>
|
||||
|
||||
<div class="card-radio">
|
||||
<div>
|
||||
<i
|
||||
class="mdi mdi-ethereum font-size-24 text-primary align-middle me-2"
|
||||
></i>
|
||||
<span>Ethereum</span>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
<div>
|
||||
<p class="text-muted mb-1">Current price :</p>
|
||||
<h5 class="font-size-16">0.0073 ETH</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xl-2 col-sm-4">
|
||||
<div class="mb-3">
|
||||
<label class="card-radio-label mb-2">
|
||||
<input
|
||||
type="radio"
|
||||
name="currency"
|
||||
id="sellcurrencyoption3"
|
||||
class="card-radio-input"
|
||||
/>
|
||||
|
||||
<div class="card-radio">
|
||||
<div>
|
||||
<i
|
||||
class="mdi mdi-litecoin font-size-24 text-info align-middle me-2"
|
||||
></i>
|
||||
<span>litecoin</span>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<div>
|
||||
<p class="text-muted mb-1">Current price :</p>
|
||||
<h5 class="font-size-16">0.025 LTC</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label>Email :</label>
|
||||
<input type="email" class="form-control" />
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label>Add value :</label>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="input-group mb-2 currency-value">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text">Crypto value</span>
|
||||
</div>
|
||||
<input type="text" class="form-control" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-6">
|
||||
<div class="input-group mb-2">
|
||||
<input type="text" class="form-control text-sm-right" />
|
||||
|
||||
<div class="input-group-append">
|
||||
<span class="input-group-text">USD Amount</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label>Wallet Address :</label>
|
||||
<input type="text" class="form-control" />
|
||||
</div>
|
||||
<div class="text-center mt-4">
|
||||
<button type="button" class="btn btn-danger">Sell Crypto currency</button>
|
||||
</div>
|
||||
</form>
|
||||
</b-tab>
|
||||
</b-tabs>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
</template>
|
||||
|
|
@ -1,316 +0,0 @@
|
|||
const priceCandlestickChart = {
|
||||
series: [{
|
||||
data: [{
|
||||
x: new Date(1538778600000),
|
||||
y: [6629.81, 6650.5, 6623.04, 6633.33]
|
||||
},
|
||||
{
|
||||
x: new Date(1538780400000),
|
||||
y: [6632.01, 6643.59, 6620, 6630.11]
|
||||
},
|
||||
{
|
||||
x: new Date(1538782200000),
|
||||
y: [6630.71, 6648.95, 6623.34, 6635.65]
|
||||
},
|
||||
{
|
||||
x: new Date(1538784000000),
|
||||
y: [6635.65, 6651, 6629.67, 6638.24]
|
||||
},
|
||||
{
|
||||
x: new Date(1538785800000),
|
||||
y: [6638.24, 6640, 6620, 6624.47]
|
||||
},
|
||||
{
|
||||
x: new Date(1538787600000),
|
||||
y: [6624.53, 6636.03, 6621.68, 6624.31]
|
||||
},
|
||||
{
|
||||
x: new Date(1538789400000),
|
||||
y: [6624.61, 6632.2, 6617, 6626.02]
|
||||
},
|
||||
{
|
||||
x: new Date(1538791200000),
|
||||
y: [6627, 6627.62, 6584.22, 6603.02]
|
||||
},
|
||||
{
|
||||
x: new Date(1538793000000),
|
||||
y: [6605, 6608.03, 6598.95, 6604.01]
|
||||
},
|
||||
{
|
||||
x: new Date(1538794800000),
|
||||
y: [6604.5, 6614.4, 6602.26, 6608.02]
|
||||
},
|
||||
{
|
||||
x: new Date(1538796600000),
|
||||
y: [6608.02, 6610.68, 6601.99, 6608.91]
|
||||
},
|
||||
{
|
||||
x: new Date(1538798400000),
|
||||
y: [6608.91, 6618.99, 6608.01, 6612]
|
||||
},
|
||||
{
|
||||
x: new Date(1538800200000),
|
||||
y: [6612, 6615.13, 6605.09, 6612]
|
||||
},
|
||||
{
|
||||
x: new Date(1538802000000),
|
||||
y: [6612, 6624.12, 6608.43, 6622.95]
|
||||
},
|
||||
{
|
||||
x: new Date(1538803800000),
|
||||
y: [6623.91, 6623.91, 6615, 6615.67]
|
||||
},
|
||||
{
|
||||
x: new Date(1538805600000),
|
||||
y: [6618.69, 6618.74, 6610, 6610.4]
|
||||
},
|
||||
{
|
||||
x: new Date(1538807400000),
|
||||
y: [6611, 6622.78, 6610.4, 6614.9]
|
||||
},
|
||||
{
|
||||
x: new Date(1538809200000),
|
||||
y: [6614.9, 6626.2, 6613.33, 6623.45]
|
||||
},
|
||||
{
|
||||
x: new Date(1538811000000),
|
||||
y: [6623.48, 6627, 6618.38, 6620.35]
|
||||
},
|
||||
{
|
||||
x: new Date(1538812800000),
|
||||
y: [6619.43, 6620.35, 6610.05, 6615.53]
|
||||
},
|
||||
{
|
||||
x: new Date(1538814600000),
|
||||
y: [6615.53, 6617.93, 6610, 6615.19]
|
||||
},
|
||||
{
|
||||
x: new Date(1538816400000),
|
||||
y: [6615.19, 6621.6, 6608.2, 6620]
|
||||
},
|
||||
{
|
||||
x: new Date(1538818200000),
|
||||
y: [6619.54, 6625.17, 6614.15, 6620]
|
||||
},
|
||||
{
|
||||
x: new Date(1538820000000),
|
||||
y: [6620.33, 6634.15, 6617.24, 6624.61]
|
||||
},
|
||||
{
|
||||
x: new Date(1538821800000),
|
||||
y: [6625.95, 6626, 6611.66, 6617.58]
|
||||
},
|
||||
{
|
||||
x: new Date(1538823600000),
|
||||
y: [6619, 6625.97, 6595.27, 6598.86]
|
||||
},
|
||||
{
|
||||
x: new Date(1538825400000),
|
||||
y: [6598.86, 6598.88, 6570, 6587.16]
|
||||
},
|
||||
{
|
||||
x: new Date(1538827200000),
|
||||
y: [6588.86, 6600, 6580, 6593.4]
|
||||
},
|
||||
{
|
||||
x: new Date(1538829000000),
|
||||
y: [6593.99, 6598.89, 6585, 6587.81]
|
||||
},
|
||||
{
|
||||
x: new Date(1538830800000),
|
||||
y: [6587.81, 6592.73, 6567.14, 6578]
|
||||
},
|
||||
{
|
||||
x: new Date(1538832600000),
|
||||
y: [6578.35, 6581.72, 6567.39, 6579]
|
||||
},
|
||||
{
|
||||
x: new Date(1538834400000),
|
||||
y: [6579.38, 6580.92, 6566.77, 6575.96]
|
||||
},
|
||||
{
|
||||
x: new Date(1538836200000),
|
||||
y: [6575.96, 6589, 6571.77, 6588.92]
|
||||
},
|
||||
{
|
||||
x: new Date(1538838000000),
|
||||
y: [6588.92, 6594, 6577.55, 6589.22]
|
||||
},
|
||||
{
|
||||
x: new Date(1538839800000),
|
||||
y: [6589.3, 6598.89, 6589.1, 6596.08]
|
||||
},
|
||||
{
|
||||
x: new Date(1538841600000),
|
||||
y: [6597.5, 6600, 6588.39, 6596.25]
|
||||
},
|
||||
{
|
||||
x: new Date(1538843400000),
|
||||
y: [6598.03, 6600, 6588.73, 6595.97]
|
||||
},
|
||||
{
|
||||
x: new Date(1538845200000),
|
||||
y: [6595.97, 6602.01, 6588.17, 6602]
|
||||
},
|
||||
{
|
||||
x: new Date(1538847000000),
|
||||
y: [6602, 6607, 6596.51, 6599.95]
|
||||
},
|
||||
{
|
||||
x: new Date(1538848800000),
|
||||
y: [6600.63, 6601.21, 6590.39, 6591.02]
|
||||
},
|
||||
{
|
||||
x: new Date(1538850600000),
|
||||
y: [6591.02, 6603.08, 6591, 6591]
|
||||
},
|
||||
{
|
||||
x: new Date(1538852400000),
|
||||
y: [6591, 6601.32, 6585, 6592]
|
||||
},
|
||||
{
|
||||
x: new Date(1538854200000),
|
||||
y: [6593.13, 6596.01, 6590, 6593.34]
|
||||
},
|
||||
{
|
||||
x: new Date(1538856000000),
|
||||
y: [6593.34, 6604.76, 6582.63, 6593.86]
|
||||
},
|
||||
{
|
||||
x: new Date(1538857800000),
|
||||
y: [6593.86, 6604.28, 6586.57, 6600.01]
|
||||
},
|
||||
{
|
||||
x: new Date(1538859600000),
|
||||
y: [6601.81, 6603.21, 6592.78, 6596.25]
|
||||
},
|
||||
{
|
||||
x: new Date(1538861400000),
|
||||
y: [6596.25, 6604.2, 6590, 6602.99]
|
||||
},
|
||||
{
|
||||
x: new Date(1538863200000),
|
||||
y: [6602.99, 6606, 6584.99, 6587.81]
|
||||
},
|
||||
{
|
||||
x: new Date(1538865000000),
|
||||
y: [6587.81, 6595, 6583.27, 6591.96]
|
||||
},
|
||||
{
|
||||
x: new Date(1538866800000),
|
||||
y: [6591.97, 6596.07, 6585, 6588.39]
|
||||
},
|
||||
{
|
||||
x: new Date(1538868600000),
|
||||
y: [6587.6, 6598.21, 6587.6, 6594.27]
|
||||
},
|
||||
{
|
||||
x: new Date(1538870400000),
|
||||
y: [6596.44, 6601, 6590, 6596.55]
|
||||
},
|
||||
{
|
||||
x: new Date(1538872200000),
|
||||
y: [6598.91, 6605, 6596.61, 6600.02]
|
||||
},
|
||||
{
|
||||
x: new Date(1538874000000),
|
||||
y: [6600.55, 6605, 6589.14, 6593.01]
|
||||
},
|
||||
{
|
||||
x: new Date(1538875800000),
|
||||
y: [6593.15, 6605, 6592, 6603.06]
|
||||
},
|
||||
{
|
||||
x: new Date(1538877600000),
|
||||
y: [6603.07, 6604.5, 6599.09, 6603.89]
|
||||
},
|
||||
{
|
||||
x: new Date(1538879400000),
|
||||
y: [6604.44, 6604.44, 6600, 6603.5]
|
||||
},
|
||||
{
|
||||
x: new Date(1538881200000),
|
||||
y: [6603.5, 6603.99, 6597.5, 6603.86]
|
||||
},
|
||||
{
|
||||
x: new Date(1538883000000),
|
||||
y: [6603.85, 6605, 6600, 6604.07]
|
||||
},
|
||||
{
|
||||
x: new Date(1538884800000),
|
||||
y: [6604.98, 6606, 6604.07, 6606]
|
||||
},
|
||||
]
|
||||
}],
|
||||
chartOptions: {
|
||||
chart: {
|
||||
type: 'candlestick',
|
||||
height: 310,
|
||||
toolbar: false,
|
||||
zoom: {
|
||||
enabled: true,
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
candlestick: {
|
||||
colors: {
|
||||
upward: '#34c38f',
|
||||
downward: '#f46a6a'
|
||||
}
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
type: 'datetime'
|
||||
},
|
||||
yaxis: {
|
||||
tooltip: {
|
||||
enabled: true
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const notificationData = [
|
||||
{
|
||||
id: 1,
|
||||
date: '15 Mar ',
|
||||
text: 'If several languages coalesce of the resulting.'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
date: '14 Mar ',
|
||||
text: 'New common language will be more simple and regular than the existing'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
date: '10 Mar',
|
||||
text: 'It will seem like simplified English as a skeptical Cambridge'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
date: '13 Mar',
|
||||
text: 'To achieve this, it would be necessary'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
date: '12 Mar ',
|
||||
text: 'Cum sociis natoque penatibus et magnis dis'
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
date: '11 Mar ',
|
||||
text: 'New common language will be more simple and regular than the existing'
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
date: '10 Mar ',
|
||||
text: 'It will seem like simplified English as a skeptical Cambridge'
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
date: '09 Mar ',
|
||||
text: 'To achieve this, it would be necessary'
|
||||
},
|
||||
];
|
||||
|
||||
export { priceCandlestickChart, notificationData };
|
||||
|
|
@ -1,370 +0,0 @@
|
|||
<script>
|
||||
import { SimpleBar } from "simplebar-vue3"
|
||||
|
||||
import Layout from "../../../layouts/main";
|
||||
import appConfig from "@/app.config";
|
||||
import PageHeader from "@/components/page-header";
|
||||
|
||||
import { priceCandlestickChart, notificationData } from "./data";
|
||||
|
||||
/**
|
||||
* Exchange component
|
||||
*/
|
||||
export default {
|
||||
page: {
|
||||
title: "Exchange",
|
||||
meta: [{ name: "description", content: appConfig.description }],
|
||||
},
|
||||
components: { Layout, PageHeader, SimpleBar },
|
||||
data() {
|
||||
return {
|
||||
priceCandlestickChart: priceCandlestickChart,
|
||||
notificationData: notificationData,
|
||||
title: "Exchange",
|
||||
items: [
|
||||
{
|
||||
text: "Crypto",
|
||||
href: "/",
|
||||
},
|
||||
{
|
||||
text: "Exchange",
|
||||
active: true,
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Layout>
|
||||
<PageHeader :title="title" :items="items" />
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="d-flex align-items-start">
|
||||
<div class="flex-shrink-0 me-3">
|
||||
<img
|
||||
src="@/assets/images/users/avatar-1.jpg"
|
||||
alt
|
||||
class="avatar-md rounded-circle img-thumbnail"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex-grow-1 align-self-center">
|
||||
<div class="text-muted">
|
||||
<h5>Henry wells</h5>
|
||||
<p class="mb-1">henrywells@abc.com</p>
|
||||
<p class="mb-0">Id no: #SK0234</p>
|
||||
</div>
|
||||
</div>
|
||||
<b-dropdown
|
||||
ngbDropdown
|
||||
menu-class="dropdown-menu-md dropdown-menu-end"
|
||||
right
|
||||
variant="light"
|
||||
>
|
||||
<template v-slot:button-content>
|
||||
<i class="mdi mdi-wallet me-1"></i>
|
||||
<span class="d-none d-sm-inline-block" ngbDropdownToggle>
|
||||
Wallet Balance
|
||||
<i class="mdi mdi-chevron-down"></i>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<div class="dropdown-item-text">
|
||||
<div>
|
||||
<p class="text-muted mb-2">Available Balance</p>
|
||||
<h5 class="mb-0">$ 9148.23</h5>
|
||||
</div>
|
||||
</div>
|
||||
<b-dropdown-divider></b-dropdown-divider>
|
||||
<b-dropdown-item>
|
||||
BTC :
|
||||
<span class="float-end">1.02356</span>
|
||||
</b-dropdown-item>
|
||||
<b-dropdown-item>
|
||||
ETH :
|
||||
<span class="float-end">0.04121</span>
|
||||
</b-dropdown-item>
|
||||
<b-dropdown-item>
|
||||
LTC :
|
||||
<span class="float-end">0.00356</span>
|
||||
</b-dropdown-item>
|
||||
<b-dropdown-divider></b-dropdown-divider>
|
||||
<a
|
||||
class="dropdown-item text-primary text-center"
|
||||
href="javascript: void(0);"
|
||||
>Learn more</a
|
||||
>
|
||||
</b-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-8">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title mb-4">Price</h4>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-3 col-sm-4">
|
||||
<div class="d-flex">
|
||||
<div class="avatar-sm me-3">
|
||||
<span
|
||||
class="avatar-title rounded-circle bg-soft bg-warning text-warning font-size-22"
|
||||
>
|
||||
<i class="mdi mdi-bitcoin"></i>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="flex-grow-1">
|
||||
<p class="text-muted mb-2">Bitcoin</p>
|
||||
<h5>1.02356 BTC</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xl-3 col-sm-4">
|
||||
<div class="mt-4 mt-sm-0">
|
||||
<p class="text-muted mb-2">In USD</p>
|
||||
<h5>6310.22 USD</h5>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xl-3 col-sm-4">
|
||||
<div class="mt-4 mt-sm-0">
|
||||
<p class="text-muted mb-2">Last 24 hrs</p>
|
||||
<h5>
|
||||
0.24 %
|
||||
<i class="mdi mdi-arrow-up text-success"></i>
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<apexchart
|
||||
class="apex-charts"
|
||||
height="310"
|
||||
type="candlestick"
|
||||
dir="ltr"
|
||||
:series="priceCandlestickChart.series"
|
||||
:options="priceCandlestickChart.chartOptions"
|
||||
></apexchart>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xl-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title mb-4">Buy / Sell</h4>
|
||||
|
||||
<div>
|
||||
<p class="text-muted mb-2">
|
||||
<i class="mdi mdi-wallet me-1"></i> Wallet Balance
|
||||
</p>
|
||||
<h5>$ 9148.23</h5>
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<b-tabs nav-class="bg-light rounded" pills content-class="mt-4">
|
||||
<b-tab title="Buy" active>
|
||||
<h5 class="font-size-14 mb-4">Buy Coin</h5>
|
||||
<div>
|
||||
<div>
|
||||
<label>Add Amount :</label>
|
||||
<div class="input-group mb-3">
|
||||
<label class="input-group-text">Amount</label>
|
||||
<select class="form-select" style="max-width: 90px">
|
||||
<option value="BT" selected="">BTC</option>
|
||||
<option value="ET">ETH</option>
|
||||
<option value="LT">LTC</option>
|
||||
</select>
|
||||
<input type="text" class="form-control" />
|
||||
</div>
|
||||
|
||||
<div class="input-group mb-3">
|
||||
<div class="input-group-prepend">
|
||||
<label class="input-group-text">Price</label>
|
||||
</div>
|
||||
<input type="text" class="form-control" />
|
||||
<div class="input-group-append">
|
||||
<label class="input-group-text">$</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="input-group mb-3">
|
||||
<div class="input-group-prepend">
|
||||
<label class="input-group-text">Total</label>
|
||||
</div>
|
||||
<input type="text" class="form-control" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<button type="button" class="btn btn-success w-md">
|
||||
Buy Coin
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</b-tab>
|
||||
<b-tab title="Sell">
|
||||
<h5 class="font-size-14 mb-4">Sell Coin</h5>
|
||||
|
||||
<div>
|
||||
<div>
|
||||
<label>Add Amount :</label>
|
||||
<div class="input-group mb-3">
|
||||
<label class="input-group-text">Amount</label>
|
||||
<select class="form-select" style="max-width: 90px">
|
||||
<option value="BT" selected="">BTC</option>
|
||||
<option value="ET">ETH</option>
|
||||
<option value="LT">LTC</option>
|
||||
</select>
|
||||
<input type="text" class="form-control" />
|
||||
</div>
|
||||
|
||||
<div class="input-group mb-3">
|
||||
<div class="input-group-prepend">
|
||||
<label class="input-group-text">Price</label>
|
||||
</div>
|
||||
<input type="text" class="form-control" />
|
||||
<div class="input-group-append">
|
||||
<label class="input-group-text">$</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="input-group mb-3">
|
||||
<div class="input-group-prepend">
|
||||
<label class="input-group-text">Total</label>
|
||||
</div>
|
||||
<input type="text" class="form-control" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<button type="button" class="btn btn-danger w-md">
|
||||
Sell Coin
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</b-tab>
|
||||
</b-tabs>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title mb-4">Order book</h4>
|
||||
|
||||
<div class="table-responsive ">
|
||||
<table class="table table-bordered mb-0">
|
||||
<thead>
|
||||
<tr class="text-center">
|
||||
<th colspan="3">Buy</th>
|
||||
<th colspan="3">Sell</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="col">Amount</th>
|
||||
<th scope="col">Total</th>
|
||||
<th scope="col">Price</th>
|
||||
<th scope="col">Amount</th>
|
||||
<th scope="col">Total</th>
|
||||
<th scope="col">Price</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>0.0412</td>
|
||||
<td>0.0412</td>
|
||||
<td>256.18</td>
|
||||
<td>0.0201</td>
|
||||
<td>0.0201</td>
|
||||
<td>124.98</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>0.0301</td>
|
||||
<td>0.0301</td>
|
||||
<td>187.16</td>
|
||||
<td>0.0165</td>
|
||||
<td>0.0165</td>
|
||||
<td>102.60</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>0.0523</td>
|
||||
<td>0.0523</td>
|
||||
<td>325.21</td>
|
||||
<td>0.0348</td>
|
||||
<td>0.0348</td>
|
||||
<td>216.39</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>0.0432</td>
|
||||
<td>0.0432</td>
|
||||
<td>268.62</td>
|
||||
<td>0.0321</td>
|
||||
<td>0.0321</td>
|
||||
<td>199.60</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>0.0246</td>
|
||||
<td>0.0246</td>
|
||||
<td>152.96</td>
|
||||
<td>0.0403</td>
|
||||
<td>0.0403</td>
|
||||
<td>250.59</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title mb-4">Notifications</h4>
|
||||
<SimpleBar style="max-height: 310px">
|
||||
<ul class="verti-timeline list-unstyled">
|
||||
<li
|
||||
class="event-list"
|
||||
v-for="data of notificationData"
|
||||
:key="data.id"
|
||||
>
|
||||
<div class="event-timeline-dot">
|
||||
<i class="bx bx-right-arrow-circle font-size-18"></i>
|
||||
</div>
|
||||
<div class="d-flex">
|
||||
<div class="me-3">
|
||||
<h5 class="font-size-14">
|
||||
{{ data.date }}
|
||||
<i
|
||||
class="bx bx-right-arrow-alt font-size-16 text-primary align-middle ms-2"
|
||||
></i>
|
||||
</h5>
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<div>{{ data.text }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</SimpleBar>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
</template>
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,247 +0,0 @@
|
|||
<script>
|
||||
import { FormWizard, TabContent } from "@anivive/vue3-form-wizard";
|
||||
// import vue2Dropzone from "vue2-dropzone";
|
||||
|
||||
import Layout from "../../../layouts/main";
|
||||
import appConfig from "@/app.config";
|
||||
import PageHeader from "@/components/page-header";
|
||||
|
||||
/**
|
||||
* KYC Application component
|
||||
*/
|
||||
export default {
|
||||
methods: {
|
||||
onComplete: function () {
|
||||
this.$refs.iswizard.reset();
|
||||
},
|
||||
},
|
||||
page: {
|
||||
title: "KYC Application",
|
||||
meta: [{ name: "description", content: appConfig.description }],
|
||||
},
|
||||
components: {
|
||||
Layout,
|
||||
PageHeader,
|
||||
// vueDropzone: vue2Dropzone,
|
||||
FormWizard,
|
||||
TabContent,
|
||||
},
|
||||
mounted() {},
|
||||
data() {
|
||||
return {
|
||||
title: "KYC Application",
|
||||
items: [
|
||||
{
|
||||
text: "Crypto",
|
||||
href: "/",
|
||||
},
|
||||
{
|
||||
text: "KYC Application",
|
||||
active: true,
|
||||
},
|
||||
],
|
||||
showModal: false,
|
||||
dropzoneOptions: {
|
||||
url: "https://httpbin.org/post",
|
||||
thumbnailWidth: 120,
|
||||
maxFilesize: 0.5,
|
||||
headers: { "My-Awesome-Header": "header value" },
|
||||
},
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Layout>
|
||||
<PageHeader :title="title" :items="items" />
|
||||
<div class="row justify-content-center mt-lg-5">
|
||||
<div class="col-xl-5 col-sm-8">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="text-center">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-10">
|
||||
<h4 class="mt-4 fw-semibold">KYC Verification</h4>
|
||||
<p class="text-muted mt-3">
|
||||
Itaque earum rerum hic tenetur a sapiente delectus ut aut
|
||||
reiciendis perferendis asperiores repellat.
|
||||
</p>
|
||||
<div class="mt-4">
|
||||
<!-- Button trigger modal -->
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary"
|
||||
@click="showModal = true"
|
||||
>
|
||||
Click here for Verification
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-center mt-5 mb-2">
|
||||
<div class="col-sm-6 col-8">
|
||||
<div>
|
||||
<img
|
||||
src="@/assets/images/verification-img.png"
|
||||
alt
|
||||
class="img-fluid"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<b-modal
|
||||
v-model="showModal"
|
||||
size="lg"
|
||||
centered
|
||||
title="Verify your Account"
|
||||
hide-footer
|
||||
>
|
||||
<form-wizard
|
||||
shape="tab"
|
||||
color="#556ee6"
|
||||
ref="iswizard"
|
||||
@on-complete="onComplete"
|
||||
>
|
||||
<tab-content
|
||||
icon="mdi mdi-account-circle"
|
||||
title="Personal Info"
|
||||
class="kyc-wizard"
|
||||
>
|
||||
<form>
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="mb-3">
|
||||
<label for="kycfirstname-input">First name</label>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="kycfirstname-input"
|
||||
placeholder="Enter First name"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="mb-3">
|
||||
<label for="kyclastname-input">Last name</label>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="kyclastname-input"
|
||||
placeholder="Enter Last name"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="mb-3">
|
||||
<label for="kycphoneno-input">Phone</label>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="kycphoneno-input"
|
||||
placeholder="Enter Phone number"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="mb-3">
|
||||
<label for="kycbirthdate-input">Date of birth</label>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="kycbirthdate-input"
|
||||
placeholder="Enter Date of birth"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="mb-3">
|
||||
<label for="kycselectcity-input" class="form-label"
|
||||
>City</label
|
||||
>
|
||||
<select class="form-select" id="kycselectcity-input">
|
||||
<option value="SF" selected>San Francisco</option>
|
||||
<option value="LA">Los Angeles</option>
|
||||
<option value="SD">San Diego</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</tab-content>
|
||||
<tab-content
|
||||
icon="mdi mdi-email"
|
||||
title="Confirm Email"
|
||||
class="kyc-wizard"
|
||||
>
|
||||
<form>
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="mb-3">
|
||||
<label for="kycemail-input">Email</label>
|
||||
<input
|
||||
type="email"
|
||||
class="form-control"
|
||||
id="kycemail-input"
|
||||
placeholder="Enter Email Address"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="kycconfirmcode-input">Confirm code</label>
|
||||
<input
|
||||
type="email"
|
||||
class="form-control"
|
||||
id="kycconfirmcode-input"
|
||||
placeholder="Enter Confirm code"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
Didn't recieve code ?
|
||||
<button type="button" class="btn btn-link">
|
||||
Resend Code
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</tab-content>
|
||||
<tab-content
|
||||
icon="mdi mdi-checkbox-marked-circle-outline"
|
||||
title="Document Verification"
|
||||
class="kyc-wizard"
|
||||
>
|
||||
<h5 class="font-size-14 mb-3">
|
||||
Upload document file for a verification
|
||||
</h5>
|
||||
<div class="kyc-doc-verification">
|
||||
<!-- <vue-dropzone
|
||||
id="dropzone"
|
||||
ref="myVueDropzone"
|
||||
:use-custom-slot="true"
|
||||
:options="dropzoneOptions"
|
||||
>
|
||||
<div class="dropzone-custom-content">
|
||||
<i class="display-4 text-muted bx bxs-cloud-upload"></i>
|
||||
<h4>Drop files here or click to upload.</h4>
|
||||
</div>
|
||||
</vue-dropzone> -->
|
||||
<!-- end row -->
|
||||
</div>
|
||||
</tab-content>
|
||||
</form-wizard>
|
||||
</b-modal>
|
||||
</Layout>
|
||||
</template>
|
||||
|
|
@ -1,412 +0,0 @@
|
|||
<script>
|
||||
import Layout from "../../../layouts/main";
|
||||
import appConfig from "@/app.config";
|
||||
import PageHeader from "@/components/page-header";
|
||||
|
||||
/**
|
||||
* Lending component
|
||||
*/
|
||||
export default {
|
||||
page: {
|
||||
title: "Lending",
|
||||
meta: [{ name: "description", content: appConfig.description }]
|
||||
},
|
||||
components: { Layout, PageHeader },
|
||||
data() {
|
||||
return {
|
||||
title: "Lending",
|
||||
items: [
|
||||
{
|
||||
text: "Crypto",
|
||||
href: "/"
|
||||
},
|
||||
{
|
||||
text: "Lending",
|
||||
active: true
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Layout>
|
||||
<PageHeader :title="title" :items="items" />
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-4">
|
||||
<div class="card">
|
||||
<div class="card-body border-bottom">
|
||||
<b-dropdown
|
||||
class="float-end ms-2"
|
||||
toggle-class="text-muted p-0"
|
||||
menu-class="dropdown-menu-end"
|
||||
right
|
||||
variant="white"
|
||||
>
|
||||
<template v-slot:button-content>
|
||||
<i class="mdi mdi-dots-horizontal font-size-18"></i>
|
||||
</template>
|
||||
<b-dropdown-item>Action</b-dropdown-item>
|
||||
<b-dropdown-item>Another action</b-dropdown-item>
|
||||
<b-dropdown-item>Something else here</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
|
||||
<div>
|
||||
<div class="mb-4 me-3">
|
||||
<i class="mdi mdi-account-circle text-primary h1"></i>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h5 class>Henry Wells</h5>
|
||||
<p class="text-muted mb-1">henrywells@abc.com</p>
|
||||
<p class="text-muted mb-0">Id no: #SK0234</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body border-bottom">
|
||||
<div>
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div>
|
||||
<p class="text-muted mb-2">Available Balance</p>
|
||||
<h5>$ 9148.00</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<div class="text-sm-end mt-4 mt-sm-0">
|
||||
<p class="text-muted mb-2">Since last month</p>
|
||||
<h5>
|
||||
+ $ 215.53
|
||||
<span class="badge bg-success ms-1 align-bottom">+ 1.3 %</span>
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title mb-4">How it work</h4>
|
||||
|
||||
<div>
|
||||
<ul class="verti-timeline list-unstyled">
|
||||
<li class="event-list">
|
||||
<div class="event-timeline-dot">
|
||||
<i class="bx bx-right-arrow-circle"></i>
|
||||
</div>
|
||||
<div class="d-flex">
|
||||
<div class="me-3">
|
||||
<i class="bx bx-user-plus h2 text-primary"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<div>
|
||||
<h5 class="font-size-14">Register account</h5>
|
||||
<p class="text-muted">
|
||||
New common language will be more simple and regular
|
||||
than the existing.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="event-list">
|
||||
<div class="event-timeline-dot">
|
||||
<i class="bx bx-right-arrow-circle"></i>
|
||||
</div>
|
||||
<div class="d-flex">
|
||||
<div class="me-3">
|
||||
<i class="bx bx-copy-alt h2 text-primary"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<div>
|
||||
<h5 class="font-size-14">Select Deposit</h5>
|
||||
<p class="text-muted">
|
||||
To achieve this, it would be necessary to have uniform
|
||||
grammar.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="event-list">
|
||||
<div class="event-timeline-dot">
|
||||
<i class="bx bx-right-arrow-circle"></i>
|
||||
</div>
|
||||
<div class="d-flex">
|
||||
<div class="me-3">
|
||||
<i class="bx bx-cloud-download h2 text-primary"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<div>
|
||||
<h5 class="font-size-14">Get Earnings</h5>
|
||||
<p class="text-muted">
|
||||
New common language will be more simple and regular
|
||||
than the existing.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xl-8">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">Deposits</h4>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-4">
|
||||
<div class="border p-3 rounded mt-4">
|
||||
<div class="d-flex align-items-center mb-3">
|
||||
<div class="avatar-xs me-3">
|
||||
<span
|
||||
class="avatar-title rounded-circle bg-soft bg-warning text-warning font-size-18"
|
||||
>
|
||||
<i class="mdi mdi-bitcoin"></i>
|
||||
</span>
|
||||
</div>
|
||||
<h5 class="font-size-14 mb-0">Bitcoin</h5>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="text-muted mt-3">
|
||||
<p>Annual Yield</p>
|
||||
<h4>4.05 %</h4>
|
||||
<p class="mb-0">0.00745 BTC</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6 align-self-end">
|
||||
<div class="float-end mt-3">
|
||||
<a href="javascript: void(0);" class="btn btn-primary">Select</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4">
|
||||
<div class="border p-3 rounded mt-4">
|
||||
<div class="d-flex align-items-center mb-3">
|
||||
<div class="avatar-xs me-3">
|
||||
<span
|
||||
class="avatar-title rounded-circle bg-soft bg-primary text-primary font-size-18"
|
||||
>
|
||||
<i class="mdi mdi-ethereum"></i>
|
||||
</span>
|
||||
</div>
|
||||
<h5 class="font-size-14 mb-0">Ethereum</h5>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="text-muted mt-3">
|
||||
<p>Annual Yield</p>
|
||||
<h4>5.08 %</h4>
|
||||
<p class="mb-0">0.0056 ETH</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6 align-self-end">
|
||||
<div class="float-end mt-3">
|
||||
<a href="javascript: void(0);" class="btn btn-primary">Select</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4">
|
||||
<div class="border p-3 rounded mt-4">
|
||||
<div class="d-flex align-items-center mb-3">
|
||||
<div class="avatar-xs me-3">
|
||||
<span class="avatar-title rounded-circle bg-soft bg-info text-info font-size-18">
|
||||
<i class="mdi mdi-litecoin"></i>
|
||||
</span>
|
||||
</div>
|
||||
<h5 class="font-size-14 mb-0">Litecoin</h5>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="text-muted mt-3">
|
||||
<p>Annual Yield</p>
|
||||
<h4>4.12 %</h4>
|
||||
<p class="mb-0">0.00245 LTC</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6 align-self-end">
|
||||
<div class="float-end mt-3">
|
||||
<a href="javascript: void(0);" class="btn btn-primary">Select</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title mb-4">My Assets</h4>
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table table-nowrap table-centered mb-0 align-middle">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Token</th>
|
||||
<th scope="col">Price</th>
|
||||
<th scope="col">Invest</th>
|
||||
<th scope="col">Loans</th>
|
||||
<th scope="col" colspan="2">Total</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="avatar-xs me-3">
|
||||
<span
|
||||
class="avatar-title rounded-circle bg-soft bg-warning text-warning font-size-18"
|
||||
>
|
||||
<i class="mdi mdi-bitcoin"></i>
|
||||
</span>
|
||||
</div>
|
||||
<span>BTC</span>
|
||||
</div>
|
||||
</th>
|
||||
<td>
|
||||
<div class="text-muted">$ 7525.47</div>
|
||||
</td>
|
||||
<td>
|
||||
<h5 class="font-size-14 mb-1">1.2601</h5>
|
||||
<div class="text-muted">$6225.74</div>
|
||||
</td>
|
||||
<td>
|
||||
<h5 class="font-size-14 mb-1">0.1512</h5>
|
||||
<div class="text-muted">$742.32</div>
|
||||
</td>
|
||||
<td>
|
||||
<h5 class="font-size-14 mb-1">4.2562</h5>
|
||||
<div class="text-muted">$6425.42</div>
|
||||
</td>
|
||||
<td style="width: 120px;">
|
||||
<a href="javascript: void(0);" class="btn btn-primary btn-sm w-xs">View</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="avatar-xs me-3">
|
||||
<span
|
||||
class="avatar-title rounded-circle bg-soft bg-primary text-primary font-size-18"
|
||||
>
|
||||
<i class="mdi mdi-ethereum"></i>
|
||||
</span>
|
||||
</div>
|
||||
<span>ETH</span>
|
||||
</div>
|
||||
</th>
|
||||
<td>
|
||||
<div class="text-muted">$ 4235.78</div>
|
||||
</td>
|
||||
<td>
|
||||
<h5 class="font-size-14 mb-1">0.0814</h5>
|
||||
<div class="text-muted">$3256.29</div>
|
||||
</td>
|
||||
<td>
|
||||
<h5 class="font-size-14 mb-1">0.0253</h5>
|
||||
<div class="text-muted">$675.04</div>
|
||||
</td>
|
||||
<td>
|
||||
<h5 class="font-size-14 mb-1">0.0921</h5>
|
||||
<div class="text-muted">$4536.24</div>
|
||||
</td>
|
||||
<td>
|
||||
<a href="javascript: void(0);" class="btn btn-primary btn-sm w-xs">View</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="avatar-xs me-3">
|
||||
<span
|
||||
class="avatar-title rounded-circle bg-soft bg-info text-info font-size-18"
|
||||
>
|
||||
<i class="mdi mdi-litecoin"></i>
|
||||
</span>
|
||||
</div>
|
||||
<span>LTC</span>
|
||||
</div>
|
||||
</th>
|
||||
<td>
|
||||
<div class="text-muted">$ 3726.06</div>
|
||||
</td>
|
||||
<td>
|
||||
<h5 class="font-size-14 mb-1">0.0682</h5>
|
||||
<div class="text-muted">$2936.14</div>
|
||||
</td>
|
||||
<td>
|
||||
<h5 class="font-size-14 mb-1">0.0234</h5>
|
||||
<div class="text-muted">$523.17</div>
|
||||
</td>
|
||||
<td>
|
||||
<h5 class="font-size-14 mb-1">0.0823</h5>
|
||||
<div class="text-muted">$3254.23</div>
|
||||
</td>
|
||||
<td>
|
||||
<a href="javascript: void(0);" class="btn btn-primary btn-sm w-xs">View</a>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th scope="row">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="avatar-xs me-3">
|
||||
<span
|
||||
class="avatar-title rounded-circle bg-soft bg-warning text-warning font-size-18"
|
||||
>
|
||||
<i class="mdi mdi-bitcoin"></i>
|
||||
</span>
|
||||
</div>
|
||||
<span>BTC</span>
|
||||
</div>
|
||||
</th>
|
||||
<td>
|
||||
<div class="text-muted">$ 7525.47</div>
|
||||
</td>
|
||||
<td>
|
||||
<h5 class="font-size-14 mb-1">1.2601</h5>
|
||||
<div class="text-muted">$6225.74</div>
|
||||
</td>
|
||||
<td>
|
||||
<h5 class="font-size-14 mb-1">0.1512</h5>
|
||||
<div class="text-muted">$742.32</div>
|
||||
</td>
|
||||
<td>
|
||||
<h5 class="font-size-14 mb-1">4.2562</h5>
|
||||
<div class="text-muted">$6425.42</div>
|
||||
</td>
|
||||
<td>
|
||||
<a href="javascript: void(0);" class="btn btn-primary btn-sm w-xs">View</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</Layout>
|
||||
</template>
|
||||
|
|
@ -1,116 +0,0 @@
|
|||
const ordersData = [
|
||||
{
|
||||
status: 'Completed',
|
||||
date: '03 Mar, 2020',
|
||||
type: 'Buy',
|
||||
coin: 'Bitcoin',
|
||||
value: '1.00952 BTC',
|
||||
usd: '$ 9067.62'
|
||||
},
|
||||
{
|
||||
status: 'Completed',
|
||||
date: '04 Mar, 2020',
|
||||
type: 'Buy',
|
||||
coin: 'Litecoin',
|
||||
value: '0.00214 LTC',
|
||||
usd: '$ 9067.62'
|
||||
},
|
||||
{
|
||||
status: 'Pending',
|
||||
date: '05 Mar, 2020',
|
||||
type: 'Sell',
|
||||
coin: 'Bitcoin',
|
||||
value: '1.00952 BTC',
|
||||
usd: '$ 9067.62'
|
||||
},
|
||||
{
|
||||
status: 'Completed',
|
||||
date: '03 Mar, 2020',
|
||||
type: 'Sell',
|
||||
coin: 'Ethereum',
|
||||
value: '0.00413 ETH',
|
||||
usd: '$ 2123.01'
|
||||
},
|
||||
{
|
||||
status: 'Completed',
|
||||
date: '08 Mar, 2020',
|
||||
type: 'Buy',
|
||||
coin: 'Litecoin',
|
||||
value: '1.00124 LTC',
|
||||
usd: '$ 1802.62'
|
||||
},
|
||||
{
|
||||
status: 'Pending',
|
||||
date: '06 Mar, 2020',
|
||||
type: 'Sell',
|
||||
coin: 'Ethereum',
|
||||
value: '0.00413 ETH',
|
||||
usd: '$ 2123.01'
|
||||
},
|
||||
{
|
||||
status: 'Failed',
|
||||
date: '05 Mar, 2020',
|
||||
type: 'Buy',
|
||||
coin: 'Bitcoin',
|
||||
value: '1.00952 BTC',
|
||||
usd: '$ 9067.62'
|
||||
},
|
||||
{
|
||||
status: 'Completed',
|
||||
date: '03 Mar, 2020',
|
||||
type: 'Buy',
|
||||
coin: 'Ethereum',
|
||||
value: '0.00413 ETH',
|
||||
usd: '$ 2123.01'
|
||||
},
|
||||
{
|
||||
status: 'Pending',
|
||||
date: '10 Mar, 2020',
|
||||
type: 'Buy',
|
||||
coin: 'Bitcoin',
|
||||
value: '1.00952 BTC',
|
||||
usd: '$ 9067.62'
|
||||
},
|
||||
{
|
||||
status: 'Pending',
|
||||
date: '18 Mar, 2020',
|
||||
type: 'Buy',
|
||||
coin: 'Litecoin',
|
||||
value: '0.00224 LTC',
|
||||
usd: '$ 1773.01'
|
||||
},
|
||||
{
|
||||
status: 'Completed',
|
||||
date: '03 Mar, 2020',
|
||||
type: 'Buy',
|
||||
coin: 'Bitcoin',
|
||||
value: '1.00952 BTC',
|
||||
usd: '$ 9423.73'
|
||||
},
|
||||
{
|
||||
status: 'Pending',
|
||||
date: '15 Mar, 2020',
|
||||
type: 'Sell',
|
||||
coin: 'Ethereum',
|
||||
value: '0.00413 ETH',
|
||||
usd: '$ 2123.01'
|
||||
},
|
||||
{
|
||||
status: 'Completed',
|
||||
date: '03 Mar, 2020',
|
||||
type: 'Sell',
|
||||
coin: 'Bitcoin',
|
||||
value: '1.00952 BTC',
|
||||
usd: '$ 9067.62'
|
||||
},
|
||||
{
|
||||
status: 'Failed',
|
||||
date: '01 Mar, 2020',
|
||||
type: 'Sell',
|
||||
coin: 'Litecoin',
|
||||
value: '1.00217 LTC',
|
||||
usd: '$ 9067.62'
|
||||
}
|
||||
]
|
||||
|
||||
export { ordersData };
|
||||
|
|
@ -1,234 +0,0 @@
|
|||
<script>
|
||||
import { ref } from "vue";
|
||||
import Datepicker from "vue3-datepicker";
|
||||
|
||||
import Layout from "../../../layouts/main";
|
||||
import appConfig from "@/app.config";
|
||||
import PageHeader from "@/components/page-header";
|
||||
|
||||
import { ordersData } from "./data";
|
||||
|
||||
/**
|
||||
* Orders component
|
||||
*/
|
||||
export default {
|
||||
page: {
|
||||
title: "Orders",
|
||||
meta: [
|
||||
{
|
||||
name: "description",
|
||||
content: appConfig.description,
|
||||
},
|
||||
],
|
||||
},
|
||||
components: {
|
||||
Datepicker,
|
||||
Layout,
|
||||
PageHeader,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
ordersData: ordersData,
|
||||
title: "Orders",
|
||||
items: [
|
||||
{
|
||||
text: "Crypto",
|
||||
href: "/",
|
||||
},
|
||||
{
|
||||
text: "Orders",
|
||||
active: true,
|
||||
},
|
||||
],
|
||||
totalRows: 1,
|
||||
currentPage: 1,
|
||||
perPage: 10,
|
||||
pageOptions: [10, 25, 50, 100],
|
||||
filter: null,
|
||||
filterOn: [],
|
||||
sortBy: "value",
|
||||
sortDesc: false,
|
||||
fields: [
|
||||
{
|
||||
key: "date",
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
key: "type",
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
key: "coin",
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
key: "value",
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
key: "usd",
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
key: "status",
|
||||
sortable: true,
|
||||
},
|
||||
],
|
||||
coinvalue: "",
|
||||
statusValue: "",
|
||||
typeValue: null,
|
||||
datepickervalue: ref(new Date()),
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
/**
|
||||
* Total no. of records
|
||||
*/
|
||||
rows() {
|
||||
return this.ordersData.length;
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
// Set the initial number of items
|
||||
this.totalRows = this.items.length;
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* Search the table data with search input
|
||||
*/
|
||||
onFiltered(filteredItems) {
|
||||
// Trigger pagination to update the number of buttons/pages due to filtering
|
||||
this.totalRows = filteredItems.length;
|
||||
this.currentPage = 1;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template lang="en">
|
||||
<Layout>
|
||||
<PageHeader :title="title" :items="items" />
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title mb-3">Orders</h4>
|
||||
<b-tabs content-class="p-3" nav-class="nav-tabs-custom">
|
||||
<b-tab title="All Orders" active>
|
||||
<form>
|
||||
<div class="row">
|
||||
<div class="col-xl col-sm-6">
|
||||
<div class="form-group mt-3 mb-0">
|
||||
<label>Date :</label>
|
||||
<Datepicker v-model="datepickervalue" class="form-control" :first-day-of-week="1" lang="en" confirm></Datepicker>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xl col-sm-6">
|
||||
<div class="form-group mt-3 mb-0">
|
||||
<label>Coin</label>
|
||||
<select class="form-control select2-search-disable">
|
||||
<option value="BTC" selected>Bitcoin</option>
|
||||
<option value="ETH">Ethereum</option>
|
||||
<option value="LTC">litecoin</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xl col-sm-6">
|
||||
<div class="form-group mt-3 mb-0">
|
||||
<label>Type</label>
|
||||
<select class="form-control select2-search-disable">
|
||||
<option value="BU" selected>Buy</option>
|
||||
<option value="SE">Sell</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xl col-sm-6">
|
||||
<div class="form-group mt-3 mb-0">
|
||||
<label>Status</label>
|
||||
<select class="form-control select2-search-disable">
|
||||
<option value="CO" selected>Completed</option>
|
||||
<option value="PE">Pending</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xl col-sm-6 align-self-end">
|
||||
<div class="mt-3">
|
||||
<button type="button" class="btn btn-primary w-md">
|
||||
Add Order
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<div class="row mt-5">
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<div id="tickets-table_length" class="dataTables_length">
|
||||
<label class="d-inline-flex align-items-center fw-normal">
|
||||
Show
|
||||
<b-form-select v-model="perPage" size="sm" class="form-select form-select-sm" :options="pageOptions"></b-form-select> entries
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Search -->
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<div id="tickets-table_filter" class="dataTables_filter text-end">
|
||||
<label class="d-inline-flex align-items-center fw-normal">
|
||||
Search:
|
||||
<b-form-input v-model="filter" type="search" class="form-control form-control-sm ms-2"></b-form-input>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End search -->
|
||||
</div>
|
||||
<!-- Table -->
|
||||
<div class="table-responsive mt-3 mb-0">
|
||||
<b-table :items="ordersData" :fields="fields" responsive="sm" :per-page="perPage" :current-page="currentPage" :sort-by.sync="sortBy" :sort-desc.sync="sortDesc" :filter="filter" :filter-included-fields="filterOn" @filtered="onFiltered"></b-table>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="dataTables_paginate paging_simple_numbers float-end">
|
||||
<ul class="pagination pagination-rounded mb-0">
|
||||
<!-- pagination -->
|
||||
<b-pagination v-model="currentPage" :total-rows="rows" :per-page="perPage"></b-pagination>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</b-tab>
|
||||
<b-tab title="Processing">
|
||||
<div class="row mt-3">
|
||||
<div class="col-sm-12 col-md-6">
|
||||
|
||||
<div id="tickets-table_length" class="dataTables_length">
|
||||
<label class="d-inline-flex align-items-center fw-normal">
|
||||
Show
|
||||
<b-form-select v-model="perPage" size="sm" :options="pageOptions" class="form-select form-select-sm"></b-form-select> entries
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Search -->
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<div id="tickets-table_filter" class="dataTables_filter text-md-end">
|
||||
<label class="d-inline-flex align-items-center fw-normal">
|
||||
Search:
|
||||
<b-form-input v-model="filter" type="search" class="form-control form-control-sm ms-2"></b-form-input>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End search -->
|
||||
</div>
|
||||
<div class="table-responsive mt-3 mb-0">
|
||||
<b-table :items="ordersData" :fields="fields" responsive="sm" :per-page="perPage" :current-page="currentPage" :sort-by.sync="sortBy" :sort-desc.sync="sortDesc" :filter="filter" :filter-included-fields="filterOn" @filtered="onFiltered"></b-table>
|
||||
</div>
|
||||
</b-tab>
|
||||
</b-tabs>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
</template>
|
||||
|
|
@ -1,158 +0,0 @@
|
|||
const OveviewChart = {
|
||||
series: [{
|
||||
type: 'area',
|
||||
name: 'BTC',
|
||||
data: [87, 57, 74, 99, 75, 38, 62, 47, 82, 56, 45, 47]
|
||||
}, {
|
||||
type: 'area',
|
||||
name: 'ETH',
|
||||
data: [28, 41, 52, 42, 13, 18, 29, 18, 36, 51, 55, 35]
|
||||
}, {
|
||||
type: 'line',
|
||||
name: 'LTC',
|
||||
data: [45, 52, 38, 24, 33, 65, 45, 75, 54, 18, 28, 10]
|
||||
}],
|
||||
chartOptions: {
|
||||
chart: {
|
||||
height: 240,
|
||||
type: 'line',
|
||||
toolbar: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
width: 2,
|
||||
dashArray: [0, 0, 3]
|
||||
},
|
||||
fill: {
|
||||
type: 'solid',
|
||||
opacity: [0.15, 0.05, 1],
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
||||
},
|
||||
colors: ['#f1b44c', '#3452e1', '#50a5f1'],
|
||||
}
|
||||
};
|
||||
|
||||
const activitiesData = [
|
||||
{
|
||||
id: '#SK3215',
|
||||
date: '03 Mar, 2020',
|
||||
type: 'Buy',
|
||||
currency: 'Bitcoin',
|
||||
amount: '1.00952 BTC',
|
||||
usd: '$ 9067.62'
|
||||
},
|
||||
{
|
||||
id: '#SK3216',
|
||||
date: '04 Mar, 2020',
|
||||
type: 'Buy',
|
||||
currency: 'Litecoin',
|
||||
amount: '0.00214 LTC',
|
||||
usd: '$ 9067.62'
|
||||
},
|
||||
{
|
||||
id: '#SK3217',
|
||||
date: '05 Mar, 2020',
|
||||
type: 'Sell',
|
||||
currency: 'Bitcoin',
|
||||
amount: '1.00952 BTC',
|
||||
usd: '$ 9067.62'
|
||||
},
|
||||
{
|
||||
id: '#SK3218',
|
||||
date: '03 Mar, 2020',
|
||||
type: 'Sell',
|
||||
currency: 'Ethereum',
|
||||
amount: '0.00413 ETH',
|
||||
usd: '$ 2123.01'
|
||||
},
|
||||
{
|
||||
id: '#SK3219',
|
||||
date: '08 Mar, 2020',
|
||||
type: 'Buy',
|
||||
currency: 'Litecoin',
|
||||
amount: '1.00124 LTC',
|
||||
usd: '$ 1802.62'
|
||||
},
|
||||
{
|
||||
id: '#SK3220',
|
||||
date: '06 Mar, 2020',
|
||||
type: 'Sell',
|
||||
currency: 'Ethereum',
|
||||
amount: '0.00413 ETH',
|
||||
usd: '$ 2123.01'
|
||||
},
|
||||
{
|
||||
id: '#SK3221',
|
||||
date: '05 Mar, 2020',
|
||||
type: 'Buy',
|
||||
currency: 'Bitcoin',
|
||||
amount: '1.00952 BTC',
|
||||
usd: '$ 9067.62'
|
||||
},
|
||||
{
|
||||
id: '#SK32122',
|
||||
date: '03 Mar, 2020',
|
||||
type: 'Buy',
|
||||
currency: 'Ethereum',
|
||||
amount: '0.00413 ETH',
|
||||
usd: '$ 2123.01'
|
||||
},
|
||||
{
|
||||
id: '#SK3223',
|
||||
date: '10 Mar, 2020',
|
||||
type: 'Buy',
|
||||
currency: 'Bitcoin',
|
||||
amount: '1.00952 BTC',
|
||||
usd: '$ 9067.62'
|
||||
},
|
||||
{
|
||||
id: '#SK3224',
|
||||
date: '18 Mar, 2020',
|
||||
type: 'Buy',
|
||||
currency: 'Litecoin',
|
||||
amount: '0.00224 LTC',
|
||||
usd: '$ 1773.01'
|
||||
},
|
||||
{
|
||||
id: '#SK3225',
|
||||
date: '03 Mar, 2020',
|
||||
type: 'Buy',
|
||||
currency: 'Bitcoin',
|
||||
amount: '1.00952 BTC',
|
||||
usd: '$ 9423.73'
|
||||
},
|
||||
{
|
||||
id: '#SK3226',
|
||||
date: '15 Mar, 2020',
|
||||
type: 'Sell',
|
||||
currency: 'Ethereum',
|
||||
amount: '0.00413 ETH',
|
||||
usd: '$ 2123.01'
|
||||
},
|
||||
{
|
||||
id: '#SK3227',
|
||||
date: '03 Mar, 2020',
|
||||
type: 'Sell',
|
||||
currency: 'Bitcoin',
|
||||
amount: '1.00952 BTC',
|
||||
usd: '$ 9067.62'
|
||||
},
|
||||
{
|
||||
id: '#SK3228',
|
||||
date: '01 Mar, 2020',
|
||||
type: 'Sell',
|
||||
currency: 'Litecoin',
|
||||
amount: '1.00217 LTC',
|
||||
usd: '$ 9067.62'
|
||||
},
|
||||
|
||||
]
|
||||
|
||||
export { OveviewChart, activitiesData };
|
||||
|
|
@ -1,381 +0,0 @@
|
|||
<script>
|
||||
import Layout from "../../../layouts/main";
|
||||
import appConfig from "@/app.config";
|
||||
import PageHeader from "@/components/page-header";
|
||||
|
||||
import { OveviewChart, activitiesData } from "./data";
|
||||
/**
|
||||
* Wallets component
|
||||
*/
|
||||
export default {
|
||||
page: {
|
||||
title: "Wallet",
|
||||
meta: [
|
||||
{
|
||||
name: "description",
|
||||
content: appConfig.description,
|
||||
},
|
||||
],
|
||||
},
|
||||
components: {
|
||||
Layout,
|
||||
PageHeader,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
OveviewChart: OveviewChart,
|
||||
activitiesData: activitiesData,
|
||||
title: "Wallet",
|
||||
items: [
|
||||
{
|
||||
text: "Crypto",
|
||||
href: "/",
|
||||
},
|
||||
{
|
||||
text: "Wallet",
|
||||
active: true,
|
||||
},
|
||||
],
|
||||
totalRows: 1,
|
||||
currentPage: 1,
|
||||
perPage: 10,
|
||||
pageOptions: [
|
||||
{ text: '10', value: '10' },
|
||||
{ text: '25', value: '25' },
|
||||
{ text: '50', value: '50' },
|
||||
{ text: '100', value: '100' }
|
||||
],
|
||||
filter: null,
|
||||
filterOn: [],
|
||||
sortBy: "id",
|
||||
sortDesc: false,
|
||||
fields: [
|
||||
{
|
||||
key: "id",
|
||||
label: "ID No",
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
key: "date",
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
key: "type",
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
key: "currency",
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
key: "amount",
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
key: "usd",
|
||||
label: "Amount in USD",
|
||||
sortable: true,
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
/**
|
||||
* Total no. of records
|
||||
*/
|
||||
rows() {
|
||||
return this.activitiesData.length;
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
// Set the initial number of items
|
||||
this.totalRows = this.items.length;
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* Search the table data with search input
|
||||
*/
|
||||
onFiltered(filteredItems) {
|
||||
// Trigger pagination to update the number of buttons/pages due to filtering
|
||||
this.totalRows = filteredItems.length;
|
||||
this.currentPage = 1;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Layout>
|
||||
<PageHeader :title="title" :items="items" />
|
||||
<div class="row">
|
||||
<div class="col-xl-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="d-flex align-items-start">
|
||||
<div class="flex-shrink-0 me-4">
|
||||
<i class="mdi mdi-account-circle text-primary h1"></i>
|
||||
</div>
|
||||
|
||||
<div class="flex-grow-1">
|
||||
<div class="text-muted">
|
||||
<h5>Henry Wells</h5>
|
||||
<p class="mb-1">henrywells@abc.com</p>
|
||||
<p class="mb-0">Id no: #SK0234</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<b-dropdown
|
||||
variant="white"
|
||||
toggle-class="text-muted p-0"
|
||||
toggle-tag="div"
|
||||
>
|
||||
<template v-slot:button-content>
|
||||
<i class="mdi mdi-dots-horizontal font-size-18"></i>
|
||||
</template>
|
||||
<b-dropdown-item>Action</b-dropdown-item>
|
||||
<b-dropdown-item>Another action</b-dropdown-item>
|
||||
<b-dropdown-item>Something else here</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body border-top">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div>
|
||||
<p class="text-muted mb-2">Available Balance</p>
|
||||
<h5>$ 9148.23</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<div class="text-sm-end mt-4 mt-sm-0">
|
||||
<p class="text-muted mb-2">Since last month</p>
|
||||
<h5>
|
||||
+ $ 248.35
|
||||
<span class="badge bg-success ms-1 align-bottom"
|
||||
>+ 1.3 %</span
|
||||
>
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-body border-top">
|
||||
<p class="text-muted mb-4">In this month</p>
|
||||
<div class="text-center">
|
||||
<div class="row">
|
||||
<div class="col-sm-4">
|
||||
<div>
|
||||
<div class="font-size-24 text-primary mb-2">
|
||||
<i class="bx bx-send"></i>
|
||||
</div>
|
||||
|
||||
<p class="text-muted mb-2">Send</p>
|
||||
<h5>$ 654.42</h5>
|
||||
|
||||
<div class="mt-3">
|
||||
<a href="#" class="btn btn-primary btn-sm w-md">Send</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div class="mt-4 mt-sm-0">
|
||||
<div class="font-size-24 text-primary mb-2">
|
||||
<i class="bx bx-import"></i>
|
||||
</div>
|
||||
|
||||
<p class="text-muted mb-2">receive</p>
|
||||
<h5>$ 1054.32</h5>
|
||||
|
||||
<div class="mt-3">
|
||||
<a href="#" class="btn btn-primary btn-sm w-md"
|
||||
>Receive</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div class="mt-4 mt-sm-0">
|
||||
<div class="font-size-24 text-primary mb-2">
|
||||
<i class="bx bx-wallet"></i>
|
||||
</div>
|
||||
|
||||
<p class="text-muted mb-2">Withdraw</p>
|
||||
<h5>$ 824.34</h5>
|
||||
|
||||
<div class="mt-3">
|
||||
<a href="#" class="btn btn-primary btn-sm w-md"
|
||||
>Withdraw</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xl-8">
|
||||
<div class="row">
|
||||
<div class="col-sm-4">
|
||||
<div class="card mini-stats-wid">
|
||||
<div class="card-body">
|
||||
<div class="d-flex">
|
||||
<div class="me-3 align-self-center">
|
||||
<i class="mdi mdi-bitcoin h2 text-warning mb-0"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<p class="text-muted mb-2">Bitcoin Wallet</p>
|
||||
<h5 class="mb-0">
|
||||
1.02356 BTC
|
||||
<span class="font-size-14 text-muted"> = $ 9148.00 </span>
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div class="card mini-stats-wid">
|
||||
<div class="card-body">
|
||||
<div class="d-flex">
|
||||
<div class="me-3 align-self-center">
|
||||
<i class="mdi mdi-ethereum h2 text-primary mb-0"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<p class="text-muted mb-2">Ethereum Wallet</p>
|
||||
<h5 class="mb-0">
|
||||
0.04121 ETH
|
||||
<span class="font-size-14 text-muted"> = $ 8235.00 </span>
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div class="card mini-stats-wid">
|
||||
<div class="card-body">
|
||||
<div class="d-flex">
|
||||
<div class="me-3 align-self-center">
|
||||
<i class="mdi mdi-litecoin h2 text-info mb-0"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<p class="text-muted mb-2">litecoin Wallet</p>
|
||||
<h5 class="mb-0">
|
||||
0.00356 BTC
|
||||
<span class="font-size-14 text-muted"> = $ 4721.00 </span>
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title mb-3">Overview</h4>
|
||||
|
||||
<div>
|
||||
<apexchart
|
||||
class="apex-charts"
|
||||
height="228"
|
||||
type="line"
|
||||
dir="ltr"
|
||||
:series="OveviewChart.series"
|
||||
:options="OveviewChart.chartOptions"
|
||||
></apexchart>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end row -->
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title mb-4">Activities</h4>
|
||||
<b-tabs content-class="mt-3" nav-class="nav-tabs-custom">
|
||||
<b-tab title="All" active>
|
||||
<div class="row mt-4">
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<div id="tickets-table_length" class="dataTables_length">
|
||||
<label class="d-inline-flex align-items-center fw-normal">
|
||||
Show
|
||||
<select
|
||||
v-model="perPage"
|
||||
size="sm"
|
||||
class="form-control form-select form-select-sm"
|
||||
>
|
||||
<option v-for="option in pageOptions" :key="option.value" :value="option.value">
|
||||
{{ option.text }}
|
||||
</option>
|
||||
</select
|
||||
>
|
||||
entries
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Search -->
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<div
|
||||
id="tickets-table_filter"
|
||||
class="dataTables_filter text-md-end"
|
||||
>
|
||||
<label class="d-inline-flex align-items-center">
|
||||
Search:
|
||||
<b-form-input
|
||||
v-model="filter"
|
||||
type="search"
|
||||
class="form-control form-control-sm ms-2"
|
||||
></b-form-input>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End search -->
|
||||
</div>
|
||||
<!-- Table -->
|
||||
<div class="table-responsive table-hover mb-0">
|
||||
<b-table
|
||||
:items="activitiesData"
|
||||
:fields="fields"
|
||||
responsive="sm"
|
||||
:per-page="perPage"
|
||||
:current-page="currentPage"
|
||||
:v-model:sort-by="sortBy"
|
||||
:v-model:sort-desc="sortDesc"
|
||||
:filter="filter"
|
||||
:filter-included-fields="filterOn"
|
||||
@filtered="onFiltered"
|
||||
></b-table>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div
|
||||
class="dataTables_paginate paging_simple_numbers float-end"
|
||||
>
|
||||
<ul class="pagination pagination-rounded mb-0">
|
||||
<!-- pagination -->
|
||||
<b-pagination
|
||||
v-model="currentPage"
|
||||
:total-rows="rows"
|
||||
:per-page="perPage"
|
||||
></b-pagination>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</b-tab>
|
||||
<b-tab title="Buy" disabled> </b-tab>
|
||||
<b-tab title="Sell" disabled> </b-tab>
|
||||
</b-tabs>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
</template>
|
||||
|
|
@ -1,344 +0,0 @@
|
|||
<script>
|
||||
import axios from "axios";
|
||||
|
||||
import DropZone from "@/components/widgets/dropZone";
|
||||
import { ref } from "vue";
|
||||
|
||||
import Multiselect from "@vueform/multiselect";
|
||||
|
||||
import { required, helpers } from "@vuelidate/validators";
|
||||
import useVuelidate from "@vuelidate/core";
|
||||
|
||||
import Layout from "../../layouts/main";
|
||||
import PageHeader from "@/components/page-header";
|
||||
import appConfig from "@/app.config";
|
||||
|
||||
/**
|
||||
* Add-product component
|
||||
*/
|
||||
export default {
|
||||
page: {
|
||||
title: "Add Product",
|
||||
meta: [
|
||||
{
|
||||
name: "description",
|
||||
content: appConfig.description,
|
||||
},
|
||||
],
|
||||
},
|
||||
setup() {
|
||||
let dropzoneFile = ref("");
|
||||
const drop = (e) => {
|
||||
dropzoneFile.value = e.dataTransfer.files[0];
|
||||
};
|
||||
const selectedFile = () => {
|
||||
dropzoneFile.value = document.querySelector(".dropzoneFile").files[0];
|
||||
};
|
||||
return { dropzoneFile, drop, selectedFile, v$: useVuelidate() };
|
||||
},
|
||||
components: {
|
||||
DropZone,
|
||||
Multiselect,
|
||||
Layout,
|
||||
PageHeader,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
title: "Add Product",
|
||||
items: [
|
||||
{
|
||||
text: "Ecommerce",
|
||||
href: "/",
|
||||
},
|
||||
{
|
||||
text: "Add Product",
|
||||
active: true,
|
||||
},
|
||||
],
|
||||
value: null,
|
||||
value1: null,
|
||||
product: {
|
||||
name: "",
|
||||
manufacture_name: "",
|
||||
manufacture_brand: "",
|
||||
price: null,
|
||||
},
|
||||
formData: new FormData(),
|
||||
submitted: false,
|
||||
options: [
|
||||
"Alaska",
|
||||
"Hawaii",
|
||||
"California",
|
||||
"Nevada",
|
||||
"Oregon",
|
||||
"Washington",
|
||||
"Arizona",
|
||||
"Colorado",
|
||||
"Idaho",
|
||||
"Montana",
|
||||
"Nebraska",
|
||||
"New Mexico",
|
||||
"North Dakota",
|
||||
"Utah",
|
||||
"Wyoming",
|
||||
"Alabama",
|
||||
"Arkansas",
|
||||
"Illinois",
|
||||
"Iowa",
|
||||
],
|
||||
image: "",
|
||||
file: "",
|
||||
};
|
||||
},
|
||||
validations: {
|
||||
product: {
|
||||
name: {
|
||||
required: helpers.withMessage("Name is required", required),
|
||||
},
|
||||
manufacture_name: {
|
||||
required: helpers.withMessage("manufacture name is required", required),
|
||||
},
|
||||
manufacture_brand: {
|
||||
required: helpers.withMessage(
|
||||
"Manufacture brand is required",
|
||||
required
|
||||
),
|
||||
},
|
||||
price: {
|
||||
required: helpers.withMessage("Price is required", required),
|
||||
},
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
onAccept(file) {
|
||||
this.image = file.name;
|
||||
this.file = file;
|
||||
},
|
||||
productAdd() {
|
||||
this.submitted = true;
|
||||
// stop here if form is invalid
|
||||
this.v$.$touch();
|
||||
|
||||
if (this.v$.$invalid) {
|
||||
return;
|
||||
} else {
|
||||
let formData = new FormData();
|
||||
formData.append("name", this.product.name);
|
||||
formData.append("manufacture_name", this.product.manufacture_name);
|
||||
formData.append("manufacture_brand", this.product.manufacture_brand);
|
||||
formData.append("price", this.product.price);
|
||||
formData.append("image", this.file, this.image);
|
||||
|
||||
//** Add product in api using post method *//
|
||||
axios
|
||||
.post(`http://localhost:8000/api/products`, formData)
|
||||
.then((res) => {
|
||||
return res;
|
||||
})
|
||||
.catch((err) => {
|
||||
return err;
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Layout>
|
||||
<PageHeader :title="title" :items="items" />
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">Basic Information</h4>
|
||||
<p class="card-title-desc">Fill all information below</p>
|
||||
|
||||
<form @submit.prevent="productAdd">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="mb-3">
|
||||
<label for="productname">Product Name</label>
|
||||
<input
|
||||
id="productname"
|
||||
v-model="product.name"
|
||||
name="name"
|
||||
type="text"
|
||||
class="form-control"
|
||||
:class="{
|
||||
'is-invalid': submitted && v$.product.name.$error,
|
||||
}"
|
||||
/>
|
||||
<div
|
||||
v-if="submitted && v$.product.name.$error"
|
||||
class="invalid-feedback"
|
||||
>
|
||||
<span v-if="v$.product.name.required.$message">{{
|
||||
v$.product.name.required.$message
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="manufacturername">Manufacturer Name</label>
|
||||
<input
|
||||
id="manufacturername"
|
||||
v-model="product.manufacture_name"
|
||||
name="manufacture_name"
|
||||
type="text"
|
||||
class="form-control"
|
||||
:class="{
|
||||
'is-invalid':
|
||||
submitted && v$.product.manufacture_name.$error,
|
||||
}"
|
||||
/>
|
||||
<div
|
||||
v-if="submitted && v$.product.manufacture_name.$error"
|
||||
class="invalid-feedback"
|
||||
>
|
||||
<span
|
||||
v-if="v$.product.manufacture_name.required.$message"
|
||||
>{{
|
||||
v$.product.manufacture_name.required.$message
|
||||
}}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="manufacturerbrand">Manufacturer Brand</label>
|
||||
<input
|
||||
id="manufacturerbrand"
|
||||
v-model="product.manufacture_brand"
|
||||
name="manufacture_brand"
|
||||
type="text"
|
||||
class="form-control"
|
||||
:class="{
|
||||
'is-invalid':
|
||||
submitted && v$.product.manufacture_brand.$error,
|
||||
}"
|
||||
/>
|
||||
<div
|
||||
v-if="submitted && v$.product.manufacture_brand.$error"
|
||||
class="invalid-feedback"
|
||||
>
|
||||
<span
|
||||
v-if="v$.product.manufacture_brand.required.$message"
|
||||
>{{
|
||||
v$.product.manufacture_brand.required.$message
|
||||
}}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="price">Price</label>
|
||||
<input
|
||||
id="price"
|
||||
name="price"
|
||||
v-model="product.price"
|
||||
:class="{
|
||||
'is-invalid': submitted && v$.product.price.$error,
|
||||
}"
|
||||
type="text"
|
||||
class="form-control"
|
||||
/>
|
||||
<div
|
||||
v-if="submitted && v$.product.price.$error"
|
||||
class="invalid-feedback"
|
||||
>
|
||||
<span v-if="v$.product.price.required.$message">{{
|
||||
v$.product.price.required.$message
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<label>Product Images</label>
|
||||
<DropZone @drop.prevent="drop" @change="selectedFile" />
|
||||
<span class="file-info">File: {{ dropzoneFile.name }}</span>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-6">
|
||||
<div class="mb-3">
|
||||
<label class="control-label">Category</label>
|
||||
<multiselect
|
||||
v-model="value"
|
||||
:options="options"
|
||||
></multiselect>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="control-label">Features</label>
|
||||
<multiselect
|
||||
v-model="value1"
|
||||
:options="options"
|
||||
:multiple="true"
|
||||
></multiselect>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="productdesc">Product Description</label>
|
||||
<textarea
|
||||
id="productdesc"
|
||||
class="form-control"
|
||||
rows="5"
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<button type="submit" class="btn btn-primary me-1">
|
||||
Save Changes
|
||||
</button>
|
||||
<button type="submit" class="btn btn-secondary">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">Meta Data</h4>
|
||||
<p class="card-title-desc">Fill all information below</p>
|
||||
|
||||
<form>
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="mb-3">
|
||||
<label for="metatitle">Meta title</label>
|
||||
<input
|
||||
id="metatitle"
|
||||
name="productname"
|
||||
type="text"
|
||||
class="form-control"
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="metakeywords">Meta Keywords</label>
|
||||
<input
|
||||
id="metakeywords"
|
||||
name="manufacturername"
|
||||
type="text"
|
||||
class="form-control"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-6">
|
||||
<div class="mb-3">
|
||||
<label for="metadescription">Meta Description</label>
|
||||
<textarea
|
||||
id="metadescription"
|
||||
class="form-control"
|
||||
rows="5"
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-primary me-1">
|
||||
Save Changes
|
||||
</button>
|
||||
<button type="submit" class="btn btn-secondary">Cancel</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</Layout>
|
||||
</template>
|
||||
|
|
@ -1,424 +0,0 @@
|
|||
<script>
|
||||
import Layout from "../../layouts/main";
|
||||
import PageHeader from "@/components/page-header";
|
||||
import appConfig from "@/app.config";
|
||||
|
||||
/**
|
||||
* Product-cart component
|
||||
*/
|
||||
export default {
|
||||
page: {
|
||||
title: "Cart",
|
||||
meta: [{ name: "description", content: appConfig.description }],
|
||||
},
|
||||
components: { Layout, PageHeader },
|
||||
data() {
|
||||
return {
|
||||
title: "Cart",
|
||||
items: [
|
||||
{
|
||||
text: "Ecommerce",
|
||||
href: "/",
|
||||
},
|
||||
{
|
||||
text: "Cart",
|
||||
active: true,
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Layout>
|
||||
<PageHeader :title="title" :items="items" />
|
||||
<div class="row">
|
||||
<div class="col-xl-8">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="table-responsive">
|
||||
<table class="table align-middle mb-0 table-nowrap">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th>Product</th>
|
||||
<th>Product Desc</th>
|
||||
<th>Price</th>
|
||||
<th>Quantity</th>
|
||||
<th colspan="2">Total</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<img
|
||||
src="@/assets/images/product/img-1.png"
|
||||
alt="product-img"
|
||||
title="product-img"
|
||||
class="avatar-md"
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<h5 class="font-size-14 text-truncate">
|
||||
<router-link
|
||||
to="/ecommerce/product-detail"
|
||||
class="text-dark"
|
||||
>Half sleeve T-shirt</router-link
|
||||
>
|
||||
</h5>
|
||||
<p class="mb-0">
|
||||
Color :
|
||||
<span class="fw-medium">Maroon</span>
|
||||
</p>
|
||||
</td>
|
||||
<td>$ 450</td>
|
||||
<td>
|
||||
<input
|
||||
type="number"
|
||||
value="2"
|
||||
name="demo_vertical"
|
||||
class="form-control"
|
||||
style="width: 120px"
|
||||
/>
|
||||
</td>
|
||||
<td>$ 900</td>
|
||||
<td>
|
||||
<a
|
||||
href="javascript:void(0);"
|
||||
class="action-icon text-danger"
|
||||
>
|
||||
<i class="mdi mdi-trash-can font-size-18"></i>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<img
|
||||
src="@/assets/images/product/img-2.png"
|
||||
alt="product-img"
|
||||
title="product-img"
|
||||
class="avatar-md"
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<h5 class="font-size-14 text-truncate">
|
||||
<router-link
|
||||
to="/ecommerce/product-detail"
|
||||
class="text-dark"
|
||||
>Light blue T-shirt</router-link
|
||||
>
|
||||
</h5>
|
||||
<p class="mb-0">
|
||||
Color :
|
||||
<span class="fw-medium">Light blue</span>
|
||||
</p>
|
||||
</td>
|
||||
<td>$ 225</td>
|
||||
<td>
|
||||
<input
|
||||
type="number"
|
||||
value="1"
|
||||
name="demo_vertical"
|
||||
class="form-control"
|
||||
style="width: 120px"
|
||||
/>
|
||||
</td>
|
||||
|
||||
<td>$ 225</td>
|
||||
<td>
|
||||
<a
|
||||
href="javascript:void(0);"
|
||||
class="action-icon text-danger"
|
||||
>
|
||||
<i class="mdi mdi-trash-can font-size-18"></i>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<img
|
||||
src="@/assets/images/product/img-3.png"
|
||||
alt="product-img"
|
||||
title="product-img"
|
||||
class="avatar-md"
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<h5 class="font-size-14 text-truncate">
|
||||
<router-link
|
||||
to="/ecommerce/product-detail"
|
||||
class="text-dark"
|
||||
>Black Color T-shirt</router-link
|
||||
>
|
||||
</h5>
|
||||
<p class="mb-0">
|
||||
Color :
|
||||
<span class="fw-medium">Black</span>
|
||||
</p>
|
||||
</td>
|
||||
<td>$ 152</td>
|
||||
<td>
|
||||
<input
|
||||
type="number"
|
||||
value="2"
|
||||
name="demo_vertical"
|
||||
class="form-control"
|
||||
style="width: 120px"
|
||||
/>
|
||||
</td>
|
||||
|
||||
<td>$ 304</td>
|
||||
<td>
|
||||
<a
|
||||
href="javascript:void(0);"
|
||||
class="action-icon text-danger"
|
||||
>
|
||||
<i class="mdi mdi-trash-can font-size-18"></i>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<img
|
||||
src="@/assets/images/product/img-4.png"
|
||||
alt="product-img"
|
||||
title="product-img"
|
||||
class="avatar-md"
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<h5 class="font-size-14 text-truncate">
|
||||
<router-link
|
||||
to="/ecommerce/product-detail"
|
||||
class="text-dark"
|
||||
>Hoodie (Blue)</router-link
|
||||
>
|
||||
</h5>
|
||||
<p class="mb-0">
|
||||
Color :
|
||||
<span class="fw-medium">Blue</span>
|
||||
</p>
|
||||
</td>
|
||||
<td>$ 145</td>
|
||||
<td>
|
||||
<input
|
||||
type="number"
|
||||
value="2"
|
||||
name="demo_vertical"
|
||||
class="form-control"
|
||||
style="width: 120px"
|
||||
/>
|
||||
</td>
|
||||
|
||||
<td>$ 290</td>
|
||||
<td>
|
||||
<a
|
||||
href="javascript:void(0);"
|
||||
class="action-icon text-danger"
|
||||
>
|
||||
<i class="mdi mdi-trash-can font-size-18"></i>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<img
|
||||
src="@/assets/images/product/img-5.png"
|
||||
alt="product-img"
|
||||
title="product-img"
|
||||
class="avatar-md"
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<h5 class="font-size-14 text-truncate">
|
||||
<router-link
|
||||
to="/ecommerce/product-detail"
|
||||
class="text-dark"
|
||||
>Half sleeve T-Shirt</router-link
|
||||
>
|
||||
</h5>
|
||||
<p class="mb-0">
|
||||
Color :
|
||||
<span class="fw-medium">Light orange</span>
|
||||
</p>
|
||||
</td>
|
||||
<td>$ 138</td>
|
||||
<td>
|
||||
<input
|
||||
type="number"
|
||||
value="1"
|
||||
name="demo_vertical"
|
||||
class="form-control"
|
||||
style="width: 120px"
|
||||
/>
|
||||
</td>
|
||||
|
||||
<td>$ 138</td>
|
||||
<td>
|
||||
<a
|
||||
href="javascript:void(0);"
|
||||
class="action-icon text-danger"
|
||||
>
|
||||
<i class="mdi mdi-trash-can font-size-18"></i>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<img
|
||||
src="@/assets/images/product/img-6.png"
|
||||
alt="product-img"
|
||||
title="product-img"
|
||||
class="avatar-md"
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<h5 class="font-size-14 text-truncate">
|
||||
<router-link
|
||||
to="/ecommerce/product-detail"
|
||||
class="text-dark"
|
||||
>Green color T-shirt</router-link
|
||||
>
|
||||
</h5>
|
||||
<p class="mb-0">
|
||||
Color :
|
||||
<span class="fw-medium">Green</span>
|
||||
</p>
|
||||
</td>
|
||||
<td>$ 152</td>
|
||||
<td>
|
||||
<input
|
||||
type="number"
|
||||
value="2"
|
||||
name="demo_vertical"
|
||||
class="form-control"
|
||||
style="width: 120px"
|
||||
/>
|
||||
</td>
|
||||
|
||||
<td>$ 304</td>
|
||||
<td>
|
||||
<a
|
||||
href="javascript:void(0);"
|
||||
class="action-icon text-danger"
|
||||
>
|
||||
<i class="mdi mdi-trash-can font-size-18"></i>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="row mt-4">
|
||||
<div class="col-sm-6">
|
||||
<router-link
|
||||
to="/ecommerce/product-detail/1"
|
||||
class="btn btn-secondary"
|
||||
>
|
||||
<i class="mdi mdi-arrow-left me-1"></i> Continue Shopping
|
||||
</router-link>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
<div class="col-sm-6">
|
||||
<div class="text-sm-end mt-2 mt-sm-0">
|
||||
<router-link to="/ecommerce/checkout" class="btn btn-success">
|
||||
<i class="mdi mdi-cart-arrow-right me-1"></i> Checkout
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title mb-4">Card Details</h5>
|
||||
|
||||
<div class="card bg-primary text-white visa-card mb-0">
|
||||
<div class="card-body">
|
||||
<div>
|
||||
<i class="bx bxl-visa visa-pattern"></i>
|
||||
|
||||
<div class="float-end">
|
||||
<i class="bx bxl-visa visa-logo display-3"></i>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<i class="bx bx-chip h1 text-warning"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mt-5">
|
||||
<div class="col-4">
|
||||
<p>
|
||||
<i class="fas fa-star-of-life m-1"></i>
|
||||
<i class="fas fa-star-of-life m-1"></i>
|
||||
<i class="fas fa-star-of-life m-1"></i>
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<p>
|
||||
<i class="fas fa-star-of-life m-1"></i>
|
||||
<i class="fas fa-star-of-life m-1"></i>
|
||||
<i class="fas fa-star-of-life m-1"></i>
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<p>
|
||||
<i class="fas fa-star-of-life m-1"></i>
|
||||
<i class="fas fa-star-of-life m-1"></i>
|
||||
<i class="fas fa-star-of-life m-1"></i>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-5">
|
||||
<h5 class="text-white float-end mb-0">12/22</h5>
|
||||
<h5 class="text-white mb-0">Fredrick Taylor</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title mb-3">Order Summary</h4>
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table mb-0">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Grand Total :</td>
|
||||
<td>$ 1,857</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Discount :</td>
|
||||
<td>- $ 157</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shipping Charge :</td>
|
||||
<td>$ 25</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Estimated Tax :</td>
|
||||
<td>$ 19.22</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Total :</th>
|
||||
<th>$ 1744.22</th>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- end table-responsive -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- end card -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</Layout>
|
||||
</template>
|
||||
|
|
@ -1,502 +0,0 @@
|
|||
<script>
|
||||
import Layout from "../../layouts/main";
|
||||
import PageHeader from "@/components/page-header";
|
||||
import appConfig from "@/app.config";
|
||||
|
||||
import Multiselect from '@vueform/multiselect'
|
||||
|
||||
/**
|
||||
* Product-checkout Component
|
||||
*/
|
||||
export default {
|
||||
page: {
|
||||
title: "Checkout",
|
||||
meta: [{ name: "description", content: appConfig.description }],
|
||||
},
|
||||
components: { Multiselect, Layout, PageHeader },
|
||||
data() {
|
||||
return {
|
||||
title: "Checkout",
|
||||
items: [
|
||||
{
|
||||
text: "Ecommerce",
|
||||
href: "/",
|
||||
},
|
||||
{
|
||||
text: "Checkout",
|
||||
active: true,
|
||||
},
|
||||
],
|
||||
stateValue: null,
|
||||
countryValue: null,
|
||||
stateOptions: [
|
||||
"Alaska",
|
||||
"Hawaii",
|
||||
"California",
|
||||
"Nevada",
|
||||
"Oregon",
|
||||
"Washington",
|
||||
"Arizona",
|
||||
"Colorado",
|
||||
"Idaho",
|
||||
"Montana",
|
||||
"Nebraska",
|
||||
"New Mexico",
|
||||
"North Dakota",
|
||||
"Utah",
|
||||
"Wyoming",
|
||||
"Alabama",
|
||||
"Arkansas",
|
||||
"Illinois",
|
||||
"Iowa",
|
||||
],
|
||||
countryOptions: [
|
||||
"Afghanistan",
|
||||
"Albania",
|
||||
"Algeria",
|
||||
"American Samoa",
|
||||
"Andorra",
|
||||
"Angola",
|
||||
"Anguilla",
|
||||
"Antarctica",
|
||||
"Argentina",
|
||||
"Hawaii",
|
||||
"California",
|
||||
"Colombia",
|
||||
"Congo",
|
||||
"Dominica",
|
||||
"Denmark",
|
||||
"Nevada",
|
||||
"Oregon",
|
||||
"Washington",
|
||||
"Ecuador",
|
||||
"Idaho",
|
||||
"Montana",
|
||||
"Namibia",
|
||||
"Nauru",
|
||||
"Nepal",
|
||||
"Netherlands",
|
||||
"Nicaragua",
|
||||
"New Caledonia",
|
||||
"North Dakota",
|
||||
"Tonga",
|
||||
"Tunisia",
|
||||
"Thailand",
|
||||
"Turkey",
|
||||
"Illinois",
|
||||
"Tuvalu",
|
||||
"Uganda",
|
||||
"Uruguay",
|
||||
"United Arab Emirates",
|
||||
"United Kingdom",
|
||||
"Venezuela",
|
||||
"Zimbabwe",
|
||||
"Uruguay",
|
||||
],
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Layout>
|
||||
<PageHeader :title="title" :items="items" />
|
||||
<div class="checkout-tabs">
|
||||
<b-tabs
|
||||
pills
|
||||
vertical
|
||||
nav-class="p-0"
|
||||
nav-wrapper-class="col-xl-2 col-sm-3"
|
||||
content-class="w-100"
|
||||
>
|
||||
<b-tab active>
|
||||
<template v-slot:title>
|
||||
<i class="bx bxs-truck d-block check-nav-icon mt-4 mb-2"></i>
|
||||
<p class="fw-bold mb-4">Shipping Info</p>
|
||||
</template>
|
||||
<b-card-text>
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">Shipping information</h4>
|
||||
<p class="card-title-desc">Fill all information below</p>
|
||||
<form>
|
||||
<b-row class="mb-4">
|
||||
<b-col md="2">
|
||||
<label for="input-name">Name</label>
|
||||
</b-col>
|
||||
<b-col md="10">
|
||||
<b-form-input
|
||||
id="input-name"
|
||||
placeholder="Enter your name"
|
||||
></b-form-input>
|
||||
</b-col>
|
||||
</b-row>
|
||||
|
||||
<b-row class="mb-4">
|
||||
<b-col md="2">
|
||||
<label for="billing-email-address">Email Address</label>
|
||||
</b-col>
|
||||
<b-col md="10">
|
||||
<b-form-input
|
||||
id="billing-email-address"
|
||||
placeholder="Enter your email"
|
||||
></b-form-input>
|
||||
</b-col>
|
||||
</b-row>
|
||||
|
||||
<b-row class="mb-4">
|
||||
<b-col md="2">
|
||||
<label for="billing-phone">Phone</label>
|
||||
</b-col>
|
||||
<b-col md="10">
|
||||
<b-form-input
|
||||
id="billing-phone"
|
||||
placeholder="Enter your Phone no."
|
||||
></b-form-input>
|
||||
</b-col>
|
||||
</b-row>
|
||||
|
||||
<b-row class="mb-4">
|
||||
<b-col md="2">
|
||||
<label for="billing-address">Address</label>
|
||||
</b-col>
|
||||
<b-col md="10">
|
||||
<b-form-textarea
|
||||
id="billing-address"
|
||||
rows="3"
|
||||
placeholder="Enter full address"
|
||||
></b-form-textarea>
|
||||
</b-col>
|
||||
</b-row>
|
||||
|
||||
<div class="form-group row mb-4">
|
||||
<label class="col-md-2 col-form-label">Country</label>
|
||||
<div class="col-md-10">
|
||||
<multiselect
|
||||
v-model="countryValue"
|
||||
:options="countryOptions"
|
||||
></multiselect>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group row mb-4">
|
||||
<label class="col-md-2 col-form-label">States</label>
|
||||
<div class="col-md-10">
|
||||
<multiselect
|
||||
v-model="stateValue"
|
||||
:options="stateOptions"
|
||||
></multiselect>
|
||||
</div>
|
||||
</div>
|
||||
<b-row class="mb-4">
|
||||
<b-col md="2">
|
||||
<label for="example-textarea">Order Notes:</label>
|
||||
</b-col>
|
||||
<b-col md="10">
|
||||
<b-form-textarea
|
||||
id="example-textarea"
|
||||
rows="3"
|
||||
placeholder="Write some note.."
|
||||
></b-form-textarea>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-4">
|
||||
<div class="col-sm-6">
|
||||
<router-link
|
||||
to="/ecommerce/cart"
|
||||
class="btn text-muted d-none d-sm-inline-block btn-link"
|
||||
>
|
||||
<i class="mdi mdi-arrow-left me-1"></i> Back to Shopping Cart
|
||||
</router-link>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
<div class="col-sm-6">
|
||||
<div class="text-end">
|
||||
<router-link
|
||||
to="/ecommerce/checkout"
|
||||
class="btn btn-success"
|
||||
>
|
||||
<i class="mdi mdi-truck-fast me-1"></i> Proceed to Shipping
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
</b-card-text>
|
||||
</b-tab>
|
||||
<b-tab>
|
||||
<template v-slot:title>
|
||||
<i class="bx bx-money d-block check-nav-icon mt-4 mb-2"></i>
|
||||
<p class="fw-bold mb-4">Payment Info</p>
|
||||
</template>
|
||||
<b-card-text>
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div>
|
||||
<h4 class="card-title">Payment information</h4>
|
||||
<p class="card-title-desc">Fill all information below</p>
|
||||
|
||||
<div>
|
||||
<div class="form-check form-check-inline font-size-16">
|
||||
<input
|
||||
class="form-check-input"
|
||||
type="radio"
|
||||
name="paymentoptionsRadio"
|
||||
id="paymentoptionsRadio1"
|
||||
checked=""
|
||||
/>
|
||||
<label
|
||||
class="form-check-label font-size-13"
|
||||
for="paymentoptionsRadio1"
|
||||
><i
|
||||
class="fab fa-cc-mastercard me-1 font-size-20 align-top"
|
||||
></i>
|
||||
Credit / Debit Card</label
|
||||
>
|
||||
</div>
|
||||
<div class="form-check form-check-inline font-size-16">
|
||||
<input
|
||||
class="form-check-input"
|
||||
type="radio"
|
||||
name="paymentoptionsRadio"
|
||||
id="paymentoptionsRadio2"
|
||||
/>
|
||||
<label
|
||||
class="form-check-label font-size-13"
|
||||
for="paymentoptionsRadio2"
|
||||
><i
|
||||
class="fab fa-cc-paypal me-1 font-size-20 align-top"
|
||||
></i>
|
||||
Paypal</label
|
||||
>
|
||||
</div>
|
||||
<div class="form-check form-check-inline font-size-16">
|
||||
<input
|
||||
class="form-check-input"
|
||||
type="radio"
|
||||
name="paymentoptionsRadio"
|
||||
id="paymentoptionsRadio3"
|
||||
/>
|
||||
<label
|
||||
class="form-check-label font-size-13"
|
||||
for="paymentoptionsRadio3"
|
||||
><i
|
||||
class="far fa-money-bill-alt me-1 font-size-20 align-top"
|
||||
></i>
|
||||
Cash on Delivery</label
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5 class="mt-5 mb-3 font-size-15">For card Payment</h5>
|
||||
<div class="p-4 border">
|
||||
<form>
|
||||
<b-form-group
|
||||
id="input-group-2"
|
||||
label="Card Number"
|
||||
label-for="input-card"
|
||||
class="mb-0"
|
||||
>
|
||||
<b-form-input
|
||||
id="input-card"
|
||||
placeholder="0000 0000 0000 0000"
|
||||
></b-form-input>
|
||||
</b-form-group>
|
||||
|
||||
<b-row class="mt-4">
|
||||
<b-col lg="6">
|
||||
<b-form-group
|
||||
id="input-group-2"
|
||||
label="Name on card"
|
||||
label-for="input-number"
|
||||
class="mb-0"
|
||||
>
|
||||
<b-form-input
|
||||
id="input-number"
|
||||
placeholder="Name on Card"
|
||||
></b-form-input>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
<b-col lg="3">
|
||||
<b-form-group
|
||||
id="input-group-2"
|
||||
label="Expiry date"
|
||||
label-for="input-date"
|
||||
class="mb-0"
|
||||
>
|
||||
<b-form-input
|
||||
id="input-date"
|
||||
placeholder="MM/YY"
|
||||
></b-form-input>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
|
||||
<b-col lg="3">
|
||||
<b-form-group
|
||||
id="input-group-2"
|
||||
label="CVV Code"
|
||||
label-for="cvvcodeInput"
|
||||
class="mb-0"
|
||||
>
|
||||
<b-form-input
|
||||
id="cvvcodeInput"
|
||||
placeholder="Enter CVV Code"
|
||||
></b-form-input>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-4">
|
||||
<div class="col-sm-6">
|
||||
<router-link
|
||||
to="/ecommerce/cart"
|
||||
class="btn text-muted d-none d-sm-inline-block btn-link"
|
||||
>
|
||||
<i class="mdi mdi-arrow-left me-1"></i> Back to Shopping Cart
|
||||
</router-link>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
<div class="col-sm-6">
|
||||
<div class="text-end">
|
||||
<router-link
|
||||
to="/ecommerce/checkout"
|
||||
class="btn btn-success"
|
||||
>
|
||||
<i class="mdi mdi-truck-fast me-1"></i> Proceed to Shipping
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
</b-card-text>
|
||||
</b-tab>
|
||||
<b-tab>
|
||||
<template v-slot:title>
|
||||
<i class="bx bx-badge-check d-block check-nav-icon mt-4 mb-2"></i>
|
||||
<p class="fw-bold mb-4">Confirmation</p>
|
||||
</template>
|
||||
<b-card-text>
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="card shadow-none border mb-0">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title mb-4">Order Summary</h4>
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table align-middle mb-0 table-nowrap">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th scope="col">Product</th>
|
||||
<th scope="col">Product Desc</th>
|
||||
<th scope="col">Price</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">
|
||||
<img
|
||||
src="@/assets/images/product/img-1.png"
|
||||
alt="product-img"
|
||||
title="product-img"
|
||||
class="avatar-md"
|
||||
/>
|
||||
</th>
|
||||
<td>
|
||||
<h5 class="font-size-14 text-truncate">
|
||||
<router-link
|
||||
to="/ecommerce/product-detail"
|
||||
class="text-dark"
|
||||
>Half sleeve T-shirt (64GB)</router-link
|
||||
>
|
||||
</h5>
|
||||
<p class="text-muted mb-0">$ 450 x 1</p>
|
||||
</td>
|
||||
<td>$ 450</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">
|
||||
<img
|
||||
src="@/assets/images/product/img-7.png"
|
||||
alt="product-img"
|
||||
title="product-img"
|
||||
class="avatar-md"
|
||||
/>
|
||||
</th>
|
||||
<td>
|
||||
<h5 class="font-size-14 text-truncate">
|
||||
<router-link
|
||||
to="/ecommerce/product-detail"
|
||||
class="text-dark"
|
||||
>Wirless Headphone</router-link
|
||||
>
|
||||
</h5>
|
||||
<p class="text-muted mb-0">$ 225 x 1</p>
|
||||
</td>
|
||||
<td>$ 225</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
<h6 class="m-0 text-end">Sub Total:</h6>
|
||||
</td>
|
||||
<td>$ 675</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3">
|
||||
<div class="bg-soft bg-primary p-3 rounded">
|
||||
<h5 class="font-size-14 text-primary mb-0">
|
||||
<i class="fas fa-shipping-fast me-2"></i>
|
||||
Shipping
|
||||
<span class="float-end">Free</span>
|
||||
</h5>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
<h6 class="m-0 text-end">Total:</h6>
|
||||
</td>
|
||||
<td>$ 675</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mt-4">
|
||||
<div class="col-sm-6">
|
||||
<router-link
|
||||
to="/ecommerce/cart"
|
||||
class="btn text-muted d-none d-sm-inline-block btn-link"
|
||||
>
|
||||
<i class="mdi mdi-arrow-left me-1"></i> Back to Shopping Cart
|
||||
</router-link>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
<div class="col-sm-6">
|
||||
<div class="text-end">
|
||||
<router-link
|
||||
to="/ecommerce/checkout"
|
||||
class="btn btn-success"
|
||||
>
|
||||
<i class="mdi mdi-truck-fast me-1"></i> Proceed to Shipping
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
</b-card-text>
|
||||
</b-tab>
|
||||
</b-tabs>
|
||||
</div>
|
||||
</Layout>
|
||||
</template>
|
||||
|
|
@ -1,401 +0,0 @@
|
|||
<script>
|
||||
import Layout from "../../layouts/main";
|
||||
import PageHeader from "@/components/page-header";
|
||||
|
||||
import { required, helpers } from "@vuelidate/validators";
|
||||
import useVuelidate from "@vuelidate/core";
|
||||
|
||||
import { customersData } from "./data-customers";
|
||||
import appConfig from "@/app.config";
|
||||
|
||||
/**
|
||||
* Customers component
|
||||
*/
|
||||
export default {
|
||||
page: {
|
||||
title: "Customers",
|
||||
meta: [{ name: "description", content: appConfig.description }],
|
||||
},
|
||||
components: { Layout, PageHeader },
|
||||
data() {
|
||||
return {
|
||||
customersData: customersData,
|
||||
title: "Customers",
|
||||
items: [
|
||||
{
|
||||
text: "Ecommerce",
|
||||
href: "/",
|
||||
},
|
||||
{
|
||||
text: "Customers",
|
||||
active: true,
|
||||
},
|
||||
],
|
||||
showModal: false,
|
||||
submitted: false,
|
||||
customers: {
|
||||
username: "",
|
||||
phone: "",
|
||||
email: "",
|
||||
address: "",
|
||||
balance: "",
|
||||
},
|
||||
};
|
||||
},
|
||||
setup() {
|
||||
return { v$: useVuelidate() };
|
||||
},
|
||||
validations: {
|
||||
customers: {
|
||||
username: {
|
||||
required: helpers.withMessage("Username is required", required),
|
||||
},
|
||||
|
||||
phone: {
|
||||
required: helpers.withMessage("Phone is required", required),
|
||||
},
|
||||
email: { required: helpers.withMessage("Email is required", required) },
|
||||
address: {
|
||||
required: helpers.withMessage("Address is required", required),
|
||||
},
|
||||
balance: {
|
||||
required: helpers.withMessage("Balance is required", required),
|
||||
},
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* Modal form submit
|
||||
*/
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
handleSubmit(e) {
|
||||
this.submitted = true;
|
||||
|
||||
// stop here if form is invalid
|
||||
this.v$.$touch();
|
||||
if (this.v$.$invalid) {
|
||||
return;
|
||||
} else {
|
||||
const currentDate = new Date();
|
||||
this.customersData.push({
|
||||
username: this.customers.username,
|
||||
phone: this.customers.phone,
|
||||
email: this.customers.email,
|
||||
address: this.customers.address,
|
||||
balance: this.customers.balance,
|
||||
rating: "4.3",
|
||||
date: currentDate.getHours() + ":" + currentDate.getMinutes(),
|
||||
});
|
||||
this.showModal = false;
|
||||
this.customers = {};
|
||||
}
|
||||
this.submitted = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Layout>
|
||||
<PageHeader :title="title" :items="items" />
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row mb-2">
|
||||
<div class="col-sm-4">
|
||||
<div class="search-box me-2 mb-2 d-inline-block">
|
||||
<div class="position-relative">
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
placeholder="Search..."
|
||||
/>
|
||||
<i class="bx bx-search-alt search-icon"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-8">
|
||||
<div class="text-sm-end">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-success btn-rounded mb-2 me-2"
|
||||
@click="showModal = true"
|
||||
>
|
||||
<i class="mdi mdi-plus me-1"></i> New Customers
|
||||
</button>
|
||||
<b-modal
|
||||
v-model="showModal"
|
||||
title="Add New Customer"
|
||||
title-class="text-black font-18"
|
||||
body-class="p-3"
|
||||
hide-footer
|
||||
>
|
||||
<form @submit.prevent="handleSubmit">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="mb-3">
|
||||
<label for="name">Event Name</label>
|
||||
<input
|
||||
id="name"
|
||||
v-model="customers.username"
|
||||
type="text"
|
||||
class="form-control"
|
||||
placeholder="Insert username"
|
||||
:class="{
|
||||
'is-invalid':
|
||||
submitted && v$.customers.username.$error,
|
||||
}"
|
||||
/>
|
||||
|
||||
<div
|
||||
v-if="submitted && v$.customers.username.$error"
|
||||
class="invalid-feedback"
|
||||
>
|
||||
<span
|
||||
v-if="v$.customers.username.required.$message"
|
||||
>{{
|
||||
v$.customers.username.required.$message
|
||||
}}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="mb-3">
|
||||
<label for="phone">Phone</label>
|
||||
<input
|
||||
id="phone"
|
||||
v-model="customers.phone"
|
||||
type="text"
|
||||
class="form-control"
|
||||
placeholder="Insert phone"
|
||||
:class="{
|
||||
'is-invalid':
|
||||
submitted && v$.customers.phone.$error,
|
||||
}"
|
||||
/>
|
||||
<div
|
||||
v-if="submitted && v$.customers.phone.$error"
|
||||
class="invalid-feedback"
|
||||
>
|
||||
<span
|
||||
v-if="v$.customers.phone.required.$message"
|
||||
>{{
|
||||
v$.customers.phone.required.$message
|
||||
}}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="mb-3">
|
||||
<label for="email">Email</label>
|
||||
<input
|
||||
id="email"
|
||||
v-model="customers.email"
|
||||
type="email"
|
||||
class="form-control"
|
||||
placeholder="Insert email"
|
||||
:class="{
|
||||
'is-invalid':
|
||||
submitted && v$.customers.email.$error,
|
||||
}"
|
||||
/>
|
||||
<div
|
||||
v-if="submitted && v$.customers.email.$error"
|
||||
class="invalid-feedback"
|
||||
>
|
||||
<span
|
||||
v-if="v$.customers.email.required.$message"
|
||||
>{{
|
||||
v$.customers.email.required.$message
|
||||
}}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="mb-3">
|
||||
<label for="address">Address</label>
|
||||
<input
|
||||
id="address"
|
||||
v-model="customers.address"
|
||||
type="text"
|
||||
class="form-control"
|
||||
placeholder="Insert address"
|
||||
:class="{
|
||||
'is-invalid':
|
||||
submitted && v$.customers.address.$error,
|
||||
}"
|
||||
/>
|
||||
<div
|
||||
v-if="submitted && v$.customers.address.$error"
|
||||
class="invalid-feedback"
|
||||
>
|
||||
<span
|
||||
v-if="v$.customers.address.required.$message"
|
||||
>{{
|
||||
v$.customers.address.required.$message
|
||||
}}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="mb-3">
|
||||
<label for="balance">Balance</label>
|
||||
<input
|
||||
id="balance"
|
||||
v-model="customers.balance"
|
||||
type="text"
|
||||
class="form-control"
|
||||
placeholder="Insert balance"
|
||||
:class="{
|
||||
'is-invalid':
|
||||
submitted && v$.customers.balance.$error,
|
||||
}"
|
||||
/>
|
||||
<div
|
||||
v-if="submitted && v$.customers.balance.$error"
|
||||
class="invalid-feedback"
|
||||
>
|
||||
<span
|
||||
v-if="v$.customers.balance.required.$message"
|
||||
>{{
|
||||
v$.customers.balance.required.$message
|
||||
}}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-end pt-5 mt-3">
|
||||
<b-button variant="light" @click="showModal = false"
|
||||
>Close</b-button
|
||||
>
|
||||
<b-button type="submit" variant="success" class="ms-1"
|
||||
>Create event</b-button
|
||||
>
|
||||
</div>
|
||||
</form>
|
||||
</b-modal>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col-->
|
||||
</div>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-centered table-nowrap align-middle">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Username</th>
|
||||
<th>Phone / Email</th>
|
||||
<th>Address</th>
|
||||
<th>Rating</th>
|
||||
<th>Wallet Balance</th>
|
||||
<th>Joining Date</th>
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="customers in customersData" :key="customers.id">
|
||||
<td>
|
||||
<div class="form-check font-size-16">
|
||||
<input
|
||||
:id="`customCheck${customers.id}`"
|
||||
type="checkbox"
|
||||
class="form-check-input"
|
||||
/>
|
||||
<label
|
||||
class="form-check-label"
|
||||
:for="`customCheck${customers.id}`"
|
||||
> </label
|
||||
>
|
||||
</div>
|
||||
</td>
|
||||
<td>{{ customers.username }}</td>
|
||||
<td>
|
||||
<p class="mb-1">{{ customers.phone }}</p>
|
||||
<p class="mb-0">{{ customers.email }}</p>
|
||||
</td>
|
||||
<td>{{ customers.address }}</td>
|
||||
<td>
|
||||
<span class="badge bg-success font-size-12">
|
||||
<i class="mdi mdi-star me-1"></i>
|
||||
{{ customers.rating }}
|
||||
</span>
|
||||
</td>
|
||||
<td>{{ customers.balance }}</td>
|
||||
<td>{{ customers.date }}</td>
|
||||
<td>
|
||||
<b-dropdown
|
||||
class="card-drop"
|
||||
variant="white"
|
||||
right
|
||||
toggle-class="p-0"
|
||||
menu-class="dropdown-menu-end"
|
||||
>
|
||||
<template v-slot:button-content>
|
||||
<i class="mdi mdi-dots-horizontal font-size-18"></i>
|
||||
</template>
|
||||
|
||||
<b-dropdown-item>
|
||||
<i class="fas fa-pencil-alt text-success me-1"></i>
|
||||
Edit
|
||||
</b-dropdown-item>
|
||||
|
||||
<b-dropdown-item>
|
||||
<i class="fas fa-trash-alt text-danger me-1"></i>
|
||||
Delete
|
||||
</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<ul class="pagination pagination-rounded justify-content-end mb-2">
|
||||
<li class="page-item disabled">
|
||||
<a
|
||||
class="page-link"
|
||||
href="javascript: void(0);"
|
||||
aria-label="Previous"
|
||||
>
|
||||
<i class="mdi mdi-chevron-left"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="page-item active">
|
||||
<a class="page-link" href="javascript: void(0);">1</a>
|
||||
</li>
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="javascript: void(0);">2</a>
|
||||
</li>
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="javascript: void(0);">3</a>
|
||||
</li>
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="javascript: void(0);">4</a>
|
||||
</li>
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="javascript: void(0);">5</a>
|
||||
</li>
|
||||
<li class="page-item">
|
||||
<a
|
||||
class="page-link"
|
||||
href="javascript: void(0);"
|
||||
aria-label="Next"
|
||||
>
|
||||
<i class="mdi mdi-chevron-right"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</Layout>
|
||||
</template>
|
||||
|
|
@ -1,84 +0,0 @@
|
|||
const customersData = [
|
||||
{
|
||||
id: 1,
|
||||
username: 'Stephen Rash',
|
||||
phone: '325-250-1106',
|
||||
email: 'StephenRash@teleworm.us',
|
||||
address: '2470 Grove Street Bethpage, NY 11714',
|
||||
rating: '4.2',
|
||||
balance: '$5,412',
|
||||
date: '07 Oct, 2019'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
username: 'Juan Mays',
|
||||
phone: '443-523-4726',
|
||||
email: 'JuanMays@armyspy.com',
|
||||
address: '3755 Harron Drive Salisbury, MD 21875',
|
||||
rating: '4.0',
|
||||
balance: '$5,632',
|
||||
date: '06 Oct, 2019'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
username: 'Scott Henry',
|
||||
phone: '704-629-9535',
|
||||
email: 'ScottHenry@jourrapide.com',
|
||||
address: '3632 Snyder Avenue Bessemer City, NC 28016',
|
||||
rating: '4.4',
|
||||
balance: '$7,523',
|
||||
date: '06 Oct, 2019'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
username: 'Cody Menendez',
|
||||
phone: '701-832-5838',
|
||||
email: 'CodyMenendez@armyspy.com',
|
||||
address: '4401 Findley Avenue Minot, ND 58701',
|
||||
rating: '4.1',
|
||||
balance: '$6,325',
|
||||
date: '05 Oct, 2019'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
username: 'Jason Merino',
|
||||
phone: '706-219-4095',
|
||||
email: 'JasonMerino@dayrep.com',
|
||||
address: '3159 Holly Street Cleveland, GA 30528',
|
||||
rating: '3.8',
|
||||
balance: '$4,523',
|
||||
date: '04 Oct, 2019'
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
username: 'Kyle Aquino',
|
||||
phone: '415-232-5443',
|
||||
email: 'KyleAquino@teleworm.us',
|
||||
address: '4861 Delaware Avenue San Francisco, CA 94143',
|
||||
rating: '4.0',
|
||||
balance: '$5,412',
|
||||
date: '03 Oct, 2019'
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
username: 'David Gaul',
|
||||
phone: '314-483-4679',
|
||||
email: 'DavidGaul@teleworm.us',
|
||||
address: '1207 Cottrill Lane Stlouis, MO 63101',
|
||||
rating: '4.2',
|
||||
balance: '$6,180',
|
||||
date: '02 Oct, 2019'
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
username: 'John McCray',
|
||||
phone: '253-661-7551',
|
||||
email: 'JohnMcCray@armyspy.com',
|
||||
address: '3309 Horizon Circle Tacoma, WA 98423',
|
||||
rating: '4.1',
|
||||
balance: '$5,2870',
|
||||
date: '02 Oct, 2019'
|
||||
}
|
||||
];
|
||||
|
||||
export { customersData };
|
||||
|
|
@ -1,164 +0,0 @@
|
|||
const clothsData = [
|
||||
{
|
||||
id: 1,
|
||||
product: require('@/assets/images/product/img-1.png'),
|
||||
discount: 10,
|
||||
name: 'Half sleeve T-shirt',
|
||||
oldprice: 450,
|
||||
newprice: 405,
|
||||
feature: ['Fit Type: Regular Fit', 'highest quality fabric', 'Suitable for all weather condition', 'Excellent Washing and Light Fastness'],
|
||||
specification: [{
|
||||
key: 'size',
|
||||
value: 'M'
|
||||
},
|
||||
{
|
||||
key: 'color',
|
||||
value: 'Red'
|
||||
}],
|
||||
images: [require('@/assets/images/product/img-1.png'), require('@/assets/images/product/img-5.png'), require('@/assets/images/product/img-3.png'), require('@/assets/images/product/img-6.png')],
|
||||
colorVariant: [{
|
||||
key: 'Red',
|
||||
value: require('@/assets/images/product/img-1.png')
|
||||
},
|
||||
{
|
||||
key: 'Black',
|
||||
value: require('@/assets/images/product/img-1.png')
|
||||
}]
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
product: require('@/assets/images/product/img-2.png'),
|
||||
name: 'Light blue T-shirt',
|
||||
discount: 20,
|
||||
oldprice: 225,
|
||||
newprice: 175,
|
||||
feature: ['Fit Type: Regular Fit', 'highest quality fabric', 'Suitable for all weather condition', 'Excellent Washing and Light Fastness'],
|
||||
specification: [{
|
||||
key: 'size',
|
||||
value: 'M'
|
||||
},
|
||||
{
|
||||
key: 'Color',
|
||||
value: 'Light Blue'
|
||||
}],
|
||||
images: [require('@/assets/images/product/img-2.png'), require('@/assets/images/product/img-1.png'), require('@/assets/images/product/img-5.png'), require('@/assets/images/product/img-3.png')],
|
||||
colorVariant: [{
|
||||
key: 'Red',
|
||||
value: require('@/assets/images/product/img-2.png')
|
||||
},
|
||||
{
|
||||
key: 'Yellow',
|
||||
value: require('@/assets/images/product/img-2.png')
|
||||
},
|
||||
{
|
||||
key: 'Green',
|
||||
value: require('@/assets/images/product/img-2.png')
|
||||
}]
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
product: require('@/assets/images/product/img-3.png'),
|
||||
discount: 14,
|
||||
name: 'Black Color T-shirt',
|
||||
oldprice: 177,
|
||||
newprice: 152,
|
||||
feature: ['Fit Type: Regular Fit', 'highest quality fabric', 'Suitable for all weather condition', 'Excellent Washing and Light Fastness'],
|
||||
specification: [{
|
||||
key: 'size',
|
||||
value: 'M'
|
||||
},
|
||||
{
|
||||
key: 'color',
|
||||
value: 'Black'
|
||||
}],
|
||||
images: [require('@/assets/images/product/img-3.png'), require('@/assets/images/product/img-1.png'), require('@/assets/images/product/img-5.png'), require('@/assets/images/product/img-2.png')],
|
||||
colorVariant: [{
|
||||
key: 'Black',
|
||||
value: require('@/assets/images/product/img-3.png')
|
||||
},
|
||||
{
|
||||
key: 'Yellow',
|
||||
value: require('@/assets/images/product/img-3.png')
|
||||
}]
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
product: require('@/assets/images/product/img-4.png'),
|
||||
name: 'Hoodie (Blue)',
|
||||
discount: 5,
|
||||
oldprice: 150,
|
||||
newprice: 145,
|
||||
feature: ['Fit Type: Regular Fit', 'highest quality fabric', 'Suitable for all weather condition', 'Excellent Washing and Light Fastness'],
|
||||
specification: [{
|
||||
key: 'size',
|
||||
value: 'M'
|
||||
},
|
||||
{
|
||||
key: 'color',
|
||||
value: 'Blue'
|
||||
}],
|
||||
images: [require('@/assets/images/product/img-4.png'), require('@/assets/images/product/img-4.png'), require('@/assets/images/product/img-4.png'), require('@/assets/images/product/img-4.png')],
|
||||
colorVariant: [{
|
||||
key: 'Blue',
|
||||
value: require('@/assets/images/product/img-4.png')
|
||||
},
|
||||
{
|
||||
key: 'Pink',
|
||||
value: require('@/assets/images/product/img-4.png')
|
||||
}]
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
product: require('@/assets/images/product/img-5.png'),
|
||||
discount: 14,
|
||||
name: 'Half sleeve T-Shirt',
|
||||
oldprice: 177,
|
||||
newprice: 152,
|
||||
feature: ['Fit Type: Regular Fit', 'highest quality fabric', 'Suitable for all weather condition', 'Excellent Washing and Light Fastness'],
|
||||
specification: [{
|
||||
key: 'size',
|
||||
value: 'M'
|
||||
},
|
||||
{
|
||||
key: 'color',
|
||||
value: 'Pink'
|
||||
}],
|
||||
images: [require('@/assets/images/product/img-5.png'), require('@/assets/images/product/img-1.png'), require('@/assets/images/product/img-2.png'), require('@/assets/images/product/img-3.png')],
|
||||
colorVariant: [{
|
||||
key: 'Pink',
|
||||
value: require('@/assets/images/product/img-5.png')
|
||||
},
|
||||
{
|
||||
key: 'Yellow',
|
||||
value: require('@/assets/images/product/img-5.png')
|
||||
}]
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
product: require('@/assets/images/product/img-6.png'),
|
||||
discount: 22,
|
||||
name: 'Green color T-shirt',
|
||||
oldprice: 240,
|
||||
newprice: 225,
|
||||
feature: ['Fit Type: Regular Fit', 'highest quality fabric', 'Suitable for all weather condition', 'Excellent Washing and Light Fastness'],
|
||||
specification: [{
|
||||
key: 'size',
|
||||
value: 'M'
|
||||
},
|
||||
{
|
||||
key: 'color',
|
||||
value: 'Green'
|
||||
}],
|
||||
images: [require('@/assets/images/product/img-6.png'), require('@/assets/images/product/img-3.png'), require('@/assets/images/product/img-2.png'), require('@/assets/images/product/img-1.png')],
|
||||
colorVariant: [{
|
||||
key: 'Black',
|
||||
value: require('@/assets/images/product/img-6.png')
|
||||
},
|
||||
{
|
||||
key: 'Yellow',
|
||||
value: require('@/assets/images/product/img-6.png')
|
||||
}]
|
||||
}
|
||||
];
|
||||
|
||||
export { clothsData };
|
||||
|
|
@ -1,76 +0,0 @@
|
|||
const shopsData = [
|
||||
{
|
||||
id: 1,
|
||||
name: "Brendle's",
|
||||
color: 'primary',
|
||||
avatar: 'B',
|
||||
products: 112,
|
||||
balance: '$13,575'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "Tech Hifi",
|
||||
color: 'warning',
|
||||
avatar: 'T',
|
||||
products: 104,
|
||||
balance: '$11,145'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "Lafayette",
|
||||
color: 'danger',
|
||||
avatar: 'L',
|
||||
products: 126,
|
||||
balance: '$12,356'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: "Packer",
|
||||
color: 'success',
|
||||
avatar: 'P',
|
||||
products: 102,
|
||||
balance: '$11,228'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: "Nedick's",
|
||||
color: 'info',
|
||||
avatar: 'N',
|
||||
products: 96,
|
||||
balance: '$9,235'
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
name: "Hudson's",
|
||||
color: 'dark',
|
||||
avatar: 'H',
|
||||
products: 120,
|
||||
balance: '$14,794'
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
name: "Tech Hifi",
|
||||
color: 'dark',
|
||||
avatar: 'T',
|
||||
products: 104,
|
||||
balance: '$11,145'
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
name: "Brendle's",
|
||||
color: 'primary',
|
||||
avatar: 'B',
|
||||
products: 112,
|
||||
balance: '$13,575'
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
name: "Lafayette",
|
||||
color: 'success',
|
||||
avatar: 'L',
|
||||
products: 126,
|
||||
balance: '$12,356'
|
||||
},
|
||||
];
|
||||
|
||||
export { shopsData };
|
||||
|
|
@ -1,181 +0,0 @@
|
|||
<script>
|
||||
import Layout from '../../layouts/main'
|
||||
import PageHeader from '@/components/page-header'
|
||||
|
||||
import Transaction from '@/components/widgets/transaction'
|
||||
import appConfig from "@/app.config";
|
||||
|
||||
/**
|
||||
* Products-order component
|
||||
*/
|
||||
export default {
|
||||
page: {
|
||||
title: "Orders",
|
||||
meta: [{ name: "description", content: appConfig.description }]
|
||||
},
|
||||
components: { Layout, PageHeader, Transaction },
|
||||
data() {
|
||||
return {
|
||||
title: 'Orders',
|
||||
items: [
|
||||
{
|
||||
text: 'Ecommerce',
|
||||
href: '/',
|
||||
},
|
||||
{
|
||||
text: 'Orders',
|
||||
active: true,
|
||||
},
|
||||
],
|
||||
transactions: [
|
||||
{
|
||||
id: '#SK2540',
|
||||
name: 'Neal Matthews',
|
||||
date: '07 Oct, 2019',
|
||||
total: '$400',
|
||||
status: 'Paid',
|
||||
payment: ['fab fa-cc-mastercard', 'Mastercard'],
|
||||
index: 1,
|
||||
},
|
||||
{
|
||||
id: '#SK2541',
|
||||
name: 'Jamal Burnett',
|
||||
date: '07 Oct, 2019',
|
||||
total: '$380',
|
||||
status: 'Chargeback',
|
||||
payment: ['fab fa-cc-visa', 'Visa'],
|
||||
index: 2,
|
||||
},
|
||||
{
|
||||
id: '#SK2542',
|
||||
name: 'Juan Mitchell',
|
||||
date: '06 Oct, 2019',
|
||||
total: '$384',
|
||||
status: 'Paid',
|
||||
payment: ['fab fa-cc-paypal', 'Paypal'],
|
||||
index: 3,
|
||||
},
|
||||
{
|
||||
id: '#SK2543',
|
||||
name: 'Barry Dick',
|
||||
date: '05 Oct, 2019',
|
||||
total: '$412',
|
||||
status: 'Paid',
|
||||
payment: ['fab fa-cc-mastercard', 'Mastercard'],
|
||||
index: 4,
|
||||
},
|
||||
{
|
||||
id: '#SK2544',
|
||||
name: 'Ronald Taylor',
|
||||
date: '04 Oct, 2019',
|
||||
total: '$404',
|
||||
status: 'Refund',
|
||||
payment: ['fab fa-cc-visa', 'Visa'],
|
||||
index: 5,
|
||||
},
|
||||
{
|
||||
id: '#SK2545',
|
||||
name: 'Jacob Hunter',
|
||||
date: '04 Oct, 2019',
|
||||
total: '$392',
|
||||
status: 'Paid',
|
||||
payment: ['fab fa-cc-paypal', 'Paypal'],
|
||||
index: 6,
|
||||
},
|
||||
{
|
||||
id: '#SK2546',
|
||||
name: 'William Cruz',
|
||||
date: '03 Oct, 2019',
|
||||
total: '$374',
|
||||
status: 'Paid',
|
||||
payment: ['fas fa-money-bill-alt', 'COD'],
|
||||
index: 7,
|
||||
},
|
||||
{
|
||||
id: '#SK2547',
|
||||
name: 'Dustin Moser',
|
||||
date: '02 Oct, 2019',
|
||||
total: '$350',
|
||||
status: 'Paid',
|
||||
payment: ['fab fa-cc-mastercard', 'Mastercard'],
|
||||
index: 8,
|
||||
},
|
||||
{
|
||||
id: '#SK2548',
|
||||
name: 'Clark Benson',
|
||||
date: '01 Oct, 2019',
|
||||
total: '$345',
|
||||
status: 'Refund',
|
||||
payment: ['fab fa-cc-visa', 'Visa'],
|
||||
index: 9,
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Layout>
|
||||
<PageHeader :title="title" :items="items" />
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row mb-2">
|
||||
<div class="col-sm-4">
|
||||
<div class="search-box me-2 mb-2 d-inline-block">
|
||||
<div class="position-relative">
|
||||
<input type="text" class="form-control" placeholder="Search..." />
|
||||
<i class="bx bx-search-alt search-icon"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-8">
|
||||
<div class="text-sm-end">
|
||||
<button type="button" class="btn btn-success btn-rounded mb-2 me-2">
|
||||
<i class="mdi mdi-plus me-1"></i> Add New Order
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col-->
|
||||
</div>
|
||||
<!-- Table data -->
|
||||
<Transaction :transactions="transactions" />
|
||||
<ul class="pagination pagination-rounded justify-content-end mb-2">
|
||||
<li class="page-item disabled">
|
||||
<a class="page-link" href="javascript: void(0);" aria-label="Previous">
|
||||
<i class="mdi mdi-chevron-left"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="page-item active">
|
||||
<a class="page-link" href="javascript: void(0);">1</a>
|
||||
</li>
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="javascript: void(0);">2</a>
|
||||
</li>
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="javascript: void(0);">3</a>
|
||||
</li>
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="javascript: void(0);">4</a>
|
||||
</li>
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="javascript: void(0);">5</a>
|
||||
</li>
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="javascript: void(0);" aria-label="Next">
|
||||
<i class="mdi mdi-chevron-right"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- end card-body -->
|
||||
</div>
|
||||
<!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</Layout>
|
||||
</template>
|
||||
|
|
@ -1,490 +0,0 @@
|
|||
<script>
|
||||
import Layout from "../../layouts/main";
|
||||
import PageHeader from "@/components/page-header";
|
||||
import appConfig from "@/app.config";
|
||||
|
||||
import { clothsData } from "./data-products";
|
||||
|
||||
/**
|
||||
* Product detail component
|
||||
*/
|
||||
export default {
|
||||
page: {
|
||||
title: "Product Detail",
|
||||
meta: [{ name: "description", content: appConfig.description }],
|
||||
},
|
||||
components: { Layout, PageHeader },
|
||||
data() {
|
||||
return {
|
||||
productDetail: null,
|
||||
clothsData: clothsData,
|
||||
title: "Product Detail",
|
||||
items: [
|
||||
{
|
||||
text: "Ecommerce",
|
||||
href: "/",
|
||||
},
|
||||
{
|
||||
text: "Product Detail",
|
||||
active: true,
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.productDetail = clothsData.filter((product) => {
|
||||
return product.id === parseInt(this.$route.params.id);
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* Selected image shows
|
||||
*/
|
||||
imageShow(event) {
|
||||
const image = event.target.src;
|
||||
const expandImg = document.getElementById("expandedImg");
|
||||
expandImg.src = image;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Layout>
|
||||
<PageHeader :title="title" :items="items" />
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-xl-6">
|
||||
<div class="product-detai-imgs">
|
||||
<b-tabs
|
||||
pills
|
||||
vertical
|
||||
nav-wrapper-class="col-md-2 col-sm-3 col-4"
|
||||
>
|
||||
<b-tab>
|
||||
<template v-slot:title>
|
||||
<img
|
||||
:src="productDetail[0].images[0]"
|
||||
alt
|
||||
class="img-fluid mx-auto d-block tab-img rounded"
|
||||
/>
|
||||
</template>
|
||||
<div class="product-img">
|
||||
<img
|
||||
:src="productDetail[0].images[0]"
|
||||
alt
|
||||
class="img-fluid mx-auto d-block"
|
||||
/>
|
||||
</div>
|
||||
</b-tab>
|
||||
<b-tab>
|
||||
<template v-slot:title>
|
||||
<img
|
||||
:src="productDetail[0].images[1]"
|
||||
alt
|
||||
class="img-fluid mx-auto d-block tab-img rounded"
|
||||
/>
|
||||
</template>
|
||||
<div class="product-img">
|
||||
<img
|
||||
:src="productDetail[0].images[1]"
|
||||
alt
|
||||
class="img-fluid mx-auto d-block"
|
||||
/>
|
||||
</div>
|
||||
</b-tab>
|
||||
<b-tab>
|
||||
<template v-slot:title>
|
||||
<img
|
||||
:src="productDetail[0].images[2]"
|
||||
alt
|
||||
class="img-fluid mx-auto d-block tab-img rounded"
|
||||
/>
|
||||
</template>
|
||||
<div class="product-img">
|
||||
<img
|
||||
:src="productDetail[0].images[2]"
|
||||
alt
|
||||
class="img-fluid mx-auto d-block"
|
||||
/>
|
||||
</div>
|
||||
</b-tab>
|
||||
<b-tab>
|
||||
<template v-slot:title>
|
||||
<img
|
||||
:src="productDetail[0].images[3]"
|
||||
alt
|
||||
class="img-fluid mx-auto d-block tab-img rounded"
|
||||
/>
|
||||
</template>
|
||||
<div class="product-img">
|
||||
<img
|
||||
:src="productDetail[0].images[3]"
|
||||
alt
|
||||
class="img-fluid mx-auto d-block"
|
||||
/>
|
||||
</div>
|
||||
</b-tab>
|
||||
</b-tabs>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xl-6">
|
||||
<div class="mt-3">
|
||||
<h4 class="mt-1 mb-3">{{ productDetail[0].name }}</h4>
|
||||
|
||||
<p class="text-muted float-left me-3">
|
||||
<span class="bx bx-star text-warning"></span>
|
||||
<span class="bx bx-star text-warning ml-1"></span>
|
||||
<span class="bx bx-star text-warning ml-1"></span>
|
||||
<span class="bx bx-star text-warning ml-1"></span>
|
||||
<span class="bx bx-star ml-1"></span>
|
||||
</p>
|
||||
<p class="text-muted mb-4">( 152 Customers Review )</p>
|
||||
|
||||
<h6 class="text-success text-uppercase">
|
||||
{{ productDetail[0].discount }} Off
|
||||
</h6>
|
||||
<h5 class="mb-4">
|
||||
Price :
|
||||
<span class="text-muted me-2">
|
||||
<del>${{ productDetail[0].oldprice }} USD</del>
|
||||
</span>
|
||||
<b>${{ productDetail[0].newprice }} USD</b>
|
||||
</h5>
|
||||
<p class="text-muted mb-4">
|
||||
To achieve this, it would be necessary to have uniform
|
||||
grammar pronunciation and more common words If several
|
||||
languages coalesce
|
||||
</p>
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-6">
|
||||
<div
|
||||
v-for="(item, index) in productDetail[0].feature"
|
||||
:key="index"
|
||||
>
|
||||
<p class="text-muted">
|
||||
<i
|
||||
class="bx bx-unlink font-size-16 align-middle text-primary me-1"
|
||||
></i>
|
||||
{{ item }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div>
|
||||
<p class="text-muted">
|
||||
<i
|
||||
class="bx bx-user-voice font-size-16 align-middle text-primary me-1"
|
||||
></i>
|
||||
Bass
|
||||
</p>
|
||||
<p class="text-muted">
|
||||
<i
|
||||
class="bx bx-cog font-size-16 align-middle text-primary me-1"
|
||||
></i>
|
||||
Warranty : 1 Year
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="product-color">
|
||||
<h5 class="font-size-15">Color :</h5>
|
||||
<a
|
||||
href="javascript: void(0);"
|
||||
class="active"
|
||||
v-for="(item, index) in productDetail[0].colorVariant"
|
||||
:key="index"
|
||||
>
|
||||
<div class="product-color-item border rounded">
|
||||
<img :src="item.value" alt class="avatar-md" />
|
||||
</div>
|
||||
<p>{{ item.key }}</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="mt-5">
|
||||
<h5 class="mb-3">Specifications :</h5>
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table mb-0 table-bordered">
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="(i, index) in productDetail[0].specification"
|
||||
:key="index"
|
||||
>
|
||||
<th scope="row" style="width: 400px">{{ i.key }}</th>
|
||||
<td>{{ i.value }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end Specifications -->
|
||||
|
||||
<div class="mt-5">
|
||||
<h5 class="mb-4">Reviews :</h5>
|
||||
|
||||
<div class="d-flex py-3 border-bottom">
|
||||
<img
|
||||
src="@/assets/images/users/avatar-2.jpg"
|
||||
class="avatar-xs me-3 rounded-circle"
|
||||
alt="img"
|
||||
/>
|
||||
<div class="flex-grow-1">
|
||||
<h5 class="mt-0 font-size-15">Brian</h5>
|
||||
<p class="text-muted">
|
||||
If several languages coalesce, the grammar of the resulting
|
||||
language.
|
||||
</p>
|
||||
<ul class="list-inline float-sm-end">
|
||||
<li class="list-inline-item">
|
||||
<a href="javascript: void(0);">
|
||||
<i class="far fa-thumbs-up me-1"></i> Like
|
||||
</a>
|
||||
</li>
|
||||
<li class="list-inline-item">
|
||||
<a href="javascript: void(0);">
|
||||
<i class="far fa-comment-dots me-1"></i> Comment
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="text-muted">
|
||||
<i class="far fa-calendar-alt text-primary me-1"></i> 5 hrs
|
||||
ago
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex py-3 border-bottom">
|
||||
<img
|
||||
src="@/assets/images/users/avatar-4.jpg"
|
||||
class="avatar-xs me-3 rounded-circle"
|
||||
alt="img"
|
||||
/>
|
||||
<div class="flex-grow-1">
|
||||
<h5 class="mt-0 font-size-15">Denver</h5>
|
||||
<p class="text-muted">
|
||||
To an English person, it will seem like simplified English,
|
||||
as a skeptical Cambridge
|
||||
</p>
|
||||
<ul class="list-inline float-sm-end">
|
||||
<li class="list-inline-item">
|
||||
<a href="javascript: void(0);">
|
||||
<i class="far fa-thumbs-up me-1"></i> Like
|
||||
</a>
|
||||
</li>
|
||||
<li class="list-inline-item">
|
||||
<a href="javascript: void(0);">
|
||||
<i class="far fa-comment-dots me-1"></i> Comment
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="text-muted">
|
||||
<i class="far fa-calendar-alt text-primary me-1"></i> 07
|
||||
Oct, 2019
|
||||
</div>
|
||||
<div class="d-flex mt-4">
|
||||
<img
|
||||
src="@/assets/images/users/avatar-5.jpg"
|
||||
class="avatar-xs me-3 rounded-circle"
|
||||
alt="img"
|
||||
/>
|
||||
<div class="flex-grow-1">
|
||||
<h5 class="mt-0 font-size-15">Henry</h5>
|
||||
<p class="text-muted">
|
||||
Their separate existence is a myth. For science, music,
|
||||
sport, etc.
|
||||
</p>
|
||||
<ul class="list-inline float-sm-end">
|
||||
<li class="list-inline-item">
|
||||
<a href="javascript: void(0);">
|
||||
<i class="far fa-thumbs-up me-1"></i> Like
|
||||
</a>
|
||||
</li>
|
||||
<li class="list-inline-item">
|
||||
<a href="javascript: void(0);">
|
||||
<i class="far fa-comment-dots me-1"></i> Comment
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="text-muted">
|
||||
<i class="far fa-calendar-alt text-primary me-1"></i> 08
|
||||
Oct, 2019
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex mt-3 border-bottom">
|
||||
<div class="avatar-xs me-3">
|
||||
<span
|
||||
class="avatar-title bg-soft bg-primary text-primary rounded-circle font-size-16"
|
||||
>N</span
|
||||
>
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<h5 class="mt-0 font-size-15">Neal</h5>
|
||||
<p class="text-muted">
|
||||
Everyone realizes why a new common language would be
|
||||
desirable.
|
||||
</p>
|
||||
<ul class="list-inline float-sm-end">
|
||||
<li class="list-inline-item">
|
||||
<a href="javascript: void(0);">
|
||||
<i class="far fa-thumbs-up me-1"></i> Like
|
||||
</a>
|
||||
</li>
|
||||
<li class="list-inline-item">
|
||||
<a href="javascript: void(0);">
|
||||
<i class="far fa-comment-dots me-1"></i> Comment
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="text-muted">
|
||||
<i class="far fa-calendar-alt text-primary me-1"></i> 05
|
||||
Oct, 2019
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end card -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="row mt-3">
|
||||
<div class="col-lg-12">
|
||||
<div>
|
||||
<h5 class="mb-3">Recent product :</h5>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-4 col-sm-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-4">
|
||||
<img
|
||||
src="@/assets/images/product/img-7.png"
|
||||
alt
|
||||
class="img-fluid mx-auto d-block"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<div class="text-center text-md-start pt-3 pt-md-0">
|
||||
<h5 class="mb-3 text-truncate">
|
||||
<a href="javascript: void(0);" class="text-dark"
|
||||
>Wirless Headphone</a
|
||||
>
|
||||
</h5>
|
||||
<p class="text-muted mb-4">
|
||||
<i class="bx bxs-star text-warning"></i>
|
||||
<i class="bx bxs-star text-warning"></i>
|
||||
<i class="bx bxs-star text-warning"></i>
|
||||
<i class="bx bxs-star text-warning"></i>
|
||||
<i class="bx bxs-star"></i>
|
||||
</p>
|
||||
<h5 class="my-0">
|
||||
<span class="text-muted me-2">
|
||||
<del>$240</del>
|
||||
</span>
|
||||
<b>$225</b>
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4 col-sm-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-4">
|
||||
<img
|
||||
src="@/assets/images/product/img-4.png"
|
||||
alt
|
||||
class="img-fluid mx-auto d-block"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<div class="text-center text-md-start pt-3 pt-md-0">
|
||||
<h5 class="mb-3 text-truncate">
|
||||
<a href="javascript: void(0);" class="text-dark"
|
||||
>Phone patterned cases</a
|
||||
>
|
||||
</h5>
|
||||
<p class="text-muted mb-4">
|
||||
<i class="bx bxs-star text-warning"></i>
|
||||
<i class="bx bxs-star text-warning"></i>
|
||||
<i class="bx bxs-star text-warning"></i>
|
||||
<i class="bx bxs-star text-warning"></i>
|
||||
<i class="bx bxs-star"></i>
|
||||
</p>
|
||||
<h5 class="my-0">
|
||||
<span class="text-muted me-2">
|
||||
<del>$150</del>
|
||||
</span>
|
||||
<b>$145</b>
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4 col-sm-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-4">
|
||||
<img
|
||||
src="@/assets/images/product/img-6.png"
|
||||
alt
|
||||
class="img-fluid mx-auto d-block"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<div class="text-center text-md-start pt-3 pt-md-0">
|
||||
<h5 class="mb-3 text-truncate">
|
||||
<a href="javascript: void(0);" class="text-dark"
|
||||
>Phone Dark Patterned cases</a
|
||||
>
|
||||
</h5>
|
||||
<p class="text-muted mb-4">
|
||||
<i class="bx bxs-star text-warning"></i>
|
||||
<i class="bx bxs-star text-warning"></i>
|
||||
<i class="bx bxs-star text-warning"></i>
|
||||
<i class="bx bxs-star text-warning"></i>
|
||||
<i class="bx bxs-star"></i>
|
||||
</p>
|
||||
<h5 class="my-0">
|
||||
<span class="text-muted me-2">
|
||||
<del>$138</del>
|
||||
</span>
|
||||
<b>$135</b>
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</Layout>
|
||||
</template>
|
||||
|
|
@ -1,348 +0,0 @@
|
|||
<script>
|
||||
import Slider from "@vueform/slider";
|
||||
// import axios from "axios";
|
||||
|
||||
import Layout from "../../layouts/main";
|
||||
import PageHeader from "@/components/page-header";
|
||||
import appConfig from "@/app.config";
|
||||
|
||||
import { clothsData } from "./data-products";
|
||||
|
||||
/**
|
||||
* Products component
|
||||
*/
|
||||
export default {
|
||||
page: {
|
||||
title: "Product",
|
||||
meta: [{ name: "description", content: appConfig.description }],
|
||||
},
|
||||
components: { Slider, Layout, PageHeader },
|
||||
data() {
|
||||
return {
|
||||
clothsData: clothsData,
|
||||
title: "Product",
|
||||
items: [
|
||||
{
|
||||
text: "Ecommerce",
|
||||
href: "/",
|
||||
},
|
||||
{
|
||||
text: "Products",
|
||||
active: true,
|
||||
},
|
||||
],
|
||||
sliderPrice: 800,
|
||||
currentPage: 1,
|
||||
discountRates: [],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
//** Get data from product api */
|
||||
// axios
|
||||
// .get(`http://localhost:8000/api/products`)
|
||||
// .then((res) => {
|
||||
// this.clothsData = res.data.data;
|
||||
// })
|
||||
// .catch((err) => {
|
||||
// return err;
|
||||
// });
|
||||
},
|
||||
methods: {
|
||||
valuechange(value) {
|
||||
this.clothsData = clothsData.filter(function (product) {
|
||||
return product.newprice <= value;
|
||||
});
|
||||
},
|
||||
|
||||
searchFilter(e) {
|
||||
const searchStr = e.target.value;
|
||||
this.clothsData = clothsData.filter((product) => {
|
||||
return (
|
||||
product.name.toLowerCase().search(searchStr.toLowerCase()) !== -1
|
||||
);
|
||||
});
|
||||
},
|
||||
|
||||
discountLessFilter(e, percentage) {
|
||||
if (e === "accepted" && this.discountRates.length === 0) {
|
||||
this.clothsData = clothsData.filter((product) => {
|
||||
return product.discount < percentage;
|
||||
});
|
||||
} else {
|
||||
this.clothsData = clothsData.filter((product) => {
|
||||
return product.discount >= Math.max.apply(null, this);
|
||||
}, this.discountRates);
|
||||
}
|
||||
},
|
||||
|
||||
discountMoreFilter(e, percentage) {
|
||||
if (e === "accepted") {
|
||||
this.discountRates.push(percentage);
|
||||
} else {
|
||||
this.discountRates.splice(this.discountRates.indexOf(percentage), 1);
|
||||
}
|
||||
this.clothsData = clothsData.filter((product) => {
|
||||
return product.discount >= Math.max.apply(null, this);
|
||||
}, this.discountRates);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Layout>
|
||||
<PageHeader :title="title" :items="items" />
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-3">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title mb-4">Filter</h4>
|
||||
|
||||
<div>
|
||||
<h5 class="font-size-14 mb-3">Clothes</h5>
|
||||
<ul class="list-unstyled product-list">
|
||||
<li>
|
||||
<a href="javascript: void(0);">
|
||||
<i class="mdi mdi-chevron-right me-1"></i> T-shirts
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="javascript: void(0);">
|
||||
<i class="mdi mdi-chevron-right me-1"></i> Shirts
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="javascript: void(0);">
|
||||
<i class="mdi mdi-chevron-right me-1"></i> Jeans
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="javascript: void(0);">
|
||||
<i class="mdi mdi-chevron-right me-1"></i> Jackets
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="mt-4 pt-3">
|
||||
<h5 class="font-size-14 mb-3">Price</h5>
|
||||
<Slider
|
||||
v-model="sliderPrice"
|
||||
:min="0"
|
||||
:max="1000"
|
||||
@change="valuechange"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 pt-3">
|
||||
<h5 class="font-size-14 mb-3">Discount</h5>
|
||||
|
||||
<b-form-checkbox
|
||||
id="productdiscountCheck1"
|
||||
|
||||
value="accepted"
|
||||
unchecked-value="not_accepted"
|
||||
@change="discountLessFilter($event, 10)"
|
||||
>Less than 10%</b-form-checkbox
|
||||
>
|
||||
|
||||
<b-form-checkbox
|
||||
id="productdiscountCheck2"
|
||||
|
||||
value="accepted"
|
||||
unchecked-value="not_accepted"
|
||||
@change="discountMoreFilter($event, 10)"
|
||||
>10% or more</b-form-checkbox
|
||||
>
|
||||
|
||||
<b-form-checkbox
|
||||
id="productdiscountCheck3"
|
||||
|
||||
value="accepted"
|
||||
unchecked-value="not_accepted"
|
||||
@change="discountMoreFilter($event, 20)"
|
||||
>20% or more</b-form-checkbox
|
||||
>
|
||||
|
||||
<b-form-checkbox
|
||||
id="productdiscountCheck4"
|
||||
|
||||
value="accepted"
|
||||
unchecked-value="not_accepted"
|
||||
@change="discountMoreFilter($event, 30)"
|
||||
>30% or more</b-form-checkbox
|
||||
>
|
||||
|
||||
<b-form-checkbox
|
||||
id="productdiscountCheck5"
|
||||
|
||||
value="accepted"
|
||||
unchecked-value="not_accepted"
|
||||
@change="discountMoreFilter($event, 40)"
|
||||
>40% or more</b-form-checkbox
|
||||
>
|
||||
|
||||
<b-form-checkbox
|
||||
id="productdiscountCheck6"
|
||||
|
||||
value="accepted"
|
||||
unchecked-value="not_accepted"
|
||||
@change="discountMoreFilter($event, 50)"
|
||||
>50% or more</b-form-checkbox
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 pt-3">
|
||||
<h5 class="font-size-14 mb-3">Customer Rating</h5>
|
||||
<div>
|
||||
<b-form-checkbox
|
||||
id="checkbox-1"
|
||||
name="checkbox-1"
|
||||
value="accepted"
|
||||
unchecked-value="not_accepted"
|
||||
>
|
||||
4
|
||||
<i class="bx bx-star text-warning"></i> & Above
|
||||
</b-form-checkbox>
|
||||
|
||||
<b-form-checkbox
|
||||
id="checkbox-2"
|
||||
|
||||
name="checkbox-2"
|
||||
value="accepted"
|
||||
unchecked-value="not_accepted"
|
||||
>
|
||||
3
|
||||
<i class="bx bx-star text-warning"></i> & Above
|
||||
</b-form-checkbox>
|
||||
|
||||
<b-form-checkbox
|
||||
id="checkbox-3"
|
||||
|
||||
name="checkbox-3"
|
||||
value="accepted"
|
||||
unchecked-value="not_accepted"
|
||||
>
|
||||
2
|
||||
<i class="bx bx-star text-warning"></i> & Above
|
||||
</b-form-checkbox>
|
||||
<b-form-checkbox
|
||||
id="checkbox-4"
|
||||
|
||||
name="checkbox-4"
|
||||
value="accepted"
|
||||
unchecked-value="not_accepted"
|
||||
>
|
||||
1
|
||||
<i class="bx bx-star text-warning"></i>
|
||||
</b-form-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-9">
|
||||
<div class="row mb-3">
|
||||
<div class="col-xl-4 col-sm-6">
|
||||
<div class="mt-2">
|
||||
<h5>Clothes</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-8 col-sm-6">
|
||||
<form class="mt-4 mt-sm-0 float-sm-end d-flex align-items-center">
|
||||
<div class="search-box me-2">
|
||||
<div class="position-relative">
|
||||
<input
|
||||
type="text"
|
||||
class="form-control border-0"
|
||||
placeholder="Search..."
|
||||
@input="searchFilter($event)"
|
||||
/>
|
||||
<i class="bx bx-search-alt search-icon"></i>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="nav nav-pills product-view-nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="javascript: void(0);">
|
||||
<i class="bx bx-grid-alt"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="javascript: void(0);">
|
||||
<i class="bx bx-list-ul"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div
|
||||
v-for="data in clothsData"
|
||||
:key="data.id"
|
||||
class="col-xl-4 col-sm-6"
|
||||
>
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="product-img position-relative">
|
||||
<div v-if="data.discount" class="avatar-sm product-ribbon">
|
||||
<span class="avatar-title rounded-circle bg-primary"
|
||||
>-{{ data.discount }}%</span
|
||||
>
|
||||
</div>
|
||||
<router-link
|
||||
:to="`/ecommerce/product-detail/${data.id}`"
|
||||
>
|
||||
<img
|
||||
:src="`${data.product}`"
|
||||
alt
|
||||
class="img-fluid mx-auto d-block"
|
||||
/>
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="mt-4 text-center">
|
||||
<h5 class="mb-3 text-truncate">
|
||||
<router-link
|
||||
class="text-dark"
|
||||
:to="`/ecommerce/product-detail/${data.id}`"
|
||||
>{{ data.name }}</router-link
|
||||
>
|
||||
</h5>
|
||||
<p class="text-muted">
|
||||
<i class="bx bxs-star text-warning"></i>
|
||||
<i class="bx bxs-star text-warning"></i>
|
||||
<i class="bx bxs-star text-warning"></i>
|
||||
<i class="bx bxs-star text-warning"></i>
|
||||
<i class="bx bxs-star"></i>
|
||||
</p>
|
||||
<h5 class="my-0">
|
||||
<span class="text-muted me-2">
|
||||
<del>${{ data.oldprice }}</del>
|
||||
</span>
|
||||
<b>${{ data.newprice }}</b>
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<b-pagination
|
||||
v-if="clothsData.length > 0"
|
||||
class="justify-content-center"
|
||||
pills
|
||||
v-model="currentPage"
|
||||
:total-rows="clothsData.length"
|
||||
:per-page="6"
|
||||
aria-controls="my-table"
|
||||
></b-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</Layout>
|
||||
</template>
|
||||
|
|
@ -1,93 +0,0 @@
|
|||
<script>
|
||||
import Layout from '../../layouts/main'
|
||||
import PageHeader from '@/components/page-header'
|
||||
import appConfig from "@/app.config";
|
||||
|
||||
import { shopsData } from './data-shops'
|
||||
|
||||
/**
|
||||
* Shops component
|
||||
*/
|
||||
export default {
|
||||
page: {
|
||||
title: "Shops",
|
||||
meta: [{ name: "description", content: appConfig.description }]
|
||||
},
|
||||
components: { Layout, PageHeader },
|
||||
data() {
|
||||
return {
|
||||
shopsData: shopsData,
|
||||
title: 'Shops',
|
||||
items: [
|
||||
{
|
||||
text: 'Ecommerce',
|
||||
href: '/',
|
||||
},
|
||||
{
|
||||
text: 'Shops',
|
||||
active: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Layout>
|
||||
<PageHeader :title="title" :items="items" />
|
||||
<div class="row">
|
||||
<div v-for="shops in shopsData" :key="shops.id" class="col-xl-4 col-sm-6">
|
||||
<div class="card">
|
||||
<div class="row">
|
||||
<div class="col-xl-5">
|
||||
<div class="text-center p-4 border-end">
|
||||
<div class="avatar-sm mx-auto mb-3 mt-1">
|
||||
<span
|
||||
:class="`avatar-title rounded-circle bg-soft bg-${shops.color} text-${shops.color} font-size-16`"
|
||||
>{{shops.avatar}}</span>
|
||||
</div>
|
||||
<h5 class="text-truncate pb-1">{{shops.name}}</h5>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xl-7">
|
||||
<div class="p-4 text-center text-xl-start">
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<div>
|
||||
<p class="text-muted mb-2 text-truncate">Products</p>
|
||||
<h5>{{shops.products}}</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<div>
|
||||
<p class="text-muted mb-2 text-truncate">Wallet Balance</p>
|
||||
<h5>{{shops.balance}}</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<a href="#" class="text-decoration-underline text-reset">See Profile<i class="mdi mdi-arrow-right"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="text-center my-3">
|
||||
<a href="javascript:void(0);" class="text-success">
|
||||
<i class="bx bx-loader bx-spin font-size-18 align-middle me-2"></i> Load more
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col-->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</Layout>
|
||||
</template>
|
||||
|
|
@ -1,294 +0,0 @@
|
|||
const emailData = [
|
||||
{
|
||||
id: 1,
|
||||
unread: true,
|
||||
text: 'warning',
|
||||
title: 'Lucas Kriebel (via Twitter)',
|
||||
subject: 'Lucas Kriebel (@LucasKriebel) has sent you a direct message on Twitter! @LucasKriebel - Very cool :) Nicklas, You have a new direct message.',
|
||||
date: '10-Jan'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: 'Randy, me (5)',
|
||||
subject: 'Yeah i\'d like that! Do you remember the video you showed me of your train ride between Colombo and Kandy? The one with the mountain view? I would love to see that one again!',
|
||||
date: '01-Feb'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: 'Bruen-McCullough',
|
||||
subject: 'Sed sagittis. Nam congue, risus semper porta volutpat, quam pede lobortis ligula, sit amet eleifend pede libero quis orci. Nullam molestie nibh in lectus.',
|
||||
date: '28-Apr'
|
||||
}, {
|
||||
id: 4,
|
||||
text: 'warning',
|
||||
title: 'Muller LLC',
|
||||
subject: 'Praesent blandit. Nam nulla. Integer pede justo, lacinia eget, tincidunt eget, tempus vel, pede.',
|
||||
date: '08-Jan'
|
||||
}, {
|
||||
id: 5,
|
||||
title: 'Haley and Sons',
|
||||
subject: 'Quisque porta volutpat erat. Quisque erat eros, viverra eget, congue eget, semper rutrum, nulla. Nunc purus.\n\nPhasellus in felis. Donec semper sapien a libero. Nam dui.\n\nProin leo odio, porttitor id, consequat in, consequat ut, nulla. Sed accumsan felis. Ut at dolor quis odio consequat varius.',
|
||||
date: '16-Nov'
|
||||
}, {
|
||||
id: 6,
|
||||
unread: true,
|
||||
title: 'Kohler-Effertz',
|
||||
subject: 'Curabitur gravida nisi at nibh. In hac habitasse platea dictumst. Aliquam augue quam, sollicitudin vitae, consectetuer eget, rutrum at, lorem.',
|
||||
date: '05-Oct'
|
||||
}, {
|
||||
id: 7,
|
||||
text: 'warning',
|
||||
title: 'Stokes, Fay and Pfeffer',
|
||||
subject: 'Duis bibendum, felis sed interdum venenatis, turpis enim blandit mi, in porttitor pede justo eu massa. Donec dapibus. Duis at velit eu est congue elementum.\n\nIn hac habitasse platea dictumst. Morbi vestibulum, velit id pretium iaculis, diam erat fermentum justo, nec condimentum neque sapien placerat ante. Nulla justo.\n\nAliquam quis turpis eget elit sodales scelerisque. Mauris sit amet eros. Suspendisse accumsan tortor quis turpis.',
|
||||
date: '16-Apr'
|
||||
}, {
|
||||
id: 8,
|
||||
text: 'warning',
|
||||
title: 'Hintz-O\'Reilly',
|
||||
subject: 'Vestibulum ac est lacinia nisi venenatis tristique. Fusce congue, diam id ornare imperdiet, sapien urna pretium nisl, ut volutpat sapien arcu sed augue. Aliquam erat volutpat.',
|
||||
date: '30-Dec'
|
||||
}, {
|
||||
id: 9,
|
||||
title: 'Franecki, Simonis and Dach',
|
||||
subject: 'Maecenas ut massa quis augue luctus tincidunt. Nulla mollis molestie lorem. Quisque ut erat.',
|
||||
date: '20-Feb'
|
||||
}, {
|
||||
id: 10,
|
||||
unread: true,
|
||||
text: 'warning',
|
||||
title: 'Keeling-Bergstrom',
|
||||
subject: 'Fusce consequat. Nulla nisl. Nunc nisl.\n\nDuis bibendum, felis sed interdum venenatis, turpis enim blandit mi, in porttitor pede justo eu massa. Donec dapibus. Duis at velit eu est congue elementum.',
|
||||
date: '26-Jan'
|
||||
}, {
|
||||
id: 11,
|
||||
title: 'Waters, Jacobs and Ortiz',
|
||||
subject: 'Cras non velit nec nisi vulputate nonummy. Maecenas tincidunt lacus at velit. Vivamus vel nulla eget eros elementum pellentesque.',
|
||||
date: '09-Dec'
|
||||
}, {
|
||||
id: 12,
|
||||
text: 'warning',
|
||||
title: 'Ernser, Bernier and Schaden',
|
||||
subject: 'Pellentesque at nulla. Suspendisse potenti. Cras in purus eu magna vulputate luctus.\n\nCum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus vestibulum sagittis sapien. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.',
|
||||
date: '29-Apr'
|
||||
}, {
|
||||
id: 13,
|
||||
title: 'Davis, Pouros and Welch',
|
||||
subject: 'Vestibulum ac est lacinia nisi venenatis tristique. Fusce congue, diam id ornare imperdiet, sapien urna pretium nisl, ut volutpat sapien arcu sed augue. Aliquam erat volutpat.\n\nIn congue. Etiam justo. Etiam pretium iaculis justo.',
|
||||
date: '12-Jun'
|
||||
}, {
|
||||
id: 14,
|
||||
title: 'O\'Keefe Group\'',
|
||||
subject: 'Donec diam neque, vestibulum eget, vulputate ut, ultrices vel, augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec pharetra, magna vestibulum aliquet ultrices, erat tortor sollicitudin mi, sit amet lobortis sapien sapien non mi. Integer ac neque.',
|
||||
date: '01-Mar'
|
||||
}, {
|
||||
id: 15,
|
||||
text: 'warning',
|
||||
title: 'Batz, Abbott and Jakubowski',
|
||||
subject: 'Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus vestibulum sagittis sapien. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.\n\nEtiam vel augue. Vestibulum rutrum rutrum neque. Aenean auctor gravida sem.',
|
||||
date: '12-Oct'
|
||||
}, {
|
||||
id: 16,
|
||||
unread: true,
|
||||
title: 'Mertz and Sons',
|
||||
subject: 'Pellentesque at nulla. Suspendisse potenti. Cras in purus eu magna vulputate luctus.',
|
||||
date: '09-May'
|
||||
}, {
|
||||
id: 17,
|
||||
title: 'Thompson Group',
|
||||
subject: 'Mauris enim leo, rhoncus sed, vestibulum sit amet, cursus id, turpis. Integer aliquet, massa id lobortis convallis, tortor risus dapibus augue, vel accumsan tellus nisi eu orci. Mauris lacinia sapien quis libero.\n\nNullam sit amet turpis elementum ligula vehicula consequat. Morbi a ipsum. Integer a nibh.\n\nIn quis justo. Maecenas rhoncus aliquam lacus. Morbi quis tortor id nulla ultrices aliquet.',
|
||||
date: '26-Dec'
|
||||
}, {
|
||||
id: 18,
|
||||
title: 'Jerde, Okuneva and Klocko',
|
||||
subject: 'Nam ultrices, libero non mattis pulvinar, nulla pede ullamcorper augue, a suscipit nulla elit ac nulla. Sed vel enim sit amet nunc viverra dapibus. Nulla suscipit ligula in lacus.\n\nCurabitur at ipsum ac tellus semper interdum. Mauris ullamcorper purus sit amet nulla. Quisque arcu libero, rutrum ac, lobortis vel, dapibus at, diam.',
|
||||
date: '02-Feb'
|
||||
}, {
|
||||
id: 19,
|
||||
text: 'warning',
|
||||
title: 'Boyer-Lubowitz',
|
||||
subject: 'Maecenas ut massa quis augue luctus tincidunt. Nulla mollis molestie lorem. Quisque ut erat.',
|
||||
date: '13-Nov'
|
||||
}, {
|
||||
id: 20,
|
||||
title: 'Gutmann, McLaughlin and Nienow',
|
||||
subject: 'Sed sagittis. Nam congue, risus semper porta volutpat, quam pede lobortis ligula, sit amet eleifend pede libero quis orci. Nullam molestie nibh in lectus.\n\nPellentesque at nulla. Suspendisse potenti. Cras in purus eu magna vulputate luctus.\n\nCum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus vestibulum sagittis sapien. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.',
|
||||
date: '25-Jul'
|
||||
}, {
|
||||
id: 21,
|
||||
text: 'warning',
|
||||
title: 'Lebsack-Schmitt',
|
||||
subject: 'Cras mi pede, malesuada in, imperdiet et, commodo vulputate, justo. In blandit ultrices enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.\n\nProin interdum mauris non ligula pellentesque ultrices. Phasellus id sapien in sapien iaculis congue. Vivamus metus arcu, adipiscing molestie, hendrerit at, vulputate vitae, nisl.',
|
||||
date: '30-Sep'
|
||||
}, {
|
||||
id: 22,
|
||||
unread: true,
|
||||
title: 'Jacobi-Greenholt',
|
||||
subject: 'Curabitur gravida nisi at nibh. In hac habitasse platea dictumst. Aliquam augue quam, sollicitudin vitae, consectetuer eget, rutrum at, lorem.',
|
||||
date: '16-May'
|
||||
}, {
|
||||
id: 23,
|
||||
title: 'Kutch, Jacobson and Kozey',
|
||||
subject: 'Donec diam neque, vestibulum eget, vulputate ut, ultrices vel, augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec pharetra, magna vestibulum aliquet ultrices, erat tortor sollicitudin mi, sit amet lobortis sapien sapien non mi. Integer ac neque.\n\nDuis bibendum. Morbi non quam nec dui luctus rutrum. Nulla tellus.\n\nIn sagittis dui vel nisl. Duis ac nibh. Fusce lacus purus, aliquet at, feugiat non, pretium quis, lectus.',
|
||||
date: '06-Apr'
|
||||
}, {
|
||||
id: 24,
|
||||
text: 'warning',
|
||||
title: 'Bernhard and Sons',
|
||||
subject: 'Phasellus sit amet erat. Nulla tempus. Vivamus in felis eu sapien cursus vestibulum.\n\nProin eu mi. Nulla ac enim. In tempor, turpis nec euismod scelerisque, quam turpis adipiscing lorem, vitae mattis nibh ligula nec sem.\n\nDuis aliquam convallis nunc. Proin at turpis a pede posuere nonummy. Integer non velit.',
|
||||
date: '09-Feb'
|
||||
}, {
|
||||
id: 25,
|
||||
title: 'Kunze Inc',
|
||||
text: 'warning',
|
||||
subject: 'Mauris enim leo, rhoncus sed, vestibulum sit amet, cursus id, turpis. Integer aliquet, massa id lobortis convallis, tortor risus dapibus augue, vel accumsan tellus nisi eu orci. Mauris lacinia sapien quis libero.\n\nNullam sit amet turpis elementum ligula vehicula consequat. Morbi a ipsum. Integer a nibh.\n\nIn quis justo. Maecenas rhoncus aliquam lacus. Morbi quis tortor id nulla ultrices aliquet.',
|
||||
date: '11-May'
|
||||
}, {
|
||||
id: 26,
|
||||
title: 'Miller Group',
|
||||
subject: 'Duis bibendum. Morbi non quam nec dui luctus rutrum. Nulla tellus.',
|
||||
date: '19-Jul'
|
||||
}, {
|
||||
id: 27,
|
||||
title: 'Durgan and Sons',
|
||||
subject: 'Proin interdum mauris non ligula pellentesque ultrices. Phasellus id sapien in sapien iaculis congue. Vivamus metus arcu, adipiscing molestie, hendrerit at, vulputate vitae, nisl.\n\nAenean lectus. Pellentesque eget nunc. Donec quis orci eget orci vehicula condimentum.',
|
||||
date: '23-Dec'
|
||||
}, {
|
||||
id: 28,
|
||||
text: 'warning',
|
||||
title: 'Pfannerstill-Kautzer',
|
||||
subject: 'Curabitur gravida nisi at nibh. In hac habitasse platea dictumst. Aliquam augue quam, sollicitudin vitae, consectetuer eget, rutrum at, lorem.',
|
||||
date: '20-Jan'
|
||||
}, {
|
||||
id: 29,
|
||||
title: 'O\'Reilly-Ferry',
|
||||
subject: 'Nullam sit amet turpis elementum ligula vehicula consequat. Morbi a ipsum. Integer a nibh.',
|
||||
date: '29-Apr'
|
||||
}, {
|
||||
id: 30,
|
||||
title: 'Shields, Jast and Towne',
|
||||
subject: 'Sed ante. Vivamus tortor. Duis mattis egestas metus.\n\nAenean fermentum. Donec ut mauris eget massa tempor convallis. Nulla neque libero, convallis eget, eleifend luctus, ultricies eu, nibh.',
|
||||
date: '16-Feb'
|
||||
}, {
|
||||
id: 31,
|
||||
text: 'warning',
|
||||
title: 'Mayert-Dickinson',
|
||||
subject: 'Praesent id massa id nisl venenatis lacinia. Aenean sit amet justo. Morbi ut odio.\n\nCras mi pede, malesuada in, imperdiet et, commodo vulputate, justo. In blandit ultrices enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.\n\nProin interdum mauris non ligula pellentesque ultrices. Phasellus id sapien in sapien iaculis congue. Vivamus metus arcu, adipiscing molestie, hendrerit at, vulputate vitae, nisl.',
|
||||
date: '30-Dec'
|
||||
}, {
|
||||
id: 32,
|
||||
title: 'Little LLC',
|
||||
subject: 'Proin interdum mauris non ligula pellentesque ultrices. Phasellus id sapien in sapien iaculis congue. Vivamus metus arcu, adipiscing molestie, hendrerit at, vulputate vitae, nisl.\n\nAenean lectus. Pellentesque eget nunc. Donec quis orci eget orci vehicula condimentum.',
|
||||
date: '07-Mar'
|
||||
}, {
|
||||
id: 33,
|
||||
text: 'warning',
|
||||
title: 'Crist, Blanda and Wuckert',
|
||||
subject: 'Phasellus in felis. Donec semper sapien a libero. Nam dui.',
|
||||
date: '13-Aug'
|
||||
}, {
|
||||
id: 34,
|
||||
text: 'warning',
|
||||
title: 'Williamson-Sanford',
|
||||
subject: 'Suspendisse potenti. In eleifend quam a odio. In hac habitasse platea dictumst.',
|
||||
date: '09-Jul'
|
||||
}, {
|
||||
id: 35,
|
||||
title: 'Gleason-Shanahan',
|
||||
subject: 'Quisque porta volutpat erat. Quisque erat eros, viverra eget, congue eget, semper rutrum, nulla. Nunc purus.\n\nPhasellus in felis. Donec semper sapien a libero. Nam dui.\n\nProin leo odio, porttitor id, consequat in, consequat ut, nulla. Sed accumsan felis. Ut at dolor quis odio consequat varius.',
|
||||
date: '13-May'
|
||||
}, {
|
||||
id: 36,
|
||||
unread: true,
|
||||
title: 'Franecki-Hodkiewicz',
|
||||
subject: 'Morbi non lectus. Aliquam sit amet diam in magna bibendum imperdiet. Nullam orci pede, venenatis non, sodales sed, tincidunt eu, felis.',
|
||||
date: '15-Mar'
|
||||
}, {
|
||||
id: 37,
|
||||
title: 'Bailey-Simonis',
|
||||
subject: 'Aenean lectus. Pellentesque eget nunc. Donec quis orci eget orci vehicula condimentum.',
|
||||
date: '18-Sep'
|
||||
}, {
|
||||
id: 38,
|
||||
text: 'warning',
|
||||
title: 'Grant-Volkman',
|
||||
subject: 'Quisque id justo sit amet sapien dignissim vestibulum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla dapibus dolor vel est. Donec odio justo, sollicitudin ut, suscipit a, feugiat et, eros.',
|
||||
date: '13-Mar'
|
||||
}, {
|
||||
id: 39,
|
||||
title: 'Kshlerin-Cole',
|
||||
subject: 'Proin interdum mauris non ligula pellentesque ultrices. Phasellus id sapien in sapien iaculis congue. Vivamus metus arcu, adipiscing molestie, hendrerit at, vulputate vitae, nisl.',
|
||||
date: '21-Nov'
|
||||
}, {
|
||||
id: 40,
|
||||
title: 'Pouros-Funk',
|
||||
subject: 'Vestibulum ac est lacinia nisi venenatis tristique. Fusce congue, diam id ornare imperdiet, sapien urna pretium nisl, ut volutpat sapien arcu sed augue. Aliquam erat volutpat.\n\nIn congue. Etiam justo. Etiam pretium iaculis justo.\n\nIn hac habitasse platea dictumst. Etiam faucibus cursus urna. Ut tellus.',
|
||||
date: '05-Jun'
|
||||
}, {
|
||||
id: 41,
|
||||
title: 'Ziemann-Denesik',
|
||||
subject: 'Nulla ut erat id mauris vulputate elementum. Nullam varius. Nulla facilisi.',
|
||||
date: '14-Apr'
|
||||
}, {
|
||||
id: 42,
|
||||
title: 'Johnson LLC',
|
||||
subject: 'In hac habitasse platea dictumst. Morbi vestibulum, velit id pretium iaculis, diam erat fermentum justo, nec condimentum neque sapien placerat ante. Nulla justo.\n\nAliquam quis turpis eget elit sodales scelerisque. Mauris sit amet eros. Suspendisse accumsan tortor quis turpis.',
|
||||
date: '30-Nov'
|
||||
}, {
|
||||
id: 43,
|
||||
title: 'Cummings-Ferry',
|
||||
subject: 'Phasellus in felis. Donec semper sapien a libero. Nam dui.\n\nProin leo odio, porttitor id, consequat in, consequat ut, nulla. Sed accumsan felis. Ut at dolor quis odio consequat varius.\n\nInteger ac leo. Pellentesque ultrices mattis odio. Donec vitae nisi.',
|
||||
date: '30-Nov'
|
||||
}, {
|
||||
id: 44,
|
||||
title: 'Weimann-Lueilwitz',
|
||||
subject: 'Integer tincidunt ante vel ipsum. Praesent blandit lacinia erat. Vestibulum sed magna at nunc commodo placerat.\n\nPraesent blandit. Nam nulla. Integer pede justo, lacinia eget, tincidunt eget, tempus vel, pede.',
|
||||
date: '06-Nov'
|
||||
}, {
|
||||
id: 45,
|
||||
unread: true,
|
||||
title: 'Zieme, Krajcik and Champlin',
|
||||
subject: 'Proin leo odio, porttitor id, consequat in, consequat ut, nulla. Sed accumsan felis. Ut at dolor quis odio consequat varius.\n\nInteger ac leo. Pellentesque ultrices mattis odio. Donec vitae nisi.\n\nNam ultrices, libero non mattis pulvinar, nulla pede ullamcorper augue, a suscipit nulla elit ac nulla. Sed vel enim sit amet nunc viverra dapibus. Nulla suscipit ligula in lacus.',
|
||||
date: '28-Mar'
|
||||
}, {
|
||||
id: 46,
|
||||
title: 'Toy-Kunde',
|
||||
subject: 'Vestibulum quam sapien, varius ut, blandit non, interdum in, ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis faucibus accumsan odio. Curabitur convallis.',
|
||||
date: '27-Dec'
|
||||
}, {
|
||||
id: 47,
|
||||
title: 'Mosciski and Sons',
|
||||
subject: 'Duis aliquam convallis nunc. Proin at turpis a pede posuere nonummy. Integer non velit.',
|
||||
date: '04-Feb'
|
||||
}, {
|
||||
id: 48,
|
||||
title: 'Lowe, Windler and Wolff',
|
||||
subject: 'Proin interdum mauris non ligula pellentesque ultrices. Phasellus id sapien in sapien iaculis congue. Vivamus metus arcu, adipiscing molestie, hendrerit at, vulputate vitae, nisl.',
|
||||
date: '13-Mar'
|
||||
}, {
|
||||
id: 49,
|
||||
text: 'warning',
|
||||
title: 'Bruen-Bashirian',
|
||||
subject: 'Aliquam quis turpis eget elit sodales scelerisque. Mauris sit amet eros. Suspendisse accumsan tortor quis turpis.\n\nSed ante. Vivamus tortor. Duis mattis egestas metus.',
|
||||
date: '04-Mar'
|
||||
}, {
|
||||
id: 50,
|
||||
title: 'Nader, Hickle and Ullrich',
|
||||
subject: 'In hac habitasse platea dictumst. Morbi vestibulum, velit id pretium iaculis, diam erat fermentum justo, nec condimentum neque sapien placerat ante. Nulla justo.\n\nAliquam quis turpis eget elit sodales scelerisque. Mauris sit amet eros. Suspendisse accumsan tortor quis turpis.',
|
||||
date: '28-May'
|
||||
}, {
|
||||
id: 51,
|
||||
text: 'warning',
|
||||
title: 'Reilly-Homenick',
|
||||
subject: 'Aliquam quis turpis eget elit sodales scelerisque. Mauris sit amet eros. Suspendisse accumsan tortor quis turpis.\n\nSed ante. Vivamus tortor. Duis mattis egestas metus.\n\nAenean fermentum. Donec ut mauris eget massa tempor convallis. Nulla neque libero, convallis eget, eleifend luctus, ultricies eu, nibh.',
|
||||
date: '18-Jan'
|
||||
}, {
|
||||
id: 52,
|
||||
unread: true,
|
||||
title: 'O\'Connell and Sons',
|
||||
subject: 'Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus vestibulum sagittis sapien. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.',
|
||||
date: '03-Aug'
|
||||
}];
|
||||
|
||||
|
||||
export { emailData };
|
||||
|
||||
|
|
@ -1,137 +0,0 @@
|
|||
<script>
|
||||
import Layout from "../../layouts/main";
|
||||
import PageHeader from "@/components/page-header";
|
||||
import appConfig from "@/app.config";
|
||||
import Toolbar from "./toolbar";
|
||||
import Sidepanel from "./sidepanel";
|
||||
|
||||
import { emailData } from "./data-inbox";
|
||||
|
||||
/**
|
||||
* Email-inbox component
|
||||
*/
|
||||
export default {
|
||||
page: {
|
||||
title: "Inbox",
|
||||
meta: [{ name: "description", content: appConfig.description }]
|
||||
},
|
||||
components: {
|
||||
Layout,
|
||||
PageHeader,
|
||||
Toolbar,
|
||||
Sidepanel
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
emailData: emailData,
|
||||
paginatedEmailData: emailData,
|
||||
title: "Inbox",
|
||||
items: [
|
||||
{
|
||||
text: "Email",
|
||||
href: "/"
|
||||
},
|
||||
{
|
||||
text: "Inbox",
|
||||
active: true
|
||||
}
|
||||
],
|
||||
// page number
|
||||
currentPage: 1,
|
||||
// default page size
|
||||
perPage: 15,
|
||||
emailIds: [],
|
||||
// start and end index
|
||||
startIndex: 1,
|
||||
endIndex: 15
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
rows() {
|
||||
return this.emailData.length;
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.startIndex = 0;
|
||||
this.endIndex = this.perPage;
|
||||
this.paginatedEmailData = this.emailData.slice(
|
||||
this.startIndex,
|
||||
this.endIndex
|
||||
);
|
||||
},
|
||||
methods: {
|
||||
onPageChange() {
|
||||
this.startIndex = (this.currentPage - 1) * this.perPage;
|
||||
this.endIndex = (this.currentPage - 1) * this.perPage + this.perPage;
|
||||
|
||||
this.paginatedEmailData = this.emailData.slice(
|
||||
this.startIndex,
|
||||
this.endIndex
|
||||
);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Layout>
|
||||
<PageHeader :title="title" :items="items" />
|
||||
<div class="row">
|
||||
<!-- Right Sidebar -->
|
||||
<div class="col-12">
|
||||
<Sidepanel />
|
||||
<div class="email-rightbar mb-3">
|
||||
<div class="card">
|
||||
<div class="btn-toolbar p-3">
|
||||
<Toolbar />
|
||||
</div>
|
||||
<div class="mt-3">
|
||||
<ul class="message-list">
|
||||
<router-link
|
||||
custom v-slot="{ navigate }"
|
||||
v-for="(email,index) in paginatedEmailData"
|
||||
:key="index"
|
||||
:class="{ 'unread': email.unread === true }"
|
||||
:to="`/email/reademail/${email.id}`"
|
||||
>
|
||||
<li @click="navigate" @keypress.enter="navigate">
|
||||
<div class="col-mail col-mail-1">
|
||||
<div class="checkbox-wrapper-mail">
|
||||
<input :id="`chk-${index}`" type="checkbox" />
|
||||
<label :for="`chk-${index}`"></label>
|
||||
</div>
|
||||
<span :class="`star-toggle far fa-star text-${email.text}`"></span>
|
||||
<a class="title">{{email.title}}</a>
|
||||
</div>
|
||||
<div class="col-mail col-mail-2">
|
||||
<router-link
|
||||
:to="`/email/reademail/${email.id}`"
|
||||
class="subject"
|
||||
>{{email.subject}}</router-link>
|
||||
<div class="date">{{email.date}}</div>
|
||||
</div>
|
||||
</li>
|
||||
</router-link>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-md-between align-items-md-center">
|
||||
<div class="col-xl-7">Showing {{startIndex}} - {{endIndex}} of {{rows}}</div>
|
||||
<!-- end col-->
|
||||
<div class="col-xl-5">
|
||||
<div class="text-md-right float-end mt-2 pagination-rounded">
|
||||
<b-pagination
|
||||
v-model="currentPage"
|
||||
:total-rows="rows"
|
||||
:per-page="perPage"
|
||||
@input="onPageChange"
|
||||
></b-pagination>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
</template>
|
||||
|
|
@ -1,125 +0,0 @@
|
|||
<script>
|
||||
import Layout from "../../layouts/main";
|
||||
import PageHeader from "@/components/page-header";
|
||||
import appConfig from "@/app.config";
|
||||
|
||||
import Toolbar from "./toolbar";
|
||||
import Sidepanel from "./sidepanel";
|
||||
|
||||
import { emailData } from "./data-inbox";
|
||||
|
||||
/**
|
||||
* Email-read component
|
||||
*/
|
||||
export default {
|
||||
page: {
|
||||
title: "Read Email",
|
||||
meta: [{ name: "description", content: appConfig.description }]
|
||||
},
|
||||
components: {
|
||||
Layout,
|
||||
PageHeader,
|
||||
Toolbar,
|
||||
Sidepanel
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
emailread: null,
|
||||
emailData: emailData,
|
||||
title: "Read Email",
|
||||
items: [
|
||||
{
|
||||
text: "Email",
|
||||
href: "/"
|
||||
},
|
||||
{
|
||||
text: "Read Email",
|
||||
active: true
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.emailRead = emailData.filter(email => {
|
||||
return email.id === parseInt(this.$route.params.id);
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Layout>
|
||||
<PageHeader :title="title" :items="items" />
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<!-- Left sidebar -->
|
||||
<Sidepanel />
|
||||
<!-- End Left sidebar -->
|
||||
|
||||
<!-- Right Sidebar -->
|
||||
<div class="email-rightbar mb-3">
|
||||
<div class="card">
|
||||
<div class="btn-toolbar p-3" role="toolbar">
|
||||
<Toolbar />
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="d-flex mb-4">
|
||||
<img
|
||||
class="d-flex me-3 rounded-circle avatar-sm"
|
||||
src="@/assets/images/users/avatar-2.jpg"
|
||||
alt="Generic placeholder image"
|
||||
/>
|
||||
<div class="flex-grow-1">
|
||||
<h5 class="font-size-14 mt-1">Humberto D. Champion</h5>
|
||||
<small class="text-muted">support@domain.com</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="mt-0 font-size-16">{{emailRead[0].title}}</h4>
|
||||
|
||||
<p>Dear Lorem Ipsum,</p>
|
||||
<p>{{emailRead[0].subject}}</p>
|
||||
<p>Sed elementum turpis eu lorem interdum, sed porttitor eros commodo. Nam eu venenatis tortor, id lacinia diam. Sed aliquam in dui et porta. Sed bibendum orci non tincidunt ultrices. Vivamus fringilla, mi lacinia dapibus condimentum, ipsum urna lacinia lacus, vel tincidunt mi nibh sit amet lorem.</p>
|
||||
<p>Sincerly,</p>
|
||||
<hr />
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-2 col-6">
|
||||
<div class="card">
|
||||
<img
|
||||
class="card-img-top img-fluid"
|
||||
src="@/assets/images/small/img-3.jpg"
|
||||
alt="Card image cap"
|
||||
/>
|
||||
<div class="py-2 text-center">
|
||||
<a href class="fw-medium">Download</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-2 col-6">
|
||||
<div class="card">
|
||||
<img
|
||||
class="card-img-top img-fluid"
|
||||
src="@/assets/images/small/img-4.jpg"
|
||||
alt="Card image cap"
|
||||
/>
|
||||
<div class="py-2 text-center">
|
||||
<a href class="fw-medium">Download</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a href="javascript: void(0);" class="btn btn-secondary waves-effect mt-4">
|
||||
<i class="mdi mdi-reply"></i> Reply
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- card -->
|
||||
</div>
|
||||
<!-- end Col-9 -->
|
||||
</div>
|
||||
</Layout>
|
||||
</template>
|
||||
|
|
@ -1,140 +0,0 @@
|
|||
<script>
|
||||
import CKEditor from "@ckeditor/ckeditor5-vue";
|
||||
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
|
||||
|
||||
export default {
|
||||
components: { ckeditor: CKEditor.component },
|
||||
data() {
|
||||
return {
|
||||
showModal: false,
|
||||
editor: ClassicEditor,
|
||||
editorData: "<p>Content of the editor.</p>"
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="email-leftbar card">
|
||||
<b-button variant="danger" @click="showModal = true">Compose</b-button>
|
||||
<div class="mail-list mt-4">
|
||||
<router-link to="/email/inbox" class="active">
|
||||
<i class="mdi mdi-email-outline me-2"></i> Inbox
|
||||
<span class="ms-1 float-end">(18)</span>
|
||||
</router-link>
|
||||
<router-link to="/email/inbox">
|
||||
<i class="mdi mdi-star-outline me-2"></i>Starred
|
||||
</router-link>
|
||||
<router-link to="/email/inbox">
|
||||
<i class="mdi mdi-diamond-stone me-2"></i>Important
|
||||
</router-link>
|
||||
<router-link to="/email/inbox">
|
||||
<i class="mdi mdi-file-outline me-2"></i>Draft
|
||||
</router-link>
|
||||
<router-link to="/email/inbox">
|
||||
<i class="mdi mdi-email-check-outline me-2"></i>Sent Mail
|
||||
</router-link>
|
||||
<router-link to="/email/inbox">
|
||||
<i class="mdi mdi-trash-can-outline me-2"></i>Trash
|
||||
</router-link>
|
||||
</div>
|
||||
|
||||
<h6 class="mt-4">Labels</h6>
|
||||
|
||||
<div class="mail-list mt-1">
|
||||
<a href="javascript: void(0);">
|
||||
<span class="mdi mdi-arrow-right-drop-circle text-info float-end"></span>Theme Support
|
||||
</a>
|
||||
<a href="javascript: void(0);">
|
||||
<span class="mdi mdi-arrow-right-drop-circle text-warning float-end"></span>Freelance
|
||||
</a>
|
||||
<a href="javascript: void(0);">
|
||||
<span class="mdi mdi-arrow-right-drop-circle text-primary float-end"></span>Social
|
||||
</a>
|
||||
<a href="javascript: void(0);">
|
||||
<span class="mdi mdi-arrow-right-drop-circle text-danger float-end"></span>Friends
|
||||
</a>
|
||||
<a href="javascript: void(0);">
|
||||
<span class="mdi mdi-arrow-right-drop-circle text-success float-end"></span>Family
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<h6 class="mt-4">Chat</h6>
|
||||
|
||||
<div class="mt-2">
|
||||
<a href="javascript: void(0);" class="d-flex">
|
||||
<img
|
||||
class="d-flex me-3 rounded-circle"
|
||||
src="@/assets/images/users/avatar-2.jpg"
|
||||
alt="Generic placeholder image"
|
||||
height="36"
|
||||
/>
|
||||
<div class="flex-grow-1 chat-user-box">
|
||||
<p class="user-title m-0">Scott Median</p>
|
||||
<p class="text-muted">Hello</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="javascript: void(0);" class="d-flex">
|
||||
<img
|
||||
class="d-flex me-3 rounded-circle"
|
||||
src="@/assets/images/users/avatar-3.jpg"
|
||||
alt="Generic placeholder image"
|
||||
height="36"
|
||||
/>
|
||||
<div class="flex-grow-1 chat-user-box">
|
||||
<p class="user-title m-0">Julian Rosa</p>
|
||||
<p class="text-muted">What about our next..</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="javascript: void(0);" class="d-flex">
|
||||
<img
|
||||
class="d-flex me-3 rounded-circle"
|
||||
src="@/assets/images/users/avatar-4.jpg"
|
||||
alt="Generic placeholder image"
|
||||
height="36"
|
||||
/>
|
||||
<div class="flex-grow-1 chat-user-box">
|
||||
<p class="user-title m-0">David Medina</p>
|
||||
<p class="text-muted">Yeah everything is fine</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="javascript: void(0);" class="d-flex">
|
||||
<img
|
||||
class="d-flex me-3 rounded-circle"
|
||||
src="@/assets/images/users/avatar-6.jpg"
|
||||
alt="Generic placeholder image"
|
||||
height="36"
|
||||
/>
|
||||
<div class="flex-grow-1 chat-user-box">
|
||||
<p class="user-title m-0">Jay Baker</p>
|
||||
<p class="text-muted">Wow that's great</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<b-modal v-model="showModal" title="New Message" centered>
|
||||
<form>
|
||||
<div class="mb-3">
|
||||
<input type="email" class="form-control" placeholder="To" />
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<input type="text" class="form-control" placeholder="Subject" />
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<ckeditor v-model="editorData" :editor="editor"></ckeditor>
|
||||
</div>
|
||||
</form>
|
||||
<template v-slot:modal-footer>
|
||||
<b-button variant="secondary" @click="showModal = false">Close</b-button>
|
||||
<b-button variant="primary">
|
||||
Send
|
||||
<i class="fab fa-telegram-plane ms-1"></i>
|
||||
</b-button>
|
||||
</template>
|
||||
</b-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,388 +0,0 @@
|
|||
<script>
|
||||
import Layout from "../../../layouts/main";
|
||||
import PageHeader from "@/components/page-header";
|
||||
import appConfig from "@/app.config";
|
||||
|
||||
/**
|
||||
* Email-template-alert component
|
||||
*/
|
||||
export default {
|
||||
page: {
|
||||
title: "Alert Email",
|
||||
meta: [{ name: "description", content: appConfig.description }],
|
||||
},
|
||||
components: { Layout, PageHeader },
|
||||
data() {
|
||||
return {
|
||||
title: "Alert Email",
|
||||
items: [
|
||||
{
|
||||
text: "Email Template",
|
||||
href: "/",
|
||||
},
|
||||
{
|
||||
text: "Alert Email",
|
||||
active: true,
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Layout>
|
||||
<PageHeader :title="title" :items="items" />
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<table
|
||||
class="body-wrap"
|
||||
style="
|
||||
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
box-sizing: border-box;
|
||||
font-size: 14px;
|
||||
width: 100%;
|
||||
background-color: transparent;
|
||||
margin: 0;
|
||||
"
|
||||
>
|
||||
<tr
|
||||
style="
|
||||
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
box-sizing: border-box;
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
"
|
||||
>
|
||||
<td
|
||||
style="
|
||||
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
box-sizing: border-box;
|
||||
font-size: 14px;
|
||||
vertical-align: top;
|
||||
margin: 0;
|
||||
"
|
||||
valign="top"
|
||||
></td>
|
||||
<td
|
||||
class="container"
|
||||
width="600"
|
||||
style="
|
||||
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
box-sizing: border-box;
|
||||
font-size: 14px;
|
||||
vertical-align: top;
|
||||
display: block !important;
|
||||
max-width: 600px !important;
|
||||
clear: both !important;
|
||||
margin: 0 auto;
|
||||
"
|
||||
valign="top"
|
||||
>
|
||||
<div
|
||||
class="content"
|
||||
style="
|
||||
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
box-sizing: border-box;
|
||||
font-size: 14px;
|
||||
max-width: 600px;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
"
|
||||
>
|
||||
<table
|
||||
class="main"
|
||||
width="100%"
|
||||
cellpadding="0"
|
||||
cellspacing="0"
|
||||
style="
|
||||
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
box-sizing: border-box;
|
||||
font-size: 14px;
|
||||
border-radius: 7px;
|
||||
background-color: #fff;
|
||||
color: #495057;
|
||||
margin: 0;
|
||||
box-shadow: 0 0.75rem 1.5rem rgba(18, 38, 63, 0.03);
|
||||
"
|
||||
bgcolor="#fff"
|
||||
>
|
||||
<tr
|
||||
style="
|
||||
font-family: 'Helvetica Neue', Helvetica, Arial,
|
||||
sans-serif;
|
||||
box-sizing: border-box;
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
"
|
||||
>
|
||||
<td
|
||||
class="alert alert-warning"
|
||||
style="
|
||||
font-family: 'Helvetica Neue', Helvetica, Arial,
|
||||
sans-serif;
|
||||
box-sizing: border-box;
|
||||
font-size: 16px;
|
||||
vertical-align: top;
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
border-radius: 7px 7px 0 0;
|
||||
background-color: #556ee6;
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
"
|
||||
align="center"
|
||||
bgcolor="#71b6f9"
|
||||
valign="top"
|
||||
>
|
||||
Warning: You're approaching your limit. Please upgrade.
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
style="
|
||||
font-family: 'Helvetica Neue', Helvetica, Arial,
|
||||
sans-serif;
|
||||
box-sizing: border-box;
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
"
|
||||
>
|
||||
<td
|
||||
class="content-wrap"
|
||||
style="
|
||||
font-family: 'Helvetica Neue', Helvetica, Arial,
|
||||
sans-serif;
|
||||
box-sizing: border-box;
|
||||
font-size: 14px;
|
||||
vertical-align: top;
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
"
|
||||
valign="top"
|
||||
>
|
||||
<table
|
||||
width="100%"
|
||||
cellpadding="0"
|
||||
cellspacing="0"
|
||||
style="
|
||||
font-family: 'Helvetica Neue', Helvetica, Arial,
|
||||
sans-serif;
|
||||
box-sizing: border-box;
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
"
|
||||
>
|
||||
<tr
|
||||
style="
|
||||
font-family: 'Helvetica Neue', Helvetica, Arial,
|
||||
sans-serif;
|
||||
box-sizing: border-box;
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
"
|
||||
>
|
||||
<td
|
||||
class="content-block"
|
||||
style="
|
||||
font-family: 'Helvetica Neue', Helvetica, Arial,
|
||||
sans-serif;
|
||||
box-sizing: border-box;
|
||||
font-size: 14px;
|
||||
vertical-align: top;
|
||||
margin: 0;
|
||||
padding: 0 0 20px;
|
||||
"
|
||||
valign="top"
|
||||
>
|
||||
You have
|
||||
<strong
|
||||
style="
|
||||
font-family: 'Helvetica Neue', Helvetica, Arial,
|
||||
sans-serif;
|
||||
box-sizing: border-box;
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
"
|
||||
><span
|
||||
style="
|
||||
background-color: #f46a6a;
|
||||
color: #ffffff;
|
||||
padding: 5px 8px;
|
||||
font-size: 12px;
|
||||
border-radius: 4px;
|
||||
"
|
||||
>1 free report</span
|
||||
></strong
|
||||
>
|
||||
remaining.
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
style="
|
||||
font-family: 'Helvetica Neue', Helvetica, Arial,
|
||||
sans-serif;
|
||||
box-sizing: border-box;
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
"
|
||||
>
|
||||
<td
|
||||
class="content-block"
|
||||
style="
|
||||
font-family: 'Helvetica Neue', Helvetica, Arial,
|
||||
sans-serif;
|
||||
box-sizing: border-box;
|
||||
font-size: 14px;
|
||||
vertical-align: top;
|
||||
margin: 0;
|
||||
padding: 0 0 20px;
|
||||
"
|
||||
valign="top"
|
||||
>
|
||||
Add your credit card now to upgrade your account to
|
||||
a premium plan to ensure you don't miss out on any
|
||||
reports.
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
style="
|
||||
font-family: 'Helvetica Neue', Helvetica, Arial,
|
||||
sans-serif;
|
||||
box-sizing: border-box;
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
"
|
||||
>
|
||||
<td
|
||||
class="content-block"
|
||||
style="
|
||||
font-family: 'Helvetica Neue', Helvetica, Arial,
|
||||
sans-serif;
|
||||
box-sizing: border-box;
|
||||
font-size: 14px;
|
||||
vertical-align: top;
|
||||
margin: 0;
|
||||
padding: 0 0 20px;
|
||||
"
|
||||
valign="top"
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
style="
|
||||
font-family: 'Helvetica Neue', Helvetica, Arial,
|
||||
sans-serif;
|
||||
box-sizing: border-box;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
line-height: 2em;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
border-radius: 5px;
|
||||
text-transform: capitalize;
|
||||
background-color: #34c38f;
|
||||
margin: 0;
|
||||
border-color: #34c38f;
|
||||
border-style: solid;
|
||||
border-width: 8px 16px;
|
||||
"
|
||||
>Upgrade my account</a
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
style="
|
||||
font-family: 'Helvetica Neue', Helvetica, Arial,
|
||||
sans-serif;
|
||||
box-sizing: border-box;
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
"
|
||||
>
|
||||
<td
|
||||
class="content-block"
|
||||
style="
|
||||
font-family: 'Helvetica Neue', Helvetica, Arial,
|
||||
sans-serif;
|
||||
box-sizing: border-box;
|
||||
font-size: 14px;
|
||||
vertical-align: top;
|
||||
margin: 0;
|
||||
padding: 0 0 20px;
|
||||
"
|
||||
valign="top"
|
||||
>
|
||||
Thanks for choosing <b>Skote</b> Admin.
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
style="
|
||||
font-family: 'Helvetica Neue', Helvetica, Arial,
|
||||
sans-serif;
|
||||
box-sizing: border-box;
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
"
|
||||
>
|
||||
<td
|
||||
class="content-block"
|
||||
style="
|
||||
font-family: 'Helvetica Neue', Helvetica, Arial,
|
||||
sans-serif;
|
||||
box-sizing: border-box;
|
||||
font-size: 14px;
|
||||
vertical-align: top;
|
||||
margin: 0;
|
||||
padding: 0 0 20px;
|
||||
"
|
||||
valign="top"
|
||||
>
|
||||
<b>Skote</b>
|
||||
<p>Support Team</p>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr
|
||||
style="
|
||||
font-family: 'Helvetica Neue', Helvetica, Arial,
|
||||
sans-serif;
|
||||
box-sizing: border-box;
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
"
|
||||
>
|
||||
<td
|
||||
class="content-block"
|
||||
style="
|
||||
text-align: center;
|
||||
font-family: 'Helvetica Neue', Helvetica, Arial,
|
||||
sans-serif;
|
||||
box-sizing: border-box;
|
||||
font-size: 14px;
|
||||
vertical-align: top;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
"
|
||||
valign="top"
|
||||
>
|
||||
© 2021 Skote
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<!-- end table -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</Layout>
|
||||
</template>
|
||||
|
|
@ -1,89 +0,0 @@
|
|||
<script>
|
||||
import Layout from "../../../layouts/main";
|
||||
import PageHeader from "@/components/page-header";
|
||||
import appConfig from "@/app.config";
|
||||
|
||||
/**
|
||||
* Basic-email-template component
|
||||
*/
|
||||
export default {
|
||||
page: {
|
||||
title: "Basic Action",
|
||||
meta: [{ name: "description", content: appConfig.description }],
|
||||
},
|
||||
components: { Layout, PageHeader },
|
||||
data() {
|
||||
return {
|
||||
title: "Basic Action",
|
||||
items: [
|
||||
{
|
||||
text: "Email Template",
|
||||
href: "/",
|
||||
},
|
||||
{
|
||||
text: "Basic Action",
|
||||
active: true,
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Layout>
|
||||
<PageHeader :title="title" :items="items" />
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<table class="body-wrap" style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; width: 100%; background-color: transparent; margin: 0;">
|
||||
<tr style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;">
|
||||
<td style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; margin: 0;" valign="top"></td>
|
||||
<td class="container" width="600" style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; display: block !important; max-width: 600px !important; clear: both !important; margin: 0 auto;" valign="top">
|
||||
<div class="content" style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; max-width: 600px; display: block; margin: 0 auto; padding: 20px;">
|
||||
<table class="main" width="100%" cellpadding="0" cellspacing="0" itemprop="action" itemscope itemtype="http://schema.org/ConfirmAction" style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; border-radius: 3px; margin: 0; border: none;">
|
||||
<tr style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;">
|
||||
<td class="content-wrap" style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; color: #495057; font-size: 14px; vertical-align: top; margin: 0;padding: 30px; box-shadow: 0 0.75rem 1.5rem rgba(18,38,63,.03); ;border-radius: 7px; background-color: #fff;" valign="top">
|
||||
<meta itemprop="name" content="Confirm Email" style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;" />
|
||||
<table width="100%" cellpadding="0" cellspacing="0" style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;">
|
||||
<tr style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;">
|
||||
<td class="content-block" style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; margin: 0; padding: 0 0 20px;" valign="top">
|
||||
Please confirm your email address by clicking the link below.
|
||||
</td>
|
||||
</tr>
|
||||
<tr style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;">
|
||||
<td class="content-block" style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; margin: 0; padding: 0 0 20px;" valign="top">
|
||||
We may need to send you critical information about our service and it is important that we have an accurate email address.
|
||||
</td>
|
||||
</tr>
|
||||
<tr style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;">
|
||||
<td class="content-block" itemprop="handler" itemscope itemtype="http://schema.org/HttpActionHandler" style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; margin: 0; padding: 0 0 20px;" valign="top">
|
||||
<a href="#" itemprop="url" style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; color: #FFF; text-decoration: none; line-height: 2em; font-weight: bold; text-align: center; cursor: pointer; display: inline-block; border-radius: 5px; text-transform: capitalize; background-color: #34c38f; margin: 0; border-color: #34c38f; border-style: solid; border-width: 8px 16px;">Confirm
|
||||
email address</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;">
|
||||
<td class="content-block" style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; margin: 0; padding: 0 0 20px;" valign="top">
|
||||
<b>Skote</b>
|
||||
<p>Support Team</p>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;">
|
||||
<td class="content-block" style="text-align: center;font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; margin: 0; padding: 0;" valign="top">
|
||||
© 2021 Skote
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<!-- end table -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</Layout>
|
||||
</template>
|
||||
|
|
@ -1,118 +0,0 @@
|
|||
<script>
|
||||
import Layout from "../../../layouts/main";
|
||||
import PageHeader from "@/components/page-header";
|
||||
import appConfig from "@/app.config";
|
||||
|
||||
/**
|
||||
* Email-template-billing component
|
||||
*/
|
||||
export default {
|
||||
page: {
|
||||
title: "Billing Email",
|
||||
meta: [{ name: "description", content: appConfig.description }],
|
||||
},
|
||||
components: { Layout, PageHeader },
|
||||
data() {
|
||||
return {
|
||||
title: "Billing Email",
|
||||
items: [
|
||||
{
|
||||
text: "Email Template",
|
||||
href: "/",
|
||||
},
|
||||
{
|
||||
text: "Billing Email",
|
||||
active: true,
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Layout>
|
||||
<PageHeader :title="title" :items="items" />
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<table class="body-wrap" style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; width: 100%; background-color: transparent; margin: 0;">
|
||||
<tr style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;">
|
||||
<td style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; margin: 0;" valign="top"></td>
|
||||
<td class="container" width="600" style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; display: block !important; max-width: 600px !important; clear: both !important; margin: 0 auto;" valign="top">
|
||||
<div class="content" style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; max-width: 600px; display: block; margin: 0 auto; padding: 20px;">
|
||||
<table class="main" width="100%" cellpadding="0" cellspacing="0" style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; border-radius: 3px; margin: 0; border: none;">
|
||||
<tr style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;">
|
||||
<td class="content-wrap aligncenter" style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; margin: 0;padding: 20px; color: #495057; border: 2px solid #1d1e3a;border-radius: 7px; background-color: #fff;" align="center" valign="top">
|
||||
<table width="100%" cellpadding="0" cellspacing="0" style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;">
|
||||
<tr style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;">
|
||||
<td class="content-block" style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; margin: 0; padding: 0 0 20px;" valign="top">
|
||||
<h2 class="aligncenter" style="font-family: 'Helvetica Neue',Helvetica,Arial,'Lucida Grande',sans-serif; box-sizing: border-box; font-size: 24px; color: #000; line-height: 1.2em; font-weight: 400; text-align: center; margin: 40px 0 0;" align="center">Thanks for using <b style="font-weight: 600; text-transform: uppercase;">Skote</b>.</h2>
|
||||
</td>
|
||||
</tr>
|
||||
<tr style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;">
|
||||
<td class="content-block aligncenter" style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; text-align: center; margin: 0; padding: 0 0 20px;" align="center" valign="top">
|
||||
<table class="invoice" style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; text-align: left; width: 80%; margin: 40px auto;">
|
||||
<tr style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;">
|
||||
<td style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; margin: 0; padding: 5px 0;" valign="top"><b>Company Name</b>
|
||||
<br style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;" />Invoice #6521
|
||||
<br style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;" />August 01 2017
|
||||
</td>
|
||||
</tr>
|
||||
<tr style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;">
|
||||
<td style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; margin: 0; padding: 5px 0;" valign="top">
|
||||
<table class="invoice-items" cellpadding="0" cellspacing="0" style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; width: 100%; margin: 0;">
|
||||
<tr style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;">
|
||||
<td style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; border-top-width: 1px; border-top-color: #eee; border-top-style: solid; margin: 0; padding: 5px 0;" valign="top">BS-200 (1 Pc)
|
||||
</td>
|
||||
<td class="alignright" style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; text-align: right; border-top-width: 1px; border-top-color: #eee; border-top-style: solid; margin: 0; padding: 5px 0;" align="right" valign="top">$10.99
|
||||
</td>
|
||||
</tr>
|
||||
<tr style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;">
|
||||
<td style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; border-top-width: 1px; border-top-color: #eee; border-top-style: solid; margin: 0; padding: 5px 0;" valign="top">BS-400 (2 Pcs)
|
||||
</td>
|
||||
<td class="alignright" style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; text-align: right; border-top-width: 1px; border-top-color: #eee; border-top-style: solid; margin: 0; padding: 5px 0;" align="right" valign="top">$60.00
|
||||
</td>
|
||||
</tr>
|
||||
<tr style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;">
|
||||
<td style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; border-top-width: 1px; border-top-color: #eee; border-top-style: solid; margin: 0; padding: 5px 0;" valign="top">BS-1000 (1 Pc)
|
||||
</td>
|
||||
<td class="alignright" style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; text-align: right; border-top-width: 1px; border-top-color: #eee; border-top-style: solid; margin: 0; padding: 5px 0;" align="right" valign="top">$600.00
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="total" style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;">
|
||||
<td class="alignright" width="80%" style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; text-align: right; border-top-width: 2px; border-top-color: #333; border-top-style: solid; border-bottom-color: #333; border-bottom-width: 2px; border-bottom-style: solid; font-weight: 700; margin: 0; padding: 5px 0;" align="right" valign="top">Total
|
||||
</td>
|
||||
<td class="alignright" style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; text-align: right; border-top-width: 2px; border-top-color: #333; border-top-style: solid; border-bottom-color: #333; border-bottom-width: 2px; border-bottom-style: solid; font-weight: 700; margin: 0; padding: 5px 0;" align="right" valign="top">$670.99
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
<tr style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;">
|
||||
<td class="content-block aligncenter" style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; text-align: center; margin: 0; padding: 0 0 20px;" align="center" valign="top">
|
||||
Skote Inc. 2896 Howell Rd, Russellville, AR, 72823
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;">
|
||||
<td class="content-block" style="text-align: center;font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; margin: 0; padding: 0;" valign="top">
|
||||
© 2021 Skote
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<!-- end table -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</Layout>
|
||||
</template>
|
||||
|
|
@ -1,47 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="btn-group me-2 mb-2 mb-sm-0">
|
||||
<button type="button" class="btn btn-primary">
|
||||
<i class="fa fa-inbox"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary">
|
||||
<i class="fa fa-exclamation-circle"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary">
|
||||
<i class="far fa-trash-alt"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<b-dropdown class="btn-group me-2 mb-2 mb-sm-0" variant="primary">
|
||||
<template v-slot:button-content>
|
||||
<i class="fa fa-folder"></i>
|
||||
<i class="mdi mdi-chevron-down ms-2"></i>
|
||||
</template>
|
||||
|
||||
<a class="dropdown-item" href="javascript: void(0);">Updates</a>
|
||||
<a class="dropdown-item" href="javascript: void(0);">Social</a>
|
||||
<a class="dropdown-item" href="javascript: void(0);">Team Manage</a>
|
||||
</b-dropdown>
|
||||
|
||||
<b-dropdown class="btn-group me-2 mb-2 mb-sm-0" variant="primary">
|
||||
<template v-slot:button-content>
|
||||
<i class="fa fa-tag"></i>
|
||||
<i class="mdi mdi-chevron-down ms-2"></i>
|
||||
</template>
|
||||
<a class="dropdown-item" href="javascript: void(0);">Updates</a>
|
||||
<a class="dropdown-item" href="javascript: void(0);">Social</a>
|
||||
<a class="dropdown-item" href="javascript: void(0);">Team Manage</a>
|
||||
</b-dropdown>
|
||||
|
||||
<b-dropdown class="btn-group me-2 mb-2 mb-sm-0" variant="primary">
|
||||
<template v-slot:button-content>
|
||||
More
|
||||
<i class="mdi mdi-dots-vertical ms-2"></i>
|
||||
</template>
|
||||
<b-dropdown-item href="javascript: void(0);">Mark as Unread</b-dropdown-item>
|
||||
<b-dropdown-item href="javascript: void(0);">Add to Tasks</b-dropdown-item>
|
||||
<b-dropdown-item href="javascript: void(0);">Add Star</b-dropdown-item>
|
||||
<b-dropdown-item href="javascript: void(0);">Mute</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
</div>
|
||||
</template>
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,304 +0,0 @@
|
|||
<script>
|
||||
import Datepicker from "vue3-datepicker";
|
||||
import { ref } from 'vue'
|
||||
|
||||
import Switches from "vue-switches";
|
||||
import Multiselect from "@vueform/multiselect";
|
||||
|
||||
import Layout from "../../layouts/main";
|
||||
import PageHeader from "@/components/page-header";
|
||||
import appConfig from "@/app.config";
|
||||
|
||||
/**
|
||||
* Advanced-form component
|
||||
*/
|
||||
export default {
|
||||
page: {
|
||||
title: "Form Advanced",
|
||||
meta: [{ name: "description", content: appConfig.description }],
|
||||
},
|
||||
components: {
|
||||
Datepicker,
|
||||
Switches,
|
||||
Multiselect,
|
||||
Layout,
|
||||
PageHeader,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
picked: ref(new Date()),
|
||||
title: "Form Advanced",
|
||||
items: [
|
||||
{
|
||||
text: "Forms",
|
||||
href: "/",
|
||||
},
|
||||
{
|
||||
text: "Form Advanced",
|
||||
active: true,
|
||||
},
|
||||
],
|
||||
defaultdate: "",
|
||||
autoClose: ref(new Date()),
|
||||
daterange: ref(new Date()),
|
||||
|
||||
demoMonth: ref(new Date()),
|
||||
demoYear: ref(new Date()),
|
||||
time: ref(new Date()),
|
||||
enabled: false,
|
||||
enabled1: false,
|
||||
enabled2: false,
|
||||
enabled3: false,
|
||||
enabled4: false,
|
||||
enabled5: false,
|
||||
small: false,
|
||||
small1: false,
|
||||
small2: false,
|
||||
small3: false,
|
||||
danger: false,
|
||||
info: false,
|
||||
success: false,
|
||||
primary: false,
|
||||
secondary: false,
|
||||
customColor: false,
|
||||
customColor1: false,
|
||||
customColor2: false,
|
||||
customColor3: false,
|
||||
value: null,
|
||||
value1: null,
|
||||
options: [
|
||||
"Alaska",
|
||||
"Hawaii",
|
||||
"California",
|
||||
"Nevada",
|
||||
"Oregon",
|
||||
"Washington",
|
||||
"Arizona",
|
||||
"Colorado",
|
||||
"Idaho",
|
||||
"Montana",
|
||||
"Nebraska",
|
||||
"New Mexico",
|
||||
"North Dakota",
|
||||
"Utah",
|
||||
"Wyoming",
|
||||
"Alabama",
|
||||
"Arkansas",
|
||||
"Illinois",
|
||||
"Iowa",
|
||||
],
|
||||
maxlen: "",
|
||||
data: "",
|
||||
option: "",
|
||||
textarea: "",
|
||||
defaultNull: null,
|
||||
defaultspinval: 1,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Layout>
|
||||
<PageHeader :title="title" :items="items" />
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">Select2</h4>
|
||||
<p
|
||||
class="card-title-desc"
|
||||
>A mobile and touch friendly input spinner component for Bootstrap</p>
|
||||
<div class="col-sm-8">
|
||||
<label>Single Select</label>
|
||||
<multiselect v-model="value" :options="options"></multiselect>
|
||||
|
||||
<label class="mt-3">Multiple Select</label>
|
||||
<multiselect v-model="value1" :options="options" :mode="'multiple'"></multiselect>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">Css Switch</h4>
|
||||
<p class="card-title-desc">Here are a few types of switches.</p>
|
||||
|
||||
<switches v-model="enabled" type-bold="true" class="mb-0"></switches>
|
||||
<switches v-model="enabled1" type-bold="false" color="warning" class="ms-1 mb-0"></switches>
|
||||
<switches v-model="enabled2" type-bold="false" color="danger" class="ms-1 mb-0"></switches>
|
||||
<switches v-model="enabled3" type-bold="false" color="primary" class="ms-1 mb-0"></switches>
|
||||
<switches v-model="enabled4" type-bold="false" color="success" class="ms-1 mb-0"></switches>
|
||||
<switches v-model="enabled5" type-bold="false" color="info" class="ms-1 mb-0"></switches>
|
||||
<h5 class="mt-4 font-size-14 mb-4">Small switch</h5>
|
||||
|
||||
<div>
|
||||
<switches v-model="small"></switches>
|
||||
<switches v-model="small1" color="warning" class="ms-1"></switches>
|
||||
<switches v-model="small2" color="danger" class="ms-1"></switches>
|
||||
<switches v-model="small3" color="success" class="ms-1"></switches>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">Date Picker</h4>
|
||||
<p class="card-title-desc">Examples of bootstrap datepicker.</p>
|
||||
|
||||
<div>
|
||||
<div class="mb-3">
|
||||
<label>Default Date Picker</label>
|
||||
<br />
|
||||
<datepicker v-model="picked" :first-day-of-week="1" lang="en" confirm class="form-control"></datepicker>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label>Auto close</label>
|
||||
<br />
|
||||
<datepicker v-model="autoClose" :first-day-of-week="1" lang="en" class="form-control"></datepicker>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label>Date Range</label>
|
||||
<br />
|
||||
<datepicker class="form-control" v-model="daterange" range append-to-body lang="en" confirm></datepicker>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label>Month View</label>
|
||||
<br />
|
||||
<datepicker
|
||||
class="form-control"
|
||||
v-model="demoMonth"
|
||||
:startingView="'month'"
|
||||
lang="en"
|
||||
confirm
|
||||
placeholder="Select Month"
|
||||
></datepicker>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label>Year View</label>
|
||||
<br />
|
||||
<datepicker
|
||||
class="form-control"
|
||||
v-model="demoYear"
|
||||
:startingView="'year'"
|
||||
lang="en"
|
||||
confirm
|
||||
placeholder="Select Year"
|
||||
></datepicker>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label>Time View</label>
|
||||
<br />
|
||||
<datepicker
|
||||
class="form-control"
|
||||
v-model="time"
|
||||
:minimumView="'time'"
|
||||
placeholder="hh:mm:ss a"
|
||||
></datepicker>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End datepicker -->
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">Bootstrap MaxLength</h4>
|
||||
<p class="card-title-desc">Uses the HTML5 attribute "maxlength" to work.</p>
|
||||
|
||||
<label class="mb-1 fw-medium">Default usage</label>
|
||||
<p
|
||||
class="text-muted font-13"
|
||||
>The badge will show up by default when the remaining chars are 10 or less:</p>
|
||||
<input v-model="maxlen" type="text" class="form-control" :maxlength="10" />
|
||||
<div v-if="maxlen" class="text-center">
|
||||
<p
|
||||
class="badge position-absolute"
|
||||
:class="{ 'bg-success': maxlen.length !== 10,
|
||||
'bg-danger': maxlen.length === 10 }"
|
||||
>{{ maxlen.length }} / 10</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="mb-1 mt-3 fw-medium">Threshold value</label>
|
||||
<p class="text-muted font-13">
|
||||
Do you want the badge to show up when there are 20 chars or less? Use the
|
||||
<code>threshold</code>
|
||||
option:
|
||||
</p>
|
||||
<input v-model="data" type="text" :maxlength="25" class="form-control" />
|
||||
<div class="text-center">
|
||||
<p
|
||||
v-if="data"
|
||||
class="badge position-absolute"
|
||||
:class="{ 'bg-success': data.length !== 25,
|
||||
'bg-danger': data.length === 25 }"
|
||||
>{{ data.length }} / 25</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="mb-1 mt-3 fw-medium">All the options</label>
|
||||
<p class="text-muted font-13">
|
||||
Please note: if the
|
||||
<code>alwaysShow</code> option is enabled, the
|
||||
<code>threshold</code> option
|
||||
is
|
||||
ignored.
|
||||
</p>
|
||||
<input v-model="option" type="text" class="form-control" :maxlength="25" />
|
||||
<div class="text-center">
|
||||
<p
|
||||
v-if="option"
|
||||
class="badge position-absolute"
|
||||
:class="{ 'bg-success': option.length !== 25,
|
||||
'bg-danger': option.length === 25 }"
|
||||
>
|
||||
You typed
|
||||
{{ option.length }} out of 25 chars available.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="mb-1 mt-3 fw-medium">Textarea</label>
|
||||
<p
|
||||
class="text-muted font-13"
|
||||
>Bootstrap maxlength supports textarea as well as inputs. Even on old IE.</p>
|
||||
<textarea
|
||||
v-model="textarea"
|
||||
class="form-control"
|
||||
:maxlength="225"
|
||||
rows="3"
|
||||
placeholder="This textarea has a limit of 225 chars."
|
||||
></textarea>
|
||||
<div class="text-center">
|
||||
<p
|
||||
v-if="textarea"
|
||||
class="badge position-absolute"
|
||||
:class="{ 'bg-success': textarea.length !== 225,
|
||||
'bg-danger': textarea.length === 225 }"
|
||||
>
|
||||
{{ textarea.length }} /
|
||||
225
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
</template>
|
||||
|
|
@ -1,77 +0,0 @@
|
|||
<script>
|
||||
import CKEditor from "@ckeditor/ckeditor5-vue";
|
||||
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
|
||||
|
||||
import Layout from "../../layouts/main";
|
||||
import PageHeader from "@/components/page-header";
|
||||
import appConfig from "@/app.config";
|
||||
|
||||
/**
|
||||
* Editors component
|
||||
*/
|
||||
export default {
|
||||
page: {
|
||||
title: "Form Editors",
|
||||
meta: [{ name: "description", content: appConfig.description }],
|
||||
},
|
||||
components: { Layout, PageHeader, ckeditor: CKEditor.component },
|
||||
data() {
|
||||
return {
|
||||
title: "Form Editors",
|
||||
items: [
|
||||
{
|
||||
text: "Forms",
|
||||
href: "/",
|
||||
},
|
||||
{
|
||||
text: "Form Editors",
|
||||
active: true,
|
||||
},
|
||||
],
|
||||
editor: ClassicEditor,
|
||||
editorData:
|
||||
"<h3>Hello World!</h3><h5><b>This is an simple editable area.</b></h5>",
|
||||
content: "<h1>Some initial content</h1>",
|
||||
|
||||
plugins: [
|
||||
"advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker",
|
||||
"searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
|
||||
"save table contextmenu directionality emoticons template paste textcolor",
|
||||
],
|
||||
toolbar:
|
||||
"insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | l ink image | print preview media fullpage | forecolor backcolor emoticons",
|
||||
options: {
|
||||
height: 300,
|
||||
style_formats: [
|
||||
{ title: "Bold text", inline: "b" },
|
||||
{ title: "Red text", inline: "span", styles: { color: "#ff0000" } },
|
||||
{ title: "Red header", block: "h1", styles: { color: "#ff0000" } },
|
||||
{ title: "Example 1", inline: "span", classes: "example1" },
|
||||
{ title: "Example 2", inline: "span", classes: "example2" },
|
||||
{ title: "Table styles" },
|
||||
{ title: "Table row 1", selector: "tr", classes: "tablerow1" },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Layout>
|
||||
<PageHeader :title="title" :items="items" />
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">CK Editor</h4>
|
||||
<p class="card-title-desc">Super simple wysiwyg editor on Bootstrap</p>
|
||||
<!-- Editor -->
|
||||
<ckeditor v-model="editorData" :editor="editor"></ckeditor>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</Layout>
|
||||
</template>
|
||||
|
|
@ -1,916 +0,0 @@
|
|||
<script>
|
||||
import Layout from "../../layouts/main";
|
||||
import PageHeader from "@/components/page-header";
|
||||
import appConfig from "@/app.config";
|
||||
|
||||
/**
|
||||
* Form-element component
|
||||
*/
|
||||
export default {
|
||||
page: {
|
||||
title: "Form Elements",
|
||||
meta: [{ name: "description", content: appConfig.description }],
|
||||
},
|
||||
components: { Layout, PageHeader },
|
||||
data() {
|
||||
return {
|
||||
title: "Form Elements",
|
||||
items: [
|
||||
{
|
||||
text: "Forms",
|
||||
href: "/",
|
||||
},
|
||||
{
|
||||
text: "Form Elements",
|
||||
active: true,
|
||||
},
|
||||
],
|
||||
selectedprimary: "primary",
|
||||
selectedinfo: "info",
|
||||
selecteddanger: "danger",
|
||||
selectedwarning: "warning",
|
||||
selectedsuccess: "success",
|
||||
selectedToogle: "A",
|
||||
selectedRadioDefault: "a",
|
||||
selectedRadioDefault1: "a",
|
||||
selectedRadioDefault2: "a",
|
||||
selectedRadioDefault3: "a",
|
||||
selectedRadioDefault4: "a",
|
||||
selectedRadioDefault5: "a",
|
||||
selectedRadioDefault6: "a",
|
||||
selectedRadioDefault7: "a",
|
||||
selectedRadioDefault8: "a",
|
||||
selectedRadioDefault9: "a",
|
||||
selectedRadioDefault10: "a",
|
||||
selectedRadioDefault11: "a",
|
||||
selectedRadioDefault12: "a",
|
||||
selectedRadioDefault13: "a",
|
||||
selectedRadioDefault14: "a",
|
||||
status: "accepted",
|
||||
rightcheck: "accepted",
|
||||
primarycheck: "accepted",
|
||||
successcheck: "accepted",
|
||||
infocheck: "accepted",
|
||||
warningcheck: "accepted",
|
||||
dangercheck: "accepted",
|
||||
primaryoutlinecheck: "accepted",
|
||||
infooutlinecheck: "accepted",
|
||||
warningoutlinecheck: "accepted",
|
||||
dangeroutlinecheck: "accepted",
|
||||
checked: true,
|
||||
checkedf: false,
|
||||
smchecked: true,
|
||||
lgchecked: true,
|
||||
selectedSwitch: [], // Must be an array reference!
|
||||
optionsSwtich: [
|
||||
{ text: 'Red', value: 'red' },
|
||||
{ text: 'Green', value: 'green' },
|
||||
{ text: 'Yellow (disabled)', value: 'yellow', disabled: true },
|
||||
{ text: 'Blue', value: 'blue' }
|
||||
]
|
||||
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Layout>
|
||||
<PageHeader :title="title" :items="items" />
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">Textual inputs</h4>
|
||||
<p class="card-title-desc">
|
||||
Here are examples of
|
||||
<code>.form-control</code> applied to each textual HTML5
|
||||
<code><input></code>
|
||||
<code>type</code>.
|
||||
</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<form class="form-horizontal" role="form">
|
||||
<b-form-group
|
||||
class="mb-3"
|
||||
id="example text"
|
||||
label-cols-lg="2"
|
||||
label="Text"
|
||||
label-for="text"
|
||||
>
|
||||
<b-form-input
|
||||
for="text"
|
||||
value="Artisanal kale"
|
||||
></b-form-input>
|
||||
</b-form-group>
|
||||
|
||||
<b-form-group
|
||||
class="mb-3"
|
||||
id="example-search"
|
||||
label-cols-sm="2"
|
||||
label-cols-lg="2"
|
||||
label="Search"
|
||||
label-for="search"
|
||||
>
|
||||
<b-form-input
|
||||
id="search"
|
||||
value="How do I shoot web"
|
||||
type="search"
|
||||
name="search"
|
||||
></b-form-input>
|
||||
</b-form-group>
|
||||
|
||||
<b-form-group
|
||||
class="mb-3"
|
||||
id="example-email"
|
||||
label-cols-sm="2"
|
||||
label-cols-lg="2"
|
||||
label="Email"
|
||||
label-for="email"
|
||||
>
|
||||
<b-form-input
|
||||
id="email"
|
||||
value="bootstrap@example.com"
|
||||
></b-form-input>
|
||||
</b-form-group>
|
||||
|
||||
<b-form-group
|
||||
class="mb-3"
|
||||
id="example-url"
|
||||
label-cols-sm="2"
|
||||
label-cols-lg="2"
|
||||
label="URL"
|
||||
label-for="url"
|
||||
>
|
||||
<b-form-input
|
||||
id="url"
|
||||
value="https://getbootstrap.com"
|
||||
type="url"
|
||||
name="url"
|
||||
></b-form-input>
|
||||
</b-form-group>
|
||||
|
||||
<b-form-group
|
||||
class="mb-3"
|
||||
id="example-tel"
|
||||
label-cols-sm="2"
|
||||
label-cols-lg="2"
|
||||
label="Telephone"
|
||||
label-for="tele"
|
||||
>
|
||||
<b-form-input
|
||||
id="tele"
|
||||
value="1-(555)-555-5555"
|
||||
type="tel"
|
||||
name="tel"
|
||||
></b-form-input>
|
||||
</b-form-group>
|
||||
|
||||
<b-form-group
|
||||
class="mb-3"
|
||||
id="example-password"
|
||||
label-cols-sm="2"
|
||||
label-cols-lg="2"
|
||||
label="Password"
|
||||
label-for="pwd"
|
||||
>
|
||||
<b-form-input
|
||||
id="pwd"
|
||||
type="password"
|
||||
value="password"
|
||||
></b-form-input>
|
||||
</b-form-group>
|
||||
|
||||
<b-form-group
|
||||
class="mb-3"
|
||||
id="example-number"
|
||||
label-cols-sm="2"
|
||||
label-cols-lg="2"
|
||||
label="Number"
|
||||
label-for="number"
|
||||
>
|
||||
<b-form-input
|
||||
id="number"
|
||||
value="42"
|
||||
type="number"
|
||||
name="number"
|
||||
></b-form-input>
|
||||
</b-form-group>
|
||||
|
||||
<b-form-group
|
||||
class="mb-3"
|
||||
id="example-date-time"
|
||||
label-cols-sm="2"
|
||||
label-cols-lg="2"
|
||||
label="Date and time"
|
||||
label-for="date-time"
|
||||
>
|
||||
<b-form-input
|
||||
id="date-time"
|
||||
value="2019-08-19T13:45:00"
|
||||
type="datetime-local"
|
||||
></b-form-input>
|
||||
</b-form-group>
|
||||
|
||||
<b-form-group
|
||||
class="mb-3"
|
||||
id="example-date"
|
||||
label-cols-sm="2"
|
||||
label-cols-lg="2"
|
||||
label="Date"
|
||||
label-for="date"
|
||||
>
|
||||
<b-form-input
|
||||
id="date"
|
||||
value="2019-08-19"
|
||||
type="date"
|
||||
></b-form-input>
|
||||
</b-form-group>
|
||||
|
||||
<b-form-group
|
||||
class="mb-3"
|
||||
id="example-month"
|
||||
label-cols-sm="2"
|
||||
label-cols-lg="2"
|
||||
label="Month"
|
||||
label-for="month"
|
||||
>
|
||||
<b-form-input
|
||||
id="month"
|
||||
value="2019-08"
|
||||
type="month"
|
||||
></b-form-input>
|
||||
</b-form-group>
|
||||
|
||||
<b-form-group
|
||||
class="mb-3"
|
||||
id="example-week"
|
||||
label-cols-sm="2"
|
||||
label-cols-lg="2"
|
||||
label="Week"
|
||||
label-for="week"
|
||||
>
|
||||
<b-form-input
|
||||
id="week"
|
||||
value="2019-W33"
|
||||
type="week"
|
||||
></b-form-input>
|
||||
</b-form-group>
|
||||
|
||||
<b-form-group
|
||||
class="mb-3"
|
||||
id="example-time"
|
||||
label-cols-sm="2"
|
||||
label-cols-lg="2"
|
||||
label="Time"
|
||||
label-for="time"
|
||||
>
|
||||
<b-form-input
|
||||
id="time"
|
||||
value="13:45:00"
|
||||
type="time"
|
||||
></b-form-input>
|
||||
</b-form-group>
|
||||
|
||||
<b-form-group
|
||||
class="mb-3"
|
||||
id="example-color"
|
||||
label-cols-sm="2"
|
||||
label-cols-lg="2"
|
||||
label="Color"
|
||||
label-for="color"
|
||||
>
|
||||
<b-form-input
|
||||
class="form-control-color mw-100"
|
||||
id="color"
|
||||
type="color"
|
||||
name="color"
|
||||
value="#556ee6"
|
||||
></b-form-input>
|
||||
</b-form-group>
|
||||
|
||||
<div class="mb-3 row">
|
||||
<label class="col-md-2 col-form-label">Select</label>
|
||||
<div class="col-md-10">
|
||||
<select class="form-control">
|
||||
<option>Select</option>
|
||||
<option>Large select</option>
|
||||
<option>Small select</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<label for="exampleDataList" class="col-md-2 col-form-label"
|
||||
>Datalists</label
|
||||
>
|
||||
<div class="col-md-10">
|
||||
<input
|
||||
class="form-control"
|
||||
list="datalistOptions"
|
||||
id="exampleDataList"
|
||||
placeholder="Type to search..."
|
||||
/>
|
||||
<datalist id="datalistOptions">
|
||||
<option value="San Francisco"></option>
|
||||
<option value="New York"></option>
|
||||
<option value="Seattle"></option>
|
||||
<option value="Los Angeles"></option>
|
||||
<option value="Chicago"></option>
|
||||
</datalist>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">Sizing</h4>
|
||||
<p class="card-title-desc">
|
||||
Set heights using size like
|
||||
<code>lg</code> and <code>sm</code>.
|
||||
</p>
|
||||
<div>
|
||||
<div class="mb-4">
|
||||
<b-form-input
|
||||
id="input-md"
|
||||
placeholder="Default input"
|
||||
></b-form-input>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<b-form-input
|
||||
id="input-small"
|
||||
size="sm"
|
||||
placeholder=".form-control-sm"
|
||||
></b-form-input>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<b-form-input
|
||||
id="input-lg"
|
||||
size="lg"
|
||||
placeholder=".form-control-lg"
|
||||
></b-form-input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">Range Inputs</h4>
|
||||
<p class="card-title-desc">
|
||||
Set horizontally scrollable range inputs using
|
||||
<code>.form-control-range</code>.
|
||||
</p>
|
||||
|
||||
<div>
|
||||
<h5 class="font-size-14">Example</h5>
|
||||
<input
|
||||
id="formControlRange"
|
||||
type="range"
|
||||
class="form-control-range form-range"
|
||||
/>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<h5 class="font-size-14">Custom Range</h5>
|
||||
<b-form-input
|
||||
id="custom-range"
|
||||
type="range"
|
||||
class="form-range"
|
||||
></b-form-input>
|
||||
|
||||
<b-form-input
|
||||
id="customRange2"
|
||||
class="mt-4 form-range"
|
||||
type="range"
|
||||
min="0"
|
||||
max="5"
|
||||
></b-form-input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">Checkboxes</h4>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-3 col-sm-6">
|
||||
<div class="mt-4">
|
||||
<h5 class="font-size-14 mb-4">
|
||||
<i class="mdi mdi-arrow-right text-primary me-1"></i>
|
||||
Default Checkboxes
|
||||
</h5>
|
||||
|
||||
<b-form-checkbox
|
||||
id="checkbox-1"
|
||||
v-model="status"
|
||||
name="checkbox-1"
|
||||
value="not_accepted"
|
||||
unchecked-value="not_accepted"
|
||||
>
|
||||
Default checkbox
|
||||
</b-form-checkbox>
|
||||
|
||||
<b-form-checkbox
|
||||
id="checkbox-1"
|
||||
v-model="status"
|
||||
name="checkbox-1"
|
||||
value="accepted"
|
||||
unchecked-value="not_accepted"
|
||||
>
|
||||
Default checkbox Right
|
||||
</b-form-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-3 col-sm-6">
|
||||
<div class="mt-4">
|
||||
<h5 class="font-size-14 mb-4">
|
||||
<i class="mdi mdi-arrow-right text-primary me-1"></i> Form
|
||||
Checkboxes Right
|
||||
</h5>
|
||||
|
||||
<div class="form-check-right">
|
||||
<b-form-checkbox
|
||||
id="checkbox-1"
|
||||
v-model="status"
|
||||
name="checkbox-1"
|
||||
value="not_accepted"
|
||||
unchecked-value="not_accepted"
|
||||
>
|
||||
Default checkbox
|
||||
</b-form-checkbox>
|
||||
</div>
|
||||
<br/>
|
||||
<div class="form-check-right">
|
||||
<b-form-checkbox
|
||||
id="checkbox-1"
|
||||
v-model="status"
|
||||
name="checkbox-1"
|
||||
value="accepted"
|
||||
unchecked-value="not_accepted"
|
||||
>
|
||||
Default checkbox Right
|
||||
</b-form-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-3 col-sm-6">
|
||||
<div class="mt-4">
|
||||
<h5 class="font-size-14">
|
||||
<i class="mdi mdi-arrow-right text-primary me-1"></i> Custom
|
||||
Checkboxes colors
|
||||
</h5>
|
||||
<p class="sub-header mb-4">
|
||||
Add class
|
||||
<code>.form-check-*</code> for a color Checkboxes
|
||||
</p>
|
||||
|
||||
<div>
|
||||
<div class="form-check-primary mb-3">
|
||||
<b-form-checkbox
|
||||
id="checkbox-1"
|
||||
v-model="status"
|
||||
name="checkbox-1"
|
||||
value="accepted"
|
||||
unchecked-value="not_accepted"
|
||||
>
|
||||
Checkbox Primary
|
||||
</b-form-checkbox>
|
||||
</div>
|
||||
<div class="form-check-success mb-3">
|
||||
<b-form-checkbox
|
||||
id="checkbox-1"
|
||||
v-model="status"
|
||||
name="checkbox-1"
|
||||
value="accepted"
|
||||
unchecked-value="not_accepted"
|
||||
>
|
||||
Checkbox Success
|
||||
</b-form-checkbox>
|
||||
</div>
|
||||
<div class="form-check-info mb-3">
|
||||
<b-form-checkbox
|
||||
id="checkbox-1"
|
||||
v-model="status"
|
||||
name="checkbox-1"
|
||||
value="accepted"
|
||||
unchecked-value="not_accepted"
|
||||
>
|
||||
Checkbox Info
|
||||
</b-form-checkbox>
|
||||
</div>
|
||||
<div class="form-check-warning mb-3">
|
||||
<b-form-checkbox
|
||||
id="checkbox-1"
|
||||
v-model="status"
|
||||
name="checkbox-1"
|
||||
value="accepted"
|
||||
unchecked-value="not_accepted"
|
||||
>
|
||||
Checkbox Warning
|
||||
</b-form-checkbox>
|
||||
</div>
|
||||
<div class="form-check-danger mb-3">
|
||||
<b-form-checkbox
|
||||
id="checkbox-1"
|
||||
v-model="status"
|
||||
name="checkbox-1"
|
||||
value="accepted"
|
||||
unchecked-value="not_accepted"
|
||||
>
|
||||
Checkbox Danger
|
||||
</b-form-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-3 col-sm-6">
|
||||
<div class="mt-4">
|
||||
<h5 class="font-size-14">
|
||||
<i class="mdi mdi-arrow-right text-primary me-1"></i> Custom
|
||||
Checkboxes Outline
|
||||
</h5>
|
||||
<p class="sub-header mb-4">
|
||||
Add class
|
||||
<code>.form-checkbox-outline</code> &
|
||||
<code>.form-check-*</code> for a color Checkboxes
|
||||
</p>
|
||||
|
||||
<div>
|
||||
<div class="form-checkbox-outline form-check-primary mb-3">
|
||||
<b-form-checkbox
|
||||
id="checkbox-1"
|
||||
v-model="status"
|
||||
name="checkbox-1"
|
||||
value="accepted"
|
||||
unchecked-value="not_accepted"
|
||||
>
|
||||
Checkbox Outline Primary
|
||||
</b-form-checkbox>
|
||||
</div>
|
||||
|
||||
<div class="form-checkbox-outline form-check-success mb-3">
|
||||
<b-form-checkbox
|
||||
id="checkbox-1"
|
||||
v-model="status"
|
||||
name="checkbox-1"
|
||||
value="accepted"
|
||||
unchecked-value="not_accepted"
|
||||
>
|
||||
Checkbox Outline Success
|
||||
</b-form-checkbox>
|
||||
</div>
|
||||
|
||||
<div class="form-checkbox-outline form-check-info mb-3">
|
||||
<b-form-checkbox
|
||||
id="checkbox-1"
|
||||
v-model="status"
|
||||
name="checkbox-1"
|
||||
value="accepted"
|
||||
unchecked-value="not_accepted"
|
||||
>
|
||||
Checkbox Outline Info
|
||||
</b-form-checkbox>
|
||||
</div>
|
||||
<div class="form-checkbox-outline form-check-warning mb-3">
|
||||
<b-form-checkbox
|
||||
id="checkbox-1"
|
||||
v-model="status"
|
||||
name="checkbox-1"
|
||||
value="accepted"
|
||||
unchecked-value="not_accepted"
|
||||
>
|
||||
Checkbox Outline Warning
|
||||
</b-form-checkbox>
|
||||
</div>
|
||||
<div class="form-checkbox-outline form-check-danger mb-3">
|
||||
<b-form-checkbox
|
||||
id="checkbox-1"
|
||||
v-model="status"
|
||||
name="checkbox-1"
|
||||
value="accepted"
|
||||
unchecked-value="not_accepted"
|
||||
>
|
||||
Checkbox Outline Danger
|
||||
</b-form-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">Radios</h4>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-3 col-sm-6">
|
||||
<div class="mt-4">
|
||||
<h5 class="font-size-14 mb-4">Default Radios</h5>
|
||||
|
||||
<b-form-group v-slot="{ ariaDescribedby1 }">
|
||||
<b-form-radio v-model="selectedRadioDefault" :aria-describedby="ariaDescribedby1" name="some-radios1" value="b">Default Radio</b-form-radio>
|
||||
<b-form-radio v-model="selectedRadioDefault" :aria-describedby="ariaDescribedby1" name="some-radios1" value="a">Default Radio Right</b-form-radio>
|
||||
</b-form-group>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xl-3 col-sm-6">
|
||||
<div class="mt-4">
|
||||
<h5 class="font-size-14 mb-4">Form Radios Right</h5>
|
||||
<div>
|
||||
<b-form-group class="form-check-right" v-slot="{ ariaDescribedby }">
|
||||
<b-form-radio v-model="selectedRadioDefault1" :aria-describedby="ariaDescribedby" name="some-radios2" value="b">Default Radio</b-form-radio>
|
||||
<b-form-radio v-model="selectedRadioDefault1" :aria-describedby="ariaDescribedby" name="some-radios2" value="a">Default Radio Right</b-form-radio>
|
||||
</b-form-group>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xl-3 col-sm-6">
|
||||
<div class="mt-4">
|
||||
<h5 class="font-size-14">
|
||||
<i class="mdi mdi-arrow-right text-primary me-1"></i> Form
|
||||
Radio colors
|
||||
</h5>
|
||||
<p class="sub-header mb-4">
|
||||
Add class <code>.form-radio-* </code> for a color Radios
|
||||
</p>
|
||||
|
||||
<div>
|
||||
|
||||
<b-form-group v-slot="{ ariaDescribedby }" class="form-radio-primary">
|
||||
<b-form-radio v-model="selectedRadioDefault2" :aria-describedby="ariaDescribedby" name="some-radios3" value="a">Radio Primary</b-form-radio>
|
||||
</b-form-group>
|
||||
<b-form-group v-slot="{ ariaDescribedby }" class="form-radio-success">
|
||||
<b-form-radio v-model="selectedRadioDefault3" :aria-describedby="ariaDescribedby" name="some-radios4" value="a">Radio Success</b-form-radio>
|
||||
</b-form-group>
|
||||
<b-form-group v-slot="{ ariaDescribedby }" class="form-radio-info">
|
||||
<b-form-radio v-model="selectedRadioDefault4" :aria-describedby="ariaDescribedby" name="some-radios5" value="a">Radio Info</b-form-radio>
|
||||
</b-form-group>
|
||||
<b-form-group v-slot="{ ariaDescribedby }" class="form-radio-warning">
|
||||
<b-form-radio v-model="selectedRadioDefault5" :aria-describedby="ariaDescribedby" name="some-radios6" value="a">Radio Warning</b-form-radio>
|
||||
</b-form-group>
|
||||
<b-form-group v-slot="{ ariaDescribedby }" class="form-radio-danger">
|
||||
<b-form-radio v-model="selectedRadioDefault6" :aria-describedby="ariaDescribedby" name="some-radios7" value="a">Radio Danger</b-form-radio>
|
||||
</b-form-group>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-3 col-sm-6">
|
||||
<div class="mt-4">
|
||||
<h5 class="font-size-14">
|
||||
<i class="mdi mdi-arrow-right text-primary me-1"></i> Form
|
||||
Radio Outline
|
||||
</h5>
|
||||
<p class="sub-header mb-4">
|
||||
Add class <code>form-radio-outline</code> &
|
||||
<code>.form-radio-* </code> for a color Checkboxes
|
||||
</p>
|
||||
|
||||
<div>
|
||||
<b-form-group v-slot="{ ariaDescribedby }" class="form-radio-outline form-radio-primary">
|
||||
<b-form-radio v-model="selectedRadioDefault7" :aria-describedby="ariaDescribedby" name="some-radios8" value="a">Radio Outline Primary</b-form-radio>
|
||||
</b-form-group>
|
||||
<b-form-group v-slot="{ ariaDescribedby }" class="form-radio-outline form-radio-success">
|
||||
<b-form-radio v-model="selectedRadioDefault8" :aria-describedby="ariaDescribedby" name="some-radios9" value="a">Radio Outline Success</b-form-radio>
|
||||
</b-form-group>
|
||||
<b-form-group v-slot="{ ariaDescribedby }" class="form-radio-outline form-radio-info">
|
||||
<b-form-radio v-model="selectedRadioDefault9" :aria-describedby="ariaDescribedby" name="some-radios10" value="a">Radio Outline Info</b-form-radio>
|
||||
</b-form-group>
|
||||
<b-form-group v-slot="{ ariaDescribedby }" class="form-radio-outline form-radio-warning">
|
||||
<b-form-radio v-model="selectedRadioDefault10" :aria-describedby="ariaDescribedby" name="some-radios11" value="a">Radio Outline Warning</b-form-radio>
|
||||
</b-form-group>
|
||||
<b-form-group v-slot="{ ariaDescribedby }" class="form-radio-outline form-radio-danger">
|
||||
<b-form-radio v-model="selectedRadioDefault11" :aria-describedby="ariaDescribedby" name="some-radios12" value="a">Radio Outline Danger</b-form-radio>
|
||||
</b-form-group>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">Switches</h4>
|
||||
<p class="card-title-desc">
|
||||
A switch has the markup of a custom checkbox but uses the
|
||||
<code>.custom-switch</code> class to render a toggle switch.
|
||||
Switches also support the <code>disabled</code> attribute.
|
||||
</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div>
|
||||
<h5 class="font-size-14 mb-3">Switch examples</h5>
|
||||
|
||||
<div class="mb-3">
|
||||
<b-form-checkbox v-model="checkedf" name="check-button" switch>
|
||||
Default switch checkbox input <b>(Checked: {{ checkedf }})</b>
|
||||
</b-form-checkbox>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<b-form-checkbox v-model="checked" name="check-button" switch>
|
||||
Checked switch checkbox input <b>(Checked: {{ checked }})</b>
|
||||
</b-form-checkbox>
|
||||
</div>
|
||||
|
||||
<b-form-group
|
||||
label="Inline switch style checkboxes"
|
||||
v-slot="{ ariaDescribedby }"
|
||||
>
|
||||
<b-form-checkbox-group
|
||||
v-model="selectedSwitch"
|
||||
:options="optionsSwtich"
|
||||
:aria-describedby="ariaDescribedby"
|
||||
switches
|
||||
></b-form-checkbox-group>
|
||||
</b-form-group>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<div class="mt-4 mt-sm-0">
|
||||
<h5 class="font-size-14 mb-3">Switch sizes</h5>
|
||||
<b-form-checkbox switch size="sm">Small</b-form-checkbox>
|
||||
<b-form-checkbox switch>Default</b-form-checkbox>
|
||||
<b-form-checkbox switch size="lg">Large</b-form-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title mb-4">File browser</h4>
|
||||
|
||||
<div>
|
||||
<h5 class="font-size-14">
|
||||
<i class="mdi mdi-arrow-right text-primary"></i> Default file
|
||||
input
|
||||
</h5>
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="mt-3">
|
||||
<label for="formFile" class="form-label"
|
||||
>Default file input example</label
|
||||
>
|
||||
<input class="form-control" type="file" id="formFile" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="mt-4">
|
||||
<div>
|
||||
<label for="formFileSm" class="form-label"
|
||||
>Small file input example</label
|
||||
>
|
||||
<input
|
||||
class="form-control form-control-sm"
|
||||
id="formFileSm"
|
||||
type="file"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
<div class="col-sm-6">
|
||||
<div class="mt-4">
|
||||
<div>
|
||||
<label for="formFileLg" class="form-label"
|
||||
>Large file input example</label
|
||||
>
|
||||
<input
|
||||
class="form-control form-control-lg"
|
||||
id="formFileLg"
|
||||
type="file"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</div>
|
||||
|
||||
<div class="mt-4 pt-2">
|
||||
<h5 class="font-size-14 mb-0">
|
||||
<i class="mdi mdi-arrow-right text-primary"></i> Custom file
|
||||
input
|
||||
</h5>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="mt-4">
|
||||
<div>
|
||||
<label class="form-label">With Label</label>
|
||||
<div class="input-group mb-3">
|
||||
<label class="input-group-text" for="inputGroupFile01"
|
||||
>Upload</label
|
||||
>
|
||||
<input
|
||||
type="file"
|
||||
class="form-control"
|
||||
id="inputGroupFile01"
|
||||
/>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<input
|
||||
type="file"
|
||||
class="form-control"
|
||||
id="inputGroupFile02"
|
||||
/>
|
||||
<label class="input-group-text" for="inputGroupFile02"
|
||||
>Upload</label
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-6">
|
||||
<div class="mt-4">
|
||||
<div>
|
||||
<label class="form-label">With Button</label>
|
||||
<div class="input-group mb-3">
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
type="button"
|
||||
id="inputGroupFileAddon03"
|
||||
>
|
||||
Button
|
||||
</button>
|
||||
<input
|
||||
type="file"
|
||||
class="form-control"
|
||||
id="inputGroupFile03"
|
||||
aria-describedby="inputGroupFileAddon03"
|
||||
aria-label="Upload"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<input
|
||||
type="file"
|
||||
class="form-control"
|
||||
id="inputGroupFile04"
|
||||
aria-describedby="inputGroupFileAddon04"
|
||||
aria-label="Upload"
|
||||
/>
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
type="button"
|
||||
id="inputGroupFileAddon04"
|
||||
>
|
||||
Button
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</Layout>
|
||||
</template>
|
||||
|
|
@ -1,279 +0,0 @@
|
|||
<script>
|
||||
import Layout from "../../layouts/main";
|
||||
import PageHeader from "@/components/page-header";
|
||||
import appConfig from "@/app.config";
|
||||
|
||||
/**
|
||||
* Form Layouts component
|
||||
*/
|
||||
export default {
|
||||
page: {
|
||||
title: "Form Layouts",
|
||||
meta: [{ name: "description", content: appConfig.description }],
|
||||
},
|
||||
components: { Layout, PageHeader },
|
||||
data() {
|
||||
return {
|
||||
title: "Form Layouts",
|
||||
items: [
|
||||
{
|
||||
text: "Forms",
|
||||
href: "/",
|
||||
},
|
||||
{
|
||||
text: "Form Layouts",
|
||||
active: true,
|
||||
},
|
||||
],
|
||||
selected: null
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Layout>
|
||||
<PageHeader :title="title" :items="items" />
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title mb-4">Form grid layout</h4>
|
||||
|
||||
<b-form>
|
||||
<b-form-group
|
||||
class="mb-3"
|
||||
label="First name"
|
||||
label-for="formrow-firstname-input"
|
||||
>
|
||||
<b-form-input
|
||||
id="formrow-firstname-input"
|
||||
type="text"
|
||||
></b-form-input>
|
||||
</b-form-group>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<b-form-group
|
||||
class="mb-3"
|
||||
label="Email"
|
||||
label-for="formrow-email-input"
|
||||
>
|
||||
<b-form-input
|
||||
id="formrow-email-input"
|
||||
type="email"
|
||||
></b-form-input>
|
||||
</b-form-group>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<b-form-group
|
||||
class="mb-3"
|
||||
label="Password"
|
||||
label-for="formrow-password-input"
|
||||
>
|
||||
<b-form-input
|
||||
id="formrow-password-input"
|
||||
type="password"
|
||||
></b-form-input>
|
||||
</b-form-group>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-4">
|
||||
<b-form-group
|
||||
class="mb-3"
|
||||
label="City"
|
||||
label-for="formrow-inputCity"
|
||||
>
|
||||
<b-form-input
|
||||
id="formrow-inputCity"
|
||||
type="text"
|
||||
></b-form-input>
|
||||
</b-form-group>
|
||||
</div>
|
||||
<div class="col-lg-4">
|
||||
<b-form-group
|
||||
class="mb-3 form-label"
|
||||
id="input-group-1"
|
||||
label="State"
|
||||
label-for="formrow-inputState"
|
||||
>
|
||||
<b-form-select
|
||||
class="form-select"
|
||||
id="formrow-inputState"
|
||||
:options="['Choose...', '...']"
|
||||
type="text"
|
||||
></b-form-select>
|
||||
</b-form-group>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-4">
|
||||
<b-form-group
|
||||
class="mb-3"
|
||||
label="Zip"
|
||||
label-for="formrow-inputZip"
|
||||
>
|
||||
<b-form-input
|
||||
id="formrow-inputZip"
|
||||
type="text"
|
||||
></b-form-input>
|
||||
</b-form-group>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<div class="form-check">
|
||||
<input
|
||||
class="form-check-input"
|
||||
type="checkbox"
|
||||
id="gridCheck"
|
||||
/>
|
||||
<label class="form-check-label" for="gridCheck">
|
||||
Check me out
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<b-button variant="primary">Submit</b-button>
|
||||
</div>
|
||||
</b-form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title mb-4">Horizontal form layout</h4>
|
||||
|
||||
<b-form>
|
||||
<b-form-group
|
||||
class="mb-3"
|
||||
label="First name"
|
||||
label-for="horizontal-firstname-input"
|
||||
label-cols-sm="3"
|
||||
>
|
||||
<b-form-input
|
||||
id="horizontal-firstname-input"
|
||||
type="text"
|
||||
></b-form-input>
|
||||
</b-form-group>
|
||||
|
||||
<b-form-group
|
||||
class="mb-4"
|
||||
label="Email"
|
||||
label-for="horizontal-email-input"
|
||||
label-cols-sm="3"
|
||||
>
|
||||
<b-form-input
|
||||
id="horizontal-email-input"
|
||||
type="email"
|
||||
></b-form-input>
|
||||
</b-form-group>
|
||||
|
||||
<b-form-group
|
||||
class="mb-4"
|
||||
label="Password"
|
||||
label-for="horizontal-password-input"
|
||||
label-cols-sm="3"
|
||||
>
|
||||
<b-form-input
|
||||
id="horizontal-password-input"
|
||||
type="password"
|
||||
></b-form-input>
|
||||
</b-form-group>
|
||||
|
||||
<div class="row justify-content-end">
|
||||
<div class="col-sm-9">
|
||||
<div class="form-check mb-4">
|
||||
<input
|
||||
class="form-check-input"
|
||||
type="checkbox"
|
||||
id="horizontalLayout-Check"
|
||||
/>
|
||||
<label
|
||||
class="form-check-label"
|
||||
for="horizontalLayout-Check"
|
||||
>
|
||||
Remember me
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<b-button variant="primary">Submit</b-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</b-form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title mb-4">Inline forms layout</h5>
|
||||
|
||||
<b-form inline class="row gy-2 gx-3 align-items-center">
|
||||
<div class="col-sm-auto">
|
||||
<label class="visually-hidden" for="inlineFormInputName2"
|
||||
>Name</label
|
||||
>
|
||||
<b-input
|
||||
id="inlineFormInputName2"
|
||||
class="mb-3"
|
||||
placeholder="Jane Doe"
|
||||
></b-input>
|
||||
</div>
|
||||
<div class="col-sm-auto">
|
||||
<label class="sr-only" for="inlineFormemail2">Email</label>
|
||||
<b-input-group prepend="@" class="mb-3">
|
||||
<b-input
|
||||
type="email"
|
||||
id="inlineFormemail2"
|
||||
placeholder="Enter Email"
|
||||
></b-input>
|
||||
</b-input-group>
|
||||
</div>
|
||||
<div class="col-sm-auto pt-1">
|
||||
<label class="visually-hidden" for="autoSizingSelect"
|
||||
>Preference</label
|
||||
>
|
||||
|
||||
<b-form-select class="form-select mb-3" v-model="selected">
|
||||
<b-form-select-option :value="null"
|
||||
>Choose...</b-form-select-option
|
||||
>
|
||||
<b-form-select-option value="a">One</b-form-select-option>
|
||||
<b-form-select-option value="b">Two</b-form-select-option>
|
||||
<b-form-select-option value="b">Thress</b-form-select-option>
|
||||
</b-form-select>
|
||||
</div>
|
||||
<div class="col-sm-auto">
|
||||
<div class="form-check">
|
||||
<input
|
||||
class="form-check-input"
|
||||
type="checkbox"
|
||||
id="autoSizingCheck"
|
||||
/>
|
||||
<label class="form-check-label" for="autoSizingCheck">
|
||||
Remember me
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-auto">
|
||||
<b-button variant="primary" class="w-md">Submit</b-button>
|
||||
</div>
|
||||
</b-form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</Layout>
|
||||
</template>
|
||||
|
|
@ -1,111 +0,0 @@
|
|||
<script>
|
||||
import Layout from "../../layouts/main";
|
||||
import PageHeader from "@/components/page-header";
|
||||
import appConfig from "@/app.config";
|
||||
|
||||
/**
|
||||
* Form-mask component
|
||||
*/
|
||||
export default {
|
||||
page: {
|
||||
title: "Form Mask",
|
||||
meta: [{ name: "description", content: appConfig.description }]
|
||||
},
|
||||
components: {
|
||||
Layout,
|
||||
PageHeader
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
title: "Form Mask",
|
||||
items: [
|
||||
{
|
||||
text: "Forms",
|
||||
href: "/"
|
||||
},
|
||||
{
|
||||
text: "Form Mask",
|
||||
active: true
|
||||
}
|
||||
],
|
||||
digit: "",
|
||||
zipcode: "",
|
||||
crazyzip: "",
|
||||
money: "",
|
||||
date: "",
|
||||
hour: "",
|
||||
datetime: "",
|
||||
ipaddress: "",
|
||||
cnpj: "",
|
||||
cpf: "",
|
||||
celphone: "",
|
||||
ustelephone: "",
|
||||
areacode: "",
|
||||
telephone: ""
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Layout>
|
||||
<PageHeader :title="title" :items="items" />
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title mb-4">Example</h4>
|
||||
<form>
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div>
|
||||
<div>
|
||||
<label for="regexp-mask" class="form-label">Dynamic mask</label>
|
||||
<input type="text" v-maska="['# cm', '#.# cm', '#.## cm']" class="form-control" id="regexp-mask">
|
||||
<div class="text-muted">["# cm", "#.# cm", "#.## cm"]</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<label for="phone-mask" class="form-label">Phone with code</label>
|
||||
<input type="text" v-maska="['+1 (###) ##-##-##', '+1 (###) ###-##-##']" class="form-control" id="phone-mask">
|
||||
<div class="text-muted">+1 (###) ###-####</div>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<label for="number-mask" class="form-label">Credit card</label>
|
||||
<input type="text" v-maska="'#### #### #### ####'" class="form-control" id="number-mask">
|
||||
<div class="text-muted">#### #### #### ####</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="mt-4 mt-lg-0">
|
||||
<div>
|
||||
<label for="date-mask" class="form-label">Date</label>
|
||||
<input type="text" v-maska="'##/##/####'" class="form-control" id="date-mask">
|
||||
<div class="text-muted">##/##/####</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<label class="form-label">Hex color</label>
|
||||
<input type="text" v-maska="{ mask: ['!#HHHHHH', '!#HHHHHH-HH'], tokens: { 'H': { pattern: /[0-9a-fA-F]/, uppercase: true }}}" class="form-control" id="dynamic-mask">
|
||||
<div class="text-muted">!#HHHHHH</div>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<label class="form-label">CPF/CNPJ</label>
|
||||
<input type="text" v-maska="['###.###.###-##', '##.###.###/####-##']" class="form-control" id="currency-mask">
|
||||
<div class="text-muted">["###.###.###-##", "##.###.###/####-##"]</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
</template>
|
||||
|
|
@ -1,265 +0,0 @@
|
|||
<script>
|
||||
import Layout from "../../layouts/main";
|
||||
import PageHeader from "@/components/page-header";
|
||||
import appConfig from "@/app.config";
|
||||
|
||||
/**
|
||||
* Form-repeater Component
|
||||
*/
|
||||
export default {
|
||||
page: {
|
||||
title: "Form Repeater",
|
||||
meta: [{ name: "description", content: appConfig.description }],
|
||||
},
|
||||
components: { Layout, PageHeader },
|
||||
data() {
|
||||
return {
|
||||
title: "Form Repeater",
|
||||
items: [
|
||||
{
|
||||
text: "Forms",
|
||||
href: "/",
|
||||
},
|
||||
{
|
||||
text: "Form Repeater",
|
||||
active: true,
|
||||
},
|
||||
],
|
||||
fields: [{ id: 1 }],
|
||||
phoneData: [{ id: 1 }],
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* Push the row in form
|
||||
*/
|
||||
AddformData() {
|
||||
this.fields.push({ name: "", email: "", subject: "", message: "" });
|
||||
},
|
||||
/**
|
||||
* Delete the row
|
||||
*/
|
||||
deleteRow(index) {
|
||||
if (confirm("Are you sure you want to delete this element?"))
|
||||
this.fields.splice(index, 1);
|
||||
},
|
||||
/**
|
||||
* Add the phone number in form
|
||||
*/
|
||||
AddPhoneNo() {
|
||||
this.phoneData.push({ phone: "" });
|
||||
},
|
||||
/**
|
||||
* Delete the row from form
|
||||
*/
|
||||
deletePhone(index) {
|
||||
this.phoneData.splice(index, 1);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Layout>
|
||||
<PageHeader :title="title" :items="items" />
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title mb-4">Example</h4>
|
||||
<form class="repeater" enctype="multipart/form-data">
|
||||
<div>
|
||||
<div
|
||||
v-for="(field, index) in fields"
|
||||
:key="field.id"
|
||||
class="row"
|
||||
>
|
||||
<div class="mb-3 col-lg-2">
|
||||
<label for="name">Name</label>
|
||||
<input
|
||||
id="name"
|
||||
v-model="field.name"
|
||||
type="text"
|
||||
name="untyped-input"
|
||||
class="form-control"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="mb-3 col-lg-2">
|
||||
<label for="email">Email</label>
|
||||
<input
|
||||
id="email"
|
||||
v-model="field.email"
|
||||
type="email"
|
||||
class="form-control"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="mb-3 col-lg-2">
|
||||
<label for="subject">Subject</label>
|
||||
<input
|
||||
id="subject"
|
||||
v-model="field.subject"
|
||||
type="text"
|
||||
class="form-control"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="mb-3 col-lg-2">
|
||||
<label for="resume">Resume</label>
|
||||
<input id="resume" type="file" class="form-control-file" />
|
||||
</div>
|
||||
|
||||
<div class="mb-3 col-lg-2">
|
||||
<label for="message">Message</label>
|
||||
<textarea
|
||||
id="message"
|
||||
v-model="field.message"
|
||||
class="form-control"
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-2 align-self-center">
|
||||
<div class="d-grid">
|
||||
<input
|
||||
type="button"
|
||||
class="btn btn-primary btn-block"
|
||||
value="Delete"
|
||||
@click="deleteRow(index)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<input
|
||||
type="button"
|
||||
class="btn btn-success mt-3 mt-lg-0"
|
||||
value="Add"
|
||||
@click="AddformData"
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
<!-- end card-body -->
|
||||
</div>
|
||||
<!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title mb-4">Nested</h4>
|
||||
<form class="outer-repeater">
|
||||
<div class="outer">
|
||||
<div class="outer">
|
||||
<div class="mb-3">
|
||||
<label for="formname">Name :</label>
|
||||
<input
|
||||
id="formname"
|
||||
type="text"
|
||||
class="form-control"
|
||||
placeholder="Enter your Name..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="formemail">Email :</label>
|
||||
<input
|
||||
id="formemail"
|
||||
type="email"
|
||||
class="form-control"
|
||||
placeholder="Enter your Email..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="inner-repeater mb-4">
|
||||
<div class="inner mb-3">
|
||||
<label>Phone no :</label>
|
||||
<div
|
||||
v-for="(data, index) in phoneData"
|
||||
:key="data.id"
|
||||
class="inner mb-3 row"
|
||||
>
|
||||
<div class="col-md-10 col-8">
|
||||
<input
|
||||
v-model="data.phone"
|
||||
type="text"
|
||||
class="inner form-control"
|
||||
placeholder="Enter your phone no..."
|
||||
/>
|
||||
</div>
|
||||
<div class="col-md-2 col-4">
|
||||
<div class="d-grid">
|
||||
<input
|
||||
type="button"
|
||||
class="btn btn-primary btn-block inner"
|
||||
value="Delete"
|
||||
@click="deletePhone(index)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<input
|
||||
type="button"
|
||||
class="btn btn-success inner"
|
||||
value="Add Number"
|
||||
@click="AddPhoneNo"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="d-block mb-3">Gender :</label>
|
||||
|
||||
<div class="form-check form-check-inline">
|
||||
<input
|
||||
class="form-check-input"
|
||||
type="radio"
|
||||
name="gender"
|
||||
id="inlineRadio1"
|
||||
value="option1"
|
||||
/>
|
||||
<label class="form-check-label" for="inlineRadio1"
|
||||
>Male</label
|
||||
>
|
||||
</div>
|
||||
<div class="form-check form-check-inline">
|
||||
<input
|
||||
class="form-check-input"
|
||||
type="radio"
|
||||
name="gender"
|
||||
id="inlineRadio2"
|
||||
value="option2"
|
||||
/>
|
||||
<label class="form-check-label" for="inlineRadio2"
|
||||
>Female</label
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="formmessage">Message :</label>
|
||||
<textarea
|
||||
id="formmessage"
|
||||
class="form-control"
|
||||
rows="3"
|
||||
></textarea>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Submit</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<!-- end card-body -->
|
||||
</div>
|
||||
<!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</Layout>
|
||||
</template>
|
||||
|
|
@ -1,72 +0,0 @@
|
|||
<script>
|
||||
import DropZone from "@/components/widgets/dropZone";
|
||||
import { ref } from "vue";
|
||||
|
||||
import Layout from "../../layouts/main";
|
||||
import PageHeader from "@/components/page-header";
|
||||
import appConfig from "@/app.config";
|
||||
|
||||
/**
|
||||
* File Uploads component
|
||||
*/
|
||||
export default {
|
||||
page: {
|
||||
title: "Form File Upload",
|
||||
meta: [{ name: "description", content: appConfig.description }]
|
||||
},
|
||||
components: { DropZone, Layout, PageHeader },
|
||||
setup() {
|
||||
let dropzoneFile = ref("");
|
||||
const drop = (e) => {
|
||||
dropzoneFile.value = e.dataTransfer.files[0];
|
||||
};
|
||||
const selectedFile = () => {
|
||||
dropzoneFile.value = document.querySelector(".dropzoneFile").files[0];
|
||||
};
|
||||
return { dropzoneFile, drop, selectedFile };
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
title: "Form File Upload",
|
||||
items: [
|
||||
{
|
||||
text: "Forms",
|
||||
href: "/"
|
||||
},
|
||||
{
|
||||
text: "Form File Upload",
|
||||
active: true
|
||||
}
|
||||
],
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Layout>
|
||||
<PageHeader :title="title" :items="items" />
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">Dropzone</h4>
|
||||
<p
|
||||
class="card-title-desc"
|
||||
>DropzoneJS is an open source library that provides drag’n’drop file uploads with image previews.</p>
|
||||
<!-- file upload -->
|
||||
<DropZone @drop.prevent="drop" @change="selectedFile" />
|
||||
<span class="file-info">File: {{ dropzoneFile.name }}</span>
|
||||
<div class="text-center mt-4">
|
||||
<button type="button" class="btn btn-primary">Send Files</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end card-body -->
|
||||
</div>
|
||||
<!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</Layout>
|
||||
</template>
|
||||
|
|
@ -1,906 +0,0 @@
|
|||
<script>
|
||||
import Layout from "../../layouts/main";
|
||||
import PageHeader from "@/components/page-header";
|
||||
import appConfig from "@/app.config";
|
||||
import useVuelidate from "@vuelidate/core";
|
||||
|
||||
import {
|
||||
required,
|
||||
helpers,
|
||||
email,
|
||||
minLength,
|
||||
sameAs,
|
||||
maxLength,
|
||||
minValue,
|
||||
maxValue,
|
||||
numeric,
|
||||
url,
|
||||
alphaNum,
|
||||
} from "@vuelidate/validators";
|
||||
|
||||
/**
|
||||
* Form validation component
|
||||
*/
|
||||
export default {
|
||||
page: {
|
||||
title: "Form Validation",
|
||||
meta: [{ name: "description", content: appConfig.description }],
|
||||
},
|
||||
components: { Layout, PageHeader },
|
||||
data() {
|
||||
return {
|
||||
title: "Form Validation",
|
||||
items: [
|
||||
{
|
||||
text: "Forms",
|
||||
href: "/",
|
||||
},
|
||||
{
|
||||
text: "Form Validation",
|
||||
active: true,
|
||||
},
|
||||
],
|
||||
form: {
|
||||
fname: "",
|
||||
lname: "",
|
||||
city: "",
|
||||
state: "",
|
||||
zipcode: "",
|
||||
},
|
||||
tooltipform: {
|
||||
fname: "",
|
||||
lname: "",
|
||||
username: "",
|
||||
city: "",
|
||||
state: "",
|
||||
},
|
||||
range: {
|
||||
minlen: "",
|
||||
maxlength: "",
|
||||
between: "",
|
||||
minval: "",
|
||||
maxval: "",
|
||||
rangeval: "",
|
||||
expr: "",
|
||||
},
|
||||
typeform: {
|
||||
name: "",
|
||||
password: "",
|
||||
confirmPassword: "",
|
||||
email: "",
|
||||
url: "",
|
||||
digit: "",
|
||||
number: "",
|
||||
alphanum: "",
|
||||
textarea: "",
|
||||
},
|
||||
submitted: false,
|
||||
submitform: false,
|
||||
submit: false,
|
||||
typesubmit: false,
|
||||
};
|
||||
},
|
||||
setup() {
|
||||
return { v$: useVuelidate() };
|
||||
},
|
||||
validations: {
|
||||
form: {
|
||||
fname: {
|
||||
required: helpers.withMessage("First Name is required", required),
|
||||
},
|
||||
lname: {
|
||||
required: helpers.withMessage("Last Name is required", required),
|
||||
},
|
||||
city: { required: helpers.withMessage("City is required", required) },
|
||||
state: { required: helpers.withMessage("State is required", required) },
|
||||
zipcode: {
|
||||
required: helpers.withMessage("Zipcode is required", required),
|
||||
},
|
||||
},
|
||||
tooltipform: {
|
||||
fname: { required: helpers.withMessage("Fname is required", required) },
|
||||
lname: { required: helpers.withMessage("Lname is required", required) },
|
||||
username: {
|
||||
required: helpers.withMessage("Username is required", required),
|
||||
},
|
||||
city: { required: helpers.withMessage("City is required", required) },
|
||||
state: { required: helpers.withMessage("State is required", required) },
|
||||
},
|
||||
range: {
|
||||
minlen: {
|
||||
required: helpers.withMessage("Minlen is required", required),
|
||||
minLength: minLength(6),
|
||||
},
|
||||
maxlength: {
|
||||
required: helpers.withMessage("Maxlength is required", required),
|
||||
maxLength: maxLength(6),
|
||||
},
|
||||
between: {
|
||||
required: helpers.withMessage("Between is required", required),
|
||||
minLength: minLength(5),
|
||||
maxLength: maxLength(10),
|
||||
},
|
||||
minval: {
|
||||
required: helpers.withMessage("Minval is required", required),
|
||||
minValue: minValue(6),
|
||||
},
|
||||
maxval: {
|
||||
required: helpers.withMessage("Maxval is required", required),
|
||||
maxValue: maxValue(6),
|
||||
},
|
||||
rangeval: {
|
||||
required: helpers.withMessage("Rangeval is required", required),
|
||||
minValue: minValue(6),
|
||||
maxValue: maxValue(100),
|
||||
},
|
||||
expr: { required: helpers.withMessage("Expr is required", required) },
|
||||
},
|
||||
typeform: {
|
||||
name: { required: helpers.withMessage("Name is required", required) },
|
||||
password: {
|
||||
required: helpers.withMessage("Password is required", required),
|
||||
minLength: minLength(6),
|
||||
},
|
||||
confirmPassword: {
|
||||
required: helpers.withMessage("ConfirmPassword is required", required),
|
||||
sameAsPassword: sameAs("password"),
|
||||
},
|
||||
email: {
|
||||
required: helpers.withMessage("Email is required", required),
|
||||
email,
|
||||
},
|
||||
url: { required: helpers.withMessage("Url is required", required), url },
|
||||
digit: {
|
||||
required: helpers.withMessage("Digit is required", required),
|
||||
numeric,
|
||||
},
|
||||
number: {
|
||||
required: helpers.withMessage("Number is required", required),
|
||||
numeric,
|
||||
},
|
||||
alphanum: {
|
||||
required: helpers.withMessage("Alphanum is required", required),
|
||||
alphaNum,
|
||||
},
|
||||
textarea: {
|
||||
required: helpers.withMessage("Textarea is required", required),
|
||||
},
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
formSubmit(e) {
|
||||
this.submitted = true;
|
||||
// stop here if form is invalid
|
||||
this.v$.$touch();
|
||||
},
|
||||
|
||||
tooltipForm() {
|
||||
this.submitform = true;
|
||||
this.v$.$touch();
|
||||
},
|
||||
|
||||
/**
|
||||
* Range validation form submit
|
||||
*/
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
rangeform(e) {
|
||||
this.submit = true;
|
||||
// stop here if form is invalid
|
||||
this.v$.$touch();
|
||||
},
|
||||
/**
|
||||
* Validation type submit
|
||||
*/
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
typeForm(e) {
|
||||
this.typesubmit = true;
|
||||
// stop here if form is invalid
|
||||
this.v$.$touch();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Layout>
|
||||
<PageHeader :title="title" :items="items" />
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">Bootstrap Validation - Normal</h4>
|
||||
<p class="card-title-desc">
|
||||
Provide valuable, actionable feedback to your users with HTML5
|
||||
form validation–available in all our supported browsers.
|
||||
</p>
|
||||
<form class="needs-validation" @submit.prevent="formSubmit">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="mb-3">
|
||||
<label for="validationCustom01">First name</label>
|
||||
<input
|
||||
id="validationCustom01"
|
||||
v-model="form.fname"
|
||||
type="text"
|
||||
class="form-control"
|
||||
placeholder="First name"
|
||||
:class="{
|
||||
'is-invalid': submitted && v$.form.fname.$error,
|
||||
}"
|
||||
/>
|
||||
<div
|
||||
v-if="submitted && v$.form.fname.$error"
|
||||
class="invalid-feedback"
|
||||
>
|
||||
<span v-if="v$.form.fname.required.$message">{{
|
||||
v$.form.fname.required.$message
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="mb-3">
|
||||
<label for="validationCustom02">Last name</label>
|
||||
<input
|
||||
id="validationCustom02"
|
||||
v-model="form.lname"
|
||||
type="text"
|
||||
class="form-control"
|
||||
placeholder="Last name"
|
||||
:class="{
|
||||
'is-invalid': submitted && v$.form.lname.$error,
|
||||
}"
|
||||
/>
|
||||
<div
|
||||
v-if="submitted && v$.form.lname.$error"
|
||||
class="invalid-feedback"
|
||||
>
|
||||
<span v-if="v$.form.lname.required.$message">{{
|
||||
v$.form.lname.required.$message
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<div class="mb-3">
|
||||
<label for="validationCustom03">City</label>
|
||||
<input
|
||||
id="validationCustom03"
|
||||
v-model="form.city"
|
||||
type="text"
|
||||
class="form-control"
|
||||
placeholder="City"
|
||||
:class="{
|
||||
'is-invalid': submitted && v$.form.city.$error,
|
||||
}"
|
||||
/>
|
||||
<div
|
||||
v-if="submitted && v$.form.city.$error"
|
||||
class="invalid-feedback"
|
||||
>
|
||||
<span v-if="v$.form.city.required.$message">{{
|
||||
v$.form.city.required.$message
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="mb-3">
|
||||
<label for="validationCustom04">State</label>
|
||||
<input
|
||||
id="validationCustom04"
|
||||
v-model="form.state"
|
||||
type="text"
|
||||
class="form-control"
|
||||
placeholder="State"
|
||||
:class="{
|
||||
'is-invalid': submitted && v$.form.state.$error,
|
||||
}"
|
||||
/>
|
||||
<div
|
||||
v-if="submitted && v$.form.state.$error"
|
||||
class="invalid-feedback"
|
||||
>
|
||||
<span v-if="v$.form.state.required.$message">{{
|
||||
v$.form.state.required.$message
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="mb-3">
|
||||
<label for="validationCustom05">Zip</label>
|
||||
<input
|
||||
id="validationCustom05"
|
||||
v-model="form.zipcode"
|
||||
type="text"
|
||||
class="form-control"
|
||||
placeholder="Zip"
|
||||
:class="{
|
||||
'is-invalid': submitted && v$.form.zipcode.$error,
|
||||
}"
|
||||
/>
|
||||
<div
|
||||
v-if="submitted && v$.form.zipcode.$error"
|
||||
class="invalid-feedback"
|
||||
>
|
||||
<span v-if="v$.form.zipcode.required.$message">{{
|
||||
v$.form.zipcode.required.$message
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-check mb-3">
|
||||
<input
|
||||
class="form-check-input"
|
||||
type="checkbox"
|
||||
id="invalidCheck"
|
||||
required=""
|
||||
/>
|
||||
<label class="form-check-label" for="invalidCheck">
|
||||
Agree to terms and conditions
|
||||
</label>
|
||||
<div class="invalid-feedback">
|
||||
You must agree before submitting.
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-primary" type="submit">Submit form</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">Bootstrap Validation (Tooltips)</h4>
|
||||
<p class="card-title-desc">
|
||||
If your form layout allows it, you can swap the
|
||||
<code>.{valid|invalid}-feedback</code> classes for
|
||||
<code>.{valid|invalid}-tooltip</code> classes to display
|
||||
validation feedback in a styled tooltip.
|
||||
</p>
|
||||
<form class="needs-validation" @submit.prevent="tooltipForm">
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<div class="mb-3 position-relative">
|
||||
<label for="validationTooltip01">First name</label>
|
||||
<input
|
||||
id="validationTooltip01"
|
||||
v-model="tooltipform.fname"
|
||||
type="text"
|
||||
class="form-control"
|
||||
placeholder="First name"
|
||||
:class="{
|
||||
'is-invalid': submitform && v$.tooltipform.fname.$error,
|
||||
}"
|
||||
/>
|
||||
<div
|
||||
v-if="submitted && v$.tooltipform.fname.$error"
|
||||
class="invalid-feedback"
|
||||
>
|
||||
<span v-if="v$.tooltipform.fname.required.$message">{{
|
||||
v$.tooltipform.fname.required.$message
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="mb-3 position-relative">
|
||||
<label for="validationTooltip02">Last name</label>
|
||||
<input
|
||||
id="validationTooltip02"
|
||||
v-model="tooltipform.lname"
|
||||
type="text"
|
||||
class="form-control"
|
||||
placeholder="Last name"
|
||||
:class="{
|
||||
'is-invalid': submitform && v$.tooltipform.lname.$error,
|
||||
}"
|
||||
/>
|
||||
<div
|
||||
v-if="submitted && v$.tooltipform.lname.$error"
|
||||
class="invalid-feedback"
|
||||
>
|
||||
<span v-if="v$.tooltipform.lname.required.$message">{{
|
||||
v$.tooltipform.lname.required.$message
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="mb-3 position-relative">
|
||||
<label for="validationTooltipUsername">Username</label>
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<span
|
||||
id="validationTooltipUsernamePrepend"
|
||||
class="input-group-text"
|
||||
>@</span
|
||||
>
|
||||
</div>
|
||||
<input
|
||||
id="validationTooltipUsername"
|
||||
v-model="tooltipform.username"
|
||||
type="text"
|
||||
class="form-control"
|
||||
placeholder="Username"
|
||||
aria-describedby="validationTooltipUsernamePrepend"
|
||||
:class="{
|
||||
'is-invalid':
|
||||
submitform && v$.tooltipform.username.$error,
|
||||
}"
|
||||
/>
|
||||
<div
|
||||
v-if="submitted && v$.tooltipform.username.$error"
|
||||
class="invalid-feedback"
|
||||
>
|
||||
<span
|
||||
v-if="v$.tooltipform.username.required.$message"
|
||||
>{{ v$.tooltipform.username.required.$message }}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="mb-3 position-relative">
|
||||
<label for="validationTooltip03">City</label>
|
||||
<input
|
||||
id="validationTooltip03"
|
||||
v-model="tooltipform.city"
|
||||
type="text"
|
||||
class="form-control"
|
||||
placeholder="City"
|
||||
:class="{
|
||||
'is-invalid': submitform && v$.tooltipform.city.$error,
|
||||
}"
|
||||
/>
|
||||
<div
|
||||
v-if="submitted && v$.tooltipform.city.$error"
|
||||
class="invalid-feedback"
|
||||
>
|
||||
<span v-if="v$.tooltipform.city.required.$message">{{
|
||||
v$.tooltipform.city.required.$message
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="mb-3 position-relative">
|
||||
<label for="validationTooltip04">State</label>
|
||||
<input
|
||||
id="validationTooltip04"
|
||||
v-model="tooltipform.state"
|
||||
type="text"
|
||||
class="form-control"
|
||||
placeholder="State"
|
||||
:class="{
|
||||
'is-invalid': submitform && v$.tooltipform.state.$error,
|
||||
}"
|
||||
/>
|
||||
<div
|
||||
v-if="submitted && v$.tooltipform.state.$error"
|
||||
class="invalid-feedback"
|
||||
>
|
||||
<span v-if="v$.tooltipform.state.required.$message">{{
|
||||
v$.tooltipform.state.required.$message
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-primary" type="submit">Submit form</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">Validation type</h4>
|
||||
<p class="card-title-desc">
|
||||
Parsley is a javascript form validation library. It helps you
|
||||
provide your users with feedback on their form submission before
|
||||
sending it to your server.
|
||||
</p>
|
||||
|
||||
<form action="#" @submit.prevent="typeForm">
|
||||
<div class="mb-3">
|
||||
<label>Required</label>
|
||||
<input
|
||||
v-model="typeform.name"
|
||||
type="text"
|
||||
class="form-control"
|
||||
placeholder="Type something"
|
||||
name="name"
|
||||
:class="{
|
||||
'is-invalid': typesubmit && v$.typeform.name.$error,
|
||||
}"
|
||||
/>
|
||||
<div
|
||||
v-if="submitted && v$.typeform.name.$error"
|
||||
class="invalid-feedback"
|
||||
>
|
||||
<span v-if="v$.typeform.name.required.$message">{{
|
||||
v$.typeform.name.required.$message
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label>Equal To</label>
|
||||
<div>
|
||||
<input
|
||||
v-model="typeform.password"
|
||||
type="password"
|
||||
name="password"
|
||||
class="form-control"
|
||||
:class="{
|
||||
'is-invalid': typesubmit && v$.typeform.password.$error,
|
||||
}"
|
||||
placeholder="Password"
|
||||
/>
|
||||
<div
|
||||
v-for="(item, index) in v$.typeform.password.$errors"
|
||||
:key="index"
|
||||
class="invalid-feedback"
|
||||
>
|
||||
<span v-if="item.$message">{{ item.$message }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<input
|
||||
v-model="typeform.confirmPassword"
|
||||
type="password"
|
||||
name="confirmPassword"
|
||||
class="form-control"
|
||||
:class="{
|
||||
'is-invalid':
|
||||
typesubmit && v$.typeform.confirmPassword.$error,
|
||||
}"
|
||||
placeholder="Re-Type Password"
|
||||
/>
|
||||
<div
|
||||
v-for="(item, index) in v$.typeform.confirmPassword.$errors"
|
||||
:key="index"
|
||||
class="invalid-feedback"
|
||||
>
|
||||
<span v-if="item.$message">{{ item.$message }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label>E-Mail</label>
|
||||
<div>
|
||||
<input
|
||||
v-model="typeform.email"
|
||||
type="email"
|
||||
name="email"
|
||||
class="form-control"
|
||||
:class="{
|
||||
'is-invalid': typesubmit && v$.typeform.email.$error,
|
||||
}"
|
||||
placeholder="Enter a valid e-mail"
|
||||
/>
|
||||
<div
|
||||
v-for="(item, index) in v$.typeform.email.$errors"
|
||||
:key="index"
|
||||
class="invalid-feedback"
|
||||
>
|
||||
<span v-if="item.$message">{{ item.$message }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label>URL</label>
|
||||
<div>
|
||||
<input
|
||||
v-model="typeform.url"
|
||||
type="url"
|
||||
name="url"
|
||||
class="form-control"
|
||||
placeholder="URL"
|
||||
:class="{
|
||||
'is-invalid': typesubmit && v$.typeform.url.$error,
|
||||
}"
|
||||
/>
|
||||
<div
|
||||
v-for="(item, index) in v$.typeform.url.$errors"
|
||||
:key="index"
|
||||
class="invalid-feedback"
|
||||
>
|
||||
<span v-if="item.$message">{{ item.$message }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label>Digits</label>
|
||||
<div>
|
||||
<input
|
||||
v-model="typeform.digit"
|
||||
type="text"
|
||||
name="digit"
|
||||
class="form-control"
|
||||
:class="{
|
||||
'is-invalid': typesubmit && v$.typeform.digit.$error,
|
||||
}"
|
||||
placeholder="Enter only digits"
|
||||
/>
|
||||
<div
|
||||
v-for="(item, index) in v$.typeform.digit.$errors"
|
||||
:key="index"
|
||||
class="invalid-feedback"
|
||||
>
|
||||
<span v-if="item.$message">{{ item.$message }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label>Number</label>
|
||||
<div>
|
||||
<input
|
||||
v-model="typeform.number"
|
||||
type="text"
|
||||
name="number"
|
||||
class="form-control"
|
||||
:class="{
|
||||
'is-invalid': typesubmit && v$.typeform.number.$error,
|
||||
}"
|
||||
placeholder="Enter only numbers"
|
||||
/>
|
||||
<div
|
||||
v-for="(item, index) in v$.typeform.number.$errors"
|
||||
:key="index"
|
||||
class="invalid-feedback"
|
||||
>
|
||||
<span v-if="item.$message">{{ item.$message }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label>Alphanumeric</label>
|
||||
<div>
|
||||
<input
|
||||
v-model="typeform.alphanum"
|
||||
type="text"
|
||||
name="alphanum"
|
||||
class="form-control"
|
||||
:class="{
|
||||
'is-invalid': typesubmit && v$.typeform.alphanum.$error,
|
||||
}"
|
||||
placeholder="Enter alphanumeric value"
|
||||
/>
|
||||
<div
|
||||
v-for="(item, index) in v$.typeform.alphanum.$errors"
|
||||
:key="index"
|
||||
class="invalid-feedback"
|
||||
>
|
||||
<span v-if="item.$message">{{ item.$message }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label>Textarea</label>
|
||||
<div>
|
||||
<textarea
|
||||
v-model="typeform.textarea"
|
||||
class="form-control"
|
||||
name="textarea"
|
||||
:class="{
|
||||
'is-invalid': typesubmit && v$.typeform.textarea.$error,
|
||||
}"
|
||||
rows="5"
|
||||
></textarea>
|
||||
<div
|
||||
v-if="typesubmit && v$.typeform.textarea.$error"
|
||||
class="invalid-feedback"
|
||||
>
|
||||
<span v-if="!v$.typeform.textarea.required"
|
||||
>This value is required.</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3 mb-0">
|
||||
<div>
|
||||
<button type="submit" class="btn btn-primary">Submit</button>
|
||||
<button type="reset" class="btn btn-secondary ms-1">
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end card -->
|
||||
</div>
|
||||
<!-- end col-->
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">Range validation</h4>
|
||||
<p class="card-title-desc">
|
||||
Parsley is a javascript form validation library. It helps you
|
||||
provide your users with feedback on their form submission before
|
||||
sending it to your server.
|
||||
</p>
|
||||
|
||||
<form action="#" @submit.prevent="rangeform">
|
||||
<div class="mb-3">
|
||||
<label>Min Length</label>
|
||||
<div>
|
||||
<input
|
||||
v-model="range.minlen"
|
||||
type="text"
|
||||
name="minlen"
|
||||
class="form-control"
|
||||
:class="{ 'is-invalid': submit && v$.range.minlen.$error }"
|
||||
placeholder="Min 6 chars."
|
||||
/>
|
||||
<div
|
||||
v-for="(item, index) in v$.range.minlen.$errors"
|
||||
:key="index"
|
||||
class="invalid-feedback"
|
||||
>
|
||||
<span v-if="item.$message">{{ item.$message }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label>Max Length</label>
|
||||
<div>
|
||||
<input
|
||||
v-model="range.maxlength"
|
||||
type="text"
|
||||
class="form-control"
|
||||
name="maxlength"
|
||||
:class="{
|
||||
'is-invalid': submit && v$.range.maxlength.$error,
|
||||
}"
|
||||
placeholder="Max 6 chars."
|
||||
/>
|
||||
<div
|
||||
v-for="(item, index) in v$.range.maxlength.$errors"
|
||||
:key="index"
|
||||
class="invalid-feedback"
|
||||
>
|
||||
<span v-if="item.$message">{{ item.$message }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label>Range Length</label>
|
||||
<div>
|
||||
<input
|
||||
v-model="range.between"
|
||||
type="text"
|
||||
class="form-control"
|
||||
name="between"
|
||||
:class="{ 'is-invalid': submit && v$.range.between.$error }"
|
||||
placeholder="Text between 5 - 10 chars length"
|
||||
/>
|
||||
<div
|
||||
v-for="(item, index) in v$.range.between.$errors"
|
||||
:key="index"
|
||||
class="invalid-feedback"
|
||||
>
|
||||
<span v-if="item.$message">{{ item.$message }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label>Min Value</label>
|
||||
<div>
|
||||
<input
|
||||
v-model="range.minval"
|
||||
type="text"
|
||||
name="minval"
|
||||
class="form-control"
|
||||
:class="{ 'is-invalid': submit && v$.range.minval.$error }"
|
||||
placeholder="Min value is 6"
|
||||
/>
|
||||
<div
|
||||
v-for="(item, index) in v$.range.minval.$errors"
|
||||
:key="index"
|
||||
class="invalid-feedback"
|
||||
>
|
||||
<span v-if="item.$message">{{ item.$message }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label>Max Value</label>
|
||||
<div>
|
||||
<input
|
||||
v-model="range.maxval"
|
||||
type="text"
|
||||
class="form-control"
|
||||
name="maxval"
|
||||
:class="{ 'is-invalid': submit && v$.range.maxval.$error }"
|
||||
placeholder="Max value is 6"
|
||||
/>
|
||||
<div
|
||||
v-for="(item, index) in v$.range.maxval.$errors"
|
||||
:key="index"
|
||||
class="invalid-feedback"
|
||||
>
|
||||
<span v-if="item.$message">{{ item.$message }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label>Range Value</label>
|
||||
<div>
|
||||
<input
|
||||
v-model="range.rangeval"
|
||||
type="text"
|
||||
class="form-control"
|
||||
name="rangeval"
|
||||
:class="{
|
||||
'is-invalid': submit && v$.range.rangeval.$error,
|
||||
}"
|
||||
placeholder="Number between 6 - 100"
|
||||
/>
|
||||
<div
|
||||
v-for="(item, index) in v$.range.rangeval.$errors"
|
||||
:key="index"
|
||||
class="invalid-feedback"
|
||||
>
|
||||
<span v-if="item.$message">{{ item.$message }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label>Regular Exp</label>
|
||||
<div>
|
||||
<input
|
||||
v-model="range.expr"
|
||||
type="text"
|
||||
class="form-control"
|
||||
name="expr"
|
||||
:class="{ 'is-invalid': submit && v$.range.expr.$error }"
|
||||
placeholder="Hex. Color"
|
||||
/>
|
||||
<div
|
||||
v-for="(item, index) in v$.range.expr.$errors"
|
||||
:key="index"
|
||||
class="invalid-feedback"
|
||||
>
|
||||
<span v-if="item.$message">{{ item.$message }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3 mb-0">
|
||||
<div>
|
||||
<button type="submit" class="btn btn-primary">Submit</button>
|
||||
<button type="reset" class="btn btn-secondary ms-1">
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</Layout>
|
||||
</template>
|
||||
|
|
@ -1,329 +0,0 @@
|
|||
<script>
|
||||
import { FormWizard, TabContent } from "@anivive/vue3-form-wizard";
|
||||
|
||||
import Layout from "../../layouts/main";
|
||||
import PageHeader from "@/components/page-header";
|
||||
import appConfig from "@/app.config";
|
||||
|
||||
/**
|
||||
* Form wizard component
|
||||
*/
|
||||
export default {
|
||||
page: {
|
||||
title: "Form Wizard",
|
||||
meta: [{ name: "description", content: appConfig.description }],
|
||||
},
|
||||
components: { Layout, PageHeader, FormWizard, TabContent },
|
||||
data() {
|
||||
return {
|
||||
title: "Form Wizard",
|
||||
items: [
|
||||
{
|
||||
text: "Forms",
|
||||
href: "/",
|
||||
},
|
||||
{
|
||||
text: "Form Wizard",
|
||||
active: true,
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Layout>
|
||||
<PageHeader :title="title" :items="items" />
|
||||
<div class="row">
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">Basic Wizard</h4>
|
||||
<form-wizard color="#556ee6">
|
||||
<tab-content icon="mdi mdi-account-circle">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="form-group row mb-3">
|
||||
<label class="col-md-3 col-form-label" for="userName"
|
||||
>User name</label
|
||||
>
|
||||
<div class="col-md-9">
|
||||
<input
|
||||
id="userName"
|
||||
type="text"
|
||||
class="form-control"
|
||||
name="userName"
|
||||
value="Themesbrand"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mb-3">
|
||||
<label class="col-md-3 col-form-label" for="password"
|
||||
>Password</label
|
||||
>
|
||||
<div class="col-md-9">
|
||||
<input
|
||||
id="password"
|
||||
type="password"
|
||||
name="password"
|
||||
class="form-control"
|
||||
value="123456789"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group row mb-3">
|
||||
<label class="col-md-3 col-form-label" for="confirmpass"
|
||||
>Re Password</label
|
||||
>
|
||||
<div class="col-md-9">
|
||||
<input
|
||||
id="confirmpass"
|
||||
type="password"
|
||||
name="confirmpass"
|
||||
class="form-control"
|
||||
value="123456789"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</tab-content>
|
||||
<tab-content icon="mdi mdi-face-profile">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="form-group row mb-3">
|
||||
<label class="col-md-3 col-form-label" for="name"
|
||||
>First name</label
|
||||
>
|
||||
<div class="col-md-9">
|
||||
<input
|
||||
type="text"
|
||||
name="name"
|
||||
class="form-control"
|
||||
value="Francis"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mb-3">
|
||||
<label class="col-md-3 col-form-label" for="surname"
|
||||
>Last name</label
|
||||
>
|
||||
<div class="col-md-9">
|
||||
<input
|
||||
type="text"
|
||||
name="surname"
|
||||
class="form-control"
|
||||
value="Brinkman"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group row mb-3">
|
||||
<label class="col-md-3 col-form-label" for="email"
|
||||
>Email</label
|
||||
>
|
||||
<div class="col-md-9">
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
class="form-control"
|
||||
value="cory1979@hotmail.com"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</tab-content>
|
||||
<tab-content icon="mdi mdi-checkbox-marked-circle-outline">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="text-center">
|
||||
<h2 class="mt-0">
|
||||
<i class="mdi mdi-check-all"></i>
|
||||
</h2>
|
||||
<h3 class="mt-0">Thank you !</h3>
|
||||
|
||||
<p class="w-75 mb-2 mx-auto">
|
||||
Quisque nec turpis at urna dictum luctus. Suspendisse
|
||||
convallis dignissim eros at volutpat. In egestas mattis
|
||||
dui. Aliquam mattis dictum aliquet.
|
||||
</p>
|
||||
|
||||
<div class="mb-3">
|
||||
<b-form-checkbox
|
||||
class="form-check"
|
||||
id="customControlInline"
|
||||
name="checkbox-1"
|
||||
value="accepted"
|
||||
unchecked-value="not_accepted"
|
||||
>
|
||||
Remember me
|
||||
</b-form-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</tab-content>
|
||||
</form-wizard>
|
||||
</div>
|
||||
<!-- end card-body -->
|
||||
</div>
|
||||
<!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">Tab Wizard</h4>
|
||||
<form-wizard shape="tab" color="#556ee6">
|
||||
<tab-content icon="mdi mdi-account-circle">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="form-group row mb-3">
|
||||
<label class="col-md-3 col-form-label" for="name"
|
||||
>User name</label
|
||||
>
|
||||
<div class="col-md-9">
|
||||
<input
|
||||
id="name"
|
||||
type="text"
|
||||
class="form-control"
|
||||
value="Themesbrand"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mb-3">
|
||||
<label class="col-md-3 col-form-label" for="pwd"
|
||||
>Password</label
|
||||
>
|
||||
<div class="col-md-9">
|
||||
<input
|
||||
id="pwd"
|
||||
type="password"
|
||||
name="pwd"
|
||||
class="form-control"
|
||||
value="123456789"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group row mb-3">
|
||||
<label class="col-md-3 col-form-label" for="confirmpwd"
|
||||
>Re Password</label
|
||||
>
|
||||
<div class="col-md-9">
|
||||
<input
|
||||
id="confirmpwd"
|
||||
type="password"
|
||||
class="form-control"
|
||||
value="123456789"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</tab-content>
|
||||
<tab-content icon="mdi mdi-face-profile">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="form-group row mb-3">
|
||||
<label class="col-md-3 col-form-label" for="name"
|
||||
>First name</label
|
||||
>
|
||||
<div class="col-md-9">
|
||||
<input
|
||||
type="text"
|
||||
name="name"
|
||||
class="form-control"
|
||||
value="Francis"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mb-3">
|
||||
<label class="col-md-3 col-form-label" for="surname"
|
||||
>Last name</label
|
||||
>
|
||||
<div class="col-md-9">
|
||||
<input
|
||||
type="text"
|
||||
name="surname"
|
||||
class="form-control"
|
||||
value="Brinkman"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group row mb-3">
|
||||
<label class="col-md-3 col-form-label" for="email"
|
||||
>Email</label
|
||||
>
|
||||
<div class="col-md-9">
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
class="form-control"
|
||||
value="cory1979@hotmail.com"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</tab-content>
|
||||
<tab-content icon="mdi mdi-checkbox-marked-circle-outline">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="text-center">
|
||||
<h2 class="mt-0">
|
||||
<i class="mdi mdi-check-all"></i>
|
||||
</h2>
|
||||
<h3 class="mt-0">Thank you !</h3>
|
||||
|
||||
<p class="w-75 mb-2 mx-auto">
|
||||
Quisque nec turpis at urna dictum luctus. Suspendisse
|
||||
convallis dignissim eros at volutpat. In egestas mattis
|
||||
dui. Aliquam mattis dictum aliquet.
|
||||
</p>
|
||||
|
||||
<div class="mb-3">
|
||||
<b-form-checkbox
|
||||
class="form-check"
|
||||
id="customCheck1"
|
||||
name="checkbox-1"
|
||||
value="accepted"
|
||||
unchecked-value="not_accepted"
|
||||
>
|
||||
I agree with the Terms and Conditions
|
||||
</b-form-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</tab-content>
|
||||
</form-wizard>
|
||||
</div>
|
||||
<!-- end card-body -->
|
||||
</div>
|
||||
<!-- end card -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</Layout>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
|
|
@ -1,18 +1,32 @@
|
|||
<script>
|
||||
import Layout from "../../layouts/main";
|
||||
// import PageHeader from "@/components/page-header";
|
||||
import PageHeader from "@/components/page-header";
|
||||
import Stat from "@/components/widgets/stat";
|
||||
import Stat1 from "@/components/widgets/stat1";
|
||||
import Profile from "@/components/widgets/profile";
|
||||
import appConfig from "@/app.config";
|
||||
export default {
|
||||
page: {
|
||||
title: "Home",
|
||||
meta: [{ name: "description", content: appConfig.description }],
|
||||
},
|
||||
components: { Layout },
|
||||
components: { Layout,PageHeader,Profile, Stat, Stat1 },
|
||||
data() {
|
||||
return {
|
||||
list:[],
|
||||
currentPage: 1,
|
||||
pageSize:10,
|
||||
title: "Home",
|
||||
items: [
|
||||
{
|
||||
text: "Home",
|
||||
href: "/",
|
||||
},
|
||||
{
|
||||
text: "Index",
|
||||
active: true,
|
||||
},
|
||||
],
|
||||
// list:[],
|
||||
// currentPage: 1,
|
||||
// pageSize:10,
|
||||
searchForm:{
|
||||
search:'',
|
||||
checkStartDate:'',
|
||||
|
|
@ -23,23 +37,61 @@ export default {
|
|||
"Last 7 Days' Complete Cases",
|
||||
"Last 30 Days' Complete Cases",
|
||||
"Last 90 Days' Complete Cases",
|
||||
]
|
||||
],
|
||||
statData: [
|
||||
{
|
||||
icon: "bx bx-time-five",
|
||||
title: "Pending",
|
||||
value: "",
|
||||
},
|
||||
{
|
||||
icon: "bx bx-check-circle",
|
||||
title: "Clear",
|
||||
value: "",
|
||||
},
|
||||
{
|
||||
icon: "bx bx-no-entry",
|
||||
title: "Reject",
|
||||
value: "",
|
||||
},
|
||||
],
|
||||
lastMonth:{},
|
||||
statList:[],
|
||||
};
|
||||
},
|
||||
watch:{
|
||||
currentPage: {
|
||||
immediate: true,
|
||||
handler(newVal, oldVal) {
|
||||
console.log(newVal, oldVal)
|
||||
this.currentPage = newVal;
|
||||
this.mylist = this.list.slice((this.currentPage-1)*this.pageSize,this.currentPage*this.pageSize)
|
||||
}
|
||||
}
|
||||
// currentPage: {
|
||||
// immediate: true,
|
||||
// handler(newVal, oldVal) {
|
||||
// console.log(newVal, oldVal)
|
||||
// this.currentPage = newVal;
|
||||
// this.mylist = this.list.slice((this.currentPage-1)*this.pageSize,this.currentPage*this.pageSize)
|
||||
// }
|
||||
// }
|
||||
},
|
||||
mounted(){
|
||||
this.getList();
|
||||
this.getLastMonth();
|
||||
},
|
||||
methods:{
|
||||
goAdd(){
|
||||
this.$router.push('/visa/add')
|
||||
},
|
||||
getLastMonth(){
|
||||
const date = new Date().DateFormat('yyyy-MM');
|
||||
this.$axios
|
||||
.get("/api/visa_report/QueryMonthlyReportData?monthKey="+date)
|
||||
.then((res) => {
|
||||
this.lastMonth = res.summaryItem
|
||||
console.log(res);
|
||||
this.statData[0].value = this.lastMonth.pendingCaseCount
|
||||
this.statData[1].value = this.lastMonth.clearCaseCount
|
||||
this.statData[2].value = this.lastMonth.rejectCaseCount
|
||||
this.statList = [{name:"Total",value:this.lastMonth.totalCaseCount},{name:'Ave. Waiting Days for Complete Cases',value:this.lastMonth.aveWaitingDaysForCompleteCases}]
|
||||
}).catch(e=>{
|
||||
console.log(e);
|
||||
})
|
||||
},
|
||||
doClick(item){
|
||||
console.log('查看详情',JSON.stringify(item))
|
||||
this.$router.push({name:'homelist',query:{month:item.month}})
|
||||
|
|
@ -58,8 +110,8 @@ export default {
|
|||
this.$axios
|
||||
.get("/api/visa_report/QueryAllReportData")
|
||||
.then((res) => {
|
||||
this.list = res.items;
|
||||
this.mylist = this.list.slice((this.currentPage-1)*this.pageSize,this.currentPage*this.pageSize)
|
||||
this.mylist = res.items;
|
||||
// this.mylist = this.list.slice((this.currentPage-1)*this.pageSize,this.currentPage*this.pageSize)
|
||||
console.log(res);
|
||||
}).catch(e=>{
|
||||
console.log(e);
|
||||
|
|
@ -71,73 +123,24 @@ export default {
|
|||
|
||||
<template>
|
||||
<Layout>
|
||||
<!-- <PageHeader :title="title" :items="items" /> -->
|
||||
<!-- <div class="row">
|
||||
<div class="col-12">
|
||||
<form class="form-horizontal" role="form" @submit.prevent="formSubmit">
|
||||
<div class="row">
|
||||
<div class="col-md-2">
|
||||
<b-form-group
|
||||
class="mb-3"
|
||||
label-cols-lg="3"
|
||||
label="Email："
|
||||
label-for="Search"
|
||||
>
|
||||
<b-form-input
|
||||
for="Search"
|
||||
v-model="searchForm.search"
|
||||
></b-form-input>
|
||||
</b-form-group>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="mb-3 row">
|
||||
<label class="col-md-4 col-form-label">Complete Case:</label>
|
||||
<div class="col-md-8">
|
||||
<select class="form-control" v-model="searchForm.code">
|
||||
<option :value="7">Last 7 Days' Complete Cases</option>
|
||||
<option :value="30">Last 30 Days' Complete Cases</option>
|
||||
<option :value="90">Last 90 Days' Complete Cases</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<b-form-group
|
||||
class="mb-3"
|
||||
label-cols-sm="4"
|
||||
label-cols-lg="4"
|
||||
label="StartDate："
|
||||
label-for="checkStartDate"
|
||||
>
|
||||
<b-form-input
|
||||
id="checkStartDate"
|
||||
v-model="searchForm.checkStartDate"
|
||||
type="date"
|
||||
pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}"
|
||||
></b-form-input>
|
||||
</b-form-group>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<b-form-group
|
||||
class="mb-3"
|
||||
label-cols-sm="4"
|
||||
label-cols-lg="4"
|
||||
label="EndDate："
|
||||
label-for="checkEndDate"
|
||||
>
|
||||
<b-form-input
|
||||
id="checkEndDate"
|
||||
v-model="searchForm.checkEndDate"
|
||||
type="date"
|
||||
pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}"
|
||||
></b-form-input>
|
||||
</b-form-group>
|
||||
</div>
|
||||
<div class="col-md-2"><button class="btn btn-primary" type="submit">Search</button></div>
|
||||
</div>
|
||||
</form>
|
||||
<PageHeader :title="title" :items="items" />
|
||||
<div class="row">
|
||||
<div class="col-xl-4">
|
||||
<Profile :updating="fetchingStats" />
|
||||
<!-- <Earning :updating="earningStatus" /> -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
<div class="col-xl-8">
|
||||
<div class="row">
|
||||
<Stat1 :list="statList" :title="lastMonth.month" />
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="row">
|
||||
<div v-for="stat of statData" :key="stat.icon" class="col-md-4">
|
||||
<Stat :icon="stat.icon" :title="stat.title" :value="stat.value" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-24">
|
||||
|
|
@ -157,7 +160,7 @@ export default {
|
|||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(item,index) in mylist" :key="index">
|
||||
<td scope="row">{{(currentPage-1)*pageSize+index+1}}</td>
|
||||
<td scope="row">{{index+1}}</td>
|
||||
<td>{{item.month}}</td>
|
||||
<td>{{item.pendingCaseCount}}</td>
|
||||
<td>{{item.clearCaseCount}}</td>
|
||||
|
|
@ -179,8 +182,8 @@ export default {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="my-4" />
|
||||
<div class="row">
|
||||
<!-- <hr class="my-4" /> -->
|
||||
<!-- <div class="row">
|
||||
<div class="col">
|
||||
<b-pagination
|
||||
v-model="currentPage"
|
||||
|
|
@ -190,6 +193,6 @@ export default {
|
|||
aria-controls="my-table"
|
||||
></b-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</Layout>
|
||||
</template>
|
||||
|
|
@ -1,7 +1,10 @@
|
|||
<script>
|
||||
import Layout from "../../layouts/main";
|
||||
// import PageHeader from "@/components/page-header";
|
||||
import PageHeader from "@/components/page-header";
|
||||
import appConfig from "@/app.config";
|
||||
import Stat from "@/components/widgets/stat";
|
||||
import Stat1 from "@/components/widgets/stat1";
|
||||
import Profile from "@/components/widgets/profile";
|
||||
// import Multiselect from "@vueform/multiselect";
|
||||
|
||||
/**
|
||||
|
|
@ -12,7 +15,7 @@ export default {
|
|||
title: "Home",
|
||||
meta: [{ name: "description", content: appConfig.description }],
|
||||
},
|
||||
components: { Layout,},
|
||||
components: { Layout,PageHeader,Profile, Stat, Stat1 },
|
||||
data() {
|
||||
return {
|
||||
list:[],
|
||||
|
|
@ -29,18 +32,44 @@ export default {
|
|||
"Last 30 Days' Complete Cases",
|
||||
"Last 90 Days' Complete Cases",
|
||||
],
|
||||
currentUser:{}
|
||||
statData: [
|
||||
{
|
||||
icon: "bx bx-time-five",
|
||||
title: "Pending",
|
||||
value: "",
|
||||
},
|
||||
{
|
||||
icon: "bx bx-check-circle",
|
||||
title: "Clear",
|
||||
value: "",
|
||||
},
|
||||
{
|
||||
icon: "bx bx-no-entry",
|
||||
title: "Reject",
|
||||
value: "",
|
||||
},
|
||||
],
|
||||
currentUser:{},
|
||||
lastMonth:{},
|
||||
statList:[],
|
||||
};
|
||||
},
|
||||
watch:{
|
||||
currentPage: {
|
||||
'$route.query.month':{
|
||||
immediate: true,
|
||||
handler(newVal, oldVal) {
|
||||
console.log(newVal, oldVal)
|
||||
this.currentPage = newVal;
|
||||
this.mylist = this.list.slice((this.currentPage-1)*this.pageSize,this.currentPage*this.pageSize)
|
||||
console.log(newVal, oldVal)
|
||||
this.getList();
|
||||
}
|
||||
}
|
||||
// currentPage: {
|
||||
// immediate: true,
|
||||
// handler(newVal, oldVal) {
|
||||
// console.log(newVal, oldVal)
|
||||
// this.currentPage = newVal;
|
||||
// this.mylist = this.list.slice((this.currentPage-1)*this.pageSize,this.currentPage*this.pageSize)
|
||||
// }
|
||||
// }
|
||||
},
|
||||
mounted(){
|
||||
this.currentUser = this.$store.getters['auth/getCurrentUser'];
|
||||
|
|
@ -69,8 +98,14 @@ export default {
|
|||
this.$axios
|
||||
.get("/api/visa_report/QueryMonthlyReportData?monthKey="+this.$route.query.month)
|
||||
.then((res) => {
|
||||
this.list = res.visaCaseList;
|
||||
this.mylist = this.list.slice((this.currentPage-1)*this.pageSize,this.currentPage*this.pageSize)
|
||||
this.mylist = res.visaCaseList;
|
||||
this.lastMonth = res.summaryItem
|
||||
|
||||
this.statData[0].value = this.lastMonth.pendingCaseCount
|
||||
this.statData[1].value = this.lastMonth.clearCaseCount
|
||||
this.statData[2].value = this.lastMonth.rejectCaseCount
|
||||
this.statList = [{name:"Total",value:this.lastMonth.totalCaseCount},{name:'Ave. Waiting Days for Complete Cases',value:this.lastMonth.aveWaitingDaysForCompleteCases}]
|
||||
// this.mylist = this.list.slice((this.currentPage-1)*this.pageSize,this.currentPage*this.pageSize)
|
||||
console.log(res);
|
||||
}).catch(e=>{
|
||||
console.log(e);
|
||||
|
|
@ -82,7 +117,24 @@ export default {
|
|||
|
||||
<template>
|
||||
<Layout>
|
||||
<!-- <PageHeader :title="title" :items="items" /> -->
|
||||
<PageHeader :title="title" :items="items" />
|
||||
<div class="row">
|
||||
<div class="col-xl-4">
|
||||
<Profile :updating="fetchingStats" />
|
||||
<!-- <Earning :updating="earningStatus" /> -->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
<div class="col-xl-8">
|
||||
<div class="row">
|
||||
<Stat1 :list="statList" :title="lastMonth.month" />
|
||||
</div>
|
||||
<div class="row">
|
||||
<div v-for="stat of statData" :key="stat.icon" class="col-md-4">
|
||||
<Stat :icon="stat.icon" :title="stat.title" :value="stat.value" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="row">
|
||||
<div class="col-12">
|
||||
<form class="form-horizontal" role="form" @submit.prevent="formSubmit">
|
||||
|
|
@ -171,7 +223,7 @@ export default {
|
|||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(item,index) in mylist" :key="index">
|
||||
<td scope="row">{{(currentPage-1)*pageSize+index+1}}</td>
|
||||
<td scope="row">{{index+1}}</td>
|
||||
<td>{{item.userName}}</td>
|
||||
<td>{{item.visaCategory}}</td>
|
||||
<td>{{item.visaEntry}}</td>
|
||||
|
|
@ -204,7 +256,7 @@ export default {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="my-4" />
|
||||
<!-- <hr class="my-4" />
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<b-pagination
|
||||
|
|
@ -215,6 +267,6 @@ export default {
|
|||
aria-controls="my-table"
|
||||
></b-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</Layout>
|
||||
</template>
|
||||
|
|
@ -1,154 +0,0 @@
|
|||
<script>
|
||||
import Layout from "../../layouts/main";
|
||||
import PageHeader from "@/components/page-header";
|
||||
import appConfig from "@/app.config";
|
||||
|
||||
/**
|
||||
* Invoice-detail component
|
||||
*/
|
||||
export default {
|
||||
page: {
|
||||
title: "Invoice Detail",
|
||||
meta: [{ name: "description", content: appConfig.description }],
|
||||
},
|
||||
components: { Layout, PageHeader },
|
||||
data() {
|
||||
return {
|
||||
title: "Invoice Detail",
|
||||
items: [
|
||||
{
|
||||
text: "Invoices",
|
||||
href: "/",
|
||||
},
|
||||
{
|
||||
text: "Detail",
|
||||
active: true,
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Layout>
|
||||
<PageHeader :title="title" :items="items" />
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="invoice-title">
|
||||
<h4 class="float-end font-size-16">Order # 12345</h4>
|
||||
<div class="mb-4">
|
||||
<img
|
||||
src="@/assets/images/logo-dark.png"
|
||||
alt="logo"
|
||||
height="20"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<address>
|
||||
<strong>Billed To:</strong>
|
||||
<br />John Smith <br />1234 Main <br />Apt. 4B
|
||||
<br />Springfield, ST 54321
|
||||
</address>
|
||||
</div>
|
||||
<div class="col-6 text-sm-end">
|
||||
<address>
|
||||
<strong>Shipped To:</strong>
|
||||
<br />Kenny Rigdon <br />1234 Main <br />Apt. 4B
|
||||
<br />Springfield, ST 54321
|
||||
</address>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-6 mt-3">
|
||||
<address>
|
||||
<strong>Payment Method:</strong>
|
||||
<br />Visa ending **** 4242 <br />jsmith@email.com
|
||||
</address>
|
||||
</div>
|
||||
<div class="col-6 mt-3 text-sm-end">
|
||||
<address>
|
||||
<strong>Order Date:</strong>
|
||||
<br />October 16, 2019
|
||||
<br />
|
||||
<br />
|
||||
</address>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-2 mt-3">
|
||||
<h3 class="font-size-16">Order summary</h3>
|
||||
</div>
|
||||
<div class="table-responsive">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 70px">No.</th>
|
||||
<th>Item</th>
|
||||
<th class="text-sm-end">Price</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>01</td>
|
||||
<td>Skote - Bootstrap 5 Admin Dashboard</td>
|
||||
<td class="text-sm-end">$499.00</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>02</td>
|
||||
<td>Skote - Bootstrap 4 Landing Template</td>
|
||||
<td class="text-sm-end">$399.00</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>03</td>
|
||||
<td>Veltrix - Bootstrap 4 Admin Template</td>
|
||||
<td class="text-sm-end">$499.00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2" class="text-sm-end">Sub Total</td>
|
||||
<td class="text-sm-end">$1397.00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2" class="border-0 text-sm-end">
|
||||
<strong>Shipping</strong>
|
||||
</td>
|
||||
<td class="border-0 text-sm-end">$13.00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2" class="border-0 text-sm-end">
|
||||
<strong>Total</strong>
|
||||
</td>
|
||||
<td class="border-0 text-sm-end">
|
||||
<h4 class="m-0">$1410.00</h4>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="d-print-none">
|
||||
<div class="float-end">
|
||||
<a
|
||||
href="javascript:window.print()"
|
||||
class="btn btn-success waves-effect waves-light me-1"
|
||||
><i class="fa fa-print"></i
|
||||
></a>
|
||||
<a
|
||||
href="#"
|
||||
class="btn btn-primary w-md waves-effect waves-light"
|
||||
>Send</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</Layout>
|
||||
</template>
|
||||
|
|
@ -1,554 +0,0 @@
|
|||
<script>
|
||||
import Layout from "../../layouts/main";
|
||||
import PageHeader from "@/components/page-header";
|
||||
import appConfig from "@/app.config";
|
||||
|
||||
/**
|
||||
* Invoice-list component
|
||||
*/
|
||||
export default {
|
||||
page: {
|
||||
title: "Invoice List",
|
||||
meta: [{ name: "description", content: appConfig.description }],
|
||||
},
|
||||
components: { Layout, PageHeader },
|
||||
data() {
|
||||
return {
|
||||
title: "Invoice List",
|
||||
items: [
|
||||
{
|
||||
text: "Invoices",
|
||||
href: "/",
|
||||
},
|
||||
{
|
||||
text: "Invoice List",
|
||||
active: true,
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Layout>
|
||||
<PageHeader :title="title" :items="items" />
|
||||
<div class="row">
|
||||
<div class="col-xl-4 col-sm-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-lg-4">
|
||||
<div class="text-lg-center">
|
||||
<div
|
||||
class="avatar-sm me-3 mx-lg-auto mb-3 mt-1 float-start float-lg-none"
|
||||
>
|
||||
<span
|
||||
class="avatar-title rounded-circle bg-primary bg-soft text-primary font-size-16"
|
||||
>
|
||||
M
|
||||
</span>
|
||||
</div>
|
||||
<h5 class="mb-1 font-size-15 text-truncate">Marion Burton</h5>
|
||||
<a href="#" class="text-muted">@Skote</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-8">
|
||||
<div>
|
||||
<router-link
|
||||
to="/invoices/detail"
|
||||
class="d-block text-primary text-decoration-underline mb-2"
|
||||
>Invoice #14251</router-link
|
||||
>
|
||||
<h5 class="text-truncate mb-4 mb-lg-5">Skote Dashboard UI</h5>
|
||||
<ul class="list-inline mb-0">
|
||||
<li class="list-inline-item me-3">
|
||||
<h5
|
||||
class="font-size-14"
|
||||
data-toggle="tooltip"
|
||||
data-placement="top"
|
||||
title="Amount"
|
||||
>
|
||||
<i class="bx bx-money me-1 text-muted"></i> $1455
|
||||
</h5>
|
||||
</li>
|
||||
<li class="list-inline-item">
|
||||
<h5
|
||||
class="font-size-14"
|
||||
data-toggle="tooltip"
|
||||
data-placement="top"
|
||||
title="Due Date"
|
||||
>
|
||||
<i class="bx bx-calendar me-1 text-muted"></i> 10 Oct,
|
||||
19
|
||||
</h5>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4 col-sm-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-lg-4">
|
||||
<div class="text-lg-center">
|
||||
<img
|
||||
src="@/assets/images/users/avatar-2.jpg"
|
||||
class="avatar-sm me-3 mx-lg-auto mb-3 mt-1 float-start float-lg-none rounded-circle"
|
||||
alt="img"
|
||||
/>
|
||||
<h5 class="mb-1 font-size-15 text-truncate">Francis Witte</h5>
|
||||
<a href="#" class="text-muted">@Skote</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-8">
|
||||
<div>
|
||||
<router-link
|
||||
to="/invoices/detail"
|
||||
class="d-block text-primary text-decoration-underline mb-2"
|
||||
>Invoice #14252</router-link
|
||||
>
|
||||
<h5 class="text-truncate mb-4 mb-lg-5">Brand logo design</h5>
|
||||
<ul class="list-inline mb-0">
|
||||
<li class="list-inline-item me-3">
|
||||
<h5
|
||||
class="font-size-14"
|
||||
data-toggle="tooltip"
|
||||
data-placement="top"
|
||||
title="Amount"
|
||||
>
|
||||
<i class="bx bx-money me-1 text-muted"></i> $ 1024
|
||||
</h5>
|
||||
</li>
|
||||
<li class="list-inline-item">
|
||||
<h5
|
||||
class="font-size-14"
|
||||
data-toggle="tooltip"
|
||||
data-placement="top"
|
||||
title="Due Date"
|
||||
>
|
||||
<i class="bx bx-calendar me-1 text-muted"></i> 11 Oct,
|
||||
19
|
||||
</h5>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4 col-sm-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-lg-4">
|
||||
<div class="text-lg-center">
|
||||
<img
|
||||
src="@/assets/images/users/avatar-7.jpg"
|
||||
class="avatar-sm me-3 mx-lg-auto mb-3 mt-1 float-start float-lg-none rounded-circle"
|
||||
alt="img"
|
||||
/>
|
||||
<h5 class="mb-1 font-size-15 text-truncate">Joseph Flint</h5>
|
||||
<a href="#" class="text-muted">@Skote</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-8">
|
||||
<div>
|
||||
<router-link
|
||||
to="/invoices/detail"
|
||||
class="d-block text-primary text-decoration-underline mb-2"
|
||||
>Invoice #14253</router-link
|
||||
>
|
||||
<h5 class="text-truncate mb-4 mb-lg-5">
|
||||
Landing page Design
|
||||
</h5>
|
||||
<ul class="list-inline mb-0">
|
||||
<li class="list-inline-item me-3">
|
||||
<h5
|
||||
class="font-size-14"
|
||||
data-toggle="tooltip"
|
||||
data-placement="top"
|
||||
title="Amount"
|
||||
>
|
||||
<i class="bx bx-money me-1 text-muted"></i> $ 1189
|
||||
</h5>
|
||||
</li>
|
||||
<li class="list-inline-item">
|
||||
<h5
|
||||
class="font-size-14"
|
||||
data-toggle="tooltip"
|
||||
data-placement="top"
|
||||
title="Due Date"
|
||||
>
|
||||
<i class="bx bx-calendar me-1 text-muted"></i> 12 Oct,
|
||||
19
|
||||
</h5>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xl-4 col-sm-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-lg-4">
|
||||
<div class="text-lg-center">
|
||||
<img
|
||||
src="@/assets/images/users/avatar-8.jpg"
|
||||
class="avatar-sm me-3 mx-lg-auto mb-3 mt-1 float-start float-lg-none rounded-circle"
|
||||
alt="img"
|
||||
/>
|
||||
<h5 class="mb-1 font-size-15 text-truncate">Larry Nielsen</h5>
|
||||
<a href="#" class="text-muted">@Skote</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-8">
|
||||
<div>
|
||||
<router-link
|
||||
to="/invoices/detail"
|
||||
class="d-block text-primary text-decoration-underline mb-2"
|
||||
>Invoice #14254</router-link
|
||||
>
|
||||
<h5 class="text-truncate mb-4 mb-lg-5">
|
||||
Redesign - Landing page
|
||||
</h5>
|
||||
<ul class="list-inline mb-0">
|
||||
<li class="list-inline-item me-3">
|
||||
<h5
|
||||
class="font-size-14"
|
||||
data-toggle="tooltip"
|
||||
data-placement="top"
|
||||
title="Amount"
|
||||
>
|
||||
<i class="bx bx-money me-1 text-muted"></i> $ 1245
|
||||
</h5>
|
||||
</li>
|
||||
<li class="list-inline-item">
|
||||
<h5
|
||||
class="font-size-14"
|
||||
data-toggle="tooltip"
|
||||
data-placement="top"
|
||||
title="Due Date"
|
||||
>
|
||||
<i class="bx bx-calendar me-1 text-muted"></i> 12 Oct,
|
||||
19
|
||||
</h5>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4 col-sm-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-lg-4">
|
||||
<div class="text-lg-center">
|
||||
<img
|
||||
src="@/assets/images/users/avatar-5.jpg"
|
||||
class="avatar-sm me-3 mx-lg-auto mb-3 mt-1 float-start float-lg-none rounded-circle"
|
||||
alt="img"
|
||||
/>
|
||||
<h5 class="mb-1 font-size-15 text-truncate">Mark Evans</h5>
|
||||
<a href="#" class="text-muted">@Skote</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-8">
|
||||
<div>
|
||||
<router-link
|
||||
to="/invoices/detail"
|
||||
class="d-block text-primary text-decoration-underline mb-2"
|
||||
>Invoice #14255</router-link
|
||||
>
|
||||
<h5 class="text-truncate mb-4 mb-lg-5">
|
||||
Blog Template Design
|
||||
</h5>
|
||||
<ul class="list-inline mb-0">
|
||||
<li class="list-inline-item me-3">
|
||||
<h5
|
||||
class="font-size-14"
|
||||
data-toggle="tooltip"
|
||||
data-placement="top"
|
||||
title="Amount"
|
||||
>
|
||||
<i class="bx bx-money me-1 text-muted"></i> $ 1024
|
||||
</h5>
|
||||
</li>
|
||||
<li class="list-inline-item">
|
||||
<h5
|
||||
class="font-size-14"
|
||||
data-toggle="tooltip"
|
||||
data-placement="top"
|
||||
title="Due Date"
|
||||
>
|
||||
<i class="bx bx-calendar me-1 text-muted"></i> 11 Oct,
|
||||
19
|
||||
</h5>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4 col-sm-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-lg-4">
|
||||
<div class="text-lg-center">
|
||||
<div
|
||||
class="avatar-sm me-3 mx-lg-auto mb-3 mt-1 float-start float-lg-none"
|
||||
>
|
||||
<span
|
||||
class="avatar-title rounded-circle bg-info bg-soft text-primary font-size-16"
|
||||
>
|
||||
T
|
||||
</span>
|
||||
</div>
|
||||
<h5 class="mb-1 font-size-15 text-truncate">Timothy Lee</h5>
|
||||
<a href="#" class="text-muted">@Skote</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-8">
|
||||
<div>
|
||||
<router-link
|
||||
to="/invoices/detail"
|
||||
class="d-block text-primary text-decoration-underline mb-2"
|
||||
>Invoice #14256</router-link
|
||||
>
|
||||
<h5 class="text-truncate mb-4 mb-lg-5">
|
||||
Landing page Design
|
||||
</h5>
|
||||
<ul class="list-inline mb-0">
|
||||
<li class="list-inline-item me-3">
|
||||
<h5
|
||||
class="font-size-14"
|
||||
data-toggle="tooltip"
|
||||
data-placement="top"
|
||||
title="Amount"
|
||||
>
|
||||
<i class="bx bx-money me-1 text-muted"></i> $ 1189
|
||||
</h5>
|
||||
</li>
|
||||
<li class="list-inline-item">
|
||||
<h5
|
||||
class="font-size-14"
|
||||
data-toggle="tooltip"
|
||||
data-placement="top"
|
||||
title="Due Date"
|
||||
>
|
||||
<i class="bx bx-calendar me-1 text-muted"></i> 13 Oct,
|
||||
19
|
||||
</h5>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xl-4 col-sm-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-lg-4">
|
||||
<div class="text-lg-center">
|
||||
<img
|
||||
src="@/assets/images/users/avatar-1.jpg"
|
||||
class="avatar-sm me-3 mx-lg-auto mb-3 mt-1 float-start float-lg-none rounded-circle"
|
||||
alt="img"
|
||||
/>
|
||||
<h5 class="mb-1 font-size-15 text-truncate">Stanley Bland</h5>
|
||||
<a href="#" class="text-muted">@Skote</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-8">
|
||||
<div>
|
||||
<router-link
|
||||
to="/invoices/detail"
|
||||
class="d-block text-primary text-decoration-underline mb-2"
|
||||
>Invoice #14257</router-link
|
||||
>
|
||||
<h5 class="text-truncate mb-4 mb-lg-5">Landing page UI</h5>
|
||||
<ul class="list-inline mb-0">
|
||||
<li class="list-inline-item me-3">
|
||||
<h5
|
||||
class="font-size-14"
|
||||
data-toggle="tooltip"
|
||||
data-placement="top"
|
||||
title="Amount"
|
||||
>
|
||||
<i class="bx bx-money me-1 text-muted"></i> $ 1148
|
||||
</h5>
|
||||
</li>
|
||||
<li class="list-inline-item">
|
||||
<h5
|
||||
class="font-size-14"
|
||||
data-toggle="tooltip"
|
||||
data-placement="top"
|
||||
title="Due Date"
|
||||
>
|
||||
<i class="bx bx-calendar me-1 text-muted"></i> 14 Oct,
|
||||
19
|
||||
</h5>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4 col-sm-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-lg-4">
|
||||
<div class="text-lg-center">
|
||||
<div
|
||||
class="avatar-sm me-3 mx-lg-auto mb-3 mt-1 float-start float-lg-none"
|
||||
>
|
||||
<span
|
||||
class="avatar-title rounded-circle bg-success bg-soft text-success font-size-16"
|
||||
>
|
||||
T
|
||||
</span>
|
||||
</div>
|
||||
<h5 class="mb-1 font-size-15 text-truncate">Tommy Wilson</h5>
|
||||
<a href="#" class="text-muted">@Skote</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-8">
|
||||
<div>
|
||||
<router-link
|
||||
to="/invoices/detail"
|
||||
class="d-block text-primary text-decoration-underline mb-2"
|
||||
>Invoice #14258</router-link
|
||||
>
|
||||
<h5 class="text-truncate mb-4 mb-lg-5">
|
||||
Redesign - Dashboard
|
||||
</h5>
|
||||
<ul class="list-inline mb-0">
|
||||
<li class="list-inline-item me-3">
|
||||
<h5
|
||||
class="font-size-14"
|
||||
data-toggle="tooltip"
|
||||
data-placement="top"
|
||||
title="Amount"
|
||||
>
|
||||
<i class="bx bx-money me-1 text-muted"></i> $ 1259
|
||||
</h5>
|
||||
</li>
|
||||
<li class="list-inline-item">
|
||||
<h5
|
||||
class="font-size-14"
|
||||
data-toggle="tooltip"
|
||||
data-placement="top"
|
||||
title="Due Date"
|
||||
>
|
||||
<i class="bx bx-calendar me-1 text-muted"></i> 15 Oct,
|
||||
19
|
||||
</h5>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4 col-sm-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-lg-4">
|
||||
<div class="text-lg-center">
|
||||
<img
|
||||
src="@/assets/images/users/avatar-4.jpg"
|
||||
class="avatar-sm me-3 mx-lg-auto mb-3 mt-1 float-start float-lg-none rounded-circle"
|
||||
alt="img"
|
||||
/>
|
||||
<h5 class="mb-1 font-size-15 text-truncate">Louis Brandon</h5>
|
||||
<a href="#" class="text-muted">@Skote</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-8">
|
||||
<div>
|
||||
<router-link
|
||||
to="/invoices/detail"
|
||||
class="d-block text-primary text-decoration-underline mb-2"
|
||||
>Invoice #14259</router-link
|
||||
>
|
||||
<h5 class="text-truncate mb-4 mb-lg-5">Email Template UI</h5>
|
||||
<ul class="list-inline mb-0">
|
||||
<li class="list-inline-item me-3">
|
||||
<h5
|
||||
class="font-size-14"
|
||||
data-toggle="tooltip"
|
||||
data-placement="top"
|
||||
title="Amount"
|
||||
>
|
||||
<i class="bx bx-money me-1 text-muted"></i> $ 1355
|
||||
</h5>
|
||||
</li>
|
||||
<li class="list-inline-item">
|
||||
<h5
|
||||
class="font-size-14"
|
||||
data-toggle="tooltip"
|
||||
data-placement="top"
|
||||
title="Due Date"
|
||||
>
|
||||
<i class="bx bx-calendar me-1 text-muted"></i> 15 Oct,
|
||||
19
|
||||
</h5>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="text-center my-3">
|
||||
<a href="javascript:void(0);" class="text-success"
|
||||
><i class="bx bx-loader bx-spin font-size-18 align-middle me-2"></i>
|
||||
Load more
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col-->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</Layout>
|
||||
</template>
|
||||
|
|
@ -1,392 +0,0 @@
|
|||
<script>
|
||||
import { GoogleMap, Marker, Polygon } from "vue3-google-map";
|
||||
|
||||
import Layout from "../../layouts/main";
|
||||
import PageHeader from "@/components/page-header";
|
||||
import appConfig from "@/app.config";
|
||||
|
||||
/**
|
||||
* Google-map component
|
||||
*/
|
||||
export default {
|
||||
page: {
|
||||
title: "Google Map",
|
||||
meta: [{ name: "description", content: appConfig.description }],
|
||||
},
|
||||
components: { Layout, PageHeader, GoogleMap, Marker, Polygon },
|
||||
data() {
|
||||
return {
|
||||
title: "Google Maps",
|
||||
items: [
|
||||
{
|
||||
text: "Maps",
|
||||
href: "/",
|
||||
},
|
||||
{
|
||||
text: "Google Maps",
|
||||
active: true,
|
||||
},
|
||||
],
|
||||
markers: [
|
||||
{
|
||||
position: { lat: 10.0, lng: 10.0 },
|
||||
},
|
||||
{
|
||||
position: { lat: 15.0, lng: 13.0 },
|
||||
},
|
||||
],
|
||||
pov: null,
|
||||
pano: null,
|
||||
edited: null,
|
||||
paths: [
|
||||
[
|
||||
{ lat: 1.38, lng: 103.8 },
|
||||
{ lat: 1.38, lng: 103.81 },
|
||||
{ lat: 1.39, lng: 103.81 },
|
||||
{ lat: 1.39, lng: 103.8 },
|
||||
],
|
||||
[
|
||||
{ lat: 1.382, lng: 103.802 },
|
||||
{ lat: 1.382, lng: 103.808 },
|
||||
{ lat: 1.388, lng: 103.808 },
|
||||
{ lat: 1.388, lng: 103.802 },
|
||||
],
|
||||
],
|
||||
scope: "usa",
|
||||
geographyConfig: {
|
||||
highlightBorderColor: "#bada55",
|
||||
highlightBorderWidth: 3,
|
||||
},
|
||||
fills: {
|
||||
Republican: "#CC4731",
|
||||
Democrat: "#306596",
|
||||
"Heavy Democrat": "#667FAF",
|
||||
"Light Democrat": "#A9C0DE",
|
||||
"Heavy Republican": "#CA5E5B",
|
||||
"Light Republican": "#EAA9A8",
|
||||
defaultFill: "#EDDC4E",
|
||||
},
|
||||
data: {
|
||||
AZ: {
|
||||
fillKey: "Republican",
|
||||
electoralVotes: 5,
|
||||
},
|
||||
CO: {
|
||||
fillKey: "Light Democrat",
|
||||
electoralVotes: 5,
|
||||
},
|
||||
DE: {
|
||||
fillKey: "Democrat",
|
||||
electoralVotes: 32,
|
||||
},
|
||||
FL: {
|
||||
fillKey: "UNDECIDED",
|
||||
electoralVotes: 29,
|
||||
},
|
||||
GA: {
|
||||
fillKey: "Republican",
|
||||
electoralVotes: 32,
|
||||
},
|
||||
HI: {
|
||||
fillKey: "Democrat",
|
||||
electoralVotes: 32,
|
||||
},
|
||||
ID: {
|
||||
fillKey: "Republican",
|
||||
electoralVotes: 32,
|
||||
},
|
||||
IL: {
|
||||
fillKey: "Democrat",
|
||||
electoralVotes: 32,
|
||||
},
|
||||
IN: {
|
||||
fillKey: "Republican",
|
||||
electoralVotes: 11,
|
||||
},
|
||||
IA: {
|
||||
fillKey: "Light Democrat",
|
||||
electoralVotes: 11,
|
||||
},
|
||||
KS: {
|
||||
fillKey: "Republican",
|
||||
electoralVotes: 32,
|
||||
},
|
||||
KY: {
|
||||
fillKey: "Republican",
|
||||
electoralVotes: 32,
|
||||
},
|
||||
LA: {
|
||||
fillKey: "Republican",
|
||||
electoralVotes: 32,
|
||||
},
|
||||
MD: {
|
||||
fillKey: "Democrat",
|
||||
electoralVotes: 32,
|
||||
},
|
||||
ME: {
|
||||
fillKey: "Democrat",
|
||||
electoralVotes: 32,
|
||||
},
|
||||
MA: {
|
||||
fillKey: "Democrat",
|
||||
electoralVotes: 32,
|
||||
},
|
||||
MN: {
|
||||
fillKey: "Democrat",
|
||||
electoralVotes: 32,
|
||||
},
|
||||
MI: {
|
||||
fillKey: "Democrat",
|
||||
electoralVotes: 32,
|
||||
},
|
||||
MS: {
|
||||
fillKey: "Republican",
|
||||
electoralVotes: 32,
|
||||
},
|
||||
MO: {
|
||||
fillKey: "Republican",
|
||||
electoralVotes: 13,
|
||||
},
|
||||
MT: {
|
||||
fillKey: "Republican",
|
||||
electoralVotes: 32,
|
||||
},
|
||||
NC: {
|
||||
fillKey: "Light Republican",
|
||||
electoralVotes: 32,
|
||||
},
|
||||
NE: {
|
||||
fillKey: "Republican",
|
||||
electoralVotes: 32,
|
||||
},
|
||||
NV: {
|
||||
fillKey: "Heavy Democrat",
|
||||
electoralVotes: 32,
|
||||
},
|
||||
NH: {
|
||||
fillKey: "Light Democrat",
|
||||
electoralVotes: 32,
|
||||
},
|
||||
NJ: {
|
||||
fillKey: "Democrat",
|
||||
electoralVotes: 32,
|
||||
},
|
||||
NY: {
|
||||
fillKey: "Democrat",
|
||||
electoralVotes: 32,
|
||||
},
|
||||
ND: {
|
||||
fillKey: "Republican",
|
||||
electoralVotes: 32,
|
||||
},
|
||||
NM: {
|
||||
fillKey: "Democrat",
|
||||
electoralVotes: 32,
|
||||
},
|
||||
OH: {
|
||||
fillKey: "UNDECIDED",
|
||||
electoralVotes: 32,
|
||||
},
|
||||
OK: {
|
||||
fillKey: "Republican",
|
||||
electoralVotes: 32,
|
||||
},
|
||||
OR: {
|
||||
fillKey: "Democrat",
|
||||
electoralVotes: 32,
|
||||
},
|
||||
PA: {
|
||||
fillKey: "Democrat",
|
||||
electoralVotes: 32,
|
||||
},
|
||||
RI: {
|
||||
fillKey: "Democrat",
|
||||
electoralVotes: 32,
|
||||
},
|
||||
SC: {
|
||||
fillKey: "Republican",
|
||||
electoralVotes: 32,
|
||||
},
|
||||
SD: {
|
||||
fillKey: "Republican",
|
||||
electoralVotes: 32,
|
||||
},
|
||||
TN: {
|
||||
fillKey: "Republican",
|
||||
electoralVotes: 32,
|
||||
},
|
||||
TX: {
|
||||
fillKey: "Republican",
|
||||
electoralVotes: 32,
|
||||
},
|
||||
UT: {
|
||||
fillKey: "Republican",
|
||||
electoralVotes: 32,
|
||||
},
|
||||
WI: {
|
||||
fillKey: "Democrat",
|
||||
electoralVotes: 32,
|
||||
},
|
||||
VA: {
|
||||
fillKey: "Light Democrat",
|
||||
electoralVotes: 32,
|
||||
},
|
||||
VT: {
|
||||
fillKey: "Democrat",
|
||||
electoralVotes: 32,
|
||||
},
|
||||
WA: {
|
||||
fillKey: "Democrat",
|
||||
electoralVotes: 32,
|
||||
},
|
||||
WV: {
|
||||
fillKey: "Republican",
|
||||
electoralVotes: 32,
|
||||
},
|
||||
WY: {
|
||||
fillKey: "Republican",
|
||||
electoralVotes: 32,
|
||||
},
|
||||
CA: {
|
||||
fillKey: "Democrat",
|
||||
electoralVotes: 32,
|
||||
},
|
||||
CT: {
|
||||
fillKey: "Democrat",
|
||||
electoralVotes: 32,
|
||||
},
|
||||
AK: {
|
||||
fillKey: "Republican",
|
||||
electoralVotes: 32,
|
||||
},
|
||||
AR: {
|
||||
fillKey: "Republican",
|
||||
electoralVotes: 32,
|
||||
},
|
||||
AL: {
|
||||
fillKey: "Republican",
|
||||
electoralVotes: 32,
|
||||
},
|
||||
},
|
||||
popupData: "",
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* street view data update
|
||||
*/
|
||||
updatePov(pov) {
|
||||
this.pov = pov;
|
||||
},
|
||||
/**
|
||||
* street view data update
|
||||
*/
|
||||
updatePano(pano) {
|
||||
this.pano = pano;
|
||||
},
|
||||
/**
|
||||
* polygon editing
|
||||
*/
|
||||
updateEdited(mvcArray) {
|
||||
let paths = [];
|
||||
for (let i = 0; i < mvcArray.getLength(); i++) {
|
||||
let path = [];
|
||||
for (let j = 0; j < mvcArray.getAt(i).getLength(); j++) {
|
||||
let point = mvcArray.getAt(i).getAt(j);
|
||||
path.push({ lat: point.lat(), lng: point.lng() });
|
||||
}
|
||||
paths.push(path);
|
||||
}
|
||||
this.edited = paths;
|
||||
},
|
||||
|
||||
popupTemplate({ geography, datum }) {
|
||||
this.popupData = `${geography.properties.name}\nElectoral Votes: ${datum.electoralVotes}`;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Layout>
|
||||
<PageHeader :title="title" :items="items" />
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">Basic</h4>
|
||||
<p class="card-title-dsec">Example of google maps.</p>
|
||||
<!-- basic map -->
|
||||
<GoogleMap
|
||||
api-key="AIzaSyAbvyBxmMbFhrzP9Z8moyYr6dCr-pzjhBE"
|
||||
:center="{ lat: 2, lng: 2 }"
|
||||
:zoom="5"
|
||||
style="height: 300px"
|
||||
></GoogleMap>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">Markers</h4>
|
||||
<p class="card-title-dsec">Example of google maps.</p>
|
||||
<!-- Map with markers -->
|
||||
<GoogleMap
|
||||
:center="{ lat: 11, lng: 12 }"
|
||||
:zoom="3"
|
||||
style="height: 300px"
|
||||
>
|
||||
<Marker
|
||||
v-for="(m, index) in markers"
|
||||
:key="index"
|
||||
:position="m.position"
|
||||
:clickable="true"
|
||||
:draggable="true"
|
||||
@click="center = m.position"
|
||||
></Marker>
|
||||
</GoogleMap>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">Polygon Editing</h4>
|
||||
<p class="card-title-dsec">Example of google maps.</p>
|
||||
<!-- Polygon editiong map -->
|
||||
<GoogleMap
|
||||
:center="{ lat: 1.38, lng: 103.8 }"
|
||||
:zoom="12"
|
||||
style="height: 300px"
|
||||
>
|
||||
<Polygon
|
||||
:paths="paths"
|
||||
:editable="true"
|
||||
@paths_changed="updateEdited($event)"
|
||||
></Polygon>
|
||||
</GoogleMap>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">Map type</h4>
|
||||
<p class="card-title-dsec">Example of google maps.</p>
|
||||
<!-- Set map type -->
|
||||
<GoogleMap
|
||||
:center="{ lat: 4, lng: 4 }"
|
||||
:zoom="3"
|
||||
style="height: 300px"
|
||||
map-type-id="terrain"
|
||||
></GoogleMap>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
</template>
|
||||
|
|
@ -1,60 +0,0 @@
|
|||
<script>
|
||||
import { latLng } from "leaflet";
|
||||
import { LMap, LTileLayer, LMarker, LTooltip, LIcon } from "@vue-leaflet/vue-leaflet";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
zoom: 13,
|
||||
center: latLng(47.41322, -1.219482),
|
||||
url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
|
||||
attribution:
|
||||
'© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
|
||||
withTooltip: latLng(47.41422, -1.250482),
|
||||
showParagraph: false,
|
||||
mapOptions: {
|
||||
zoomSnap: 0.5,
|
||||
},
|
||||
showMap: true,
|
||||
};
|
||||
},
|
||||
components: {
|
||||
LMap,
|
||||
LTileLayer,
|
||||
LMarker,
|
||||
LIcon,
|
||||
LTooltip,
|
||||
},
|
||||
methods: {
|
||||
innerClick() {
|
||||
alert("Click!");
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<l-map
|
||||
:zoom="zoom"
|
||||
:center="center"
|
||||
:options="mapOptions"
|
||||
style="height: 400px; width: 100%"
|
||||
>
|
||||
<l-tile-layer :url="url" :attribution="attribution" />
|
||||
<l-marker :lat-lng="withTooltip">
|
||||
<l-tooltip :options="{ permanent: true, interactive: true }">
|
||||
<div @click="innerClick">
|
||||
I am a tooltip
|
||||
<p v-show="showParagraph">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed
|
||||
pretium nisl, ut sagittis sapien. Sed vel sollicitudin nisi. Donec
|
||||
finibus semper metus id malesuada.
|
||||
</p>
|
||||
</div>
|
||||
</l-tooltip>
|
||||
<l-icon>
|
||||
<img src="@/assets/images/leaflet/marker-icon.png" />
|
||||
</l-icon>
|
||||
</l-marker>
|
||||
</l-map>
|
||||
</template>
|
||||
|
|
@ -1,45 +0,0 @@
|
|||
<script>
|
||||
import { latLngBounds, latLng } from "leaflet";
|
||||
import { LMap, LTileLayer, LMarker } from "@vue-leaflet/vue-leaflet";
|
||||
export default {
|
||||
name: "SetBounds",
|
||||
components: {
|
||||
LMap,
|
||||
LTileLayer,
|
||||
LMarker
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
zoom: 13,
|
||||
center: [0, 0],
|
||||
bounds: latLngBounds([
|
||||
[40.70081290280357, -74.26963806152345],
|
||||
[40.82991732677597, -74.08716201782228]
|
||||
]),
|
||||
maxBounds: latLngBounds([
|
||||
[40.70081290280357, -74.26963806152345],
|
||||
[40.82991732677597, -74.08716201782228]
|
||||
]),
|
||||
url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
|
||||
attribution:
|
||||
'© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
|
||||
marker: latLng(47.41322, -1.219482)
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<l-map
|
||||
:zoom="zoom"
|
||||
:center="center"
|
||||
:bounds="bounds"
|
||||
:max-bounds="maxBounds"
|
||||
style="height: 400px; width: 100%"
|
||||
>
|
||||
<l-tile-layer :url="url" :attribution="attribution" />
|
||||
<l-marker :lat-lng="marker" />
|
||||
</l-map>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,87 +0,0 @@
|
|||
<script>
|
||||
import { latLng } from "leaflet";
|
||||
import {
|
||||
LMap,
|
||||
LTileLayer,
|
||||
LCircle,
|
||||
LRectangle,
|
||||
LPolygon,
|
||||
LPolyline
|
||||
} from "@vue-leaflet/vue-leaflet";
|
||||
export default {
|
||||
name: "GeometryTest",
|
||||
components: {
|
||||
LMap,
|
||||
LTileLayer,
|
||||
LCircle,
|
||||
LRectangle,
|
||||
LPolygon,
|
||||
LPolyline
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
zoom: 9,
|
||||
center: [47.31322, -1.319482],
|
||||
circle: {
|
||||
center: latLng(47.41322, -1.0482),
|
||||
radius: 4500
|
||||
},
|
||||
rectangle: {
|
||||
bounds: [
|
||||
[47.341456, -1.397133],
|
||||
[47.303901, -1.243813]
|
||||
]
|
||||
},
|
||||
polygon: {
|
||||
latlngs: [
|
||||
[47.2263299, -1.6222],
|
||||
[47.21024000000001, -1.6270065],
|
||||
[47.1969447, -1.6136169],
|
||||
[47.18527929999999, -1.6143036],
|
||||
[47.1794457, -1.6098404],
|
||||
[47.1775788, -1.5985107],
|
||||
[47.1676598, -1.5753365],
|
||||
[47.1593731, -1.5521622],
|
||||
[47.1593731, -1.5319061],
|
||||
[47.1722111, -1.5143967],
|
||||
[47.1960115, -1.4841843],
|
||||
[47.2095404, -1.4848709],
|
||||
[47.2291277, -1.4683914],
|
||||
[47.2533687, -1.5116501],
|
||||
[47.2577961, -1.5531921],
|
||||
[47.26828069, -1.5621185],
|
||||
[47.2657179, -1.589241],
|
||||
[47.2589612, -1.6204834],
|
||||
[47.237287, -1.6266632],
|
||||
[47.2263299, -1.6222]
|
||||
],
|
||||
color: "#ff00ff"
|
||||
},
|
||||
polyline: {
|
||||
latlngs: [
|
||||
[47.334852, -1.509485],
|
||||
[47.342596, -1.328731],
|
||||
[47.241487, -1.190568],
|
||||
[47.234787, -1.358337]
|
||||
],
|
||||
color: "green"
|
||||
},
|
||||
url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
|
||||
attribution:
|
||||
'© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<l-map :zoom="zoom" :center="center" style="height: 400px; width: 100%">
|
||||
<l-tile-layer :url="url" :attribution="attribution" />
|
||||
<l-circle :lat-lng="circle.center" :radius="circle.radius" />
|
||||
<l-rectangle :bounds="rectangle.bounds" />
|
||||
<l-polygon :lat-lngs="polygon.latlngs" :color="polygon.color" />
|
||||
<l-polyline :lat-lngs="polyline.latlngs" :color="polyline.color" />
|
||||
</l-map>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,48 +0,0 @@
|
|||
<script>
|
||||
import { LMap, LTileLayer, LMarker, LIcon, LCircleMarker } from "@vue-leaflet/vue-leaflet";
|
||||
import { latLng } from "leaflet";
|
||||
export default {
|
||||
name: "Icon",
|
||||
components: {
|
||||
LMap,
|
||||
LTileLayer,
|
||||
LMarker,
|
||||
LIcon,
|
||||
LCircleMarker,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
zoom: 10,
|
||||
center: latLng(47.41322, -1.219482),
|
||||
url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
|
||||
attribution:
|
||||
'© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
|
||||
staticAnchor: [16, 37],
|
||||
circle: {
|
||||
center: [47.41322, -1.0482],
|
||||
radius: 6,
|
||||
color: "red",
|
||||
},
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<l-map :zoom="zoom" :center="center" style="height: 400px; width: 100%">
|
||||
<l-tile-layer :url="url" :attribution="attribution" />
|
||||
<l-circle-marker
|
||||
:lat-lng="circle.center"
|
||||
:radius="circle.radius"
|
||||
:color="circle.color"
|
||||
/>
|
||||
<l-marker :lat-lng="circle.center"></l-marker>
|
||||
<l-marker :lat-lng="[47.41322, -1.189482]">
|
||||
<l-icon :icon-anchor="staticAnchor">
|
||||
<img src="@/assets/images/logo-dark.png" height="25" />
|
||||
<img src="@/assets/images/leaflet/marker-icon.png" />
|
||||
</l-icon>
|
||||
</l-marker>
|
||||
</l-map>
|
||||
</template>
|
||||
|
||||
|
|
@ -1,97 +0,0 @@
|
|||
<script>
|
||||
import Layout from "../../../layouts/main";
|
||||
import PageHeader from "@/components/page-header";
|
||||
import appConfig from "@/app.config";
|
||||
|
||||
import Basic from "./basic";
|
||||
import Boundary from "./boundary";
|
||||
import Icons from "./icons";
|
||||
import Geometry from "./geometry";
|
||||
import Markers from "./markers";
|
||||
|
||||
/**
|
||||
* Leaflet-map component
|
||||
*/
|
||||
export default {
|
||||
page: {
|
||||
title: "Leaflet map",
|
||||
meta: [{ name: "description", content: appConfig.description }]
|
||||
},
|
||||
components: {
|
||||
Layout,
|
||||
PageHeader,
|
||||
Boundary,
|
||||
Icons,
|
||||
Basic,
|
||||
Geometry,
|
||||
Markers
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
title: "Leaflet",
|
||||
items: [
|
||||
{
|
||||
text: "Maps",
|
||||
href: "/"
|
||||
},
|
||||
{
|
||||
text: "Leaflet",
|
||||
active: true
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Layout>
|
||||
<PageHeader :title="title" :items="items" />
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title mb-4">Example</h4>
|
||||
<Basic class="leaflet-map"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title mb-4">Fixed Bounds</h4>
|
||||
<Boundary class="leaflet-map"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title mb-4">Custom Icon Example</h4>
|
||||
<Icons class="leaflet-map"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title mb-4">Geometry Example</h4>
|
||||
<Geometry class="leaflet-map"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title mb-4">Draggable marker</h4>
|
||||
<Markers class="leaflet-map"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
</template>
|
||||
|
|
@ -1,66 +0,0 @@
|
|||
<script>
|
||||
import { LMap, LMarker, LTileLayer, LIcon } from "@vue-leaflet/vue-leaflet";
|
||||
import { latLng } from "leaflet";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
LMap,
|
||||
LTileLayer,
|
||||
LMarker,
|
||||
LIcon
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
zoom: 6,
|
||||
center: latLng(51.505, -0.09),
|
||||
url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
|
||||
staticAnchor: [16, 37],
|
||||
attribution:
|
||||
'© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
|
||||
markers: [
|
||||
{
|
||||
id: "m1",
|
||||
position: { lat: 51.505, lng: -0.09 },
|
||||
draggable: true,
|
||||
visible: true
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
position: { lat: 51.8905, lng: -0.09 },
|
||||
draggable: true,
|
||||
visible: true
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
position: { lat: 51.005, lng: -0.09 },
|
||||
draggable: true,
|
||||
visible: true
|
||||
},
|
||||
{
|
||||
id: "m4",
|
||||
position: { lat: 50.7605, lng: -0.09 },
|
||||
draggable: true,
|
||||
visible: true
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<l-map style="height: 400px; width: 100%" :zoom="zoom" :center="center">
|
||||
<l-tile-layer :url="url" :attribution="attribution" />
|
||||
<l-marker
|
||||
v-for="marker in markers"
|
||||
:key="marker.id"
|
||||
:visible="marker.visible"
|
||||
:draggable="marker.draggable"
|
||||
:lat-lng="marker.position"
|
||||
>
|
||||
<l-icon :icon-anchor="staticAnchor">
|
||||
<img src="@/assets/images/leaflet/marker-icon.png" />
|
||||
</l-icon>
|
||||
</l-marker>
|
||||
</l-map>
|
||||
</template>
|
||||
|
|
@ -1,147 +0,0 @@
|
|||
<script>
|
||||
import { ref } from "vue";
|
||||
import useVuelidate from "@vuelidate/core";
|
||||
|
||||
import DropZone from "@/components/widgets/dropZone";
|
||||
import datepicker from "vue3-datepicker";
|
||||
|
||||
import Layout from "../../layouts/main";
|
||||
import PageHeader from "@/components/page-header";
|
||||
import appConfig from "@/app.config";
|
||||
|
||||
/**
|
||||
* Projects-create component
|
||||
*/
|
||||
export default {
|
||||
page: {
|
||||
title: "Create New Project",
|
||||
meta: [{ name: "description", content: appConfig.description }],
|
||||
},
|
||||
setup() {
|
||||
let dropzoneFile = ref("");
|
||||
const drop = (e) => {
|
||||
dropzoneFile.value = e.dataTransfer.files[0];
|
||||
};
|
||||
const selectedFile = () => {
|
||||
dropzoneFile.value = document.querySelector(".dropzoneFile").files[0];
|
||||
};
|
||||
return { dropzoneFile, drop, selectedFile, v$: useVuelidate() };
|
||||
},
|
||||
components: {
|
||||
DropZone,
|
||||
datepicker,
|
||||
Layout,
|
||||
PageHeader,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
title: "Create New",
|
||||
items: [
|
||||
{
|
||||
text: "Projects",
|
||||
href: "/",
|
||||
},
|
||||
{
|
||||
text: "Create New",
|
||||
active: true,
|
||||
},
|
||||
],
|
||||
dropzoneOptions: {
|
||||
url: "https://httpbin.org/post",
|
||||
thumbnailWidth: 150,
|
||||
maxFilesize: 0.5,
|
||||
headers: { "My-Awesome-Header": "header value" },
|
||||
},
|
||||
daterange: ref(new Date()),
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Layout>
|
||||
<PageHeader :title="title" :items="items" />
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title mb-4">Create New Project</h4>
|
||||
<form>
|
||||
<div class="form-group row mb-4">
|
||||
<label for="projectname" class="col-form-label col-lg-2"
|
||||
>Project Name</label
|
||||
>
|
||||
<div class="col-lg-10">
|
||||
<input
|
||||
id="projectname"
|
||||
name="projectname"
|
||||
type="text"
|
||||
class="form-control"
|
||||
placeholder="Enter Project Name..."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mb-4">
|
||||
<label for="projectdesc" class="col-form-label col-lg-2"
|
||||
>Project Description</label
|
||||
>
|
||||
<div class="col-lg-10">
|
||||
<textarea
|
||||
id="projectdesc"
|
||||
class="form-control"
|
||||
rows="3"
|
||||
placeholder="Enter Project Description..."
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group row mb-4">
|
||||
<label class="col-form-label col-lg-2">Project Date</label>
|
||||
<div class="col-lg-10">
|
||||
<datepicker
|
||||
class="form-control"
|
||||
v-model="daterange"
|
||||
range
|
||||
append-to-body
|
||||
lang="en"
|
||||
confirm
|
||||
></datepicker>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group row mb-4">
|
||||
<label for="projectbudget" class="col-form-label col-lg-2"
|
||||
>Budget</label
|
||||
>
|
||||
<div class="col-lg-10">
|
||||
<input
|
||||
id="projectbudget"
|
||||
name="projectbudget"
|
||||
type="text"
|
||||
placeholder="Enter Project Budget..."
|
||||
class="form-control"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<div class="row mb-4">
|
||||
<label class="col-form-label col-lg-2">Attached Files</label>
|
||||
<div class="col-lg-10">
|
||||
<DropZone @drop.prevent="drop" @change="selectedFile" />
|
||||
<span class="file-info">File: {{ dropzoneFile.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-end">
|
||||
<div class="col-lg-10">
|
||||
<button type="submit" class="btn btn-primary">
|
||||
Create Project
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</Layout>
|
||||
</template>
|
||||
|
|
@ -1,46 +0,0 @@
|
|||
const barChart = {
|
||||
series: [{
|
||||
name: 'Overview',
|
||||
data: [42, 56, 40, 64, 26, 42, 56, 35, 62]
|
||||
}],
|
||||
chartOptions: {
|
||||
chart: {
|
||||
toolbar: {
|
||||
show: false
|
||||
},
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '14%',
|
||||
endingShape: 'rounded'
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
grid: {
|
||||
yaxis: {
|
||||
lines: {
|
||||
show: false,
|
||||
}
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
title: {
|
||||
text: '% (Percentage)'
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
labels: {
|
||||
rotate: -90
|
||||
},
|
||||
categories: ['1', '2', '3', '4', '5', '6', '7', '8', '9'],
|
||||
title: {
|
||||
text: 'Week',
|
||||
}
|
||||
},
|
||||
colors: ['#556ee6'],
|
||||
},
|
||||
};
|
||||
|
||||
export { barChart };
|
||||
|
|
@ -1,94 +0,0 @@
|
|||
const projectData = [
|
||||
{
|
||||
id: 1,
|
||||
image: require('@/assets/images/companies/img-1.png'),
|
||||
text: 'New admin Design',
|
||||
subtext: 'It will be as simple as Occidental',
|
||||
users: [require('@/assets/images/users/avatar-2.jpg'), require('@/assets/images/users/avatar-1.jpg')],
|
||||
status: 'Completed',
|
||||
date: '15 Oct, 19',
|
||||
comment: 214
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
image: require('@/assets/images/companies/img-2.png'),
|
||||
text: 'Brand logo design',
|
||||
subtext: 'To achieve it would be necessary',
|
||||
users: [require('@/assets/images/users/avatar-3.jpg')],
|
||||
status: 'Pending',
|
||||
date: '22 Oct, 19',
|
||||
comment: 183
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
image: require('@/assets/images/companies/img-3.png'),
|
||||
text: 'New Landing Design',
|
||||
subtext: 'For science, music, sport, etc',
|
||||
users: [require('@/assets/images/users/avatar-5.jpg'), require('@/assets/images/users/avatar-4.jpg')],
|
||||
status: 'Delay',
|
||||
date: '13 Oct, 19',
|
||||
comment: 175
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
image: require('@/assets/images/companies/img-4.png'),
|
||||
text: 'Redesign - Landing page',
|
||||
subtext: 'If several languages coalesce',
|
||||
users: [require('@/assets/images/users/avatar-6.jpg')],
|
||||
status: 'Completed',
|
||||
date: '14 Oct, 19',
|
||||
comment: 202
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
image: require('@/assets/images/companies/img-5.png'),
|
||||
text: 'Skote Dashboard UI',
|
||||
subtext: 'Separate existence is a myth',
|
||||
users: [require('@/assets/images/users/avatar-7.jpg'), require('@/assets/images/users/avatar-8.jpg')],
|
||||
status: 'Completed',
|
||||
date: '13 Oct, 19',
|
||||
comment: 194
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
image: require('@/assets/images/companies/img-6.png'),
|
||||
text: 'Blog Template UI',
|
||||
subtext: 'For science, music, sport, etc',
|
||||
users: [require('@/assets/images/users/avatar-6.jpg')],
|
||||
status: 'Pending',
|
||||
date: '24 Oct, 19',
|
||||
comment: 122
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
image: require('@/assets/images/companies/img-3.png'),
|
||||
text: 'Multipurpose Landing',
|
||||
subtext: 'It will be as simple as Occidental',
|
||||
users: [require('@/assets/images/users/avatar-3.jpg')],
|
||||
status: 'Delay',
|
||||
date: '15 Oct, 19',
|
||||
comment: 214
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
image: require('@/assets/images/companies/img-4.png'),
|
||||
text: 'App Landing UI',
|
||||
subtext: 'For science, music, sport, etc',
|
||||
users: [require('@/assets/images/users/avatar-4.jpg')],
|
||||
status: 'Completed',
|
||||
date: '11 Oct, 19',
|
||||
comment: 185
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
image: require('@/assets/images/companies/img-2.png'),
|
||||
text: 'New admin Design',
|
||||
subtext: 'Their most common words.',
|
||||
users: [require('@/assets/images/users/avatar-5.jpg')],
|
||||
status: 'Completed',
|
||||
date: '12 Oct, 19',
|
||||
comment: 106
|
||||
},
|
||||
];
|
||||
|
||||
export { projectData };
|
||||
|
|
@ -1,441 +0,0 @@
|
|||
<script>
|
||||
import Layout from "../../layouts/main";
|
||||
import PageHeader from "@/components/page-header";
|
||||
import appConfig from "@/app.config";
|
||||
|
||||
import { barChart } from "./data-overview";
|
||||
|
||||
/**
|
||||
* Projects-overview component
|
||||
*/
|
||||
export default {
|
||||
page: {
|
||||
title: "Projects Overview",
|
||||
meta: [{ name: "description", content: appConfig.description }]
|
||||
},
|
||||
components: { Layout, PageHeader },
|
||||
data() {
|
||||
return {
|
||||
barChart: barChart,
|
||||
title: "Projects Overview",
|
||||
items: [
|
||||
{
|
||||
text: "Projects",
|
||||
href: "/"
|
||||
},
|
||||
{
|
||||
text: "Projects Overview",
|
||||
active: true
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Layout>
|
||||
<PageHeader :title="title" :items="items" />
|
||||
<div class="row">
|
||||
<div class="col-lg-8">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="d-flex">
|
||||
<img src="@/assets/images/companies/img-1.png" alt class="avatar-sm me-4" />
|
||||
|
||||
<div class="flex-grow-1 overflow-hidden">
|
||||
<h5 class="text-truncate font-size-15">Skote Dashboard UI</h5>
|
||||
<p class="text-muted">Separate existence is a myth. For science, music, sport, etc.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5 class="font-size-15 mt-4">Project Details :</h5>
|
||||
|
||||
<p
|
||||
class="text-muted"
|
||||
>To an English person, it will seem like simplified English, as a skeptical Cambridge friend of mine told me what Occidental is. The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc,</p>
|
||||
|
||||
<div class="text-muted mt-4">
|
||||
<p>
|
||||
<i class="mdi mdi-chevron-right text-primary me-1"></i> To achieve this, it would be necessary
|
||||
</p>
|
||||
<p>
|
||||
<i class="mdi mdi-chevron-right text-primary me-1"></i> Separate existence is a myth.
|
||||
</p>
|
||||
<p>
|
||||
<i class="mdi mdi-chevron-right text-primary me-1"></i> If several languages coalesce
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="row task-dates">
|
||||
<div class="col-sm-4 col-6">
|
||||
<div class="mt-4">
|
||||
<h5 class="font-size-14">
|
||||
<i class="bx bx-calendar me-1 text-primary"></i> Start Date
|
||||
</h5>
|
||||
<p class="text-muted mb-0">08 Sept, 2019</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-4 col-6">
|
||||
<div class="mt-4">
|
||||
<h5 class="font-size-14">
|
||||
<i class="bx bx-calendar-check me-1 text-primary"></i> Due Date
|
||||
</h5>
|
||||
<p class="text-muted mb-0">12 Oct, 2019</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
|
||||
<div class="col-lg-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title mb-4">Team Members</h4>
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table table-nowrap align-middle">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="width: 50px;">
|
||||
<img
|
||||
src="@/assets/images/users/avatar-2.jpg"
|
||||
class="rounded-circle avatar-xs"
|
||||
alt
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<h5 class="font-size-14 m-0">
|
||||
<a href class="text-dark">Daniel Canales</a>
|
||||
</h5>
|
||||
</td>
|
||||
<td>
|
||||
<div>
|
||||
<a
|
||||
href="javascript: void(0);"
|
||||
class="badge bg-primary bg-soft text-primary font-size-11"
|
||||
>Frontend</a>
|
||||
<a
|
||||
href="javascript: void(0);"
|
||||
class="badge bg-soft bg-primary text-primary font-size-11 ms-1"
|
||||
>UI</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<img
|
||||
src="@/assets/images/users/avatar-1.jpg"
|
||||
class="rounded-circle avatar-xs"
|
||||
alt
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<h5 class="font-size-14 m-0">
|
||||
<a href class="text-dark">Jennifer Walker</a>
|
||||
</h5>
|
||||
</td>
|
||||
<td>
|
||||
<div>
|
||||
<a
|
||||
href="javascript: void(0);"
|
||||
class="badge bg-primary bg-soft text-primary font-size-11"
|
||||
>UI / UX</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="avatar-xs">
|
||||
<span
|
||||
class="avatar-title rounded-circle bg-soft-primary text-white font-size-16"
|
||||
>C</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<h5 class="font-size-14 m-0">
|
||||
<a href class="text-dark">Carl Mackay</a>
|
||||
</h5>
|
||||
</td>
|
||||
<td>
|
||||
<div>
|
||||
<a
|
||||
href="javascript: void(0);"
|
||||
class="badge bg-primary bg-soft text-primary font-size-11"
|
||||
>Backend</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<img
|
||||
src="@/assets/images/users/avatar-4.jpg"
|
||||
class="rounded-circle avatar-xs"
|
||||
alt
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<h5 class="font-size-14 m-0">
|
||||
<a href class="text-dark">Janice Cole</a>
|
||||
</h5>
|
||||
</td>
|
||||
<td>
|
||||
<div>
|
||||
<a
|
||||
href="javascript: void(0);"
|
||||
class="badge bg-primary bg-soft text-primary font-size-11"
|
||||
>Frontend</a>
|
||||
<a
|
||||
href="javascript: void(0);"
|
||||
class="badge bg-primary bg-soft text-primary font-size-11 ms-1"
|
||||
>UI</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="avatar-xs">
|
||||
<span
|
||||
class="avatar-title rounded-circle bg-soft-primary text-white font-size-16"
|
||||
>T</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<h5 class="font-size-14 m-0">
|
||||
<a href class="text-dark">Tony Brafford</a>
|
||||
</h5>
|
||||
</td>
|
||||
<td>
|
||||
<div>
|
||||
<a
|
||||
href="javascript: void(0);"
|
||||
class="badge bg-primary bg-soft text-primary font-size-11"
|
||||
>Backend</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title mb-4">Overview</h4>
|
||||
|
||||
<div id="overview-chart" class="apex-charts" dir="ltr"></div>
|
||||
<apexchart
|
||||
class="apex-charts"
|
||||
type="bar"
|
||||
height="280"
|
||||
:series="barChart.series"
|
||||
:options="barChart.chartOptions"
|
||||
></apexchart>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
|
||||
<div class="col-lg-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title mb-4">Attached Files</h4>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-nowrap table-centered table-hover mb-0 align-middle">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="width: 45px;">
|
||||
<div class="avatar-sm">
|
||||
<span
|
||||
class="avatar-title rounded-circle bg-soft bg-primary text-primary font-size-24"
|
||||
>
|
||||
<i class="bx bxs-file-doc"></i>
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<h5 class="font-size-14 mb-1">
|
||||
<a href="javascript: void(0);" class="text-dark">Skote Landing.Zip</a>
|
||||
</h5>
|
||||
<small>Size : 3.25 MB</small>
|
||||
</td>
|
||||
<td>
|
||||
<div class="text-center">
|
||||
<a href="javascript: void(0);" class="text-dark">
|
||||
<i class="bx bx-download h3 m-0"></i>
|
||||
</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="avatar-sm">
|
||||
<span
|
||||
class="avatar-title rounded-circle bg-soft bg-primary text-primary font-size-24"
|
||||
>
|
||||
<i class="bx bxs-file-doc"></i>
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<h5 class="font-size-14 mb-1">
|
||||
<a href="javascript: void(0);" class="text-dark">Skote Admin.Zip</a>
|
||||
</h5>
|
||||
<small>Size : 3.15 MB</small>
|
||||
</td>
|
||||
<td>
|
||||
<div class="text-center">
|
||||
<a href="javascript: void(0);" class="text-dark">
|
||||
<i class="bx bx-download h3 m-0"></i>
|
||||
</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="avatar-sm">
|
||||
<span
|
||||
class="avatar-title rounded-circle bg-soft bg-primary text-primary font-size-24"
|
||||
>
|
||||
<i class="bx bxs-file-doc"></i>
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<h5 class="font-size-14 mb-1">
|
||||
<a href="javascript: void(0);" class="text-dark">Skote Logo.Zip</a>
|
||||
</h5>
|
||||
<small>Size : 2.02 MB</small>
|
||||
</td>
|
||||
<td>
|
||||
<div class="text-center">
|
||||
<a href="javascript: void(0);" class="text-dark">
|
||||
<i class="bx bx-download h3 m-0"></i>
|
||||
</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="avatar-sm">
|
||||
<span
|
||||
class="avatar-title rounded-circle bg-soft bg-primary text-primary font-size-24"
|
||||
>
|
||||
<i class="bx bxs-file-doc"></i>
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<h5 class="font-size-14">
|
||||
<a href="javascript: void(0);" class="text-dark">Veltrix admin.Zip</a>
|
||||
</h5>
|
||||
<small>Size : 2.25 MB</small>
|
||||
</td>
|
||||
<td>
|
||||
<div class="text-center">
|
||||
<a href="javascript: void(0);" class="text-dark">
|
||||
<i class="bx bx-download h3 m-0"></i>
|
||||
</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
|
||||
<div class="col-lg-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title mb-4">Comments</h4>
|
||||
|
||||
<div class="d-flex mb-4">
|
||||
<div class="me-3">
|
||||
<img
|
||||
class="media-object rounded-circle avatar-xs"
|
||||
alt
|
||||
src="@/assets/images/users/avatar-2.jpg"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<h5 class="font-size-13 mb-1">David Lambert</h5>
|
||||
<p class="text-muted mb-1">Separate existence is a myth.</p>
|
||||
</div>
|
||||
<div class="ms-3">
|
||||
<a href class="text-primary">Reply</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex mb-4">
|
||||
<div class="me-3">
|
||||
<img
|
||||
class="media-object rounded-circle avatar-xs"
|
||||
alt
|
||||
src="@/assets/images/users/avatar-3.jpg"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<h5 class="font-size-13 mb-1">Steve Foster</h5>
|
||||
<p class="text-muted mb-1">
|
||||
<a href class="text-success">@Henry</a>
|
||||
To an English person it will like simplified
|
||||
</p>
|
||||
<div class="d-flex mt-3">
|
||||
<div class="avatar-xs me-3">
|
||||
<span
|
||||
class="avatar-title rounded-circle bg-soft bg-primary text-primary font-size-16"
|
||||
>J</span>
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<h5 class="font-size-13 mb-1">Jeffrey Walker</h5>
|
||||
<p class="text-muted mb-1">as a skeptical Cambridge friend</p>
|
||||
</div>
|
||||
<div class="ms-3">
|
||||
<a href class="text-primary">Reply</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ms-3">
|
||||
<a href class="text-primary">Reply</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex mb-4">
|
||||
<div class="avatar-xs me-3">
|
||||
<span
|
||||
class="avatar-title rounded-circle bg-soft bg-primary text-primary font-size-16"
|
||||
>S</span>
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<h5 class="font-size-13 mb-1">Steven Carlson</h5>
|
||||
<p class="text-muted mb-1">Separate existence is a myth.</p>
|
||||
</div>
|
||||
<div class="ms-3">
|
||||
<a href class="text-primary">Reply</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center mt-4 pt-2">
|
||||
<a href="javascript: void(0);" class="btn btn-primary btn-sm">View more</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</Layout>
|
||||
</template>
|
||||
|
|
@ -1,177 +0,0 @@
|
|||
<script>
|
||||
import Layout from "../../layouts/main";
|
||||
import PageHeader from "@/components/page-header";
|
||||
import appConfig from "@/app.config";
|
||||
|
||||
import { projectData } from "./data-projects";
|
||||
|
||||
/**
|
||||
* Projects-grid component
|
||||
*/
|
||||
export default {
|
||||
page: {
|
||||
title: "Projects Grid",
|
||||
meta: [
|
||||
{
|
||||
name: "description",
|
||||
content: appConfig.description,
|
||||
},
|
||||
],
|
||||
},
|
||||
components: {
|
||||
Layout,
|
||||
PageHeader,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
projectData: projectData,
|
||||
title: "Projects Grid",
|
||||
items: [
|
||||
{
|
||||
text: "Projects",
|
||||
href: "/",
|
||||
},
|
||||
{
|
||||
text: "Projects Grid",
|
||||
active: true,
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Layout>
|
||||
<PageHeader :title="title" :items="items" />
|
||||
<div class="row">
|
||||
<div v-for="grid in projectData" :key="grid.id" class="col-xl-4 col-sm-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="d-flex">
|
||||
<div class="avatar-md me-4">
|
||||
<span
|
||||
class="avatar-title rounded-circle bg-light text-danger font-size-16"
|
||||
>
|
||||
<img :src="`${grid.image}`" alt height="30" />
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="flex-grow-1 overflow-hidden">
|
||||
<h5 class="text-truncate font-size-15">
|
||||
<a href="javascript: void(0);" class="text-dark">{{
|
||||
grid.text
|
||||
}}</a>
|
||||
</h5>
|
||||
<p class="text-muted mb-4">{{ grid.subtext }}</p>
|
||||
<div class="avatar-group">
|
||||
<div class="avatar-group-item">
|
||||
<a
|
||||
href="javascript: void(0);"
|
||||
class="d-inline-block"
|
||||
>
|
||||
<img
|
||||
:src="`${grid.users[0]}`"
|
||||
class="rounded-circle avatar-xs"
|
||||
alt
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
<div class="avatar-group-item" v-if="grid.users[1]">
|
||||
<a
|
||||
href="javascript: void(0);"
|
||||
class="d-inline-block"
|
||||
>
|
||||
<img
|
||||
:src="`${grid.users[1]}`"
|
||||
class="rounded-circle avatar-xs"
|
||||
alt
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
<div class="avatar-group-item" v-if="grid.users[2]">
|
||||
<a
|
||||
href="javascript: void(0);"
|
||||
class="d-inline-block"
|
||||
>
|
||||
<img
|
||||
:src="`${grid.users[2]}`"
|
||||
class="rounded-circle avatar-xs"
|
||||
alt
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-4 py-3 border-top">
|
||||
<ul class="list-inline mb-0">
|
||||
<li class="list-inline-item me-3">
|
||||
<span
|
||||
class="badge"
|
||||
:class="{
|
||||
'bg-success': `${grid.status}` === 'Completed',
|
||||
'bg-warning': `${grid.status}` === 'Pending',
|
||||
'bg-danger': `${grid.status}` === 'Delay',
|
||||
}"
|
||||
>{{ grid.status }}</span
|
||||
>
|
||||
</li>
|
||||
<li
|
||||
v-b-tooltip.hover.top
|
||||
class="list-inline-item me-3"
|
||||
title="Due Date"
|
||||
>
|
||||
<i class="bx bx-calendar me-1"></i>
|
||||
{{ grid.date }}
|
||||
</li>
|
||||
<li
|
||||
v-b-tooltip.hover.top
|
||||
class="list-inline-item me-3"
|
||||
title="Comments"
|
||||
>
|
||||
<i class="bx bx-comment-dots me-1"></i>
|
||||
{{ grid.comment }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<ul
|
||||
class="pagination pagination-rounded justify-content-center mt-2 mb-5"
|
||||
>
|
||||
<li class="page-item disabled">
|
||||
<a href="#" class="page-link">
|
||||
<i class="mdi mdi-chevron-left"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="page-item">
|
||||
<a href="#" class="page-link">1</a>
|
||||
</li>
|
||||
<li class="page-item active">
|
||||
<a href="#" class="page-link">2</a>
|
||||
</li>
|
||||
<li class="page-item">
|
||||
<a href="#" class="page-link">3</a>
|
||||
</li>
|
||||
<li class="page-item">
|
||||
<a href="#" class="page-link">4</a>
|
||||
</li>
|
||||
<li class="page-item">
|
||||
<a href="#" class="page-link">5</a>
|
||||
</li>
|
||||
<li class="page-item">
|
||||
<a href="#" class="page-link">
|
||||
<i class="mdi mdi-chevron-right"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end ro w -->
|
||||
</Layout>
|
||||
</template>
|
||||
|
|
@ -1,155 +0,0 @@
|
|||
<script>
|
||||
import Layout from "../../layouts/main";
|
||||
import PageHeader from "@/components/page-header";
|
||||
import appConfig from "@/app.config";
|
||||
|
||||
import { projectData } from "./data-projects";
|
||||
|
||||
/**
|
||||
* Projects-list component
|
||||
*/
|
||||
export default {
|
||||
page: {
|
||||
title: "Projects List",
|
||||
meta: [
|
||||
{
|
||||
name: "description",
|
||||
content: appConfig.description,
|
||||
},
|
||||
],
|
||||
},
|
||||
components: {
|
||||
Layout,
|
||||
PageHeader,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
projectData: projectData,
|
||||
title: "Projects List",
|
||||
items: [
|
||||
{
|
||||
text: "Projects",
|
||||
href: "/",
|
||||
},
|
||||
{
|
||||
text: "Projects List",
|
||||
active: true,
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Layout>
|
||||
<PageHeader :title="title" :items="items" />
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div>
|
||||
<div class="table-responsive">
|
||||
<table
|
||||
class="table project-list-table table-nowrap table-centered table-borderless align-middle"
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col" style="width: 100px">#</th>
|
||||
<th scope="col">Projects</th>
|
||||
<th scope="col">Due Date</th>
|
||||
<th scope="col">Status</th>
|
||||
<th scope="col">Team</th>
|
||||
<th scope="col">Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="project in projectData" :key="project.id">
|
||||
<td>
|
||||
<img :src="`${project.image}`" alt class="avatar-sm" />
|
||||
</td>
|
||||
<td>
|
||||
<h5 class="text-truncate font-size-14">
|
||||
<a href="javascript: void(0);" class="text-dark">{{
|
||||
project.text
|
||||
}}</a>
|
||||
</h5>
|
||||
<p class="text-muted mb-0">{{ project.subtext }}</p>
|
||||
</td>
|
||||
<td>{{ project.date }}</td>
|
||||
<td>
|
||||
<span
|
||||
class="badge"
|
||||
:class="{
|
||||
'bg-success': `${project.status}` === 'Completed',
|
||||
'bg-warning': `${project.status}` === 'Pending',
|
||||
'bg-danger': `${project.status}` === 'Delay',
|
||||
}"
|
||||
>{{ project.status }}</span
|
||||
>
|
||||
</td>
|
||||
<td>
|
||||
<div class="avatar-group">
|
||||
<div class="avatar-group-item">
|
||||
<a href="javascript: void(0);" class="d-inline-block">
|
||||
<img
|
||||
:src="`${project.users[0]}`"
|
||||
class="rounded-circle avatar-xs"
|
||||
alt
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
<div class="avatar-group-item" v-if="project.users[1]">
|
||||
<a href="javascript: void(0);" class="d-inline-block">
|
||||
<img
|
||||
:src="`${project.users[1]}`"
|
||||
class="rounded-circle avatar-xs"
|
||||
alt
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<b-dropdown
|
||||
class="card-drop"
|
||||
variant="white"
|
||||
menu-class="dropdown-menu-end"
|
||||
right
|
||||
toggle-class="p-0"
|
||||
>
|
||||
<template v-slot:button-content>
|
||||
<i class="mdi mdi-dots-horizontal font-size-18"></i>
|
||||
</template>
|
||||
<b-dropdown-item href="javascript: void(0);"
|
||||
>Action</b-dropdown-item
|
||||
>
|
||||
<b-dropdown-item href="javascript: void(0);"
|
||||
>Another action</b-dropdown-item
|
||||
>
|
||||
<b-dropdown-item href="javascript: void(0);"
|
||||
>Something else here</b-dropdown-item
|
||||
>
|
||||
</b-dropdown>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="text-center my-3">
|
||||
<a href="javascript:void(0);" class="text-success">
|
||||
<i class="bx bx-loader bx-spin font-size-18 align-middle me-2"></i>
|
||||
Load more
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col-->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</Layout>
|
||||
</template>
|
||||
|
|
@ -1,166 +0,0 @@
|
|||
<script>
|
||||
import appConfig from "@/app.config";
|
||||
/**
|
||||
* Confirm-mail-2 component
|
||||
*/
|
||||
export default {
|
||||
page: {
|
||||
title: "Confirm Mail 2",
|
||||
meta: [{ name: "description", content: appConfig.description }],
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
methods: {},
|
||||
mounted() {
|
||||
document.body.classList.add("auth-body-bg");
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="container-fluid p-0">
|
||||
<div class="row g-0">
|
||||
<div class="col-xl-9">
|
||||
<div class="auth-full-bg pt-lg-5 p-4">
|
||||
<div class="w-100">
|
||||
<div class="bg-overlay"></div>
|
||||
<div class="d-flex h-100 flex-column">
|
||||
<div class="p-4 mt-auto">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-7">
|
||||
<div class="text-center">
|
||||
<h4 class="mb-3">
|
||||
<i
|
||||
class="bx bxs-quote-alt-left text-primary h1 align-middle me-3"
|
||||
></i
|
||||
><span class="text-primary">5k</span>+ Satisfied
|
||||
clients
|
||||
</h4>
|
||||
<div dir="ltr" class="owl-theme">
|
||||
<b-carousel
|
||||
id="carousel-1"
|
||||
:interval="4000"
|
||||
indicators
|
||||
>
|
||||
<!-- Text slides with image -->
|
||||
<b-carousel-slide>
|
||||
<p class="font-size-16 mb-4">
|
||||
" Fantastic theme with a ton of options. If you
|
||||
just want the HTML to integrate with your
|
||||
project, then this is the package. You can find
|
||||
the files in the 'dist' folder...no need to
|
||||
install git and all the other stuff the
|
||||
documentation talks about. "
|
||||
</p>
|
||||
<div>
|
||||
<h4 class="font-size-16 text-primary">
|
||||
Abs1981
|
||||
</h4>
|
||||
<p class="font-size-14 mb-0">- Skote User</p>
|
||||
</div>
|
||||
</b-carousel-slide>
|
||||
|
||||
<!-- Slides with custom text -->
|
||||
<b-carousel-slide>
|
||||
<p class="font-size-16 mb-4">
|
||||
" If Every Vendor on Envato are as supportive as
|
||||
Themesbrand, Development with be a nice
|
||||
experience. You guys are Wonderful. Keep us the
|
||||
good work. "
|
||||
</p>
|
||||
<div>
|
||||
<h4 class="font-size-16 text-primary">
|
||||
nezerious
|
||||
</h4>
|
||||
<p class="font-size-14 mb-0">- Skote User</p>
|
||||
</div>
|
||||
</b-carousel-slide>
|
||||
</b-carousel>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
|
||||
<div class="col-xl-3">
|
||||
<div class="auth-full-page-content p-md-5 p-4">
|
||||
<div class="w-100">
|
||||
<div class="d-flex flex-column h-100">
|
||||
<div class="mb-4 mb-md-5">
|
||||
<router-link to="/" class="d-block auth-logo">
|
||||
<img
|
||||
src="@/assets/images/logo-dark.png"
|
||||
alt=""
|
||||
height="18"
|
||||
class="auth-logo-dark"
|
||||
/>
|
||||
<img
|
||||
src="@/assets/images/logo-light.png"
|
||||
alt=""
|
||||
height="18"
|
||||
class="auth-logo-light"
|
||||
/>
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="my-auto">
|
||||
<div class="text-center">
|
||||
<div class="avatar-md mx-auto">
|
||||
<div class="avatar-title rounded-circle bg-light">
|
||||
<i class="bx bx-mail-send h1 mb-0 text-primary"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-2 mt-4">
|
||||
<h4>Success !</h4>
|
||||
<p class="text-muted">
|
||||
At vero eos et accusamus et iusto odio dignissimos
|
||||
ducimus qui blanditiis praesentium voluptatum deleniti
|
||||
atque corrupti quos dolores et
|
||||
</p>
|
||||
<div class="mt-4">
|
||||
<router-link to="/" class="btn btn-success"
|
||||
>Back to Home</router-link
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 mt-md-5 text-center">
|
||||
<p class="mb-0">
|
||||
© {{ new Date().getFullYear() }} Skote. Crafted with
|
||||
<i class="mdi mdi-heart text-danger"></i> by Themesbrand
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</div>
|
||||
<!-- end container-fluid -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.carousel-caption {
|
||||
position: relative !important;
|
||||
right: 0;
|
||||
left: 0;
|
||||
padding-top: 1.25rem;
|
||||
padding-bottom: 1.25rem;
|
||||
color: #495057;
|
||||
}
|
||||
|
||||
.carousel-indicators li {
|
||||
background-color: rgba(85, 110, 230, 0.25);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,82 +0,0 @@
|
|||
<script>
|
||||
import appConfig from "@/app.config";
|
||||
|
||||
/**
|
||||
* Confirm-mail component
|
||||
*/
|
||||
export default {
|
||||
page: {
|
||||
title: "Confirm Mail",
|
||||
meta: [{ name: "description", content: appConfig.description }],
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
components: {},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="account-pages my-5 pt-sm-5">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="text-center mb-5 text-muted">
|
||||
<router-link to="/" class="d-block auth-logo">
|
||||
<img
|
||||
src="@/assets/images/logo-dark.png"
|
||||
alt=""
|
||||
height="20"
|
||||
class="auth-logo-dark mx-auto"
|
||||
/>
|
||||
<img
|
||||
src="@/assets/images/logo-light.png"
|
||||
alt=""
|
||||
height="20"
|
||||
class="auth-logo-light mx-auto"
|
||||
/>
|
||||
</router-link>
|
||||
<p class="mt-3">Responsive Bootstrap 5 Admin Dashboard</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end row -->
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-8 col-lg-6 col-xl-5">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="p-2">
|
||||
<div class="text-center">
|
||||
<div class="avatar-md mx-auto">
|
||||
<div class="avatar-title rounded-circle bg-light">
|
||||
<i class="bx bx-mail-send h1 mb-0 text-primary"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-2 mt-4">
|
||||
<h4>Success !</h4>
|
||||
<p class="text-muted">
|
||||
At vero eos et accusamus et iusto odio dignissimos ducimus
|
||||
qui blanditiis praesentium voluptatum deleniti atque
|
||||
corrupti quos dolores et
|
||||
</p>
|
||||
<div class="mt-4">
|
||||
<router-link to="/" class="btn btn-success"
|
||||
>Back to Home</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-5 text-center">
|
||||
<p>
|
||||
© {{ new Date().getFullYear() }} Skote. Crafted with
|
||||
<i class="mdi mdi-heart text-danger"></i> by Themesbrand
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,168 +0,0 @@
|
|||
<script>
|
||||
import appConfig from "@/app.config";
|
||||
|
||||
/**
|
||||
* Email-verification-2 component
|
||||
*/
|
||||
export default {
|
||||
page: {
|
||||
title: "Email verification 2",
|
||||
meta: [{ name: "description", content: appConfig.description }],
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
methods: {},
|
||||
mounted() {
|
||||
document.body.classList.add("auth-body-bg");
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="container-fluid p-0">
|
||||
<div class="row g-0">
|
||||
<div class="col-xl-9">
|
||||
<div class="auth-full-bg pt-lg-5 p-4">
|
||||
<div class="w-100">
|
||||
<div class="bg-overlay"></div>
|
||||
<div class="d-flex h-100 flex-column">
|
||||
<div class="p-4 mt-auto">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-7">
|
||||
<div class="text-center">
|
||||
<h4 class="mb-3">
|
||||
<i
|
||||
class="bx bxs-quote-alt-left text-primary h1 align-middle me-3"
|
||||
></i
|
||||
><span class="text-primary">5k</span>+ Satisfied
|
||||
clients
|
||||
</h4>
|
||||
|
||||
<div dir="ltr" class="owl-theme">
|
||||
<b-carousel
|
||||
id="carousel-1"
|
||||
:interval="4000"
|
||||
indicators
|
||||
>
|
||||
<!-- Text slides with image -->
|
||||
<b-carousel-slide>
|
||||
<p class="font-size-16 mb-4">
|
||||
" Fantastic theme with a ton of options. If you
|
||||
just want the HTML to integrate with your
|
||||
project, then this is the package. You can find
|
||||
the files in the 'dist' folder...no need to
|
||||
install git and all the other stuff the
|
||||
documentation talks about. "
|
||||
</p>
|
||||
<div>
|
||||
<h4 class="font-size-16 text-primary">
|
||||
Abs1981
|
||||
</h4>
|
||||
<p class="font-size-14 mb-0">- Skote User</p>
|
||||
</div>
|
||||
</b-carousel-slide>
|
||||
|
||||
<!-- Slides with custom text -->
|
||||
<b-carousel-slide>
|
||||
<p class="font-size-16 mb-4">
|
||||
" If Every Vendor on Envato are as supportive as
|
||||
Themesbrand, Development with be a nice
|
||||
experience. You guys are Wonderful. Keep us the
|
||||
good work. "
|
||||
</p>
|
||||
<div>
|
||||
<h4 class="font-size-16 text-primary">
|
||||
nezerious
|
||||
</h4>
|
||||
<p class="font-size-14 mb-0">- Skote User</p>
|
||||
</div>
|
||||
</b-carousel-slide>
|
||||
</b-carousel>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
|
||||
<div class="col-xl-3">
|
||||
<div class="auth-full-page-content p-md-5 p-4">
|
||||
<div class="w-100">
|
||||
<div class="d-flex flex-column h-100">
|
||||
<div class="mb-4 mb-md-5">
|
||||
<router-link to="/" class="d-block auth-logo">
|
||||
<img
|
||||
src="@/assets/images/logo-dark.png"
|
||||
alt=""
|
||||
height="18"
|
||||
class="auth-logo-dark"
|
||||
/>
|
||||
<img
|
||||
src="@/assets/images/logo-light.png"
|
||||
alt=""
|
||||
height="18"
|
||||
class="auth-logo-light"
|
||||
/>
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="my-auto">
|
||||
<div class="text-center">
|
||||
<div class="avatar-md mx-auto">
|
||||
<div class="avatar-title rounded-circle bg-light">
|
||||
<i class="bx bxs-envelope h1 mb-0 text-primary"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-2 mt-4">
|
||||
<h4>Verify your email</h4>
|
||||
<p>
|
||||
We have sent you verification email
|
||||
<span class="fw-semibold">example@abc.com</span>, Please
|
||||
check it
|
||||
</p>
|
||||
<div class="mt-4">
|
||||
<router-link to="/" class="btn btn-success w-md"
|
||||
>Verify email</router-link
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 mt-md-5 text-center">
|
||||
<p class="mb-0">
|
||||
© {{ new Date().getFullYear() }} Skote. Crafted with
|
||||
<i class="mdi mdi-heart text-danger"></i> by Themesbrand
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</div>
|
||||
<!-- end container-fluid -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.carousel-caption {
|
||||
position: relative !important;
|
||||
right: 0;
|
||||
left: 0;
|
||||
padding-top: 1.25rem;
|
||||
padding-bottom: 1.25rem;
|
||||
color: #495057;
|
||||
}
|
||||
|
||||
.carousel-indicators li {
|
||||
background-color: rgba(85, 110, 230, 0.25);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,87 +0,0 @@
|
|||
<script>
|
||||
import appConfig from "@/app.config";
|
||||
|
||||
/**
|
||||
* Email verification component
|
||||
*/
|
||||
export default {
|
||||
page: {
|
||||
title: "Email verification",
|
||||
meta: [{ name: "description", content: appConfig.description }],
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
components: {},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="account-pages my-5 pt-sm-5">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="text-center mb-5 text-muted">
|
||||
<router-link to="/" class="d-block auth-logo">
|
||||
<img
|
||||
src="@/assets/images/logo-dark.png"
|
||||
alt=""
|
||||
height="20"
|
||||
class="auth-logo-dark mx-auto"
|
||||
/>
|
||||
<img
|
||||
src="@/assets/images/logo-light.png"
|
||||
alt=""
|
||||
height="20"
|
||||
class="auth-logo-light mx-auto"
|
||||
/>
|
||||
</router-link>
|
||||
<p class="mt-3">Responsive Bootstrap 5 Admin Dashboard</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end row -->
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-8 col-lg-6 col-xl-5">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="p-2">
|
||||
<div class="text-center">
|
||||
<div class="avatar-md mx-auto">
|
||||
<div class="avatar-title rounded-circle bg-light">
|
||||
<i class="bx bxs-envelope h1 mb-0 text-primary"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-2 mt-4">
|
||||
<h4>Verify your email</h4>
|
||||
<p>
|
||||
We have sent you verification email
|
||||
<span class="fw-semibold">example@abc.com</span>,
|
||||
Please check it
|
||||
</p>
|
||||
<div class="mt-4">
|
||||
<router-link to="/" class="btn btn-success w-md"
|
||||
>Verify email</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-5 text-center">
|
||||
<p>
|
||||
Did't receive an email ?
|
||||
<a href="#" class="fw-medium text-primary"> Resend </a>
|
||||
</p>
|
||||
<p>
|
||||
©
|
||||
{{ new Date().getFullYear() }} Skote. Crafted with
|
||||
<i class="mdi mdi-heart text-danger"></i> by Themesbrand
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,199 +0,0 @@
|
|||
<script>
|
||||
import appConfig from "@/app.config";
|
||||
|
||||
/**
|
||||
* Lockscreen-2 component
|
||||
*/
|
||||
export default {
|
||||
page: {
|
||||
title: "Lockscreen 2",
|
||||
meta: [{ name: "description", content: appConfig.description }],
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
methods: {},
|
||||
mounted() {
|
||||
document.body.classList.add("auth-body-bg");
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="container-fluid p-0">
|
||||
<div class="row g-0">
|
||||
<div class="col-xl-9">
|
||||
<div class="auth-full-bg pt-lg-5 p-4">
|
||||
<div class="w-100">
|
||||
<div class="bg-overlay"></div>
|
||||
<div class="d-flex h-100 flex-column">
|
||||
<div class="p-4 mt-auto">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-7">
|
||||
<div class="text-center">
|
||||
<h4 class="mb-3">
|
||||
<i
|
||||
class="bx bxs-quote-alt-left text-primary h1 align-middle me-3"
|
||||
></i
|
||||
><span class="text-primary">5k</span>+ Satisfied
|
||||
clients
|
||||
</h4>
|
||||
|
||||
<div dir="ltr" class="owl-theme">
|
||||
<b-carousel
|
||||
id="carousel-1"
|
||||
:interval="4000"
|
||||
indicators
|
||||
>
|
||||
<!-- Text slides with image -->
|
||||
<b-carousel-slide>
|
||||
<p class="font-size-16 mb-4">
|
||||
" Fantastic theme with a ton of options. If you
|
||||
just want the HTML to integrate with your
|
||||
project, then this is the package. You can find
|
||||
the files in the 'dist' folder...no need to
|
||||
install git and all the other stuff the
|
||||
documentation talks about. "
|
||||
</p>
|
||||
<div>
|
||||
<h4 class="font-size-16 text-primary">
|
||||
Abs1981
|
||||
</h4>
|
||||
<p class="font-size-14 mb-0">- Skote User</p>
|
||||
</div>
|
||||
</b-carousel-slide>
|
||||
|
||||
<!-- Slides with custom text -->
|
||||
<b-carousel-slide>
|
||||
<p class="font-size-16 mb-4">
|
||||
" If Every Vendor on Envato are as supportive as
|
||||
Themesbrand, Development with be a nice
|
||||
experience. You guys are Wonderful. Keep us the
|
||||
good work. "
|
||||
</p>
|
||||
<div>
|
||||
<h4 class="font-size-16 text-primary">
|
||||
nezerious
|
||||
</h4>
|
||||
<p class="font-size-14 mb-0">- Skote User</p>
|
||||
</div>
|
||||
</b-carousel-slide>
|
||||
</b-carousel>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
|
||||
<div class="col-xl-3">
|
||||
<div class="auth-full-page-content p-md-5 p-4">
|
||||
<div class="w-100">
|
||||
<div class="d-flex flex-column h-100">
|
||||
<div class="mb-4 mb-md-5">
|
||||
<router-link to="/" class="d-block auth-logo">
|
||||
<img
|
||||
src="@/assets/images/logo-dark.png"
|
||||
alt=""
|
||||
height="18"
|
||||
class="auth-logo-dark"
|
||||
/>
|
||||
<img
|
||||
src="@/assets/images/logo-light.png"
|
||||
alt=""
|
||||
height="18"
|
||||
class="auth-logo-light"
|
||||
/>
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="my-auto">
|
||||
<div>
|
||||
<h5 class="text-primary">Lock screen</h5>
|
||||
<p class="text-muted">
|
||||
Enter your password to unlock the screen!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<form class="form-horizontal">
|
||||
<div class="user-thumb text-center mb-4">
|
||||
<img
|
||||
src="@/assets/images/users/avatar-1.jpg"
|
||||
class="rounded-circle img-thumbnail avatar-md"
|
||||
alt="thumbnail"
|
||||
/>
|
||||
<h5 class="font-size-15 mt-3">Maria Laird</h5>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="userpassword">Password</label>
|
||||
<input
|
||||
type="password"
|
||||
class="form-control"
|
||||
id="userpassword"
|
||||
placeholder="Enter password"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="row mb-0">
|
||||
<div class="col-12 text-end">
|
||||
<button
|
||||
class="btn btn-primary w-md waves-effect waves-light"
|
||||
type="submit"
|
||||
>
|
||||
Unlock
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<div class="mt-5 text-center">
|
||||
<p>
|
||||
Not you ? return
|
||||
<router-link
|
||||
to="/auth/login-2"
|
||||
class="fw-medium text-primary"
|
||||
>
|
||||
Sign In
|
||||
</router-link>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 mt-md-5 text-center">
|
||||
<p class="mb-0">
|
||||
© {{ new Date().getFullYear() }} Skote. Crafted with
|
||||
<i class="mdi mdi-heart text-danger"></i> by Themesbrand
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</div>
|
||||
<!-- end container-fluid -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.carousel-caption {
|
||||
position: relative !important;
|
||||
right: 0;
|
||||
left: 0;
|
||||
padding-top: 1.25rem;
|
||||
padding-bottom: 1.25rem;
|
||||
color: #495057;
|
||||
}
|
||||
|
||||
.carousel-indicators li {
|
||||
background-color: rgba(85, 110, 230, 0.25);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,115 +0,0 @@
|
|||
<script>
|
||||
import appConfig from "@/app.config";
|
||||
|
||||
/**
|
||||
* Lock screen page -component
|
||||
*/
|
||||
export default {
|
||||
page: {
|
||||
title: "Lockscreen",
|
||||
meta: [
|
||||
{
|
||||
name: "description",
|
||||
content: appConfig.description,
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="home-btn d-none d-sm-block">
|
||||
<router-link to="/" class="text-dark">
|
||||
<i class="mdi mdi-home-variant h2"></i>
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="account-pages my-5 pt-5">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-8 col-lg-6 col-xl-5">
|
||||
<div class="card overflow-hidden">
|
||||
<div class="bg-soft bg-primary">
|
||||
<div class="row">
|
||||
<div class="col-7">
|
||||
<div class="text-primary p-4">
|
||||
<h5 class="text-primary">Lock screen</h5>
|
||||
<p>Enter your password to unlock the screen!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-5 align-self-end">
|
||||
<img
|
||||
src="@/assets/images/profile-img.png"
|
||||
alt
|
||||
class="img-fluid"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body pt-0">
|
||||
<div>
|
||||
<a href="/">
|
||||
<div class="avatar-md profile-user-wid mb-4">
|
||||
<span class="avatar-title rounded-circle bg-light">
|
||||
<img
|
||||
src="@/assets/images/logo.svg"
|
||||
alt
|
||||
class="rounded-circle"
|
||||
height="34"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="p-2">
|
||||
<form class="form-horizontal">
|
||||
<div class="user-thumb text-center mb-4">
|
||||
<img
|
||||
src="@/assets/images/users/avatar-1.jpg"
|
||||
class="rounded-circle img-thumbnail avatar-md"
|
||||
alt="thumbnail"
|
||||
/>
|
||||
<h5 class="font-size-15 mt-3">Maria Laird</h5>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="userpassword">Password</label>
|
||||
<input
|
||||
type="password"
|
||||
class="form-control"
|
||||
id="userpassword"
|
||||
placeholder="Enter password"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="row mb-0">
|
||||
<div class="col-12 text-end">
|
||||
<button class="btn btn-primary w-md" type="submit">
|
||||
Unlock
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-5 text-center">
|
||||
<p>
|
||||
Not you ? return
|
||||
<router-link
|
||||
to="/auth/login-1"
|
||||
class="fw-medium text-primary"
|
||||
>Sign In</router-link
|
||||
>
|
||||
</p>
|
||||
<p>
|
||||
© {{ new Date().getFullYear() }} Skote. Crafted with
|
||||
<i class="mdi mdi-heart text-danger"></i> by Themesbrand
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,403 +0,0 @@
|
|||
<script>
|
||||
import axios from "axios";
|
||||
import {
|
||||
authMethods,
|
||||
authFackMethods,
|
||||
notificationMethods,
|
||||
} from "@/state/helpers";
|
||||
import { mapState } from "vuex";
|
||||
|
||||
import appConfig from "@/app.config";
|
||||
import { required, email, helpers } from "@vuelidate/validators";
|
||||
import useVuelidate from "@vuelidate/core";
|
||||
|
||||
/**
|
||||
* Login-2 component
|
||||
*/
|
||||
export default {
|
||||
setup() {
|
||||
return { v$: useVuelidate() };
|
||||
},
|
||||
page: {
|
||||
title: "Login 2",
|
||||
meta: [
|
||||
{
|
||||
name: "description",
|
||||
content: appConfig.description,
|
||||
},
|
||||
],
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
email: "admin@themesbrand.com",
|
||||
password: "123456",
|
||||
submitted: false,
|
||||
authError: null,
|
||||
tryingToLogIn: false,
|
||||
isAuthError: false,
|
||||
};
|
||||
},
|
||||
validations: {
|
||||
email: {
|
||||
required: helpers.withMessage("Email is required", required),
|
||||
email: helpers.withMessage("Please enter valid email", email),
|
||||
},
|
||||
password: {
|
||||
required: helpers.withMessage("Password is required", required),
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
...mapState("authfack", ["status"]),
|
||||
notification() {
|
||||
return this.$store ? this.$store.state.notification : null;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
...authMethods,
|
||||
...authFackMethods,
|
||||
...notificationMethods,
|
||||
// Try to log the user in with the username
|
||||
// and password they provided.
|
||||
tryToLogIn() {
|
||||
this.submitted = true;
|
||||
// stop here if form is invalid
|
||||
this.v$.$touch();
|
||||
|
||||
if (this.v$.$invalid) {
|
||||
return;
|
||||
} else {
|
||||
if (process.env.VUE_APP_DEFAULT_AUTH === "firebase") {
|
||||
this.tryingToLogIn = true;
|
||||
// Reset the authError if it existed.
|
||||
this.authError = null;
|
||||
return (
|
||||
this.logIn({
|
||||
email: this.email,
|
||||
password: this.password,
|
||||
})
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
.then((token) => {
|
||||
this.tryingToLogIn = false;
|
||||
this.isAuthError = false;
|
||||
// Redirect to the originally requested page, or to the home page
|
||||
this.$router.push(
|
||||
this.$route.query.redirectFrom || {
|
||||
name: "default",
|
||||
}
|
||||
);
|
||||
})
|
||||
.catch((error) => {
|
||||
this.tryingToLogIn = false;
|
||||
this.authError = error ? error : "";
|
||||
this.isAuthError = true;
|
||||
})
|
||||
);
|
||||
} else if (process.env.VUE_APP_DEFAULT_AUTH === "fakebackend") {
|
||||
const { email, password } = this;
|
||||
if (email && password) {
|
||||
this.login({
|
||||
email,
|
||||
password,
|
||||
});
|
||||
}
|
||||
} else if (process.env.VUE_APP_DEFAULT_AUTH === "authapi") {
|
||||
axios
|
||||
.post("http://127.0.0.1:8000/api/login", {
|
||||
email: this.email,
|
||||
password: this.password,
|
||||
})
|
||||
.then((res) => {
|
||||
return res;
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
document.body.classList.add("auth-body-bg");
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="container-fluid p-0">
|
||||
<div class="row g-0">
|
||||
<div class="col-xl-9">
|
||||
<div class="auth-full-bg pt-lg-5 p-4">
|
||||
<div class="w-100">
|
||||
<div class="bg-overlay"></div>
|
||||
<div class="d-flex h-100 flex-column">
|
||||
<div class="p-4 mt-auto">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-7">
|
||||
<div class="text-center">
|
||||
<h4 class="mb-3">
|
||||
<i
|
||||
class="
|
||||
bx
|
||||
bxs-quote-alt-left
|
||||
text-primary
|
||||
h1
|
||||
align-middle
|
||||
me-3
|
||||
"
|
||||
></i
|
||||
><span class="text-primary">5k</span>+ Satisfied
|
||||
clients
|
||||
</h4>
|
||||
|
||||
<div dir="ltr" class="owl-theme">
|
||||
<b-carousel
|
||||
id="carousel-1"
|
||||
:interval="4000"
|
||||
indicators
|
||||
>
|
||||
<b-carousel-slide>
|
||||
<p class="font-size-16 mb-4">
|
||||
" Fantastic theme with a ton of options. If you
|
||||
just want the HTML to integrate with your
|
||||
project, then this is the package. You can find
|
||||
the files in the 'dist' folder...no need to
|
||||
install git and all the other stuff the
|
||||
documentation talks about. "
|
||||
</p>
|
||||
<div>
|
||||
<h4 class="font-size-16 text-primary">
|
||||
Abs1981
|
||||
</h4>
|
||||
<p class="font-size-14 mb-0">- Skote User</p>
|
||||
</div>
|
||||
</b-carousel-slide>
|
||||
|
||||
<b-carousel-slide>
|
||||
<p class="font-size-16 mb-4">
|
||||
" If Every Vendor on Envato are as supportive as
|
||||
Themesbrand, Development with be a nice
|
||||
experience. You guys are Wonderful. Keep us the
|
||||
good work. "
|
||||
</p>
|
||||
<div>
|
||||
<h4 class="font-size-16 text-primary">
|
||||
nezerious
|
||||
</h4>
|
||||
<p class="font-size-14 mb-0">- Skote User</p>
|
||||
</div>
|
||||
</b-carousel-slide>
|
||||
</b-carousel>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
|
||||
<div class="col-xl-3">
|
||||
<div class="auth-full-page-content p-md-5 p-4">
|
||||
<div class="w-100">
|
||||
<div class="d-flex flex-column h-100">
|
||||
<div class="mb-4 mb-md-5">
|
||||
<router-link to="/" class="d-block auth-logo">
|
||||
<img
|
||||
src="@/assets/images/logo-dark.png"
|
||||
alt=""
|
||||
height="18"
|
||||
class="auth-logo-dark"
|
||||
/>
|
||||
<img
|
||||
src="@/assets/images/logo-light.png"
|
||||
alt=""
|
||||
height="18"
|
||||
class="auth-logo-light"
|
||||
/>
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="my-auto">
|
||||
<div>
|
||||
<h5 class="text-primary">Welcome Back !</h5>
|
||||
<p class="text-muted">Sign in to continue to Skote.</p>
|
||||
</div>
|
||||
<b-alert
|
||||
v-model="isAuthError"
|
||||
variant="danger"
|
||||
class="mt-3"
|
||||
dismissible
|
||||
>{{ authError }}</b-alert
|
||||
>
|
||||
|
||||
<div
|
||||
v-if="notification.message"
|
||||
:class="'alert ' + notification.type"
|
||||
>
|
||||
{{ notification.message }}
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<form>
|
||||
<b-form-group
|
||||
class="mb-3"
|
||||
id="input-group-1"
|
||||
label="Email"
|
||||
label-for="input-1"
|
||||
>
|
||||
<b-form-input
|
||||
id="input-1"
|
||||
v-model="email"
|
||||
type="text"
|
||||
placeholder="Enter email"
|
||||
:class="{
|
||||
'is-invalid': submitted && $v.email.$error,
|
||||
}"
|
||||
></b-form-input>
|
||||
<div
|
||||
v-if="submitted && $v.email.$error"
|
||||
class="invalid-feedback"
|
||||
>
|
||||
<span v-if="!$v.email.required"
|
||||
>Email is required.</span
|
||||
>
|
||||
<span v-if="!$v.email.email"
|
||||
>Please enter valid email.</span
|
||||
>
|
||||
</div>
|
||||
</b-form-group>
|
||||
<b-form-group
|
||||
class="mb-3"
|
||||
id="input-group-2"
|
||||
label="Password"
|
||||
label-for="input-2"
|
||||
>
|
||||
<b-form-input
|
||||
id="input-2"
|
||||
v-model="password"
|
||||
type="password"
|
||||
placeholder="Enter password"
|
||||
:class="{
|
||||
'is-invalid': submitted && $v.password.$error,
|
||||
}"
|
||||
></b-form-input>
|
||||
<div
|
||||
v-if="submitted && v$.password.$error"
|
||||
class="invalid-feedback"
|
||||
>
|
||||
<span v-if="v$.password.required.$message">{{
|
||||
v$.password.required.$message
|
||||
}}</span>
|
||||
</div>
|
||||
</b-form-group>
|
||||
|
||||
<div class="form-check">
|
||||
<input
|
||||
class="form-check-input"
|
||||
type="checkbox"
|
||||
id="remember-check"
|
||||
/>
|
||||
<label class="form-check-label" for="remember-check">
|
||||
Remember me
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="mt-3 d-grid">
|
||||
<b-button type="submit" variant="primary"
|
||||
>Log In</b-button
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 text-center">
|
||||
<h5 class="font-size-14 mb-3">Sign in with</h5>
|
||||
|
||||
<ul class="list-inline">
|
||||
<li class="list-inline-item">
|
||||
<a
|
||||
href="javascript::void()"
|
||||
class="
|
||||
social-list-item
|
||||
bg-primary
|
||||
text-white
|
||||
border-primary
|
||||
"
|
||||
>
|
||||
<i class="mdi mdi-facebook"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="list-inline-item">
|
||||
<a
|
||||
href="javascript::void()"
|
||||
class="
|
||||
social-list-item
|
||||
bg-info
|
||||
text-white
|
||||
border-info
|
||||
"
|
||||
>
|
||||
<i class="mdi mdi-twitter"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="list-inline-item">
|
||||
<a
|
||||
href="javascript::void()"
|
||||
class="
|
||||
social-list-item
|
||||
bg-danger
|
||||
text-white
|
||||
border-danger
|
||||
"
|
||||
>
|
||||
<i class="mdi mdi-google"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</form>
|
||||
<div class="mt-5 text-center">
|
||||
<p>
|
||||
Don't have an account ?
|
||||
<router-link
|
||||
to="/auth/register-2"
|
||||
class="fw-medium text-primary"
|
||||
>
|
||||
Signup now
|
||||
</router-link>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 mt-md-5 text-center">
|
||||
<p class="mb-0">
|
||||
©
|
||||
{{ new Date().getFullYear() }} Skote. Crafted with
|
||||
<i class="mdi mdi-heart text-danger"></i> by Themesbrand
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</div>
|
||||
<!-- end container-fluid -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.carousel-caption {
|
||||
position: relative !important;
|
||||
right: 0;
|
||||
bottom: 1.25rem;
|
||||
left: 0;
|
||||
padding-top: 1.25rem;
|
||||
padding-bottom: 1.25rem;
|
||||
color: #495057;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.carousel-indicators li {
|
||||
background-color: rgba(85, 110, 230, 0.25);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,292 +0,0 @@
|
|||
<script>
|
||||
import axios from "axios";
|
||||
|
||||
import {
|
||||
authMethods,
|
||||
authFackMethods,
|
||||
notificationMethods,
|
||||
} from "@/state/helpers";
|
||||
import { mapState } from "vuex";
|
||||
import appConfig from "@/app.config";
|
||||
|
||||
import { required, email, helpers } from "@vuelidate/validators";
|
||||
import useVuelidate from "@vuelidate/core";
|
||||
|
||||
/**
|
||||
* Login sample page
|
||||
*/
|
||||
export default {
|
||||
setup() {
|
||||
return { v$: useVuelidate() };
|
||||
},
|
||||
page: {
|
||||
title: "Login",
|
||||
meta: [
|
||||
{
|
||||
name: "description",
|
||||
content: appConfig.description,
|
||||
},
|
||||
],
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
email: "admin@themesbrand.com",
|
||||
password: "123456",
|
||||
submitted: false,
|
||||
authError: null,
|
||||
tryingToLogIn: false,
|
||||
isAuthError: false,
|
||||
};
|
||||
},
|
||||
validations: {
|
||||
email: {
|
||||
required: helpers.withMessage("Email is required", required),
|
||||
email: helpers.withMessage("Please enter valid email", email),
|
||||
},
|
||||
password: {
|
||||
required: helpers.withMessage("Password is required", required),
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
...mapState("authfack", ["status"]),
|
||||
notification() {
|
||||
return this.$store ? this.$store.state.notification : null;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
...authMethods,
|
||||
...authFackMethods,
|
||||
...notificationMethods,
|
||||
// Try to log the user in with the username
|
||||
// and password they provided.
|
||||
tryToLogIn() {
|
||||
this.submitted = true;
|
||||
// stop here if form is invalid
|
||||
this.v$.$touch();
|
||||
|
||||
if (this.v$.$invalid) {
|
||||
return;
|
||||
} else {
|
||||
if (process.env.VUE_APP_DEFAULT_AUTH === "firebase") {
|
||||
this.tryingToLogIn = true;
|
||||
// Reset the authError if it existed.
|
||||
this.authError = null;
|
||||
return (
|
||||
this.logIn({
|
||||
email: this.email,
|
||||
password: this.password,
|
||||
})
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
.then((token) => {
|
||||
this.tryingToLogIn = false;
|
||||
this.isAuthError = false;
|
||||
// Redirect to the originally requested page, or to the home page
|
||||
this.$router.push(
|
||||
this.$route.query.redirectFrom || {
|
||||
name: "default",
|
||||
}
|
||||
);
|
||||
})
|
||||
.catch((error) => {
|
||||
this.tryingToLogIn = false;
|
||||
this.authError = error ? error : "";
|
||||
this.isAuthError = true;
|
||||
})
|
||||
);
|
||||
} else if (process.env.VUE_APP_DEFAULT_AUTH === "fakebackend") {
|
||||
const { email, password } = this;
|
||||
if (email && password) {
|
||||
this.login({
|
||||
email,
|
||||
password,
|
||||
});
|
||||
}
|
||||
} else if (process.env.VUE_APP_DEFAULT_AUTH === "authapi") {
|
||||
axios
|
||||
.post("http://127.0.0.1:8000/api/login", {
|
||||
email: this.email,
|
||||
password: this.password,
|
||||
})
|
||||
.then((res) => {
|
||||
return res;
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="account-pages my-5 pt-5">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-8 col-lg-6 col-xl-5">
|
||||
<div class="card overflow-hidden">
|
||||
<div class="bg-soft bg-primary">
|
||||
<div class="row">
|
||||
<div class="col-7">
|
||||
<div class="text-primary p-4">
|
||||
<h5 class="text-primary">Welcome Back !</h5>
|
||||
<p>Sign in to continue to Skote.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-5 align-self-end">
|
||||
<img
|
||||
src="@/assets/images/profile-img.png"
|
||||
alt
|
||||
class="img-fluid"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body pt-0">
|
||||
<div>
|
||||
<router-link to="/">
|
||||
<div class="avatar-md profile-user-wid mb-4">
|
||||
<span class="avatar-title rounded-circle bg-light">
|
||||
<img src="@/assets/images/logo.svg" alt height="34" />
|
||||
</span>
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
<b-alert
|
||||
v-model="isAuthError"
|
||||
variant="danger"
|
||||
class="mt-3"
|
||||
dismissible
|
||||
>{{ authError }}</b-alert
|
||||
>
|
||||
|
||||
<div
|
||||
v-if="notification.message"
|
||||
:class="'alert ' + notification.type"
|
||||
>
|
||||
{{ notification.message }}
|
||||
</div>
|
||||
|
||||
<b-form class="p-2" @submit.prevent="tryToLogIn">
|
||||
<b-form-group
|
||||
class="mb-3"
|
||||
id="input-group-1"
|
||||
label="Email"
|
||||
label-for="input-1"
|
||||
>
|
||||
<b-form-input
|
||||
id="input-1"
|
||||
v-model="email"
|
||||
type="text"
|
||||
placeholder="Enter email"
|
||||
:class="{ 'is-invalid': submitted && v$.email.$error }"
|
||||
></b-form-input>
|
||||
<div
|
||||
v-for="(item, index) in v$.email.$errors"
|
||||
:key="index"
|
||||
class="invalid-feedback"
|
||||
>
|
||||
<span v-if="item.$message">{{ item.$message }}</span>
|
||||
</div>
|
||||
</b-form-group>
|
||||
|
||||
<b-form-group
|
||||
class="mb-3"
|
||||
id="input-group-2"
|
||||
label="Password"
|
||||
label-for="input-2"
|
||||
>
|
||||
<b-form-input
|
||||
id="input-2"
|
||||
v-model="password"
|
||||
type="password"
|
||||
placeholder="Enter password"
|
||||
:class="{ 'is-invalid': submitted && v$.password.$error }"
|
||||
></b-form-input>
|
||||
<div
|
||||
v-if="submitted && v$.password.$error"
|
||||
class="invalid-feedback"
|
||||
>
|
||||
<span v-if="v$.password.required.$message">{{
|
||||
v$.password.required.$message
|
||||
}}</span>
|
||||
</div>
|
||||
</b-form-group>
|
||||
<b-form-checkbox
|
||||
class="form-check"
|
||||
id="customControlInline"
|
||||
name="checkbox-1"
|
||||
value="accepted"
|
||||
unchecked-value="not_accepted"
|
||||
>
|
||||
Remember me
|
||||
</b-form-checkbox>
|
||||
<div class="mt-3 d-grid">
|
||||
<b-button type="submit" variant="primary" class="btn-block"
|
||||
>Log In</b-button
|
||||
>
|
||||
</div>
|
||||
<div class="mt-4 text-center">
|
||||
<h5 class="font-size-14 mb-3">Sign in with</h5>
|
||||
|
||||
<ul class="list-inline">
|
||||
<li class="list-inline-item">
|
||||
<a
|
||||
href="javascript: void(0);"
|
||||
class="
|
||||
social-list-item
|
||||
bg-primary
|
||||
text-white
|
||||
border-primary
|
||||
"
|
||||
>
|
||||
<i class="mdi mdi-facebook"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="list-inline-item">
|
||||
<a
|
||||
href="javascript: void(0);"
|
||||
class="social-list-item bg-info text-white border-info"
|
||||
>
|
||||
<i class="mdi mdi-twitter"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="list-inline-item">
|
||||
<a
|
||||
href="javascript: void(0);"
|
||||
class="
|
||||
social-list-item
|
||||
bg-danger
|
||||
text-white
|
||||
border-danger
|
||||
"
|
||||
>
|
||||
<i class="mdi mdi-google"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="mt-4 text-center">
|
||||
<router-link to="/forgot-password" class="text-muted">
|
||||
<i class="mdi mdi-lock me-1"></i> Forgot your password?
|
||||
</router-link>
|
||||
</div>
|
||||
</b-form>
|
||||
</div>
|
||||
<!-- end card-body -->
|
||||
</div>
|
||||
<div class="mt-5 text-center">
|
||||
<p>
|
||||
Don't have an account ?
|
||||
<router-link to="/auth/register-1" class="fw-medium text-primary"
|
||||
>Signup now</router-link
|
||||
>
|
||||
</p>
|
||||
<p>
|
||||
© {{ new Date().getFullYear() }} Skote. Crafted with
|
||||
<i class="mdi mdi-heart text-danger"></i> by Themesbrand
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,202 +0,0 @@
|
|||
<script>
|
||||
// import axios from "axios";
|
||||
import { required, email, helpers } from "@vuelidate/validators";
|
||||
import useVuelidate from "@vuelidate/core";
|
||||
|
||||
import appConfig from "@/app.config";
|
||||
/**
|
||||
* Recover password Sample page
|
||||
*/
|
||||
export default {
|
||||
setup() {
|
||||
return { v$: useVuelidate() };
|
||||
},
|
||||
validations: {
|
||||
email: {
|
||||
required: helpers.withMessage("Email is required", required),
|
||||
email: helpers.withMessage("Please enter valid email", email),
|
||||
},
|
||||
password: {
|
||||
required: helpers.withMessage("Password is required", required),
|
||||
},
|
||||
password_confirmation: {
|
||||
required: helpers.withMessage("Confirm password is required", required),
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
submitted: false,
|
||||
email: "",
|
||||
password: "",
|
||||
password_confirmation: "",
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
tryToResetpwd() {
|
||||
this.submitted = true;
|
||||
// stop here if form is invalid
|
||||
this.v$.$touch();
|
||||
|
||||
if (this.v$.$invalid) {
|
||||
return;
|
||||
} else {
|
||||
// axios
|
||||
// .post("http://127.0.0.1:8000/api/password/reset", {
|
||||
// token: this.$route.query.token,
|
||||
// email: this.email,
|
||||
// password: this.password,
|
||||
// password_confirmation: this.password_confirmation,
|
||||
// })
|
||||
// .then((result) => {
|
||||
// return result;
|
||||
// });
|
||||
}
|
||||
},
|
||||
},
|
||||
page: {
|
||||
title: "Recover password",
|
||||
meta: [
|
||||
{
|
||||
name: "description",
|
||||
content: appConfig.description,
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="account-pages my-5 pt-5">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-8 col-lg-6 col-xl-5">
|
||||
<div class="card overflow-hidden">
|
||||
<div class="bg-soft-primary">
|
||||
<div class="row">
|
||||
<div class="col-7">
|
||||
<div class="text-primary p-4">
|
||||
<h5 class="text-primary">Reset Password</h5>
|
||||
<p>Re-Password with Skote.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-5 align-self-end">
|
||||
<img
|
||||
src="@/assets/images/profile-img.png"
|
||||
alt
|
||||
class="img-fluid"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body pt-0">
|
||||
<div>
|
||||
<a href="/">
|
||||
<div class="avatar-md profile-user-wid mb-4">
|
||||
<span class="avatar-title rounded-circle bg-light">
|
||||
<img
|
||||
src="@/assets/images/logo.svg"
|
||||
alt
|
||||
class="rounded-circle"
|
||||
height="34"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="p-2">
|
||||
<div class="alert alert-success text-center mb-4" role="alert">
|
||||
Enter your Email and instructions will be sent to you!
|
||||
</div>
|
||||
<form class="form-horizontal" @submit.prevent="tryToResetpwd">
|
||||
<div class="form-group">
|
||||
<label for="useremail">Email</label>
|
||||
<input
|
||||
type="email"
|
||||
v-model="email"
|
||||
class="form-control"
|
||||
id="useremail"
|
||||
placeholder="Enter email"
|
||||
:class="{ 'is-invalid': submitted && $v.email.$error }"
|
||||
/>
|
||||
<div
|
||||
v-for="(item, index) in v$.email.$errors"
|
||||
:key="index"
|
||||
class="invalid-feedback"
|
||||
>
|
||||
<span v-if="item.$message">{{ item.$message }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="pwd">Password</label>
|
||||
<input
|
||||
type="password"
|
||||
v-model="password"
|
||||
class="form-control"
|
||||
id="pwd"
|
||||
placeholder="Enter password"
|
||||
:class="{
|
||||
'is-invalid': submitted && $v.password.$error,
|
||||
}"
|
||||
/>
|
||||
<div
|
||||
v-if="submitted && v$.user.password.$error"
|
||||
class="invalid-feedback"
|
||||
>
|
||||
<span v-if="v$.user.password.required.$message">{{
|
||||
v$.user.password.required.$message
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="confirm_pwd">Confirm Password</label>
|
||||
<input
|
||||
v-model="password_confirmation"
|
||||
type="password"
|
||||
class="form-control"
|
||||
id="confirm_pwd"
|
||||
placeholder="Enter confirm password"
|
||||
:class="{
|
||||
'is-invalid':
|
||||
submitted && $v.password_confirmation.$error,
|
||||
}"
|
||||
/>
|
||||
<div
|
||||
v-if="submitted && v$.password_confirmation.$error"
|
||||
class="invalid-feedback"
|
||||
>
|
||||
<span v-if="v$.password_confirmation.required.$message">{{
|
||||
v$.password_confirmation.required.$message
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mb-0">
|
||||
<div class="col-12 text-end">
|
||||
<button class="btn btn-primary w-md" type="submit">
|
||||
Reset
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-5 text-center">
|
||||
<p>
|
||||
Remember It ?
|
||||
<router-link to="/auth/login-1" class="fw-medium text-primary"
|
||||
>Sign In here</router-link
|
||||
>
|
||||
</p>
|
||||
<p>
|
||||
© {{ new Date().getFullYear() }} Skote. Crafted with
|
||||
<i class="mdi mdi-heart text-danger"></i> by Themesbrand
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,287 +0,0 @@
|
|||
<script>
|
||||
import axios from "axios";
|
||||
import { required, email, helpers } from "@vuelidate/validators";
|
||||
import useVuelidate from "@vuelidate/core";
|
||||
|
||||
import appConfig from "@/app.config";
|
||||
import { authMethods } from "@/state/helpers";
|
||||
|
||||
/**
|
||||
* Recoverpwd-2 component
|
||||
*/
|
||||
export default {
|
||||
setup() {
|
||||
return { v$: useVuelidate() };
|
||||
},
|
||||
page: {
|
||||
title: "Recoverpwd-2",
|
||||
meta: [{ name: "description", content: appConfig.description }],
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
email: "",
|
||||
submitted: false,
|
||||
error: null,
|
||||
tryingToReset: false,
|
||||
isResetError: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
...authMethods,
|
||||
// Try to register the user in with the email, fullname
|
||||
// and password they provided.
|
||||
tryToReset() {
|
||||
this.submitted = true;
|
||||
// stop here if form is invalid
|
||||
this.v$.$touch();
|
||||
|
||||
if (this.v$.$invalid) {
|
||||
return;
|
||||
} else {
|
||||
if (process.env.VUE_APP_DEFAULT_AUTH === "firebase") {
|
||||
this.tryingToReset = true;
|
||||
// Reset the authError if it existed.
|
||||
this.error = null;
|
||||
return (
|
||||
this.resetPassword({
|
||||
email: this.email,
|
||||
})
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
.then((token) => {
|
||||
this.tryingToReset = false;
|
||||
this.isResetError = false;
|
||||
})
|
||||
.catch((error) => {
|
||||
this.tryingToReset = false;
|
||||
this.error = error ? error : "";
|
||||
this.isResetError = true;
|
||||
})
|
||||
);
|
||||
} else if (process.env.VUE_APP_DEFAULT_AUTH === "authapi") {
|
||||
axios
|
||||
.post("http://127.0.0.1:8000/api/password/create", {
|
||||
email: this.email,
|
||||
})
|
||||
.then((res) => {
|
||||
this.isResetError = true;
|
||||
this.error = res.data;
|
||||
return res;
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
validations: {
|
||||
email: {
|
||||
required: helpers.withMessage("Email is required", required),
|
||||
email: helpers.withMessage("Please enter valid email", email),
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
document.body.classList.add("auth-body-bg");
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="container-fluid p-0">
|
||||
<div class="row g-0">
|
||||
<div class="col-xl-9">
|
||||
<div class="auth-full-bg pt-lg-5 p-4">
|
||||
<div class="w-100">
|
||||
<div class="bg-overlay"></div>
|
||||
<div class="d-flex h-100 flex-column">
|
||||
<div class="p-4 mt-auto">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-7">
|
||||
<div class="text-center">
|
||||
<h4 class="mb-3">
|
||||
<i
|
||||
class="
|
||||
bx
|
||||
bxs-quote-alt-left
|
||||
text-primary
|
||||
h1
|
||||
align-middle
|
||||
me-3
|
||||
"
|
||||
></i
|
||||
><span class="text-primary">5k</span>+ Satisfied
|
||||
clients
|
||||
</h4>
|
||||
|
||||
<div dir="ltr" class="owl-theme">
|
||||
<b-carousel
|
||||
id="carousel-1"
|
||||
:interval="4000"
|
||||
indicators
|
||||
>
|
||||
<!-- Text slides with image -->
|
||||
<b-carousel-slide>
|
||||
<p class="font-size-16 mb-4">
|
||||
" Fantastic theme with a ton of options. If you
|
||||
just want the HTML to integrate with your
|
||||
project, then this is the package. You can find
|
||||
the files in the 'dist' folder...no need to
|
||||
install git and all the other stuff the
|
||||
documentation talks about. "
|
||||
</p>
|
||||
<div>
|
||||
<h4 class="font-size-16 text-primary">
|
||||
Abs1981
|
||||
</h4>
|
||||
<p class="font-size-14 mb-0">- Skote User</p>
|
||||
</div>
|
||||
</b-carousel-slide>
|
||||
|
||||
<!-- Slides with custom text -->
|
||||
<b-carousel-slide>
|
||||
<p class="font-size-16 mb-4">
|
||||
" If Every Vendor on Envato are as supportive as
|
||||
Themesbrand, Development with be a nice
|
||||
experience. You guys are Wonderful. Keep us the
|
||||
good work. "
|
||||
</p>
|
||||
<div>
|
||||
<h4 class="font-size-16 text-primary">
|
||||
nezerious
|
||||
</h4>
|
||||
<p class="font-size-14 mb-0">- Skote User</p>
|
||||
</div>
|
||||
</b-carousel-slide>
|
||||
</b-carousel>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
|
||||
<div class="col-xl-3">
|
||||
<div class="auth-full-page-content p-md-5 p-4">
|
||||
<div class="w-100">
|
||||
<div class="d-flex flex-column h-100">
|
||||
<div class="mb-4 mb-md-5">
|
||||
<router-link to="/" class="d-block auth-logo">
|
||||
<img
|
||||
src="@/assets/images/logo-dark.png"
|
||||
alt=""
|
||||
height="18"
|
||||
class="auth-logo-dark"
|
||||
/>
|
||||
<img
|
||||
src="@/assets/images/logo-light.png"
|
||||
alt=""
|
||||
height="18"
|
||||
class="auth-logo-light"
|
||||
/>
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="my-auto">
|
||||
<div>
|
||||
<h5 class="text-primary">Reset Password</h5>
|
||||
<p class="text-muted">Re-Password with Skote.</p>
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<div
|
||||
class="alert alert-success text-center mb-4"
|
||||
role="alert"
|
||||
>
|
||||
Enter your Email and instructions will be sent to you!
|
||||
</div>
|
||||
<form @submit.prevent="tryToReset">
|
||||
<b-alert
|
||||
v-model="isResetError"
|
||||
class="mb-4"
|
||||
variant="danger"
|
||||
dismissible
|
||||
>{{ error }}</b-alert
|
||||
>
|
||||
<div class="mb-3">
|
||||
<label for="useremail">Email</label>
|
||||
<input
|
||||
type="email"
|
||||
v-model="email"
|
||||
class="form-control"
|
||||
id="useremail"
|
||||
placeholder="Enter email"
|
||||
:class="{
|
||||
'is-invalid': submitted && v$.email.$error,
|
||||
}"
|
||||
/>
|
||||
<div
|
||||
v-for="(item, index) in v$.email.$errors"
|
||||
:key="index"
|
||||
class="invalid-feedback"
|
||||
>
|
||||
<span v-if="item.$message">{{ item.$message }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-0">
|
||||
<div class="col-12 text-end">
|
||||
<button
|
||||
class="
|
||||
btn btn-primary
|
||||
w-md
|
||||
waves-effect waves-light
|
||||
"
|
||||
type="submit"
|
||||
>
|
||||
Reset
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<div class="mt-5 text-center">
|
||||
<p>
|
||||
Remember It ?
|
||||
<router-link
|
||||
to="/auth/login-2"
|
||||
class="fw-medium text-primary"
|
||||
>
|
||||
Sign In here</router-link
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 mt-md-5 text-center">
|
||||
<p class="mb-0">
|
||||
© {{ new Date().getFullYear() }} Skote. Crafted with
|
||||
<i class="mdi mdi-heart text-danger"></i> by Themesbrand
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</div>
|
||||
<!-- end container-fluid -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.carousel-caption {
|
||||
position: relative !important;
|
||||
right: 0;
|
||||
left: 0;
|
||||
padding-top: 1.25rem;
|
||||
padding-bottom: 1.25rem;
|
||||
color: #495057;
|
||||
}
|
||||
|
||||
.carousel-indicators li {
|
||||
background-color: rgba(85, 110, 230, 0.25);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,433 +0,0 @@
|
|||
<script>
|
||||
import axios from "axios";
|
||||
|
||||
import { required, email, helpers } from "@vuelidate/validators";
|
||||
import useVuelidate from "@vuelidate/core";
|
||||
|
||||
import {
|
||||
authMethods,
|
||||
authFackMethods,
|
||||
notificationMethods,
|
||||
} from "@/state/helpers";
|
||||
import { mapState } from "vuex";
|
||||
|
||||
import appConfig from "@/app.config";
|
||||
|
||||
/**
|
||||
* Register-2 component
|
||||
*/
|
||||
export default {
|
||||
setup() {
|
||||
return { v$: useVuelidate() };
|
||||
},
|
||||
page: {
|
||||
title: "Register 2",
|
||||
meta: [{ name: "description", content: appConfig.description }],
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
user: {
|
||||
username: "",
|
||||
email: "",
|
||||
password: "",
|
||||
},
|
||||
submitted: false,
|
||||
regError: null,
|
||||
tryingToRegister: false,
|
||||
isRegisterError: false,
|
||||
registerSuccess: false,
|
||||
};
|
||||
},
|
||||
validations: {
|
||||
user: {
|
||||
username: {
|
||||
required: helpers.withMessage("Username is required", required),
|
||||
},
|
||||
email: {
|
||||
required: helpers.withMessage("Email is required", required),
|
||||
email: helpers.withMessage("Please enter valid email", email),
|
||||
},
|
||||
password: {
|
||||
required: helpers.withMessage("Password is required", required),
|
||||
},
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
...mapState("authfack", ["status"]),
|
||||
notification() {
|
||||
return this.$store ? this.$store.state.notification : null;
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
document.body.classList.add("auth-body-bg");
|
||||
},
|
||||
methods: {
|
||||
...authMethods,
|
||||
...authFackMethods,
|
||||
...notificationMethods,
|
||||
// Try to register the user in with the email, username
|
||||
// and password they provided.
|
||||
tryToRegisterIn() {
|
||||
this.submitted = true;
|
||||
// stop here if form is invalid
|
||||
this.$v.$touch();
|
||||
|
||||
if (this.$v.$invalid) {
|
||||
return;
|
||||
} else {
|
||||
if (process.env.VUE_APP_DEFAULT_AUTH === "firebase") {
|
||||
this.tryingToRegister = true;
|
||||
// Reset the regError if it existed.
|
||||
this.regError = null;
|
||||
return (
|
||||
this.register({
|
||||
email: this.user.email,
|
||||
password: this.user.password,
|
||||
})
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
.then((token) => {
|
||||
this.tryingToRegister = false;
|
||||
this.isRegisterError = false;
|
||||
this.registerSuccess = true;
|
||||
if (this.registerSuccess) {
|
||||
this.$router.push(
|
||||
this.$route.query.redirectFrom || {
|
||||
name: "default",
|
||||
}
|
||||
);
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
this.tryingToRegister = false;
|
||||
this.regError = error ? error : "";
|
||||
this.isRegisterError = true;
|
||||
})
|
||||
);
|
||||
} else if (process.env.VUE_APP_DEFAULT_AUTH === "fakebackend") {
|
||||
const { email, username, password } = this.user;
|
||||
if (email && username && password) {
|
||||
this.registeruser(this.user);
|
||||
}
|
||||
} else if (process.env.VUE_APP_DEFAULT_AUTH === "authapi") {
|
||||
axios
|
||||
.post("http://127.0.0.1:8000/api/register", {
|
||||
username: this.user.username,
|
||||
email: this.user.email,
|
||||
password: this.user.password,
|
||||
})
|
||||
.then((res) => {
|
||||
return res;
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="container-fluid p-0">
|
||||
<div class="row g-0">
|
||||
<div class="col-xl-9">
|
||||
<div class="auth-full-bg pt-lg-5 p-4">
|
||||
<div class="w-100">
|
||||
<div class="bg-overlay"></div>
|
||||
<div class="d-flex h-100 flex-column">
|
||||
<div class="p-4 mt-auto">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-7">
|
||||
<div class="text-center">
|
||||
<h4 class="mb-3">
|
||||
<i
|
||||
class="
|
||||
bx
|
||||
bxs-quote-alt-left
|
||||
text-primary
|
||||
h1
|
||||
align-middle
|
||||
me-3
|
||||
"
|
||||
></i
|
||||
><span class="text-primary">5k</span>+ Satisfied
|
||||
clients
|
||||
</h4>
|
||||
|
||||
<div dir="ltr" class="owl-theme">
|
||||
<b-carousel
|
||||
id="carousel-1"
|
||||
:interval="4000"
|
||||
indicators
|
||||
>
|
||||
<!-- Text slides with image -->
|
||||
<b-carousel-slide>
|
||||
<p class="font-size-16 mb-4">
|
||||
" Fantastic theme with a ton of options. If you
|
||||
just want the HTML to integrate with your
|
||||
project, then this is the package. You can find
|
||||
the files in the 'dist' folder...no need to
|
||||
install git and all the other stuff the
|
||||
documentation talks about. "
|
||||
</p>
|
||||
<div>
|
||||
<h4 class="font-size-16 text-primary">
|
||||
Abs1981
|
||||
</h4>
|
||||
<p class="font-size-14 mb-0">- Skote User</p>
|
||||
</div>
|
||||
</b-carousel-slide>
|
||||
|
||||
<!-- Slides with custom text -->
|
||||
<b-carousel-slide>
|
||||
<p class="font-size-16 mb-4">
|
||||
" If Every Vendor on Envato are as supportive as
|
||||
Themesbrand, Development with be a nice
|
||||
experience. You guys are Wonderful. Keep us the
|
||||
good work. "
|
||||
</p>
|
||||
<div>
|
||||
<h4 class="font-size-16 text-primary">
|
||||
nezerious
|
||||
</h4>
|
||||
<p class="font-size-14 mb-0">- Skote User</p>
|
||||
</div>
|
||||
</b-carousel-slide>
|
||||
</b-carousel>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
|
||||
<div class="col-xl-3">
|
||||
<div class="auth-full-page-content p-md-5 p-4">
|
||||
<div class="w-100">
|
||||
<div class="d-flex flex-column h-100">
|
||||
<div class="mb-4 mb-md-5">
|
||||
<router-link to="/" class="d-block auth-logo">
|
||||
<img
|
||||
src="@/assets/images/logo-dark.png"
|
||||
alt=""
|
||||
height="18"
|
||||
class="auth-logo-dark"
|
||||
/>
|
||||
<img
|
||||
src="@/assets/images/logo-light.png"
|
||||
alt=""
|
||||
height="18"
|
||||
class="auth-logo-light"
|
||||
/>
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="my-auto">
|
||||
<div>
|
||||
<h5 class="text-primary">Register account</h5>
|
||||
<p class="text-muted">Get your free Skote account now.</p>
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<b-alert
|
||||
v-model="registerSuccess"
|
||||
class="mt-3"
|
||||
variant="success"
|
||||
dismissible
|
||||
>Registration successfull.</b-alert
|
||||
>
|
||||
|
||||
<b-alert
|
||||
v-model="isRegisterError"
|
||||
class="mt-3"
|
||||
variant="danger"
|
||||
dismissible
|
||||
>{{ regError }}</b-alert
|
||||
>
|
||||
|
||||
<div
|
||||
v-if="notification.message"
|
||||
:class="'alert ' + notification.type"
|
||||
>
|
||||
{{ notification.message }}
|
||||
</div>
|
||||
|
||||
<b-form @submit.prevent="tryToRegisterIn">
|
||||
<b-form-group
|
||||
class="mb-3"
|
||||
id="email-group"
|
||||
label="Username"
|
||||
label-for="username"
|
||||
>
|
||||
<b-form-input
|
||||
id="username"
|
||||
v-model="user.username"
|
||||
type="text"
|
||||
placeholder="Enter username"
|
||||
:class="{
|
||||
'is-invalid': submitted && v$.user.username.$error,
|
||||
}"
|
||||
></b-form-input>
|
||||
<div
|
||||
v-if="submitted && v$.user.username.$error"
|
||||
class="invalid-feedback"
|
||||
>
|
||||
<span v-if="v$.user.username.required.$message">{{
|
||||
v$.user.username.required.$message
|
||||
}}</span>
|
||||
</div>
|
||||
</b-form-group>
|
||||
|
||||
<b-form-group
|
||||
class="mb-3"
|
||||
id="fullname-group"
|
||||
label="Email"
|
||||
label-for="email"
|
||||
>
|
||||
<b-form-input
|
||||
id="email"
|
||||
v-model="user.email"
|
||||
type="email"
|
||||
placeholder="Enter email"
|
||||
:class="{
|
||||
'is-invalid': submitted && v$.user.email.$error,
|
||||
}"
|
||||
></b-form-input>
|
||||
<div
|
||||
v-for="(item, index) in v$.user.email.$errors"
|
||||
:key="index"
|
||||
class="invalid-feedback"
|
||||
>
|
||||
<span v-if="item.$message">{{ item.$message }}</span>
|
||||
</div>
|
||||
</b-form-group>
|
||||
|
||||
<b-form-group
|
||||
class="mb-3"
|
||||
id="password-group"
|
||||
label="Password"
|
||||
label-for="password"
|
||||
>
|
||||
<b-form-input
|
||||
id="password"
|
||||
v-model="user.password"
|
||||
type="password"
|
||||
placeholder="Enter password"
|
||||
:class="{
|
||||
'is-invalid': submitted && v$.user.password.$error,
|
||||
}"
|
||||
></b-form-input>
|
||||
<div
|
||||
v-if="submitted && v$.user.password.$error"
|
||||
class="invalid-feedback"
|
||||
>
|
||||
<span v-if="v$.user.password.required.$message">{{
|
||||
v$.user.password.required.$message
|
||||
}}</span>
|
||||
</div>
|
||||
</b-form-group>
|
||||
|
||||
<div class="mt-4 d-grid">
|
||||
<b-button
|
||||
type="submit"
|
||||
variant="primary"
|
||||
class="btn-block"
|
||||
>Register</b-button
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 text-center">
|
||||
<h5 class="font-size-14 mb-3">Sign up using</h5>
|
||||
|
||||
<ul class="list-inline">
|
||||
<li class="list-inline-item">
|
||||
<a
|
||||
href="javascript::void()"
|
||||
class="
|
||||
social-list-item
|
||||
bg-primary
|
||||
text-white
|
||||
border-primary
|
||||
"
|
||||
>
|
||||
<i class="mdi mdi-facebook"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="list-inline-item">
|
||||
<a
|
||||
href="javascript::void()"
|
||||
class="
|
||||
social-list-item
|
||||
bg-info
|
||||
text-white
|
||||
border-info
|
||||
"
|
||||
>
|
||||
<i class="mdi mdi-twitter"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="list-inline-item">
|
||||
<a
|
||||
href="javascript::void()"
|
||||
class="
|
||||
social-list-item
|
||||
bg-danger
|
||||
text-white
|
||||
border-danger
|
||||
"
|
||||
>
|
||||
<i class="mdi mdi-google"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</b-form>
|
||||
|
||||
<div class="mt-5 text-center">
|
||||
<p>
|
||||
Already have an account ?
|
||||
<router-link
|
||||
to="/auth/login-2"
|
||||
class="fw-medium text-primary"
|
||||
>
|
||||
Login</router-link
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 mt-md-5 text-center">
|
||||
<p class="mb-0">
|
||||
© {{ new Date().getFullYear() }} Skote. Crafted with
|
||||
<i class="mdi mdi-heart text-danger"></i> by Themesbrand
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</div>
|
||||
<!-- end container-fluid -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.carousel-caption {
|
||||
position: relative !important;
|
||||
right: 0;
|
||||
left: 0;
|
||||
padding-top: 1.25rem;
|
||||
padding-bottom: 1.25rem;
|
||||
color: #495057;
|
||||
}
|
||||
|
||||
.carousel-indicators li {
|
||||
background-color: rgba(85, 110, 230, 0.25);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,155 +0,0 @@
|
|||
<script>
|
||||
import appConfig from "@/app.config";
|
||||
|
||||
/**
|
||||
* Register sample page
|
||||
*/
|
||||
export default {
|
||||
page: {
|
||||
title: "Register",
|
||||
meta: [
|
||||
{
|
||||
name: "description",
|
||||
content: appConfig.description,
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="account-pages my-5 pt-5">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-8 col-lg-6 col-xl-5">
|
||||
<div class="card overflow-hidden">
|
||||
<div class="bg-soft bg-primary">
|
||||
<div class="row">
|
||||
<div class="col-7">
|
||||
<div class="text-primary p-4">
|
||||
<h5 class="text-primary">Free Register</h5>
|
||||
<p>Get your free Skote account now.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-5 align-self-end">
|
||||
<img
|
||||
src="@/assets/images/profile-img.png"
|
||||
alt
|
||||
class="img-fluid"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body pt-0">
|
||||
<div>
|
||||
<a href="/">
|
||||
<div class="avatar-md profile-user-wid mb-4">
|
||||
<span class="avatar-title rounded-circle bg-light">
|
||||
<img
|
||||
src="@/assets/images/logo.svg"
|
||||
alt
|
||||
class="rounded-circle"
|
||||
height="34"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="p-2">
|
||||
<form class="form-horizontal">
|
||||
<div class="mb-3">
|
||||
<label for="useremail">Email</label>
|
||||
<input
|
||||
type="email"
|
||||
class="form-control"
|
||||
id="useremail"
|
||||
placeholder="Enter email"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="username">Username</label>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="username"
|
||||
placeholder="Enter username"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="userpassword">Password</label>
|
||||
<input
|
||||
type="password"
|
||||
class="form-control"
|
||||
id="userpassword"
|
||||
placeholder="Enter password"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 d-grid">
|
||||
<button class="btn btn-primary" type="submit">
|
||||
Register
|
||||
</button>
|
||||
</div>
|
||||
<div class="mt-4 text-center">
|
||||
<h5 class="font-size-14 mb-3">Sign up using</h5>
|
||||
|
||||
<ul class="list-inline">
|
||||
<li class="list-inline-item">
|
||||
<a
|
||||
href="javascript: void(0);"
|
||||
class="social-list-item bg-primary text-white border-primary"
|
||||
>
|
||||
<i class="mdi mdi-facebook"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="list-inline-item">
|
||||
<a
|
||||
href="javascript: void(0);"
|
||||
class="social-list-item bg-info text-white border-info"
|
||||
>
|
||||
<i class="mdi mdi-twitter"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="list-inline-item">
|
||||
<a
|
||||
href="javascript: void(0);"
|
||||
class="social-list-item bg-danger text-white border-danger"
|
||||
>
|
||||
<i class="mdi mdi-google"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="mt-4 text-center">
|
||||
<p class="mb-0">
|
||||
By registering you agree to the Skote
|
||||
<a href="javascript: void(0);" class="text-primary"
|
||||
>Terms of Use</a
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-5 text-center">
|
||||
<p>
|
||||
Already have an account ?
|
||||
<router-link
|
||||
to="/auth/login-1"
|
||||
class="fw-medium text-primary"
|
||||
>Login</router-link
|
||||
>
|
||||
</p>
|
||||
<p>
|
||||
© {{ new Date().getFullYear() }} Skote. Crafted with
|
||||
<i class="mdi mdi-heart text-danger"></i> by Themesbrand
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,168 +0,0 @@
|
|||
<script>
|
||||
import appConfig from "@/app.config";
|
||||
|
||||
/**
|
||||
* Two-step-verification-2 component
|
||||
*/
|
||||
export default {
|
||||
page: {
|
||||
title: "Two step verification 2",
|
||||
meta: [{ name: "description", content: appConfig.description }],
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
methods: {},
|
||||
mounted() {
|
||||
document.body.classList.add("auth-body-bg");
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="container-fluid p-0">
|
||||
<div class="row g-0">
|
||||
<div class="col-xl-9">
|
||||
<div class="auth-full-bg pt-lg-5 p-4">
|
||||
<div class="w-100">
|
||||
<div class="bg-overlay"></div>
|
||||
<div class="d-flex h-100 flex-column">
|
||||
<div class="p-4 mt-auto">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-7">
|
||||
<div class="text-center">
|
||||
<h4 class="mb-3">
|
||||
<i
|
||||
class="bx bxs-quote-alt-left text-primary h1 align-middle me-3"
|
||||
></i
|
||||
><span class="text-primary">5k</span>+ Satisfied
|
||||
clients
|
||||
</h4>
|
||||
|
||||
<div dir="ltr" class="owl-theme">
|
||||
<b-carousel
|
||||
id="carousel-1"
|
||||
:interval="4000"
|
||||
indicators
|
||||
>
|
||||
<!-- Text slides with image -->
|
||||
<b-carousel-slide>
|
||||
<p class="font-size-16 mb-4">
|
||||
" Fantastic theme with a ton of options. If you
|
||||
just want the HTML to integrate with your
|
||||
project, then this is the package. You can find
|
||||
the files in the 'dist' folder...no need to
|
||||
install git and all the other stuff the
|
||||
documentation talks about. "
|
||||
</p>
|
||||
<div>
|
||||
<h4 class="font-size-16 text-primary">
|
||||
Abs1981
|
||||
</h4>
|
||||
<p class="font-size-14 mb-0">- Skote User</p>
|
||||
</div>
|
||||
</b-carousel-slide>
|
||||
|
||||
<!-- Slides with custom text -->
|
||||
<b-carousel-slide>
|
||||
<p class="font-size-16 mb-4">
|
||||
" If Every Vendor on Envato are as supportive as
|
||||
Themesbrand, Development with be a nice
|
||||
experience. You guys are Wonderful. Keep us the
|
||||
good work. "
|
||||
</p>
|
||||
<div>
|
||||
<h4 class="font-size-16 text-primary">
|
||||
nezerious
|
||||
</h4>
|
||||
<p class="font-size-14 mb-0">- Skote User</p>
|
||||
</div>
|
||||
</b-carousel-slide>
|
||||
</b-carousel>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
|
||||
<div class="col-xl-3">
|
||||
<div class="auth-full-page-content p-md-5 p-4">
|
||||
<div class="w-100">
|
||||
<div class="d-flex flex-column h-100">
|
||||
<div class="mb-4 mb-md-5">
|
||||
<router-link to="/" class="d-block auth-logo">
|
||||
<img
|
||||
src="@/assets/images/logo-dark.png"
|
||||
alt=""
|
||||
height="18"
|
||||
class="auth-logo-dark"
|
||||
/>
|
||||
<img
|
||||
src="@/assets/images/logo-light.png"
|
||||
alt=""
|
||||
height="18"
|
||||
class="auth-logo-light"
|
||||
/>
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="my-auto">
|
||||
<div class="text-center">
|
||||
<div class="avatar-md mx-auto">
|
||||
<div class="avatar-title rounded-circle bg-light">
|
||||
<i class="bx bxs-envelope h1 mb-0 text-primary"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-2 mt-4">
|
||||
<h4>Verify your email</h4>
|
||||
<p class="mb-5">
|
||||
Please enter the 6 digit code sent to
|
||||
<span class="fw-semibold">example@abc.com</span>
|
||||
</p>
|
||||
|
||||
<div class="mt-4">
|
||||
<router-link to="/" class="btn btn-success w-md"
|
||||
>Confirm</router-link
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 mt-md-5 text-center">
|
||||
<p class="mb-0">
|
||||
© {{ new Date().getFullYear() }} Skote. Crafted with
|
||||
<i class="mdi mdi-heart text-danger"></i> by Themesbrand
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</div>
|
||||
<!-- end container-fluid -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.carousel-caption {
|
||||
position: relative !important;
|
||||
right: 0;
|
||||
left: 0;
|
||||
padding-top: 1.25rem;
|
||||
padding-bottom: 1.25rem;
|
||||
color: #495057;
|
||||
}
|
||||
|
||||
.carousel-indicators li {
|
||||
background-color: rgba(85, 110, 230, 0.25);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,86 +0,0 @@
|
|||
<script>
|
||||
|
||||
import appConfig from "@/app.config";
|
||||
|
||||
/**
|
||||
* Two-step-verification component
|
||||
*/
|
||||
export default {
|
||||
page: {
|
||||
title: "Two step verification",
|
||||
meta: [{ name: "description", content: appConfig.description }],
|
||||
},
|
||||
components: { },
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="account-pages my-5 pt-sm-5">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="text-center mb-5 text-muted">
|
||||
<router-link to="/" class="d-block auth-logo">
|
||||
<img
|
||||
src="@/assets/images/logo-dark.png"
|
||||
alt=""
|
||||
height="20"
|
||||
class="auth-logo-dark mx-auto"
|
||||
/>
|
||||
<img
|
||||
src="@/assets/images/logo-light.png"
|
||||
alt=""
|
||||
height="20"
|
||||
class="auth-logo-light mx-auto"
|
||||
/>
|
||||
</router-link>
|
||||
<p class="mt-3">Responsive Bootstrap 5 Admin Dashboard</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end row -->
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-8 col-lg-6 col-xl-5">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="p-2">
|
||||
<div class="text-center">
|
||||
<div class="avatar-md mx-auto">
|
||||
<div class="avatar-title rounded-circle bg-light">
|
||||
<i class="bx bxs-envelope h1 mb-0 text-primary"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-2 mt-4">
|
||||
<h4>Verify your email</h4>
|
||||
<p class="mb-5">
|
||||
Please enter the 6 digit code sent to
|
||||
<span class="fw-semibold">example@abc.com</span>
|
||||
</p>
|
||||
<!-- <CodeInput :loading="false" class="input" /> -->
|
||||
<div class="mt-4">
|
||||
<router-link to="/" class="btn btn-success w-md"
|
||||
>Confirm</router-link
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-5 text-center">
|
||||
<p>
|
||||
Did't receive a code ?
|
||||
<a href="#" class="fw-medium text-primary"> Resend </a>
|
||||
</p>
|
||||
<p>
|
||||
©
|
||||
{{ new Date().getFullYear() }}
|
||||
Skote. Crafted with <i class="mdi mdi-heart text-danger"></i> by
|
||||
Themesbrand
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,825 +0,0 @@
|
|||
<script>
|
||||
import Layout from "../../layouts/main";
|
||||
import PageHeader from "@/components/page-header";
|
||||
import appConfig from "@/app.config";
|
||||
|
||||
/**
|
||||
* Basic-table component
|
||||
*/
|
||||
export default {
|
||||
page: {
|
||||
title: "Basic Tables",
|
||||
meta: [{ name: "description", content: appConfig.description }],
|
||||
},
|
||||
components: { Layout, PageHeader },
|
||||
data() {
|
||||
return {
|
||||
title: "Basic Tables",
|
||||
items: [
|
||||
{
|
||||
text: "Tables",
|
||||
href: "/",
|
||||
},
|
||||
{
|
||||
text: "Basic Tables",
|
||||
active: true,
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Layout>
|
||||
<PageHeader :title="title" :items="items" />
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">Basic example</h4>
|
||||
<p class="card-title-desc">
|
||||
For basic styling—light padding and only horizontal dividers—add
|
||||
the base class <code>.table</code> to any
|
||||
<code><table></code>.
|
||||
</p>
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th>Username</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">1</th>
|
||||
<td>Mark</td>
|
||||
<td>Otto</td>
|
||||
<td>@mdo</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">2</th>
|
||||
<td>Jacob</td>
|
||||
<td>Thornton</td>
|
||||
<td>@fat</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3</th>
|
||||
<td>Larry</td>
|
||||
<td>the Bird</td>
|
||||
<td>@twitter</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">Dark table</h4>
|
||||
<p class="card-title-desc">
|
||||
You can also invert the colors—with light text on dark
|
||||
backgrounds—with <code>.table-dark</code>.
|
||||
</p>
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table table-dark mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th>Username</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">1</th>
|
||||
<td>Mark</td>
|
||||
<td>Otto</td>
|
||||
<td>@mdo</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">2</th>
|
||||
<td>Jacob</td>
|
||||
<td>Thornton</td>
|
||||
<td>@fat</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3</th>
|
||||
<td>Larry</td>
|
||||
<td>the Bird</td>
|
||||
<td>@twitter</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">Table head</h4>
|
||||
<p class="card-title-desc">
|
||||
Use one of two modifier classes to make
|
||||
<code><thead></code>s appear light or dark gray.
|
||||
</p>
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table mb-0">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th>Username</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">1</th>
|
||||
<td>Mark</td>
|
||||
<td>Otto</td>
|
||||
<td>@mdo</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">2</th>
|
||||
<td>Jacob</td>
|
||||
<td>Thornton</td>
|
||||
<td>@fat</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3</th>
|
||||
<td>Larry</td>
|
||||
<td>the Bird</td>
|
||||
<td>@twitter</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">Striped rows</h4>
|
||||
<p class="card-title-desc">
|
||||
Use <code>.table-striped</code> to add zebra-striping to any table
|
||||
row within the <code><tbody></code>.
|
||||
</p>
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th>Username</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">1</th>
|
||||
<td>Mark</td>
|
||||
<td>Otto</td>
|
||||
<td>@mdo</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">2</th>
|
||||
<td>Jacob</td>
|
||||
<td>Thornton</td>
|
||||
<td>@fat</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3</th>
|
||||
<td>Larry</td>
|
||||
<td>the Bird</td>
|
||||
<td>@twitter</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">Bordered table</h4>
|
||||
<p class="card-title-desc">
|
||||
Add <code>.table-bordered</code> for borders on all sides of the
|
||||
table and cells.
|
||||
</p>
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th>Username</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">1</th>
|
||||
<td>Mark</td>
|
||||
<td>Otto</td>
|
||||
<td>@mdo</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">2</th>
|
||||
<td>Jacob</td>
|
||||
<td>Thornton</td>
|
||||
<td>@fat</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3</th>
|
||||
<td>Larry</td>
|
||||
<td>the Bird</td>
|
||||
<td>@twitter</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">Borderless table</h4>
|
||||
<p class="card-title-desc">
|
||||
Add <code>.table-borderless</code> for a table without borders.
|
||||
</p>
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table table-borderless mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th>Username</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">1</th>
|
||||
<td>Mark</td>
|
||||
<td>Otto</td>
|
||||
<td>@mdo</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">2</th>
|
||||
<td>Jacob</td>
|
||||
<td>Thornton</td>
|
||||
<td>@fat</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3</th>
|
||||
<td>Larry</td>
|
||||
<td>the Bird</td>
|
||||
<td>@twitter</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">Table Border color</h4>
|
||||
<p class="card-title-desc">
|
||||
Add <code>.table-bordered</code> & <code>.border-*</code> for
|
||||
colored borders on all sides of the table and cells.
|
||||
</p>
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered border-primary mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th>Username</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">1</th>
|
||||
<td>Mark</td>
|
||||
<td>Otto</td>
|
||||
<td>@mdo</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">2</th>
|
||||
<td>Jacob</td>
|
||||
<td>Thornton</td>
|
||||
<td>@fat</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3</th>
|
||||
<td>Larry</td>
|
||||
<td>the Bird</td>
|
||||
<td>@twitter</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">Table Border color</h4>
|
||||
<p class="card-title-desc">
|
||||
Add <code>.table-bordered</code> & <code>.border-*</code> for
|
||||
colored borders on all sides of the table and cells.
|
||||
</p>
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered border-success mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th>Username</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">1</th>
|
||||
<td>Mark</td>
|
||||
<td>Otto</td>
|
||||
<td>@mdo</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">2</th>
|
||||
<td>Jacob</td>
|
||||
<td>Thornton</td>
|
||||
<td>@fat</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3</th>
|
||||
<td>Larry</td>
|
||||
<td>the Bird</td>
|
||||
<td>@twitter</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="table-responsive">
|
||||
<h4 class="card-title">Vertical alignment</h4>
|
||||
<p class="card-title-desc">
|
||||
Table cells in <code><tbody></code> inherit their
|
||||
alignment from <code><table></code> and are aligned to the
|
||||
the top by default. Use the vertical align classes to re-align
|
||||
where needed.
|
||||
</p>
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table align-middle mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">1</th>
|
||||
<td>Mark</td>
|
||||
<td>Otto</td>
|
||||
<td>
|
||||
<button type="button" class="btn btn-light btn-sm">
|
||||
View
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">2</th>
|
||||
<td>Jacob</td>
|
||||
<td>Thornton</td>
|
||||
<td>
|
||||
<button type="button" class="btn btn-light btn-sm">
|
||||
View
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3</th>
|
||||
<td>Larry</td>
|
||||
<td>the Bird</td>
|
||||
<td>
|
||||
<button type="button" class="btn btn-light btn-sm">
|
||||
View
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">4</th>
|
||||
<td>Jacob</td>
|
||||
<td>Thornton</td>
|
||||
<td>
|
||||
<button type="button" class="btn btn-light btn-sm">
|
||||
View
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">Nesting</h4>
|
||||
<p class="card-title-desc">
|
||||
Border styles, active styles, and table variants are not inherited
|
||||
by nested tables.
|
||||
</p>
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped table-bordered mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">First</th>
|
||||
<th scope="col">Last</th>
|
||||
<th scope="col">Handle</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">1</th>
|
||||
<td>Mark</td>
|
||||
<td>Otto</td>
|
||||
<td>@mdo</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="4">
|
||||
<table class="table mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Header</th>
|
||||
<th scope="col">Header</th>
|
||||
<th scope="col">Header</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">A</th>
|
||||
<td>First</td>
|
||||
<td>Last</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">B</th>
|
||||
<td>First</td>
|
||||
<td>Last</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3</th>
|
||||
<td>Jacob</td>
|
||||
<td>Thornton</td>
|
||||
<td>@fat</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">Hoverable rows</h4>
|
||||
<p class="card-title-desc">
|
||||
Add <code>.table-hover</code> to enable a hover state on table
|
||||
rows within a <code><tbody></code>.
|
||||
</p>
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th>Username</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">1</th>
|
||||
<td>Mark</td>
|
||||
<td>Otto</td>
|
||||
<td>@mdo</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">2</th>
|
||||
<td>Jacob</td>
|
||||
<td>Thornton</td>
|
||||
<td>@fat</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3</th>
|
||||
<td>Larry</td>
|
||||
<td>the Bird</td>
|
||||
<td>@twitter</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">Small table</h4>
|
||||
<p class="card-title-desc">
|
||||
Add <code>.table-sm</code> to make tables more compact by cutting
|
||||
cell padding in half.
|
||||
</p>
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table table-sm m-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th>Username</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">1</th>
|
||||
<td>Mark</td>
|
||||
<td>Otto</td>
|
||||
<td>@mdo</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">2</th>
|
||||
<td>Jacob</td>
|
||||
<td>Thornton</td>
|
||||
<td>@fat</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3</th>
|
||||
<td>Larry</td>
|
||||
<td>the Bird</td>
|
||||
<td>@twitter</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">4</th>
|
||||
<td>Mark</td>
|
||||
<td>Otto</td>
|
||||
<td>@mdo</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">5</th>
|
||||
<td>Jacob</td>
|
||||
<td>Thornton</td>
|
||||
<td>@fat</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">Contextual classes</h4>
|
||||
<p class="card-title-desc">
|
||||
Use contextual classes to color table rows or individual cells.
|
||||
</p>
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Column heading</th>
|
||||
<th>Column heading</th>
|
||||
<th>Column heading</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="table-light">
|
||||
<th scope="row">1</th>
|
||||
<td>Column content</td>
|
||||
<td>Column content</td>
|
||||
<td>Column content</td>
|
||||
</tr>
|
||||
|
||||
<tr class="table-success">
|
||||
<th scope="row">2</th>
|
||||
<td>Column content</td>
|
||||
<td>Column content</td>
|
||||
<td>Column content</td>
|
||||
</tr>
|
||||
|
||||
<tr class="table-info">
|
||||
<th scope="row">3</th>
|
||||
<td>Column content</td>
|
||||
<td>Column content</td>
|
||||
<td>Column content</td>
|
||||
</tr>
|
||||
|
||||
<tr class="table-warning">
|
||||
<th scope="row">4</th>
|
||||
<td>Column content</td>
|
||||
<td>Column content</td>
|
||||
<td>Column content</td>
|
||||
</tr>
|
||||
|
||||
<tr class="table-danger">
|
||||
<th scope="row">5</th>
|
||||
<td>Column content</td>
|
||||
<td>Column content</td>
|
||||
<td>Column content</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">Captions</h4>
|
||||
<p class="card-title-desc">
|
||||
A <code><caption></code> functions like a heading for a
|
||||
table. It helps users with screen readers to find a table and
|
||||
understand what it’s about and decide if they want to read it.
|
||||
</p>
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table mb-0">
|
||||
<caption>
|
||||
List of users
|
||||
</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th>Username</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">1</th>
|
||||
<td>Mark</td>
|
||||
<td>Otto</td>
|
||||
<td>@mdo</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">2</th>
|
||||
<td>Jacob</td>
|
||||
<td>Thornton</td>
|
||||
<td>@fat</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3</th>
|
||||
<td>Larry</td>
|
||||
<td>the Bird</td>
|
||||
<td>@twitter</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">Responsive tables</h4>
|
||||
<p class="card-title-desc">
|
||||
Create responsive tables by wrapping any <code>.table</code> in
|
||||
<code>.table-responsive</code>
|
||||
to make them scroll horizontally on small devices (under 768px).
|
||||
</p>
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Table heading</th>
|
||||
<th>Table heading</th>
|
||||
<th>Table heading</th>
|
||||
<th>Table heading</th>
|
||||
<th>Table heading</th>
|
||||
<th>Table heading</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">1</th>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">2</th>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3</th>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end row -->
|
||||
</Layout>
|
||||
</template>
|
||||
|
|
@ -1,92 +0,0 @@
|
|||
const upcomingTasks = [
|
||||
{
|
||||
id: 1,
|
||||
title: 'Topnav layout design',
|
||||
date: '14 Oct, 2019',
|
||||
task: 'Waiting',
|
||||
user: [require('@/assets/images/users/avatar-4.jpg'), require('@/assets/images/users/avatar-5.jpg')],
|
||||
budget: 145,
|
||||
groupId: 1
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: 'Create a New Landing UI',
|
||||
date: '15 Oct, 2019',
|
||||
task: 'Approved',
|
||||
user: [require('@/assets/images/users/avatar-6.jpg'), require('@/assets/images/users/avatar-7.jpg')],
|
||||
budget: 112,
|
||||
groupId: 1
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: 'Create a Skote Logo',
|
||||
date: '15 Oct, 2019',
|
||||
task: 'Waiting',
|
||||
user: [require('@/assets/images/users/avatar-5.jpg')],
|
||||
budget: 86,
|
||||
groupId: 1
|
||||
},
|
||||
];
|
||||
|
||||
const progressTasks = [
|
||||
{
|
||||
id: 4,
|
||||
title: 'Brand logo design',
|
||||
date: '12 Oct, 2019',
|
||||
task: 'Complete',
|
||||
user: [require('@/assets/images/users/avatar-6.jpg')],
|
||||
budget: 132,
|
||||
groupId: 2
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: 'Create a Blog Template UI',
|
||||
date: '13 Oct, 2019',
|
||||
task: 'Pending',
|
||||
user: [require('@/assets/images/users/avatar-8.jpg'), require('@/assets/images/users/avatar-1.jpg')],
|
||||
budget: 103,
|
||||
groupId: 2
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
title: 'Skote Dashboard UI',
|
||||
date: '13 Oct, 2019',
|
||||
task: 'Complete',
|
||||
user: [require('@/assets/images/users/avatar-2.jpg')],
|
||||
budget: 94,
|
||||
groupId: 2
|
||||
},
|
||||
];
|
||||
|
||||
const completedTasks = [
|
||||
{
|
||||
id: 7,
|
||||
title: 'Redesign - Landing page',
|
||||
date: '10 Oct, 2019',
|
||||
task: 'Complete',
|
||||
user: [require('@/assets/images/users/avatar-4.jpg')],
|
||||
budget: 145,
|
||||
groupId: 3
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
title: 'Multipurpose Landing',
|
||||
date: '09 Oct, 2019',
|
||||
task: 'Complete',
|
||||
user: [require('@/assets/images/users/avatar-6.jpg'), require('@/assets/images/users/avatar-7.jpg')],
|
||||
budget: 92,
|
||||
groupId: 3
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
title: 'Skote landing Psd',
|
||||
date: '15 Oct, 2019',
|
||||
task: 'Waiting',
|
||||
user: [require('@/assets/images/users/avatar-5.jpg')],
|
||||
budget: 86,
|
||||
groupId: 3
|
||||
},
|
||||
];
|
||||
|
||||
export { upcomingTasks, progressTasks, completedTasks };
|
||||
|
||||
|
|
@ -1,122 +0,0 @@
|
|||
const tasksChart = {
|
||||
series: [{
|
||||
name: 'Complete Tasks',
|
||||
type: 'column',
|
||||
data: [23, 11, 22, 27, 13, 22, 52, 21, 44, 22, 30]
|
||||
},
|
||||
{
|
||||
name: 'All Tasks',
|
||||
type: 'line',
|
||||
data: [23, 11, 34, 27, 17, 22, 62, 32, 44, 22, 39]
|
||||
}],
|
||||
chartOptions: {
|
||||
chart: {
|
||||
stacked: false,
|
||||
toolbar: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
stroke: {
|
||||
width: 2,
|
||||
curve: 'smooth'
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '20%',
|
||||
endingShape: 'rounded'
|
||||
}
|
||||
},
|
||||
colors: ['#556ee6', '#34c38f'],
|
||||
fill: {
|
||||
gradient: {
|
||||
inverseColors: false,
|
||||
shade: 'light',
|
||||
type: "vertical",
|
||||
opacityFrom: 0.85,
|
||||
opacityTo: 0.55,
|
||||
stops: [0, 100, 100, 100]
|
||||
}
|
||||
},
|
||||
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov'],
|
||||
markers: {
|
||||
size: 0
|
||||
},
|
||||
yaxis: {
|
||||
min: 0
|
||||
},
|
||||
}
|
||||
};
|
||||
|
||||
const tasks = [
|
||||
{
|
||||
index: 1,
|
||||
taskType: 'upcoming',
|
||||
name: 'Create a Skote Dashboard UI',
|
||||
images: [require('@/assets/images/users/avatar-2.jpg'), require('@/assets/images/users/avatar-1.jpg')],
|
||||
status: 'Waiting',
|
||||
checked: false
|
||||
},
|
||||
{
|
||||
index: 2,
|
||||
taskType: 'upcoming',
|
||||
name: 'Create a New Landing UI',
|
||||
images: [require('@/assets/images/users/avatar-4.jpg'), require('@/assets/images/users/avatar-5.jpg')],
|
||||
status: 'Approved',
|
||||
checked: true
|
||||
},
|
||||
{
|
||||
index: 3,
|
||||
taskType: 'upcoming',
|
||||
name: 'Create a Skote Logo',
|
||||
images: [require('@/assets/images/users/avatar-1.jpg')],
|
||||
status: 'Waiting',
|
||||
checked: false
|
||||
},
|
||||
{
|
||||
index: 4,
|
||||
taskType: 'inprogress',
|
||||
name: 'Brand logo design',
|
||||
images: [require('@/assets/images/users/avatar-7.jpg')],
|
||||
status: 'Complete',
|
||||
checked: true
|
||||
},
|
||||
{
|
||||
index: 5,
|
||||
taskType: 'inprogress',
|
||||
name: 'Create a Blog Template UI',
|
||||
images: [require('@/assets/images/users/avatar-8.jpg'), require('@/assets/images/users/avatar-1.jpg')],
|
||||
status: 'Pending',
|
||||
checked: false
|
||||
},
|
||||
{
|
||||
index: 6,
|
||||
taskType: 'completed',
|
||||
name: 'Redesign - Landing page',
|
||||
images: [require('@/assets/images/users/avatar-6.jpg')],
|
||||
status: 'Complete',
|
||||
checked: false
|
||||
},
|
||||
{
|
||||
index: 7,
|
||||
taskType: 'completed',
|
||||
name: 'Multipurpose Landing',
|
||||
images: [require('@/assets/images/users/avatar-7.jpg')],
|
||||
status: 'Complete',
|
||||
checked: true
|
||||
},
|
||||
{
|
||||
index: 8,
|
||||
taskType: 'completed',
|
||||
name: 'Create a Blog Template UI',
|
||||
images: [require('@/assets/images/users/avatar-4.jpg'), require('@/assets/images/users/avatar-2.jpg')],
|
||||
status: 'Complete',
|
||||
checked: false
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
|
||||
export { tasksChart, tasks };
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue