viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit 55f72b7d7d35e68ce6c6f12badd8465d348f43a3

Authored by Neeraj Sharma
1 parent 335f3bb8e1
Exists in master and in 3 other branches amber-development, development, ui-design

add new page are notification design,all api run in notification or add logo

Showing 14 changed files with 936 additions and 240 deletions   Show diff stats
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html> 2 <html>
3 <head> 3 <head>
4 <meta charset="utf-8"> 4 <meta charset="utf-8">
5 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 5 <meta name="viewport" content="width=device-width,initial-scale=1.0">
6 <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700%7CMaterial+Icons' rel="stylesheet"> 6 <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700%7CMaterial+Icons' rel="stylesheet">
7 <!-- <script src="https://cdn.bootcss.com/echarts/4.0.4/echarts-en.min.js"></script> --> 7 <!-- <script src="https://cdn.bootcss.com/echarts/4.0.4/echarts-en.min.js"></script> -->
8 <title>School Management</title> 8 <title>School Management</title>
9 <!-- <link rel="shortcut icon" href="/static/ana.png" type="image/x-icon"> --> 9 <link rel="shortcut icon" href="/static/icon.jpeg" type="image/x-icon">
10 <meta name="description" content="School Management"> 10 <meta name="description" content="School Management">
11 <!-- <meta name="keywords" content="admin, dashboard, webapp, template, responsive, material, bootstrap, crm, uikit, framework, backend, app, widgets, premium, file manamger, mail, vue, vuetify, echarts"> --> 11 <!-- <meta name="keywords" content="admin, dashboard, webapp, template, responsive, material, bootstrap, crm, uikit, framework, backend, app, widgets, premium, file manamger, mail, vue, vuetify, echarts"> -->
12 <link href="./static/css/custom.css" rel="stylesheet" /> 12 <link href="./static/css/custom.css" rel="stylesheet" />
13 </head> 13 </head>
14 <body> 14 <body>
15 15
16 <div id="app"></div> 16 <div id="app"></div>
17 <!-- built files will be auto injected --> 17 <!-- built files will be auto injected -->
18 <!-- Global site tag (gtag.js) - Google Analytics --> 18 <!-- Global site tag (gtag.js) - Google Analytics -->
19 <!-- <script async src="https://www.googletagmanager.com/gtag/js?id=UA-3881136-11"></script> --> 19 <!-- <script async src="https://www.googletagmanager.com/gtag/js?id=UA-3881136-11"></script> -->
20 <script> 20 <script>
21 window.dataLayer = window.dataLayer || []; 21 window.dataLayer = window.dataLayer || [];
22 function gtag(){dataLayer.push(arguments);} 22 function gtag(){dataLayer.push(arguments);}
23 gtag('js', new Date()); 23 gtag('js', new Date());
24 gtag('config', 'UA-3881136-11'); 24 gtag('config', 'UA-3881136-11');
25 </script> 25 </script>
26 </body> 26 </body>
27 27
28 </html> 28 </html>
29 29
src/Services/http.js
Diff comments   View file @55f72b7
1 import axios from 'axios' 1 import axios from 'axios'
2 import store from '@/store/store' 2 import store from '@/store/store'
3 3
4 export default () => { 4 export default () => {
5 return axios.create({ 5 return axios.create({
6 baseURL:'http://192.168.4.220:3002/v1', 6 baseURL:'http://192.168.4.220:3002/v1',
7 // baseURL:'http://139.59.58.160:8001/v1',
7 headers: { 8 headers: {
8 Authorization: `Bearer ${store.state.token}` 9 Authorization: `Bearer ${store.state.token}`
9 } 10 }
10 }) 11 })
11 } 12 }
12 13
1 const Menu = [ 1 const Menu = [
2 // { header: 'Apps' }, 2 // { header: 'Apps' },
3 { 3 {
4 title: 'Class', 4 title: 'Class',
5 // group: 'apps', 5 // group: 'apps',
6 name: 'addclass', 6 name: 'addclass',
7 icon: 'local_library', 7 icon: 'local_library',
8 }, 8 },
9 { 9 {
10 title: 'Section', 10 title: 'Section',
11 // group: 'apps', 11 // group: 'apps',
12 name: 'section', 12 name: 'section',
13 icon: 'view_module', 13 icon: 'view_module',
14 }, 14 },
15 { 15 {
16 title: 'Teachers', 16 title: 'Teachers',
17 // group: '', 17 // group: '',
18 name: 'teachers', 18 name: 'teachers',
19 icon: 'group', 19 icon: 'group',
20 }, 20 },
21 { 21 {
22 title: 'Students', 22 title: 'Students',
23 // group: 'apps', 23 // group: 'apps',
24 name: 'Students', 24 name: 'Students',
25 icon: 'school', 25 icon: 'school',
26 }, 26 },
27 { 27 {
28 title: 'Event', 28 title: 'Event',
29 name: 'event', 29 name: 'event',
30 icon: 'event_available', 30 icon: 'event_available',
31 }, 31 },
32 { 32 {
33 title: 'News', 33 title: 'News',
34 name: 'news', 34 name: 'news',
35 icon: 'notification_important', 35 icon: 'notification_important',
36 }, 36 },
37 { 37 {
38 title: 'Reminder', 38 title: 'Reminder',
39 name: 'reminder', 39 name: 'reminder',
40 icon: 'alarm_add', 40 icon: 'alarm_add',
41 }, 41 },
42 { 42 {
43 title: 'Time Table', 43 title: 'Time Table',
44 name: 'timeTable', 44 name: 'timeTable',
45 icon: 'event_note', 45 icon: 'event_note',
46 }, 46 },
47 // { 47 {
48 // title: 'Notification', 48 title: 'Notification',
49 // name: 'notification', 49 name: 'notification',
50 // icon: 'notifications_active', 50 icon: 'notifications_active',
51 // }, 51 },
52 ]; 52 ];
53 53
54 54
55 // reorder menu 55 // reorder menu
56 Menu.forEach((item) => { 56 Menu.forEach((item) => {
57 if (item.items) { 57 if (item.items) {
58 item.items.sort((x, y) => { 58 item.items.sort((x, y) => {
59 let textA = x.title.toUpperCase(); 59 let textA = x.title.toUpperCase();
60 let textB = y.title.toUpperCase(); 60 let textB = y.title.toUpperCase();
61 return (textA < textB) ? -1 : (textA > textB) ? 1 : 0; 61 return (textA < textB) ? -1 : (textA > textB) ? 1 : 0;
62 }); 62 });
63 } 63 }
64 }); 64 });
65 65
66 export default Menu; 66 export default Menu;
67 67
src/components/pageHeader/AppDrawer.vue
Diff comments   View file @55f72b7
1 <template> 1 <template>
2 <v-navigation-drawer 2 <v-navigation-drawer
3 id="appDrawer" 3 id="appDrawer"
4 :mini-variant.sync="mini" 4 :mini-variant.sync="mini"
5 fixed 5 fixed
6 :dark="$vuetify.dark" 6 :dark="$vuetify.dark"
7 app 7 app
8 v-model="drawer" 8 v-model="drawer"
9 width="260" 9 width="260"
10 > 10 >
11 <v-toolbar style="background:#39b982" > 11 <v-toolbar style="background:#39b982" >
12 <!-- <img v-bind:src="computeLogo" height="30" class="imgLogo" alt="ana"> --> 12 <img v-bind:src="computeLogo" height="30" class="imgLogo" alt="ana">
13 <h4 class="white--text my-3 ml-4">School-Managament</h4> 13 <h5 class="white--text my-3 ml-2">School-Managament</h5>
14 <v-toolbar-title class="ml-0 pl-3"> 14 <v-toolbar-title class="ml-0 pl-3" >
15 </v-toolbar-title> 15 </v-toolbar-title>
16 </v-toolbar> 16 </v-toolbar>
17 <vue-perfect-scrollbar class="drawer-menu--scroll" :settings="scrollSettings"> 17 <vue-perfect-scrollbar class="drawer-menu--scroll" :settings="scrollSettings">
18 <v-list dense expand> 18 <v-list dense expand>
19 <template v-for="(item, i) in menus"> 19 <template v-for="(item, i) in menus">
20 <!--group with subitems--> 20 <!--group with subitems-->
21 <v-list-group v-if="item.items" :key="item.name" :group="item.group" :prepend-icon="item.icon" no-action="no-action"> 21 <v-list-group v-if="item.items" :key="item.name" :group="item.group" :prepend-icon="item.icon" no-action="no-action">
22 <v-list-tile slot="activator" ripple="ripple"> 22 <v-list-tile slot="activator" ripple="ripple">
23 <v-list-tile-content> 23 <v-list-tile-content>
24 <v-list-tile-title>{{ item.title }}</v-list-tile-title> 24 <v-list-tile-title>{{ item.title }}</v-list-tile-title>
25 </v-list-tile-content> 25 </v-list-tile-content>
26 </v-list-tile> 26 </v-list-tile>
27 <template v-for="(subItem, i) in item.items"> 27 <template v-for="(subItem, i) in item.items">
28 <!--sub group--> 28 <!--sub group-->
29 <v-list-group v-if="subItem.items" :key="subItem.name" :group="subItem.group" sub-group="sub-group"> 29 <v-list-group v-if="subItem.items" :key="subItem.name" :group="subItem.group" sub-group="sub-group">
30 <v-list-tile slot="activator" ripple="ripple"> 30 <v-list-tile slot="activator" ripple="ripple">
31 <v-list-tile-content> 31 <v-list-tile-content>
32 <v-list-tile-title>{{ subItem.title }}</v-list-tile-title> 32 <v-list-tile-title>{{ subItem.title }}</v-list-tile-title>
33 </v-list-tile-content> 33 </v-list-tile-content>
34 </v-list-tile> 34 </v-list-tile>
35 <v-list-tile v-for="(grand, i) in subItem.children" :key="i" :to="genChildTarget(item, grand)" :href="grand.href" ripple="ripple"> 35 <v-list-tile v-for="(grand, i) in subItem.children" :key="i" :to="genChildTarget(item, grand)" :href="grand.href" ripple="ripple">
36 <v-list-tile-content> 36 <v-list-tile-content>
37 <v-list-tile-title>{{ grand.title }}</v-list-tile-title> 37 <v-list-tile-title>{{ grand.title }}</v-list-tile-title>
38 </v-list-tile-content> 38 </v-list-tile-content>
39 </v-list-tile> 39 </v-list-tile>
40 </v-list-group> 40 </v-list-group>
41 <!--child item--> 41 <!--child item-->
42 <v-list-tile v-else :key="i" :to="genChildTarget(item, subItem)" :href="subItem.href" :disabled="subItem.disabled" :target="subItem.target" ripple="ripple"> 42 <v-list-tile v-else :key="i" :to="genChildTarget(item, subItem)" :href="subItem.href" :disabled="subItem.disabled" :target="subItem.target" ripple="ripple">
43 <v-list-tile-content> 43 <v-list-tile-content>
44 <v-list-tile-title><span>{{ subItem.title }}</span></v-list-tile-title> 44 <v-list-tile-title><span>{{ subItem.title }}</span></v-list-tile-title>
45 </v-list-tile-content> 45 </v-list-tile-content>
46 <!-- <v-circle class="white--text pa-0 circle-pill" v-if="subItem.badge" color="red" disabled="disabled">{{ subItem.badge }}</v-circle> --> 46 <!-- <v-circle class="white--text pa-0 circle-pill" v-if="subItem.badge" color="red" disabled="disabled">{{ subItem.badge }}</v-circle> -->
47 <v-list-tile-action v-if="subItem.action"> 47 <v-list-tile-action v-if="subItem.action">
48 <v-icon :class="[subItem.actionClass || 'success--text']">{{ subItem.action }}</v-icon> 48 <v-icon :class="[subItem.actionClass || 'success--text']">{{ subItem.action }}</v-icon>
49 </v-list-tile-action> 49 </v-list-tile-action>
50 </v-list-tile> 50 </v-list-tile>
51 </template> 51 </template>
52 </v-list-group> 52 </v-list-group>
53 <v-subheader v-else-if="item.header" :key="i">{{ item.header }}</v-subheader> 53 <v-subheader v-else-if="item.header" :key="i">{{ item.header }}</v-subheader>
54 <v-divider v-else-if="item.divider" :key="i"></v-divider> 54 <v-divider v-else-if="item.divider" :key="i"></v-divider>
55 <!--top-level link--> 55 <!--top-level link-->
56 <v-list-tile v-else :to="!item.href ? { name: item.name } : null" :href="item.href" ripple="ripple" :disabled="item.disabled" :target="item.target" rel="noopener" :key="item.name"> 56 <v-list-tile v-else :to="!item.href ? { name: item.name } : null" :href="item.href" ripple="ripple" :disabled="item.disabled" :target="item.target" rel="noopener" :key="item.name">
57 <v-list-tile-action v-if="item.icon"> 57 <v-list-tile-action v-if="item.icon">
58 <v-icon>{{ item.icon }}</v-icon> 58 <v-icon>{{ item.icon }}</v-icon>
59 </v-list-tile-action> 59 </v-list-tile-action>
60 <v-list-tile-content> 60 <v-list-tile-content>
61 <v-list-tile-title>{{ item.title }}</v-list-tile-title> 61 <v-list-tile-title>{{ item.title }}</v-list-tile-title>
62 </v-list-tile-content> 62 </v-list-tile-content>
63 <!-- <v-circle class="white--text pa-0 chip--x-small" v-if="item.badge" :color="item.color || 'primary'" disabled="disabled">{{ item.badge }}</v-circle> --> 63 <!-- <v-circle class="white--text pa-0 chip--x-small" v-if="item.badge" :color="item.color || 'primary'" disabled="disabled">{{ item.badge }}</v-circle> -->
64 <v-list-tile-action v-if="item.subAction"> 64 <v-list-tile-action v-if="item.subAction">
65 <v-icon class="success--text">{{ item.subAction }}</v-icon> 65 <v-icon class="success--text">{{ item.subAction }}</v-icon>
66 </v-list-tile-action> 66 </v-list-tile-action>
67 <!-- <v-circle class="caption blue lighten-2 white--text mx-0" v-else-if="item.chip" label="label" small="small">{{ item.chip }}</v-circle> --> 67 <!-- <v-circle class="caption blue lighten-2 white--text mx-0" v-else-if="item.chip" label="label" small="small">{{ item.chip }}</v-circle> -->
68 </v-list-tile> 68 </v-list-tile>
69 </template> 69 </template>
70 </v-list> 70 </v-list>
71 </vue-perfect-scrollbar> 71 </vue-perfect-scrollbar>
72 </v-navigation-drawer> 72 </v-navigation-drawer>
73 </template> 73 </template>
74 <script> 74 <script>
75 import menu from '@/api/menu'; 75 import menu from '@/api/menu';
76 import VuePerfectScrollbar from 'vue-perfect-scrollbar'; 76 import VuePerfectScrollbar from 'vue-perfect-scrollbar';
77 export default { 77 export default {
78 name: 'app-drawer', 78 name: 'app-drawer',
79 components: { 79 components: {
80 VuePerfectScrollbar, 80 VuePerfectScrollbar,
81 }, 81 },
82 props: { 82 props: {
83 expanded: { 83 expanded: {
84 type: Boolean, 84 type: Boolean,
85 default: true 85 default: true
86 }, 86 },
87 }, 87 },
88 data: () => ({ 88 data: () => ({
89 mini: false, 89 mini: false,
90 drawer: true, 90 drawer: true,
91 menus: menu, 91 menus: menu,
92 scrollSettings: { 92 scrollSettings: {
93 maxScrollbarLength: 160 93 maxScrollbarLength: 160
94 } 94 }
95 }), 95 }),
96 computed: { 96 computed: {
97 computeGroupActive () { 97 computeGroupActive () {
98 return true; 98 return true;
99 }, 99 },
100 // computeLogo () { 100 computeLogo () {
101 // return '/static/ana@2x.png'; 101 return '/static/icon.jpeg';
102 // }, 102 },
103 103
104 sideToolbarColor () { 104 sideToolbarColor () {
105 return this.$vuetify.options.extra.sideNav; 105 return this.$vuetify.options.extra.sideNav;
106 } 106 }
107 }, 107 },
108 created () { 108 created () {
109 window.getApp.$on('APP_DRAWER_TOGGLED', () => { 109 window.getApp.$on('APP_DRAWER_TOGGLED', () => {
110 this.drawer = (!this.drawer); 110 this.drawer = (!this.drawer);
111 }); 111 });
112 }, 112 },
113 113
114 114
115 methods: { 115 methods: {
116 genChildTarget (item, subItem) { 116 genChildTarget (item, subItem) {
117 if (subItem.href) return; 117 if (subItem.href) return;
118 if (subItem.component) { 118 if (subItem.component) {
119 return { 119 return {
120 name: subItem.component, 120 name: subItem.component,
121 }; 121 };
122 } 122 }
123 return { name: `${item.group}/${(subItem.name)}` }; 123 return { name: `${item.group}/${(subItem.name)}` };
124 }, 124 },
125 } 125 }
126 }; 126 };
127 </script> 127 </script>
128 128
129 129
130 <style lang="stylus"> 130 <style lang="stylus">
131 // @import '../../node_modules/vuetify/src/stylus/settings/_elevations.styl'; 131 // @import '../../node_modules/vuetify/src/stylus/settings/_elevations.styl';
132 132
133 #appDrawer 133 #appDrawer
134 overflow: hidden 134 overflow: hidden
135 .drawer-menu--scroll 135 .drawer-menu--scroll
136 height: calc(100vh - 48px) 136 height: calc(100vh - 48px)
137 overflow: auto 137 overflow: auto
138 .v-list--dense .v-list__tile:not(.v-list__tile--avatar) { 138 .v-list--dense .v-list__tile:not(.v-list__tile--avatar) {
139 height: 60px; 139 height: 60px;
140 font-size:17px; 140 font-size:17px;
141 } 141 }
142 .v-list__tile__action { 142 .v-list__tile__action {
143 min-width:36px; 143 min-width:36px;
144 } 144 }
145 .v-list__tile.primary--text { 145 .v-list__tile.primary--text {
146 color:black !important; 146 color:black !important;
147 border-left: 4px solid black; 147 border-left: 4px solid black;
148 border-radius: 4px; 148 border-radius: 4px;
149 } 149 }
150 @media screen and (max-width: 420px) { 150 @media screen and (max-width: 420px) {
151 .v-list--dense .v-list__tile:not(.v-list__tile--avatar) { 151 .v-list--dense .v-list__tile:not(.v-list__tile--avatar) {
152 font-size: 14px; 152 font-size: 14px;
153 } 153 }
154 .imgLogo{ 154 .imgLogo{
155 height: 22px; 155 height: 22px;
156 width: 62px; 156 width: 20px;;
157 } 157 }
158 } 158 }
159 </style> 159 </style>
160 160
161 161
162 <style scoped> 162 <style scoped>
163 .theme--light .v-icon, .application .theme--light.v-icon { 163 .theme--light .v-icon, .application .theme--light.v-icon {
164 color: #39b982; 164 color: #39b982;
165 } 165 }
166
166 </style> 167 </style>
167 168
168 169
src/pages/Authentication/Login.vue
Diff comments   View file @55f72b7
1 <template> 1 <template>
2 <v-app id="login"> 2 <v-app id="login">
3 <v-toolbar class="fixcolor"> 3 <v-toolbar class="fixcolor">
4 <v-toolbar-items> 4 <v-toolbar-items>
5 <!-- <img src="/static/ana@2x.png" height="36" alt="ana"> --> 5 <img src="/static/icon.jpeg" height="36" alt="logo">
6 <h3 class="white--text my-3 ml-4">School-Management</h3> 6 <h3 class="white--text my-3 ml-5 logoSchool">School-Management</h3>
7 </v-toolbar-items> 7 </v-toolbar-items>
8 </v-toolbar> 8 </v-toolbar>
9 <v-content> 9 <v-content>
10 <v-container fluid fill-height> 10 <v-container fluid fill-height>
11 <v-snackbar 11 <v-snackbar
12 :timeout="timeout" 12 :timeout="timeout"
13 :top="y === 'top'" 13 :top="y === 'top'"
14 :right="x === 'right'" 14 :right="x === 'right'"
15 :vertical="mode === 'vertical'" 15 :vertical="mode === 'vertical'"
16 v-model="snackbar" 16 v-model="snackbar"
17 :color="color" 17 :color="color"
18 >{{ text }}</v-snackbar> 18 >{{ text }}</v-snackbar>
19 <v-layout align-center justify-center> 19 <v-layout align-center justify-center>
20 <v-flex xs12 sm10 md6 lg4> 20 <v-flex xs12 sm10 md6 lg4>
21 <v-toolbar class="fixcolor" dark> 21 <v-toolbar class="fixcolor" dark>
22 <v-spacer></v-spacer> 22 <v-spacer></v-spacer>
23 <v-toolbar-title>School Login</v-toolbar-title> 23 <v-toolbar-title>School Login</v-toolbar-title>
24 <v-spacer></v-spacer> 24 <v-spacer></v-spacer>
25 </v-toolbar> 25 </v-toolbar>
26 26
27 <v-card class="elevation-1 pa-1"> 27 <v-card class="elevation-1 pa-1">
28 <v-card-text> 28 <v-card-text>
29 <v-flex xs12 sm12 md12 lg12> 29 <v-flex xs12 sm12 md12 lg12>
30 <v-form ref="form" v-model="valid" lazy-validation> 30 <v-form ref="form" v-model="valid" lazy-validation>
31 <v-text-field 31 <v-text-field
32 v-model="userLogincredentials.email" 32 v-model="userLogincredentials.email"
33 :rules="nameRules" 33 :rules="nameRules"
34 label="Username" 34 label="Username"
35 required 35 required
36 ></v-text-field> 36 ></v-text-field>
37 <v-text-field 37 <v-text-field
38 :rules="[rules.required]" 38 :rules="[rules.required]"
39 v-model="userLogincredentials.password" 39 v-model="userLogincredentials.password"
40 :append-icon="e1 ? 'visibility_off' : 'visibility'" 40 :append-icon="e1 ? 'visibility_off' : 'visibility'"
41 :append-icon-cb="() => (e1 = !e1)" 41 :append-icon-cb="() => (e1 = !e1)"
42 :type="e1 ? 'password' : 'text'" 42 :type="e1 ? 'password' : 'text'"
43 name="input-10-1" 43 name="input-10-1"
44 label="Password" 44 label="Password"
45 counter 45 counter
46 ></v-text-field> 46 ></v-text-field>
47 </v-form> 47 </v-form>
48 <v-layout row wrap> 48 <v-layout row wrap>
49 <v-flex xs6> 49 <v-flex xs6>
50 <!-- <v-checkbox :label="`Remember me`" v-model="remember"></v-checkbox> --> 50 <!-- <v-checkbox :label="`Remember me`" v-model="remember"></v-checkbox> -->
51 </v-flex> 51 </v-flex>
52 <v-flex xs6> 52 <v-flex xs6>
53 <h5 class="right mt-4"> <router-link class="link" to="/forgetpassword" style="border-bottom: 2px solid #aaa;">Forgot Password</router-link></h5> 53 <h5 class="right mt-4"> <router-link class="link" to="/forgetpassword" style="border-bottom: 2px solid #aaa;">Forgot Password</router-link></h5>
54 </v-flex> 54 </v-flex>
55 </v-layout> 55 </v-layout>
56 </v-flex> 56 </v-flex>
57 </v-card-text> 57 </v-card-text>
58 <v-layout> 58 <v-layout>
59 <v-flex sm12 class="my-3"> 59 <v-flex sm12 class="my-3">
60 <v-btn style="margin: auto;display: block;b" class="fixcolor" round dark large @click="login" :loading="loading">Login</v-btn> 60 <v-btn style="margin: auto;display: block;b" class="fixcolor" round dark large @click="login" :loading="loading">Login</v-btn>
61 </v-flex> 61 </v-flex>
62 </v-layout> 62 </v-layout>
63 <v-layout> 63 <v-layout>
64 </v-layout> 64 </v-layout>
65 </v-card> 65 </v-card>
66 </v-flex> 66 </v-flex>
67 </v-layout> 67 </v-layout>
68 </v-container> 68 </v-container>
69 </v-content> 69 </v-content>
70 <v-footer class="pa-4" style="background:linear-gradient(90deg,#f58753 30%,#f15e5f 110%)"></v-footer> 70 <v-footer class="pa-4" style="background:linear-gradient(90deg,#f58753 30%,#f15e5f 110%)"></v-footer>
71 </v-app> 71 </v-app>
72 </template> 72 </template>
73 73
74 <script> 74 <script>
75 import http from "@/Services/http.js"; 75 import http from "@/Services/http.js";
76 export default { 76 export default {
77 data() { 77 data() {
78 return { 78 return {
79 snackbar: false, 79 snackbar: false,
80 y: "top", 80 y: "top",
81 x: "right", 81 x: "right",
82 mode: "", 82 mode: "",
83 timeout: 3000, 83 timeout: 3000,
84 text: "", 84 text: "",
85 e1: true, 85 e1: true,
86 loading: false, 86 loading: false,
87 remember: false, 87 remember: false,
88 valid: false, 88 valid: false,
89 userLogincredentials: {}, 89 userLogincredentials: {},
90 nameRules: [ 90 nameRules: [
91 v => !!v || "Username is required" 91 v => !!v || "Username is required"
92 92
93 ], 93 ],
94 password: "", 94 password: "",
95 email:"", 95 email:"",
96 rules: { 96 rules: {
97 required: value => !!value || "password is Required.", 97 required: value => !!value || "password is Required.",
98 // min: v => 98 // min: v =>
99 // (/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*])(?=.{8,})/.test( 99 // (/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*])(?=.{8,})/.test(
100 // v 100 // v
101 // ) && 101 // ) &&
102 // v.length >= 6) || 102 // v.length >= 6) ||
103 // "Min 4 characters upper case lower case symbol required" 103 // "Min 4 characters upper case lower case symbol required"
104 } 104 }
105 }; 105 };
106 }, 106 },
107 methods: { 107 methods: {
108 login() { 108 login() {
109 this.loading = true;
109 var userdata = { 110 var userdata = {
110 email: this.userLogincredentials.email, 111 email: this.userLogincredentials.email,
111 password: this.userLogincredentials.password, 112 password: this.userLogincredentials.password,
112 role:"ADMIN" 113 role:"ADMIN"
113 114
114 }; 115 };
115 http() 116 http()
116 .post("/schoolLogin", userdata) 117 .post("/schoolLogin", userdata)
117 .then(response => { 118 .then(response => {
118 this.$store.dispatch("setToken", response.data.data.token); 119 this.$store.dispatch("setToken", response.data.data.token);
119 this.$store.dispatch("Id", response.data.data.id); 120 this.$store.dispatch("Id", response.data.data.id);
120 this.loading = true; 121 this.loading = false;
121 setTimeout(() => { 122 this.$router.push("/teachers");
122 this.$router.push("/teachers");
123 }, 2000);
124 }) 123 })
125 .catch(err => { 124 .catch(error => {
126 this.text = "Email or Password not matched !!"; 125 this.text = error.response.data.message
127 this.snackbar = true; 126 this.snackbar = true;
128 this.loading = false; 127 this.loading = false;
129 }); 128 });
130 } 129 }
131 }, 130 },
132 computed: { 131 computed: {
133 color() { 132 color() {
134 return this.loading ? "success" : "error"; 133 return this.loading ? "success" : "error";
135 } 134 }
136 } 135 }
137 }; 136 };
138 </script> 137 </script>
139 138
140 <style scoped lang="css"> 139 <style scoped lang="css">
141 #login { 140 #login {
142 width: 100%; 141 width: 100%;
143 position: absolute; 142 position: absolute;
144 top: 0; 143 top: 0;
145 left: 0; 144 left: 0;
146 content: ""; 145 content: "";
147 z-index: 0; 146 z-index: 0;
148 } 147 }
149 </style> 148 </style>
150 <style scoped> 149 <style scoped>
151 img { 150 img {
152 position: absolute; 151 position: absolute;
153 top: 13px; 152 top: 13px;
154 left: 50px; 153 left: 8px;
155 } 154 }
156 .v-btn--large { 155 .v-btn--large {
157 padding: 0px 84px; 156 padding: 0px 84px;
158 } 157 }
159 .link{ 158 .link{
160 text-decoration:none; 159 text-decoration:none;
161 } 160 }
162 a { 161 a {
163 color: #696969; 162 color: #696969;
164 } 163 }
165 .forget{ 164 .forget{
166 margin-top:20px; 165 margin-top:20px;
167 } 166 }
168 .mt-4 { 167 .mt-4 {
169 margin-top: 21px !important; 168 margin-top: 21px !important;
170 } 169 }
171 @media screen and (max-width: 600px) { 170 @media screen and (max-width: 600px) {
172 .forget{ 171 .forget{
173 margin-top:none; 172 margin-top:none;
174 margin-left:18px; 173 margin-left:18px;
175 } 174 }
176 img{ 175 img{
177 top:16px; 176 top: 21px;
178 left:10px; 177 left: 10px;
179 height: 24px; 178 height: 24px;
180 width: 66px;; 179 width: 33px;
180 }
181 .logoSchool{
182 font-size: 18px;
183 margin-top: 20px !important;
184 }
185 h5 {
186 font-size: 14px !important;
181 } 187 }
src/pages/Authentication/forgetpassword.vue
Diff comments   View file @55f72b7
1 <template> 1 <template>
2 <v-app id="login"> 2 <v-app id="login">
3 <v-toolbar class="fixcolors"> 3 <v-toolbar class="fixcolors">
4 <v-toolbar-items> 4 <v-toolbar-items>
5 <!-- <img src="/static/ana@2x.png" height="36" alt="ana" /> --> 5 <img src="/static/icon.jpeg" height="36" alt="logo">
6 <h3 class="white--text my-3 ml-4">School-Management</h3> 6 <h3 class="white--text my-3 ml-5 logoSchool">School-Management</h3>
7 </v-toolbar-items> 7 </v-toolbar-items>
8 </v-toolbar> 8 </v-toolbar>
9 <v-container fluid> 9 <v-container fluid>
10 <v-layout align-center justify-center fill-height> 10 <v-layout align-center justify-center fill-height>
11 <v-flex xs12 sm8 md7 lg8> 11 <v-flex xs12 sm8 md7 lg8>
12 <div> 12 <div>
13 <v-app> 13 <v-app>
14 <v-stepper v-model="e2"> 14 <v-stepper v-model="e2">
15 <v-stepper-header> 15 <v-stepper-header>
16 <v-stepper-step :complete="e2 > 1" step="1">Fill Your Email</v-stepper-step> 16 <v-stepper-step :complete="e2 > 1" step="1">Fill Your Email</v-stepper-step>
17 <v-divider></v-divider> 17 <v-divider></v-divider>
18 <v-stepper-step step="2">Last Step of Forget Password</v-stepper-step> 18 <v-stepper-step step="2">Last Step of Forget Password</v-stepper-step>
19 </v-stepper-header> 19 </v-stepper-header>
20 <v-stepper-items> 20 <v-stepper-items>
21 <v-stepper-content step="1"> 21 <v-stepper-content step="1">
22 <v-content> 22 <v-content>
23 <v-container fluid class="content"> 23 <v-container fluid class="content">
24 <v-layout align-center justify-center fill-height> 24 <v-layout align-center justify-center fill-height>
25 <v-flex xs12 sm8 md7 lg8> 25 <v-flex xs12 sm8 md7 lg8>
26 <v-toolbar class="fixcolors" dark> 26 <v-toolbar class="fixcolors" dark>
27 <v-spacer></v-spacer> 27 <v-spacer></v-spacer>
28 <v-toolbar-title>Forget Password</v-toolbar-title> 28 <v-toolbar-title>Forget Password</v-toolbar-title>
29 <v-spacer></v-spacer> 29 <v-spacer></v-spacer>
30 </v-toolbar> 30 </v-toolbar>
31 <v-card class="elevation-1 pa-1"> 31 <v-card class="elevation-1 pa-1">
32 <v-card-text> 32 <v-card-text>
33 <h5 class="text-xs-center"> Not to Worry! Enter to your registered Email ID. </h5> 33 <h5 class="text-xs-center"> Not to Worry! Enter to your registered Email ID. </h5>
34 <h5 class="text-xs-center"> We'll send you a reset.</h5> 34 <h5 class="text-xs-center"> We'll send you a reset.</h5>
35 <v-flex lg6 sm6 xs10 offset-sm3 offset-xs1 offset-lg3> 35 <v-flex lg6 sm6 xs10 offset-sm3 offset-xs1 offset-lg3>
36 <v-form ref="form" v-model="valid" lazy-validation> 36 <v-form ref="form" v-model="valid" lazy-validation>
37 <div class="custom-input-align"> 37 <div class="custom-input-align">
38 <v-text-field 38 <v-text-field
39 class="text-md-center" 39 class="text-md-center"
40 :rules="emailRules" 40 :rules="emailRules"
41 v-model="forgetemail" 41 v-model="forgetemail"
42 label="Enter Your email ID" 42 label="Enter Your email ID"
43 required></v-text-field> 43 required></v-text-field>
44 </div> 44 </div>
45 </v-form> 45 </v-form>
46 </v-flex> 46 </v-flex>
47 </v-card-text> 47 </v-card-text>
48 <v-card-actions> 48 <v-card-actions>
49 <v-flex text-xs-center> 49 <v-flex text-xs-center>
50 <v-btn round class="mt-1 button fixcolors" dark large @click="reset">Send Request</v-btn> 50 <v-btn round class="mt-1 button fixcolors" dark large @click="reset">Send Request</v-btn>
51 </v-flex> 51 </v-flex>
52 </v-card-actions> 52 </v-card-actions>
53 <v-snackbar 53 <v-snackbar
54 :timeout="timeout" 54 :timeout="timeout"
55 :top="y === 'top'" 55 :top="y === 'top'"
56 :right="x === 'right'" 56 :right="x === 'right'"
57 :vertical="mode === 'vertical'" 57 :vertical="mode === 'vertical'"
58 v-model="snackbar" 58 v-model="snackbar"
59 :color= color 59 :color= color
60 > 60 >
61 {{ text }} 61 {{ text }}
62 </v-snackbar> 62 </v-snackbar>
63 </v-snackbar> 63 </v-snackbar>
64 </v-card> 64 </v-card>
65 </v-flex> 65 </v-flex>
66 </v-layout> 66 </v-layout>
67 </v-container> 67 </v-container>
68 </v-content> 68 </v-content>
69 </v-stepper-content> 69 </v-stepper-content>
70 <v-stepper-content step="2"> 70 <v-stepper-content step="2">
71 <v-content> 71 <v-content>
72 <v-container fluid fill-height> 72 <v-container fluid fill-height>
73 <v-layout align-center justify-center> 73 <v-layout align-center justify-center>
74 <v-flex xs12 sm8 md7 lg8> 74 <v-flex xs12 sm8 md7 lg8>
75 <v-toolbar class="fixcolors" dark> 75 <v-toolbar class="fixcolors" dark>
76 <v-spacer></v-spacer> 76 <v-spacer></v-spacer>
77 <v-toolbar-title>Forget Password</v-toolbar-title> 77 <v-toolbar-title>Forget Password</v-toolbar-title>
78 <v-spacer></v-spacer> 78 <v-spacer></v-spacer>
79 </v-toolbar> 79 </v-toolbar>
80 <v-card class="elevation-1 pa-1"> 80 <v-card class="elevation-1 pa-1">
81 <v-card-text> 81 <v-card-text>
82 <h5 class="text-xs-center"> Not to Worry! Enter to your registered Email ID And New Password. </h5> 82 <h5 class="text-xs-center"> Not to Worry! Enter to your registered Email ID And New Password. </h5>
83 <h5 class="text-xs-center"> We'll send you a reset.</h5> 83 <h5 class="text-xs-center"> We'll send you a reset.</h5>
84 <v-flex lg6 sm6 xs10 offset-sm3 offset-xs1 offset-lg3> 84 <v-flex lg6 sm6 xs10 offset-sm3 offset-xs1 offset-lg3>
85 <v-form class="mt-4"> 85 <v-form class="mt-4">
86 <div class="custom-input-align"> 86 <div class="custom-input-align">
87 <v-text-field 87 <v-text-field
88 class="text-md-center" 88 class="text-md-center"
89 v-model="email" 89 v-model="email"
90 :rules="emailRules" 90 :rules="emailRules"
91 label="Enter Your email ID" 91 label="Enter Your email ID"
92 required></v-text-field> 92 required></v-text-field>
93 <v-text-field 93 <v-text-field
94 :rules="[rules.required,rules.min]" 94 :rules="[rules.required,rules.min]"
95 v-model="changepassword" 95 v-model="changepassword"
96 :append-icon="e1 ? 'visibility_off' : 'visibility'" 96 :append-icon="e1 ? 'visibility_off' : 'visibility'"
97 :append-icon-cb="() => (e1 = !e1)" 97 :append-icon-cb="() => (e1 = !e1)"
98 :type="e1 ? 'password' : 'text'" 98 :type="e1 ? 'password' : 'text'"
99 name="input-10-1" 99 name="input-10-1"
100 label="Password" 100 label="Password"
101 counter 101 counter
102 ></v-text-field> 102 ></v-text-field>
103 </div> 103 </div>
104 </v-form> 104 </v-form>
105 </v-flex> 105 </v-flex>
106 </v-card-text> 106 </v-card-text>
107 <v-card-actions> 107 <v-card-actions>
108 <v-flex text-xs-center> 108 <v-flex text-xs-center>
109 <v-btn round class="mt-1 button fixcolors" dark large @click="resetPassword">Send Request</v-btn> 109 <v-btn round class="mt-1 button fixcolors" dark large @click="resetPassword">Send Request</v-btn>
110 </v-flex> 110 </v-flex>
111 </v-card-actions> 111 </v-card-actions>
112 <v-snackbar 112 <v-snackbar
113 :timeout="timeout" 113 :timeout="timeout"
114 :top="y === 'top'" 114 :top="y === 'top'"
115 :right="x === 'right'" 115 :right="x === 'right'"
116 :vertical="mode === 'vertical'" 116 :vertical="mode === 'vertical'"
117 v-model="snackbar" 117 v-model="snackbar"
118 :color= color 118 :color= color
119 > 119 >
120 {{ text }} 120 {{ text }}
121 </v-snackbar> 121 </v-snackbar>
122 </v-snackbar> 122 </v-snackbar>
123 </v-card> 123 </v-card>
124 </v-flex> 124 </v-flex>
125 </v-layout> 125 </v-layout>
126 </v-container> 126 </v-container>
127 </v-content> 127 </v-content>
128 <v-btn 128 <v-btn
129 color="primary" 129 color="primary"
130 dark 130 dark
131 @click="e2 = 1" 131 @click="e2 = 1"
132 > 132 >
133 Back 133 Back
134 </v-btn> 134 </v-btn>
135 </v-stepper-content> 135 </v-stepper-content>
136 </v-stepper-items> 136 </v-stepper-items>
137 </v-stepper> 137 </v-stepper>
138 </v-app> 138 </v-app>
139 </div> 139 </div>
140 </v-flex> 140 </v-flex>
141 </v-layout> 141 </v-layout>
142 </v-container> 142 </v-container>
143 <v-footer class="pa-4 fixcolors"> 143 <v-footer class="pa-4 fixcolors">
144 </v-footer> 144 </v-footer>
145 </v-app> 145 </v-app>
146 </template> 146 </template>
147 147
148 148
149 149
150 <script> 150 <script>
151 import http from '@/Services/http.js'; 151 import http from '@/Services/http.js';
152 152
153 export default { 153 export default {
154 data: () => ({ 154 data: () => ({
155 e1: true, 155 e1: true,
156 e2:0, 156 e2:0,
157 snackbar: false, 157 snackbar: false,
158 y: 'top', 158 y: 'top',
159 x: 'right', 159 x: 'right',
160 mode: '', 160 mode: '',
161 timeout: 4000, 161 timeout: 4000,
162 text: '', 162 text: '',
163 loading: false, 163 loading: false,
164 email: '', 164 email: '',
165 forgetemail:'', 165 forgetemail:'',
166 password:'', 166 password:'',
167 changepassword:'', 167 changepassword:'',
168 valid: true, 168 valid: true,
169 emailRules: [ 169 emailRules: [
170 v => !!v || "E-mail is required", 170 v => !!v || "E-mail is required",
171 v => 171 v =>
172 /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) || 172 /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) ||
173 "E-mail must be valid" 173 "E-mail must be valid"
174 ], 174 ],
175 rules: { 175 rules: {
176 required: value => !!value || "password is Required.", 176 required: value => !!value || "password is Required.",
177 min: v => 177 min: v =>
178 (/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*])(?=.{8,})/.test( 178 (/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*])(?=.{8,})/.test(
179 v 179 v
180 ) && 180 ) &&
181 v.length >= 6) || 181 v.length >= 6) ||
182 "Min 4 characters upper case lower case symbol required" 182 "Min 4 characters upper case lower case symbol required"
183 } 183 }
184 }), 184 }),
185 185
186 methods: { 186 methods: {
187 reset () { 187 reset () {
188 if (this.$refs.form.validate()) { 188 if (this.$refs.form.validate()) {
189 http().get('/schoolForgotPassword?email='+ this.forgetemail) 189 http().get('/schoolForgotPassword?email='+ this.forgetemail)
190 .then(response => { 190 .then(response => {
191 // console.log("response=====>",response.data.data.token); 191 // console.log("response=====>",response.data.data.token);
192 this.$store.dispatch("setToken", response.data.data.token); 192 this.$store.dispatch("setToken", response.data.data.token);
193 this.loading = true; 193 this.loading = true;
194 this.e2 = 2 ; 194 this.e2 = 2 ;
195 if(this.snackbar=true){ 195 if(this.snackbar=true){
196 this.text= "Please you Fill Last Step of Forget Password!" 196 this.text= "Please you Fill Last Step of Forget Password!"
197 } 197 }
198 }).catch(err => { 198 }).catch(err => {
199 this.text="User Not Found or Incorrect Email" 199 this.text="User Not Found or Incorrect Email"
200 this.snackbar= true; 200 this.snackbar= true;
201 this.loading = false; 201 this.loading = false;
202 }) 202 })
203 } 203 }
204 }, 204 },
205 resetPassword(){ 205 resetPassword(){
206 let forgotPassword = { 206 let forgotPassword = {
207 resetToken: this.$store.state.token, 207 resetToken: this.$store.state.token,
208 email: this.email, 208 email: this.email,
209 password: this.changepassword 209 password: this.changepassword
210 } 210 }
211 http().post('/schoolResetPassword',forgotPassword) 211 http().post('/schoolResetPassword',forgotPassword)
212 .then(response => { 212 .then(response => {
213 console.log("response=====>",response); 213 console.log("response=====>",response);
214 this.loading = true; 214 this.loading = true;
215 if(this.snackbar=true){ 215 if(this.snackbar=true){
216 this.text= "Successfully Change your Password" 216 this.text= "Successfully Change your Password"
217 } 217 }
218 setTimeout(() => { 218 setTimeout(() => {
219 this.$router.push('/'); 219 this.$router.push('/');
220 }, 1000); 220 }, 1000);
221 }).catch(err => { 221 }).catch(err => {
222 this.text="User Not Found or Incorrect Email" 222 this.text="User Not Found or Incorrect Email"
223 this.snackbar= true; 223 this.snackbar= true;
224 this.loading = false; 224 this.loading = false;
225 }) 225 })
226 } 226 }
227 }, 227 },
228 computed:{ 228 computed:{
229 color(){ 229 color(){
230 return this.loading ? 'success' : 'error' 230 return this.loading ? 'success' : 'error'
231 } 231 }
232 } 232 }
233 233
234 }; 234 };
235 </script> 235 </script>
236 <style scoped lang="css"> 236 <style scoped lang="css">
237 .content { 237 .content {
238 padding: 100px 0px 100px 0px !important; 238 padding: 100px 0px 100px 0px !important;
239 } 239 }
240 #login { 240 #login {
241 height: 50%; 241 height: 50%;
242 width: 100%; 242 width: 100%;
243 position: absolute; 243 position: absolute;
244 top: 0; 244 top: 0;
245 left: 0; 245 left: 0;
246 content: ""; 246 content: "";
247 z-index: 0; 247 z-index: 0;
248 } 248 }
249 img{ 249 img{
250 position:absolute; 250 position:absolute;
251 top:13px; 251 top:13px;
252 left:50px; 252 left:8px;
253 } 253 }
254 .v-btn--large { 254 .v-btn--large {
255 padding: 0px 74px; 255 padding: 0px 74px;
256 } 256 }
257 .button{ 257 .button{
258 text-transform: none; 258 text-transform: none;
259 } 259 }
260 @media screen and (max-width: 472px) { 260 @media screen and (max-width: 472px) {
261 .v-btn--large { 261 .v-btn--large {
262 padding:0px 20px !important; 262 padding:0px 20px !important;
263 font-size:13px; 263 font-size:13px;
264 } 264 }
265 h5 { 265 h5 {
266 font-size: 11px; 266 font-size: 11px;
267 } 267 }
268 } 268 }
269 @media screen and (max-width: 600px) { 269 @media screen and (max-width: 600px) {
270 .theme--light .v-btn, .application .theme--light.v-btn {
271 color: white !important;
272 }
270 img{ 273 img{
271 top:16px; 274 top: 21px;
272 left:10px; 275 left: 10px;
273 height: 24px; 276 height: 24px;
274 width: 66px;; 277 width: 33px;
278 }
279 .logoSchool{
280 font-size: 18px;
281 margin-top: 20px !important;
282 }
283 .content {
284 padding: 0px 0px 0px 0px !important;
275 } 285 }
276 } 286 }
277 </style> 287 </style>
src/pages/Class/addclass.vue
Diff comments   View file @55f72b7
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <v-toolbar class="fixcolors" fixed app> 3 <v-toolbar class="fixcolors" fixed app>
4 <v-toolbar-title class="ml-0 pl-3"> 4 <v-toolbar-title class="ml-0 pl-3">
5 <v-toolbar-side-icon @click.stop="handleDrawerToggle" class="hide"></v-toolbar-side-icon> 5 <v-toolbar-side-icon @click.stop="handleDrawerToggle" class="hide"></v-toolbar-side-icon>
6 </v-toolbar-title> 6 </v-toolbar-title>
7 7
8 <!-- ****** SEARCH ALL EXISTING STUDENTS ****** --> 8 <!-- ****** SEARCH ALL EXISTING STUDENTS ****** -->
9 <v-flex xs7 sm3 class="userSearch"> 9 <v-flex xs7 sm3 class="userSearch">
10 <v-text-field 10 <v-text-field
11 flat 11 flat
12 append-icon="search" 12 append-icon="search"
13 label="Find your Class" 13 label="Find your Class"
14 v-model="search" 14 v-model="search"
15 color="white" 15 color="white"
16 dark 16 dark
17 ></v-text-field> 17 ></v-text-field>
18 </v-flex> 18 </v-flex>
19 <v-spacer></v-spacer> 19 <v-spacer></v-spacer>
20 <v-menu offset-y origin="center center" :nudge-bottom="10" transition="scale-transition"> 20 <v-menu offset-y origin="center center" :nudge-bottom="10" transition="scale-transition">
21 <v-btn icon large flat slot="activator"> 21 <v-btn icon large flat slot="activator">
22 <v-avatar size="40px"> 22 <v-avatar size="40px">
23 <img src="/static/icon/user.png"> 23 <img src="/static/icon/user.png">
24 </v-avatar> 24 </v-avatar>
25 </v-btn> 25 </v-btn>
26 <v-list class="pa-0"> 26 <v-list class="pa-0">
27 <v-list-tile 27 <v-list-tile
28 v-for="(item,index) in items" 28 v-for="(item,index) in items"
29 :to="!item.href ? { name: item.name } : null" 29 :to="!item.href ? { name: item.name } : null"
30 :href="item.href" 30 :href="item.href"
31 @click="item.click" 31 @click="item.click"
32 ripple="ripple" 32 ripple="ripple"
33 :disabled="item.disabled" 33 :disabled="item.disabled"
34 :target="item.target" 34 :target="item.target"
35 rel="noopener" 35 rel="noopener"
36 :key="index" 36 :key="index"
37 > 37 >
38 <v-list-tile-action v-if="item.icon"> 38 <v-list-tile-action v-if="item.icon">
39 <v-icon>{{ item.icon }}</v-icon> 39 <v-icon>{{ item.icon }}</v-icon>
40 </v-list-tile-action> 40 </v-list-tile-action>
41 <v-list-tile-content> 41 <v-list-tile-content>
42 <v-list-tile-title>{{ item.title }}</v-list-tile-title> 42 <v-list-tile-title>{{ item.title }}</v-list-tile-title>
43 </v-list-tile-content> 43 </v-list-tile-content>
44 </v-list-tile> 44 </v-list-tile>
45 </v-list> 45 </v-list>
46 </v-menu> 46 </v-menu>
47 </v-toolbar> 47 </v-toolbar>
48 <v-tabs grow slider-color="black"> 48 <v-tabs grow slider-color="black">
49 <v-tab 49 <v-tab
50 ripple 50 ripple
51 @click="activeTab('existing')" 51 @click="activeTab('existing')"
52 v-bind:class="{ active: isActive }" 52 v-bind:class="{ active: isActive }"
53 id="tab" 53 id="tab"
54 class="subheading" 54 class="subheading"
55 >Existing Class</v-tab> 55 >Existing Class</v-tab>
56 <v-tab 56 <v-tab
57 ripple 57 ripple
58 @click="activeTab('new')" 58 @click="activeTab('new')"
59 v-bind:class="{ active: newActive }" 59 v-bind:class="{ active: newActive }"
60 id="tab1" 60 id="tab1"
61 User 61 User
62 class="subheading" 62 class="subheading"
63 >Add New Class</v-tab> 63 >Add New Class</v-tab>
64 64
65 <!-- ****** EDITS ADD ClASS ****** --> 65 <!-- ****** EDITS ADD ClASS ****** -->
66 <v-tab-item> 66 <v-tab-item>
67 <v-snackbar 67 <v-snackbar
68 :timeout="timeout" 68 :timeout="timeout"
69 :top="y === 'top'" 69 :top="y === 'top'"
70 :right="x === 'right'" 70 :right="x === 'right'"
71 :vertical="mode === 'vertical'" 71 :vertical="mode === 'vertical'"
72 v-model="snackbar" 72 v-model="snackbar"
73 color="success" 73 color="success"
74 >{{ text }}</v-snackbar> 74 >{{ text }}</v-snackbar>
75 <v-dialog v-model="dialog" max-width="500px"> 75 <v-dialog v-model="dialog" max-width="500px">
76 <v-toolbar color="white"> 76 <v-toolbar color="white">
77 <v-spacer></v-spacer> 77 <v-spacer></v-spacer>
78 <v-toolbar-title>Edit Profile</v-toolbar-title> 78 <v-toolbar-title>Edit Profile</v-toolbar-title>
79 <v-spacer></v-spacer> 79 <v-spacer></v-spacer>
80 </v-toolbar> 80 </v-toolbar>
81 <v-card> 81 <v-card>
82 <v-card-text> 82 <v-card-text>
83 <v-container> 83 <v-container>
84 <v-layout wrap justify-center> 84 <v-layout wrap justify-center>
85 <v-flex xs12 sm9> 85 <v-flex xs12 sm9>
86 <v-form ref="form" v-model="valid" lazy-validation> 86 <v-form ref="form" v-model="valid" lazy-validation>
87 <v-layout style="position:relative;"> 87 <v-layout style="position:relative;">
88 <v-flex xs4 class="pt-4 subheading"> 88 <v-flex xs4 class="pt-4 subheading">
89 <label>Class Name:</label> 89 <label>Class Name:</label>
90 </v-flex> 90 </v-flex>
91 <v-flex xs8> 91 <v-flex xs8>
92 <v-text-field 92 <v-text-field
93 v-model="editedItem.classNum" 93 v-model="editedItem.classNum"
94 v-validate="'required'" 94 v-validate="'required'"
95 :rules="nameRules" 95 :rules="nameRules"
96 data-vv-name="Name" 96 data-vv-name="Name"
97 required 97 required
98 ></v-text-field> 98 ></v-text-field>
99 </v-flex> 99 </v-flex>
100 </v-layout> 100 </v-layout>
101 <v-card-actions> 101 <v-card-actions>
102 <v-btn round dark @click.native="close">Cancel</v-btn> 102 <v-btn round dark @click.native="close">Cancel</v-btn>
103 <v-spacer></v-spacer> 103 <v-spacer></v-spacer>
104 <v-btn round dark @click="save">Save</v-btn> 104 <v-btn round dark @click="save">Save</v-btn>
105 </v-card-actions> 105 </v-card-actions>
106 </v-form> 106 </v-form>
107 </v-flex> 107 </v-flex>
108 </v-layout> 108 </v-layout>
109 </v-container> 109 </v-container>
110 </v-card-text> 110 </v-card-text>
111 </v-card> 111 </v-card>
112 </v-dialog> 112 </v-dialog>
113 113
114 <!-- ****** PROFILE VIEW STUDENTS ****** --> 114 <!-- ****** PROFILE VIEW STUDENTS ****** -->
115 <v-dialog v-model="dialog1" max-width="600px"> 115 <v-dialog v-model="dialog1" max-width="600px">
116 <v-toolbar color="white"> 116 <v-toolbar color="white">
117 <v-spacer></v-spacer> 117 <v-spacer></v-spacer>
118 <v-toolbar-title>Profile</v-toolbar-title> 118 <v-toolbar-title>Profile</v-toolbar-title>
119 <v-spacer></v-spacer> 119 <v-spacer></v-spacer>
120 <v-icon @click="close1">close</v-icon> 120 <v-icon @click="close1">close</v-icon>
121 </v-toolbar> 121 </v-toolbar>
122 <v-card> 122 <v-card>
123 <v-flex align-center justify-center layout text-xs-center> 123 <v-flex align-center justify-center layout text-xs-center>
124 <v-avatar size="50px" style="position:absolute; top:20px;"> 124 <v-avatar size="50px" style="position:absolute; top:20px;">
125 <img src="/static/icon/user.png"> 125 <img src="/static/icon/user.png">
126 </v-avatar> 126 </v-avatar>
127 </v-flex> 127 </v-flex>
128 <v-card-text> 128 <v-card-text>
129 <v-container grid-list-md> 129 <v-container grid-list-md>
130 <v-layout wrap> 130 <v-layout wrap>
131 <v-flex> 131 <v-flex>
132 <br> 132 <br>
133 <br> 133 <br>
134 <v-layout> 134 <v-layout>
135 <v-flex xs5 sm6> 135 <v-flex xs5 sm6>
136 <h5 class="right my-1">Class Name:</h5> 136 <h5 class="right my-1">Class Name:</h5>
137 </v-flex> 137 </v-flex>
138 <v-flex sm6 xs8> 138 <v-flex sm6 xs8>
139 <h5 class="my-1">{{ editedItem.classNum }}</h5> 139 <h5 class="my-1">{{ editedItem.classNum }}</h5>
140 </v-flex> 140 </v-flex>
141 </v-layout> 141 </v-layout>
142 </v-flex> 142 </v-flex>
143 </v-layout> 143 </v-layout>
144 </v-container> 144 </v-container>
145 </v-card-text> 145 </v-card-text>
146 </v-card> 146 </v-card>
147 </v-dialog> 147 </v-dialog>
148 148
149 <v-snackbar 149 <v-snackbar
150 :timeout="timeout" 150 :timeout="timeout"
151 :top="y === 'top'" 151 :top="y === 'top'"
152 :right="x === 'right'" 152 :right="x === 'right'"
153 :vertical="mode === 'vertical'" 153 :vertical="mode === 'vertical'"
154 v-model="snackbar" 154 v-model="snackbar"
155 color="success" 155 color="success"
156 >{{ text }}</v-snackbar> 156 >{{ text }}</v-snackbar>
157 157
158 <!-- ****** EXISTING-USERS Classess Table ****** --> 158 <!-- ****** EXISTING-USERS Classess Table ****** -->
159 <v-data-table 159 <v-data-table
160 :headers="headers" 160 :headers="headers"
161 :items="desserts" 161 :items="desserts"
162 :pagination.sync="pagination" 162 :pagination.sync="pagination"
163 :search="search" 163 :search="search"
164 > 164 >
165 <template slot="items" slot-scope="props"> 165 <template slot="items" slot-scope="props">
166 <td id="td" class="text-xs-center">{{ props.index}}</td> 166 <td id="td" class="text-xs-center">{{ props.index}}</td>
167 <td id="td" class="text-xs-center">{{ props.item.classNum}}</td> 167 <td id="td" class="text-xs-center">{{ props.item.classNum}}</td>
168 <td class="text-xs-center"> 168 <td class="text-xs-center">
169 <span> 169 <span>
170 <img 170 <img
171 style="cursor:pointer; width:25px; height:18px; " 171 style="cursor:pointer; width:25px; height:18px; "
172 class="mr-5" 172 class="mr-5"
173 @click="profile(props.item)" 173 @click="profile(props.item)"
174 src="/static/icon/eye1.png" 174 src="/static/icon/eye1.png"
175 > 175 >
176 <img 176 <img
177 style="cursor:pointer; width:20px; height:18px; " 177 style="cursor:pointer; width:20px; height:18px; "
178 class="mr-5" 178 class="mr-5"
179 @click="editItem(props.item)" 179 @click="editItem(props.item)"
180 src="/static/icon/edit1.png" 180 src="/static/icon/edit1.png"
181 > 181 >
182 <img 182 <img
183 style="cursor:pointer; height:20px; " 183 style="cursor:pointer; height:20px; "
184 class="mr-5" 184 class="mr-5"
185 @click="deleteItem(props.item)" 185 @click="deleteItem(props.item)"
186 src="/static/icon/delete1.png" 186 src="/static/icon/delete1.png"
187 > 187 >
188 </span> 188 </span>
189 </td> 189 </td>
190 </template> 190 </template>
191 <v-alert 191 <v-alert
192 slot="no-results" 192 slot="no-results"
193 :value="true" 193 :value="true"
194 color="error" 194 color="error"
195 icon="warning" 195 icon="warning"
196 >Your search for "{{ search }}" found no results.</v-alert> 196 >Your search for "{{ search }}" found no results.</v-alert>
197 </v-data-table> 197 </v-data-table>
198 </v-tab-item> 198 </v-tab-item>
199 199
200 <!-- ****** ADD multiple Classess ****** --> 200 <!-- ****** ADD multiple Classess ****** -->
201 <v-tab-item> 201 <v-tab-item>
202 <v-container> 202 <v-container>
203 <v-snackbar 203 <v-snackbar
204 :timeout="timeout" 204 :timeout="timeout"
205 :top="y === 'top'" 205 :top="y === 'top'"
206 :right="x === 'right'" 206 :right="x === 'right'"
207 :vertical="mode === 'vertical'" 207 :vertical="mode === 'vertical'"
208 v-model="snackbar" 208 v-model="snackbar"
209 color="success" 209 color="success"
210 >{{ text }}</v-snackbar> 210 >{{ text }}</v-snackbar>
211 <v-flex xs12 sm8 offset-sm2 class="top"> 211 <v-flex xs12 sm8 offset-sm2 class="top">
212 <v-card flat> 212 <v-card flat>
213 <v-container fluid fill-height> 213 <v-container fluid fill-height>
214 <v-layout align-center> 214 <v-layout align-center>
215 <v-flex xs12> 215 <v-flex xs12>
216 <v-flex offset-xs5> 216 <v-flex offset-xs5>
217 <v-avatar size="55px"> 217 <v-avatar size="55px">
218 <img src="/static/icon/user.png"> 218 <img src="/static/icon/user.png">
219 </v-avatar> 219 </v-avatar>
220 </v-flex> 220 </v-flex>
221 <v-form ref="form" v-model="valid" lazy-validation> 221 <v-form ref="form" v-model="valid" lazy-validation>
222 <v-layout> 222 <v-layout>
223 <v-flex xs4 class="pt-4 subheading"> 223 <v-flex xs4 class="pt-4 subheading">
224 <label class="right">Class Name:</label> 224 <label class="right">Class Name:</label>
225 </v-flex> 225 </v-flex>
226 <v-flex xs6 class="ml-3"> 226 <v-flex xs6 class="ml-3">
227 <v-text-field 227 <v-text-field
228 v-model="addclasses.classNum" 228 v-model="addclasses.classNum"
229 placeholder="fill your class Name" 229 placeholder="fill your class Name"
230 name="name" 230 name="name"
231 type="text" 231 type="text"
232 :rules="nameRules" 232 :rules="nameRules"
233 required 233 required
234 ></v-text-field> 234 ></v-text-field>
235 </v-flex> 235 </v-flex>
236 </v-layout> 236 </v-layout>
237 <v-layout> 237 <v-layout>
238 <v-flex xs12 sm9 offset-sm2> 238 <v-flex xs12 sm9 offset-sm2>
239 <v-card-actions> 239 <v-card-actions>
240 <v-btn @click="clear" round dark>clear</v-btn> 240 <v-btn @click="clear" round dark>clear</v-btn>
241 <v-spacer></v-spacer> 241 <v-spacer></v-spacer>
242 <v-btn @click="submit" round dark :loading="loading">Add</v-btn> 242 <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
243 </v-card-actions> 243 </v-card-actions>
244 </v-flex> 244 </v-flex>
245 </v-layout> 245 </v-layout>
246 </v-form> 246 </v-form>
247 </v-flex> 247 </v-flex>
248 </v-layout> 248 </v-layout>
249 </v-container> 249 </v-container>
250 </v-card> 250 </v-card>
251 </v-flex> 251 </v-flex>
252 </v-container> 252 </v-container>
253 </v-tab-item> 253 </v-tab-item>
254 </v-tabs> 254 </v-tabs>
255 <div class="loader" v-if="showLoader"> 255 <div class="loader" v-if="showLoader">
256 <v-progress-circular indeterminate color="white"></v-progress-circular> 256 <v-progress-circular indeterminate color="white"></v-progress-circular>
257 </div> 257 </div>
258 </v-app> 258 </v-app>
259 </template> 259 </template>
260 260
261 <script> 261 <script>
262 import http from "@/Services/http.js"; 262 import http from "@/Services/http.js";
263 import Util from "@/util"; 263 import Util from "@/util";
264 264
265 export default { 265 export default {
266 data: () => ({ 266 data: () => ({
267 snackbar: false, 267 snackbar: false,
268 y: "top", 268 y: "top",
269 x: "right", 269 x: "right",
270 mode: "", 270 mode: "",
271 timeout: 3000, 271 timeout: 3000,
272 text: "", 272 text: "",
273 showLoader:false, 273 showLoader:false,
274 loading: false, 274 loading: false,
275 date: null, 275 date: null,
276 search: "", 276 search: "",
277 menu: false,
278 menu1: false,
279 dialog: false, 277 dialog: false,
280 dialog1: false, 278 dialog1: false,
281 valid: true, 279 valid: true,
282 isActive: true, 280 isActive: true,
283 newActive: false, 281 newActive: false,
284 AddUsercredentials: {}, 282 AddUsercredentials: {},
285 pagination: { 283 pagination: {
286 rowsPerPage: 15 284 rowsPerPage: 15
287 }, 285 },
288 nameRules: [v => !!v || " Full Name is required"], 286 nameRules: [v => !!v || " Full Name is required"],
289 headers: [ 287 headers: [
290 { 288 {
291 text: "No", 289 text: "No",
292 align: "center", 290 align: "center",
293 sortable: false, 291 sortable: false,
294 value: "No" 292 value: "No"
295 }, 293 },
296 { text: "Class Name", value: "name", sortable: false, align: "center" }, 294 { text: "Class Name", value: "classNum", sortable: false, align: "center" },
297 { text: "Action", value: "", sortable: false, align: "center" } 295 { text: "Action", value: "", sortable: false, align: "center" }
298 ], 296 ],
299 desserts: [], 297 desserts: [],
300 editedIndex: -1, 298 editedIndex: -1,
301 editedItem: { 299 editedItem: {
302 classNum: "" 300 classNum: ""
303 }, 301 },
304 addclasses:{ 302 addclasses:{
305 classNum: "" 303 classNum: ""
306 }, 304 },
307 defaultItem: { 305 defaultItem: {
308 classNum: "" 306 classNum: ""
309 }, 307 },
310 items: [ 308 items: [
311 { 309 {
312 href: "/changepassword", 310 href: "/changepassword",
313 title: "Change Password", 311 title: "Change Password",
314 click: e => { 312 click: e => {
315 console.log(e); 313 console.log(e);
316 } 314 }
317 }, 315 },
318 { 316 {
319 href: "#", 317 href: "#",
320 title: "Logout", 318 title: "Logout",
321 click: e => { 319 click: e => {
322 window.getApp.$emit("APP_LOGOUT"); 320 window.getApp.$emit("APP_LOGOUT");
323 } 321 }
324 } 322 }
325 ] 323 ]
326 }), 324 }),
327 watch: {
328 menu(val) {
329 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
330 },
331 menu1(val) {
332 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
333 }
334 },
335 methods: { 325 methods: {
336 getClassList() { 326 getClassList() {
337 this.showLoader = true; 327 this.showLoader = true;
338 var token = this.$store.state.token; 328 var token = this.$store.state.token;
339 http() 329 http()
340 .get("/getClassesList", { 330 .get("/getClassesList", {
341 headers: { Authorization: "Bearer " + token } 331 headers: { Authorization: "Bearer " + token }
342 }) 332 })
343 .then(response => { 333 .then(response => {
344 this.desserts = response.data.data; 334 this.desserts = response.data.data;
345 this.showLoader = false; 335 this.showLoader = false;
346 // console.log("getClassList=====>", this.desserts); 336 // console.log("getClassList=====>", this.desserts);
347 }) 337 })
348 .catch(err => { 338 .catch(err => {
349 // console.log("err====>", err); 339 // console.log("err====>", err);
350 this.showLoader = false; 340 this.showLoader = false;
351 this.$router.replace({ path: "/" }); 341 this.$router.replace({ path: "/" });
352 }); 342 });
353 }, 343 },
354 editItem(item) { 344 editItem(item) {
355 this.editedIndex = this.desserts.indexOf(item); 345 this.editedIndex = this.desserts.indexOf(item);
356 this.editedItem = Object.assign({}, item); 346 this.editedItem = Object.assign({}, item);
357 this.dialog = true; 347 this.dialog = true;
358 }, 348 },
359 profile(item) { 349 profile(item) {
360 this.editedIndex = this.desserts.indexOf(item); 350 this.editedIndex = this.desserts.indexOf(item);
361 this.editedItem = Object.assign({}, item); 351 this.editedItem = Object.assign({}, item);
362 this.dialog1 = true; 352 this.dialog1 = true;
363 }, 353 },
364 deleteItem(item) { 354 deleteItem(item) {
365 let deleteStudent = { 355 let deleteStudent = {
366 classId: item._id 356 classId: item._id
367 }; 357 };
368 http() 358 http()
369 .delete( 359 .delete(
370 "/deleteClass", 360 "/deleteClass",
371 confirm("Are you sure you want to delete this?") && { 361 confirm("Are you sure you want to delete this?") && {
372 params: deleteStudent 362 params: deleteStudent
373 } 363 }
374 ) 364 )
375 .then(response => { 365 .then(response => {
376 // console.log("deleteUers",deleteStudent) 366 // console.log("deleteUers",deleteStudent)
377 if ((this.snackbar = true)) { 367 if ((this.snackbar = true)) {
378 this.text = "Successfully delete Existing User"; 368 this.text = "Successfully delete Existing User";
379 } 369 }
380 this.getClassList(); 370 this.getClassList();
381 }) 371 })
382 .catch(error => { 372 .catch(error => {
383 // console.log(error); 373 // console.log(error);
384 }); 374 });
385 }, 375 },
386 activeTab(type) { 376 activeTab(type) {
387 switch (type) { 377 switch (type) {
388 case "existing": 378 case "existing":
389 this.newActive = false; 379 this.newActive = false;
390 this.isActive = true; 380 this.isActive = true;
391 break; 381 break;
392 382
393 default: 383 default:
394 this.newActive = true; 384 this.newActive = true;
395 this.isActive = false; 385 this.isActive = false;
396 break; 386 break;
397 } 387 }
398 }, 388 },
399 close() { 389 close() {
400 this.dialog = false; 390 this.dialog = false;
401 setTimeout(() => { 391 setTimeout(() => {
402 this.editedItem = Object.assign({}, this.defaultItem); 392 this.editedItem = Object.assign({}, this.defaultItem);
403 this.editedIndex = -1; 393 this.editedIndex = -1;
404 }, 300); 394 }, 300);
405 }, 395 },
406 close1() { 396 close1() {
407 this.dialog1 = false; 397 this.dialog1 = false;
408 }, 398 },
409 submit() { 399 submit() {
410 if (this.$refs.form.validate()) { 400 if (this.$refs.form.validate()) {
411 let addClass = { 401 let addClass = {
412 classNum: this.addclasses.classNum 402 classNum: this.addclasses.classNum
413 }; 403 };
414 console.log(addClass); 404 console.log(addClass);
415 http() 405 http()
416 .post("/createClass", addClass) 406 .post("/createClass", addClass)
417 .then(response => { 407 .then(response => {
418 this.getClassList(); 408 this.getClassList();
419 if ((this.snackbar = true)) { 409 if ((this.snackbar = true)) {
420 this.text = "New user added successfully"; 410 this.text = "New user added successfully";
421 } 411 }
422 412
423 this.clear(); 413 this.clear();
424 }) 414 })
425 .catch(error => { 415 .catch(error => {
426 // console.log(error); 416 // console.log(error);
427 if ((this.snackbar = true)) { 417 if ((this.snackbar = true)) {
428 this.text = error.response.data.message; 418 this.text = error.response.data.message;
429 } 419 }
430 }); 420 });
431 } 421 }
432 }, 422 },
433 mail() {}, 423 mail() {},
434 download() {}, 424 download() {},
435 clear() { 425 clear() {
436 this.$refs.form.reset(); 426 this.$refs.form.reset();
437 }, 427 },
438 save() { 428 save() {
439 let editClass = { 429 let editClass = {
440 classId: this.editedItem._id, 430 classId: this.editedItem._id,
441 classNum: this.editedItem.classNum 431 classNum: this.editedItem.classNum
442 }; 432 };
443 http() 433 http()
444 .put("/updateClass", editClass) 434 .put("/updateClass", editClass)
445 .then(response => { 435 .then(response => {
446 console.log("editClass", editClass); 436 console.log("editClass", editClass);
447 if ((this.snackbar = true)) { 437 if ((this.snackbar = true)) {
448 this.text = "Successfully Edit Existing User"; 438 this.text = "Successfully Edit Existing User";
449 } 439 }
450 this.getClassList(); 440 this.getClassList();
451 }) 441 })
452 .catch(error => { 442 .catch(error => {
453 // console.log(error); 443 // console.log(error);
454 }); 444 });
455 this.close(); 445 this.close();
456 }, 446 },
457 handleDrawerToggle() { 447 handleDrawerToggle() {
458 window.getApp.$emit("APP_DRAWER_TOGGLED"); 448 window.getApp.$emit("APP_DRAWER_TOGGLED");
459 }, 449 },
460 handleFullScreen() { 450 handleFullScreen() {
461 Util.toggleFullScreen(); 451 Util.toggleFullScreen();
462 } 452 }
463 }, 453 },
464 mounted() { 454 mounted() {
465 this.getClassList(); 455 this.getClassList();
466 // console.log("Id",this.$store.state.id) 456 // console.log("Id",this.$store.state.id)
467 // console.log("token",this.$store.state.token) 457 // console.log("token",this.$store.state.token)
468 }, 458 },
469 computed: { 459 computed: {
470 toolbarColor() { 460 toolbarColor() {
471 return this.$vuetify.options.extra.mainNav; 461 return this.$vuetify.options.extra.mainNav;
472 } 462 }
473 } 463 }
474 }; 464 };
475 </script> 465 </script>
476 <style scoped> 466 <style scoped>
477 .v-tabs__div { 467 .v-tabs__div {
478 text-transform: none; 468 text-transform: none;
479 } 469 }
480 .v-input__prepend-outer { 470 .v-input__prepend-outer {
481 margin-right: 0px !important; 471 margin-right: 0px !important;
482 } 472 }
483 .v-card__actions .v-btn { 473 .v-card__actions .v-btn {
484 margin: 0 15px; 474 margin: 0 15px;
485 min-width: 120px; 475 min-width: 120px;
486 } 476 }
487 .primary { 477 .primary {
488 background-color: #aaa !important; 478 background-color: #aaa !important;
489 border-color: #aaa !important; 479 border-color: #aaa !important;
490 } 480 }
491 h4 { 481 h4 {
492 background-repeat: no-repeat; 482 background-repeat: no-repeat;
493 padding: 8px; 483 padding: 8px;
494 margin: auto; 484 margin: auto;
495 font-size: 25px; 485 font-size: 25px;
496 } 486 }
497 #name { 487 #name {
498 position: absolute; 488 position: absolute;
499 left: 100px; 489 left: 100px;
500 top: 17px; 490 top: 17px;
501 } 491 }
502 #icon { 492 #icon {
503 position: absolute; 493 position: absolute;
504 right: 8px; 494 right: 8px;
505 top: 8px; 495 top: 8px;
506 } 496 }
507 #m { 497 #m {
508 position: relative; 498 position: relative;
509 left: 135px; 499 left: 135px;
510 top: -15px; 500 top: -15px;
511 } 501 }
512 #G { 502 #G {
513 position: absolute; 503 position: absolute;
514 top: 38px; 504 top: 38px;
515 color: white; 505 color: white;
516 } 506 }
517 #bt { 507 #bt {
518 position: relative; 508 position: relative;
519 top: -20px; 509 top: -20px;
520 left: 115px; 510 left: 115px;
521 } 511 }
522 #e { 512 #e {
523 position: relative; 513 position: relative;
524 top: 5px; 514 top: 5px;
525 right: -30px; 515 right: -30px;
526 height: 17px; 516 height: 17px;
527 cursor: pointer; 517 cursor: pointer;
528 } 518 }
529 #d { 519 #d {
530 position: relative; 520 position: relative;
531 top: 5px; 521 top: 5px;
532 right: -70px; 522 right: -70px;
533 height: 17px; 523 height: 17px;
534 cursor: pointer; 524 cursor: pointer;
535 } 525 }
536 #td { 526 #td {
537 border: 1px solid #dddddd; 527 border: 1px solid #dddddd;
538 text-align: left; 528 text-align: left;
539 padding: 8px; 529 padding: 8px;
540 } 530 }
541 #dialog { 531 #dialog {
542 height: 550px; 532 height: 550px;
543 } 533 }
544 .active { 534 .active {
545 background-color: black; 535 background-color: black;
546 color: white !important; 536 color: white !important;
547 } 537 }
548 .activebtn { 538 .activebtn {
549 color: black !important; 539 color: black !important;
550 } 540 }
551 #flex { 541 #flex {
552 height: 300px; 542 height: 300px;
553 } 543 }
554 .top { 544 .top {
555 margin-top: 100px; 545 margin-top: 100px;
556 } 546 }
557 .v-tabs__item a { 547 .v-tabs__item a {
558 font-size: 16px !important; 548 font-size: 16px !important;
559 } 549 }
560 @media screen and (max-width: 769px) { 550 @media screen and (max-width: 769px) {
561 .top { 551 .top {
562 margin-top: 0 !important; 552 margin-top: 0 !important;
563 } 553 }
564 .userSearch .v-icon { 554 .userSearch .v-icon {
565 font-size: 20px !important; 555 font-size: 20px !important;
566 margin-left: 20px; 556 margin-left: 20px;
567 } 557 }
568 } 558 }
569 @media screen and (max-width: 380px) { 559 @media screen and (max-width: 380px) {
570 .right { 560 .right {
571 float: none !important; 561 float: none !important;
572 } 562 }
573 .subheading { 563 .subheading {
574 font-size: 14px !important; 564 font-size: 14px !important;
575 } 565 }
576 .v-card__actions .v-btn { 566 .v-card__actions .v-btn {
577 margin: 0 0px; 567 margin: 0 0px;
578 min-width: 100px; 568 min-width: 100px;
579 } 569 }
580 .subheading { 570 .subheading {
581 font-size: 12px !important; 571 font-size: 12px !important;
582 } 572 }
583 h5 { 573 h5 {
584 font-size: 13px; 574 font-size: 13px;
585 } 575 }
586 } 576 }
587 .v-icon { 577 .v-icon {
588 font-size: 30px; 578 font-size: 30px;
589 } 579 }
590 @media screen and (min-width: 1270px) { 580 @media screen and (min-width: 1270px) {
591 .hide { 581 .hide {
592 display: none; 582 display: none;
593 } 583 }
594 } 584 }
595 @media screen and (max-width: 420px) { 585 @media screen and (max-width: 420px) {
596 .userSearch .v-text-field .v-label { 586 .userSearch .v-text-field .v-label {
597 line-height: 24px !important; 587 line-height: 24px !important;
598 } 588 }
599 .userSearch .v-label { 589 .userSearch .v-label {
600 font-size: 13px !important; 590 font-size: 13px !important;
601 } 591 }
602 .v-list__tile { 592 .v-list__tile {
603 font-size: 14px; 593 font-size: 14px;
604 padding: 0 10px; 594 padding: 0 10px;
605 } 595 }
606 .name { 596 .name {
607 font-size: 15px; 597 font-size: 15px;
608 } 598 }
609 } 599 }
610 </style> 600 </style>
src/pages/Event/event.vue
Diff comments   View file @55f72b7
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <v-toolbar class="fixcolors" fixed app> 3 <v-toolbar class="fixcolors" fixed app>
4 <v-toolbar-title class="ml-0 pl-3"> 4 <v-toolbar-title class="ml-0 pl-3">
5 <v-toolbar-side-icon @click.stop="handleDrawerToggle" class="hide"></v-toolbar-side-icon> 5 <v-toolbar-side-icon @click.stop="handleDrawerToggle" class="hide"></v-toolbar-side-icon>
6 </v-toolbar-title> 6 </v-toolbar-title>
7 <!-- ****** SEARCH ALL EXISTING EVENTS ****** --> 7 <!-- ****** SEARCH ALL EXISTING EVENTS ****** -->
8 <v-flex xs7 sm3 class="userSearch"> 8 <v-flex xs7 sm3 class="userSearch">
9 <v-text-field 9 <v-text-field
10 flat 10 flat
11 append-icon="search" 11 append-icon="search"
12 label="Find your Teachers" 12 label="Find your Events"
13 v-model="search" 13 v-model="search"
14 color="white" 14 color="white"
15 dark 15 dark
16 ></v-text-field> 16 ></v-text-field>
17 </v-flex> 17 </v-flex>
18 <v-spacer></v-spacer> 18 <v-spacer></v-spacer>
19 <v-menu offset-y origin="center center" :nudge-bottom="10" transition="scale-transition"> 19 <v-menu offset-y origin="center center" :nudge-bottom="10" transition="scale-transition">
20 <v-btn icon large flat slot="activator"> 20 <v-btn icon large flat slot="activator">
21 <v-avatar size="40px"> 21 <v-avatar size="40px">
22 <img src="/static/icon/user.png"> 22 <img src="/static/icon/user.png">
23 </v-avatar> 23 </v-avatar>
24 </v-btn> 24 </v-btn>
25 <v-list class="pa-0"> 25 <v-list class="pa-0">
26 <v-list-tile 26 <v-list-tile
27 v-for="(item,index) in items" 27 v-for="(item,index) in items"
28 :to="!item.href ? { name: item.name } : null" 28 :to="!item.href ? { name: item.name } : null"
29 :href="item.href" 29 :href="item.href"
30 @click="item.click" 30 @click="item.click"
31 ripple="ripple" 31 ripple="ripple"
32 :disabled="item.disabled" 32 :disabled="item.disabled"
33 :target="item.target" 33 :target="item.target"
34 rel="noopener" 34 rel="noopener"
35 :key="index" 35 :key="index"
36 > 36 >
37 <v-list-tile-action v-if="item.icon"> 37 <v-list-tile-action v-if="item.icon">
38 <v-icon>{{ item.icon }}</v-icon> 38 <v-icon>{{ item.icon }}</v-icon>
39 </v-list-tile-action> 39 </v-list-tile-action>
40 <v-list-tile-content> 40 <v-list-tile-content>
41 <v-list-tile-title>{{ item.title }}</v-list-tile-title> 41 <v-list-tile-title>{{ item.title }}</v-list-tile-title>
42 </v-list-tile-content> 42 </v-list-tile-content>
43 </v-list-tile> 43 </v-list-tile>
44 </v-list> 44 </v-list>
45 </v-menu> 45 </v-menu>
46 </v-toolbar> 46 </v-toolbar>
47 <v-tabs grow slider-color="black"> 47 <v-tabs grow slider-color="black">
48 <v-tab 48 <v-tab
49 ripple 49 ripple
50 @click="activeTab('existing')" 50 @click="activeTab('existing')"
51 v-bind:class="{ active: isActive }" 51 v-bind:class="{ active: isActive }"
52 id="tab" 52 id="tab"
53 class="subheading" 53 class="subheading"
54 >Existing Event</v-tab> 54 >Existing Event</v-tab>
55 <v-tab 55 <v-tab
56 ripple 56 ripple
57 @click="activeTab('new')" 57 @click="activeTab('new')"
58 v-bind:class="{ active: newActive }" 58 v-bind:class="{ active: newActive }"
59 id="tab1" 59 id="tab1"
60 User 60 User
61 class="subheading" 61 class="subheading"
62 >Add New Event</v-tab> 62 >Add New Event</v-tab>
63 63
64 <!-- ****** EDITS EVENTS DETAILS ****** --> 64 <!-- ****** EDITS EVENTS DETAILS ****** -->
65 65
66 <v-tab-item> 66 <v-tab-item>
67 <v-snackbar 67 <v-snackbar
68 :timeout="timeout" 68 :timeout="timeout"
69 :top="y === 'top'" 69 :top="y === 'top'"
70 :right="x === 'right'" 70 :right="x === 'right'"
71 :vertical="mode === 'vertical'" 71 :vertical="mode === 'vertical'"
72 v-model="snackbar" 72 v-model="snackbar"
73 color="success" 73 color="success"
74 >{{ text }}</v-snackbar> 74 >{{ text }}</v-snackbar>
75 <v-dialog v-model="dialog" max-width="600px"> 75 <v-dialog v-model="dialog" max-width="600px">
76 <v-flex xs12 sm12 class> 76 <v-flex xs12 sm12 class>
77 <v-toolbar color="white"> 77 <v-toolbar color="white">
78 <v-spacer></v-spacer> 78 <v-spacer></v-spacer>
79 <v-toolbar-title>Edit Profile</v-toolbar-title> 79 <v-toolbar-title>Edit Profile</v-toolbar-title>
80 <v-spacer></v-spacer> 80 <v-spacer></v-spacer>
81 </v-toolbar> 81 </v-toolbar>
82 <v-card flat> 82 <v-card flat>
83 <v-form ref="form"> 83 <v-form ref="form">
84 <v-container fluid> 84 <v-container fluid>
85 <v-layout> 85 <v-layout>
86 <v-flex 86 <v-flex
87 xs12 87 xs12
88 class="text-xs-center text-sm-center text-md-center text-lg-center mr-4" 88 class="text-xs-center text-sm-center text-md-center text-lg-center mr-4"
89 > 89 >
90 <v-avatar size="100px"> 90 <v-avatar size="100px">
91 <img src="/static/icon/user.png" v-if="!imageUrl"> 91 <img src="/static/icon/user.png" v-if="!imageUrl">
92 </v-avatar> 92 </v-avatar>
93 <input 93 <input
94 type="file" 94 type="file"
95 style="display: none" 95 style="display: none"
96 ref="image" 96 ref="image"
97 accept="image/*" 97 accept="image/*"
98 @change="onFilePicked" 98 @change="onFilePicked"
99 > 99 >
100 <img 100 <img
101 :src="imageData.imageUrl" 101 :src="imageData.imageUrl"
102 height="150" 102 height="150"
103 v-if="imageUrl" 103 v-if="imageUrl"
104 style="border-radius:50%; width:200px" 104 style="border-radius:50%; width:200px"
105 > 105 >
106 </v-flex> 106 </v-flex>
107 </v-layout> 107 </v-layout>
108 <v-layout> 108 <v-layout>
109 <!-- <v-flex xs12 sm6> --> 109 <!-- <v-flex xs12 sm6> -->
110 <v-layout> 110 <v-layout>
111 <v-flex xs4 class="pt-4 subheading"> 111 <v-flex xs4 class="pt-4 subheading">
112 <label class="right">Title:</label> 112 <label class="right">Title:</label>
113 </v-flex> 113 </v-flex>
114 <v-flex xs6 class="ml-3"> 114 <v-flex xs6 class="ml-3">
115 <v-text-field 115 <v-text-field
116 v-model="editedItem.title" 116 v-model="editedItem.title"
117 placeholder="fill your Title" 117 placeholder="fill your Title"
118 name="name" 118 name="name"
119 type="text" 119 type="text"
120 required 120 required
121 ></v-text-field> 121 ></v-text-field>
122 </v-flex> 122 </v-flex>
123 </v-layout> 123 </v-layout>
124 <!-- </v-flex> --> 124 <!-- </v-flex> -->
125 <!-- <v-flex xs12 sm6> --> 125 <!-- <v-flex xs12 sm6> -->
126 <v-layout> 126 <v-layout>
127 <v-flex xs4 class="pt-4 subheading"> 127 <v-flex xs4 class="pt-4 subheading">
128 <label class="right">Description:</label> 128 <label class="right">Description:</label>
129 </v-flex> 129 </v-flex>
130 <v-flex xs6 class="ml-3"> 130 <v-flex xs6 class="ml-3">
131 <v-text-field 131 <v-text-field
132 placeholder="fill your Description" 132 placeholder="fill your Description"
133 v-model="editedItem.description" 133 v-model="editedItem.description"
134 type="text" 134 type="text"
135 name="email" 135 name="email"
136 required 136 required
137 ></v-text-field> 137 ></v-text-field>
138 </v-flex> 138 </v-flex>
139 </v-layout> 139 </v-layout>
140 </v-layout> 140 </v-layout>
141 <v-flex xs12 sm9 offset-sm2> 141 <v-flex xs12 sm9 offset-sm2>
142 <v-card-actions> 142 <v-card-actions>
143 <v-btn round dark @click.native="close">Cancel</v-btn> 143 <v-btn round dark @click.native="close">Cancel</v-btn>
144 <v-spacer></v-spacer> 144 <v-spacer></v-spacer>
145 <v-btn round dark @click="save">Save</v-btn> 145 <v-btn round dark @click="save">Save</v-btn>
146 </v-card-actions> 146 </v-card-actions>
147 </v-flex> 147 </v-flex>
148 </v-layout> 148 </v-layout>
149 </v-container> 149 </v-container>
150 </v-form> 150 </v-form>
151 </v-card> 151 </v-card>
152 </v-flex> 152 </v-flex>
153 </v-dialog> 153 </v-dialog>
154 154
155 <!-- ****** VIEW PROFIL EVENTS ****** --> 155 <!-- ****** VIEW PROFIL EVENTS ****** -->
156 156
157 <v-dialog v-model="dialog1" max-width="600px"> 157 <v-dialog v-model="dialog1" max-width="600px">
158 <v-toolbar color="white"> 158 <v-toolbar color="white">
159 <v-spacer></v-spacer> 159 <v-spacer></v-spacer>
160 <v-toolbar-title>Profile</v-toolbar-title> 160 <v-toolbar-title>Profile</v-toolbar-title>
161 <v-spacer></v-spacer> 161 <v-spacer></v-spacer>
162 <v-icon @click="close1">close</v-icon> 162 <v-icon @click="close1">close</v-icon>
163 </v-toolbar> 163 </v-toolbar>
164 <v-card> 164 <v-card>
165 <v-flex align-center justify-center layout text-xs-center> 165 <v-flex align-center justify-center layout text-xs-center>
166 <v-avatar size="50px" style="position:absolute; top:20px;"> 166 <v-avatar size="50px" style="position:absolute; top:20px;">
167 <img src="/static/icon/user.png"> 167 <img src="/static/icon/user.png">
168 </v-avatar> 168 </v-avatar>
169 </v-flex> 169 </v-flex>
170 <v-card-text> 170 <v-card-text>
171 <v-container grid-list-md> 171 <v-container grid-list-md>
172 <v-layout wrap> 172 <v-layout wrap>
173 <v-flex> 173 <v-flex>
174 <br> 174 <br>
175 <br> 175 <br>
176 <v-layout> 176 <v-layout>
177 <v-flex xs5 sm6> 177 <v-flex xs5 sm6>
178 <h5 class="right my-1">Title:</h5> 178 <h5 class="right my-1">Title:</h5>
179 </v-flex> 179 </v-flex>
180 <v-flex sm6 xs8> 180 <v-flex sm6 xs8>
181 <h5 class="my-1">{{ editedItem.title }}</h5> 181 <h5 class="my-1">{{ editedItem.title }}</h5>
182 </v-flex> 182 </v-flex>
183 </v-layout> 183 </v-layout>
184 <v-layout> 184 <v-layout>
185 <v-flex xs5 sm6> 185 <v-flex xs5 sm6>
186 <h5 class="right my-1">Description:</h5> 186 <h5 class="right my-1">Description:</h5>
187 </v-flex> 187 </v-flex>
188 <v-flex sm6 xs8> 188 <v-flex sm6 xs8>
189 <h5 class="my-1">{{ editedItem.description }}</h5> 189 <h5 class="my-1">{{ editedItem.description }}</h5>
190 </v-flex> 190 </v-flex>
191 </v-layout> 191 </v-layout>
192 </v-flex> 192 </v-flex>
193 </v-layout> 193 </v-layout>
194 </v-container> 194 </v-container>
195 </v-card-text> 195 </v-card-text>
196 </v-card> 196 </v-card>
197 </v-dialog> 197 </v-dialog>
198 198
199 <v-snackbar 199 <v-snackbar
200 :timeout="timeout" 200 :timeout="timeout"
201 :top="y === 'top'" 201 :top="y === 'top'"
202 :right="x === 'right'" 202 :right="x === 'right'"
203 :vertical="mode === 'vertical'" 203 :vertical="mode === 'vertical'"
204 v-model="snackbar" 204 v-model="snackbar"
205 color="success" 205 color="success"
206 >{{ text }}</v-snackbar> 206 >{{ text }}</v-snackbar>
207 207
208 <!-- ****** EXISTING-USERS EVENTS TABLE ****** --> 208 <!-- ****** EXISTING-USERS EVENTS TABLE ****** -->
209 <v-data-table 209 <v-data-table
210 :headers="headers" 210 :headers="headers"
211 :items="desserts" 211 :items="desserts"
212 :pagination.sync="pagination" 212 :pagination.sync="pagination"
213 :search="search" 213 :search="search"
214 > 214 >
215 <template slot="items" slot-scope="props"> 215 <template slot="items" slot-scope="props">
216 <td id="td" class="text-xs-center">{{ props.index}}</td> 216 <td id="td" class="text-xs-center">{{ props.index}}</td>
217 <td id="td" class="text-xs-center">{{ props.item.title}}</td> 217 <td id="td" class="text-xs-center">{{ props.item.title}}</td>
218 <td id="td" class="text-xs-center">{{ props.item.description}}</td> 218 <td id="td" class="text-xs-center">{{ props.item.description}}</td>
219 219
220 <td class="text-xs-center"> 220 <td class="text-xs-center">
221 <span> 221 <span>
222 <img 222 <img
223 style="cursor:pointer; width:25px; height:18px; " 223 style="cursor:pointer; width:25px; height:18px; "
224 class="mr-5" 224 class="mr-5"
225 @click="profile(props.item)" 225 @click="profile(props.item)"
226 src="/static/icon/eye1.png" 226 src="/static/icon/eye1.png"
227 > 227 >
228 <img 228 <img
229 style="cursor:pointer; width:20px; height:18px; " 229 style="cursor:pointer; width:20px; height:18px; "
230 class="mr-5" 230 class="mr-5"
231 @click="editItem(props.item)" 231 @click="editItem(props.item)"
232 src="/static/icon/edit1.png" 232 src="/static/icon/edit1.png"
233 > 233 >
234 <img 234 <img
235 style="cursor:pointer; height:20px; " 235 style="cursor:pointer; height:20px; "
236 class="mr-5" 236 class="mr-5"
237 @click="deleteItem(props.item)" 237 @click="deleteItem(props.item)"
238 src="/static/icon/delete1.png" 238 src="/static/icon/delete1.png"
239 > 239 >
240 </span> 240 </span>
241 </td> 241 </td>
242 </template> 242 </template>
243 <v-alert 243 <v-alert
244 slot="no-results" 244 slot="no-results"
245 :value="true" 245 :value="true"
246 color="error" 246 color="error"
247 icon="warning" 247 icon="warning"
248 >Your search for "{{ search }}" found no results.</v-alert> 248 >Your search for "{{ search }}" found no results.</v-alert>
249 </v-data-table> 249 </v-data-table>
250 </v-tab-item> 250 </v-tab-item>
251 251
252 <!-- ****** ADD MULTIPLE EVENTS ****** --> 252 <!-- ****** ADD MULTIPLE EVENTS ****** -->
253 253
254 <v-tab-item> 254 <v-tab-item>
255 <v-container> 255 <v-container>
256 <v-snackbar 256 <v-snackbar
257 :timeout="timeout" 257 :timeout="timeout"
258 :top="y === 'top'" 258 :top="y === 'top'"
259 :right="x === 'right'" 259 :right="x === 'right'"
260 :vertical="mode === 'vertical'" 260 :vertical="mode === 'vertical'"
261 v-model="snackbar" 261 v-model="snackbar"
262 color="success" 262 color="success"
263 >{{ text }}</v-snackbar> 263 >{{ text }}</v-snackbar>
264 <v-flex xs12 sm8 offset-sm2 class="top"> 264 <v-flex xs12 sm8 offset-sm2 class="top">
265 <v-card flat> 265 <v-card flat>
266 <v-container fluid fill-height> 266 <v-container fluid fill-height>
267 <v-layout align-center> 267 <v-layout align-center>
268 <v-flex xs12> 268 <v-flex xs12>
269 <v-form ref="form" v-model="valid" lazy-validation> 269 <v-form ref="form" v-model="valid" lazy-validation>
270 <v-layout> 270 <v-layout>
271 <v-flex 271 <v-flex
272 xs12 272 xs12
273 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4" 273 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4"
274 > 274 >
275 <v-avatar size="100px"> 275 <v-avatar size="100px">
276 <img src="/static/icon/user.png" v-if="!imageUrl"> 276 <img src="/static/icon/user.png" v-if="!imageUrl">
277 </v-avatar> 277 </v-avatar>
278 <input 278 <input
279 type="file" 279 type="file"
280 style="display: none" 280 style="display: none"
281 ref="image" 281 ref="image"
282 accept="image/*" 282 accept="image/*"
283 @change="onFilePicked" 283 @change="onFilePicked"
284 > 284 >
285 <img 285 <img
286 :src="imageData.imageUrl" 286 :src="imageData.imageUrl"
287 height="150" 287 height="150"
288 v-if="imageUrl" 288 v-if="imageUrl"
289 style="border-radius:50%; width:200px" 289 style="border-radius:50%; width:200px"
290 > 290 >
291 </v-flex> 291 </v-flex>
292 </v-layout> 292 </v-layout>
293 <v-layout> 293 <v-layout>
294 <v-flex xs4 class="pt-4 subheading"> 294 <v-flex xs4 class="pt-4 subheading">
295 <label class="right">Title:</label> 295 <label class="right">Title:</label>
296 </v-flex> 296 </v-flex>
297 <v-flex xs6 class="ml-3"> 297 <v-flex xs6 class="ml-3">
298 <v-text-field 298 <v-text-field
299 v-model="addEvents.title" 299 v-model="addEvents.title"
300 placeholder="fill your Title" 300 placeholder="fill your Title"
301 name="name" 301 name="name"
302 type="text" 302 type="text"
303 :rules="titleRules" 303 :rules="titleRules"
304 required 304 required
305 ></v-text-field> 305 ></v-text-field>
306 </v-flex> 306 </v-flex>
307 </v-layout> 307 </v-layout>
308 <v-layout> 308 <v-layout>
309 <v-flex xs4 class="pt-4 subheading"> 309 <v-flex xs4 class="pt-4 subheading">
310 <label class="right">Description:</label> 310 <label class="right">Description:</label>
311 </v-flex> 311 </v-flex>
312 <v-flex xs6 class="ml-3"> 312 <v-flex xs6 class="ml-3">
313 <v-text-field 313 <v-text-field
314 v-model="addEvents.description" 314 v-model="addEvents.description"
315 placeholder="fill your Description" 315 placeholder="fill your Description"
316 name="name" 316 name="name"
317 type="text" 317 type="text"
318 :rules="descriptionRules" 318 :rules="descriptionRules"
319 required 319 required
320 ></v-text-field> 320 ></v-text-field>
321 </v-flex> 321 </v-flex>
322 </v-layout> 322 </v-layout>
323 <v-layout> 323 <v-layout>
324 <v-flex xs12 sm9 offset-sm2> 324 <v-flex xs12 sm9 offset-sm2>
325 <v-card-actions> 325 <v-card-actions>
326 <v-btn @click="clear" round dark>clear</v-btn> 326 <v-btn @click="clear" round dark>clear</v-btn>
327 <v-spacer></v-spacer> 327 <v-spacer></v-spacer>
328 <v-btn @click="submit" round dark :loading="loading">Add</v-btn> 328 <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
329 </v-card-actions> 329 </v-card-actions>
330 </v-flex> 330 </v-flex>
331 </v-layout> 331 </v-layout>
332 </v-form> 332 </v-form>
333 </v-flex> 333 </v-flex>
334 </v-layout> 334 </v-layout>
335 </v-container> 335 </v-container>
336 </v-card> 336 </v-card>
337 </v-flex> 337 </v-flex>
338 </v-container> 338 </v-container>
339 </v-tab-item> 339 </v-tab-item>
340 </v-tabs> 340 </v-tabs>
341 <div class="loader" v-if="showLoader"> 341 <div class="loader" v-if="showLoader">
342 <v-progress-circular indeterminate color="white"></v-progress-circular> 342 <v-progress-circular indeterminate color="white"></v-progress-circular>
343 </div> 343 </div>
344 </v-app> 344 </v-app>
345 </template> 345 </template>
346 346
347 <script> 347 <script>
348 import http from "@/Services/http.js"; 348 import http from "@/Services/http.js";
349 import Util from "@/util"; 349 import Util from "@/util";
350 350
351 export default { 351 export default {
352 data: () => ({ 352 data: () => ({
353 snackbar: false, 353 snackbar: false,
354 y: "top", 354 y: "top",
355 x: "right", 355 x: "right",
356 mode: "", 356 mode: "",
357 timeout: 3000, 357 timeout: 3000,
358 text: "", 358 text: "",
359 showLoader:false, 359 showLoader:false,
360 loading: false, 360 loading: false,
361 date: null, 361 date: null,
362 search: "", 362 search: "",
363 menu: false,
364 menu1: false,
365 dialog: false, 363 dialog: false,
366 dialog1: false, 364 dialog1: false,
367 valid: true, 365 valid: true,
368 isActive: true, 366 isActive: true,
369 newActive: false, 367 newActive: false,
370 addclass: [], 368 addclass: [],
371 addSection: [], 369 addSection: [],
372 gender: ["Male", "Female"], 370 gender: ["Male", "Female"],
373 AddUsercredentials: {}, 371 AddUsercredentials: {},
374 pagination: { 372 pagination: {
375 rowsPerPage: 15 373 rowsPerPage: 15
376 }, 374 },
377 imageData: {}, 375 imageData: {},
378 imageName: "", 376 imageName: "",
379 imageUrl: "", 377 imageUrl: "",
380 imageFile: "", 378 imageFile: "",
381 titleRules: [v => !!v || " Title is required"], 379 titleRules: [v => !!v || " Title is required"],
382 descriptionRules: [v => !!v || " Description is required"], 380 descriptionRules: [v => !!v || " Description is required"],
383 headers: [ 381 headers: [
384 { 382 {
385 text: "No", 383 text: "No",
386 align: "center", 384 align: "center",
387 sortable: false, 385 sortable: false,
388 value: "No" 386 value: "No"
389 }, 387 },
390 { text: "Title", value: "title", sortable: false, align: "center" }, 388 { text: "Title", value: "title", sortable: false, align: "center" },
391 { text: "Description", value: "description", sortable: false, align: "center" }, 389 { text: "Description", value: "description", sortable: false, align: "center" },
392 { text: "Action", value: "", sortable: false, align: "center" } 390 { text: "Action", value: "", sortable: false, align: "center" }
393 ], 391 ],
394 desserts: [], 392 desserts: [],
395 editedIndex: -1, 393 editedIndex: -1,
396 addEvents: { 394 addEvents: {
397 title: "", 395 title: "",
398 description: "" 396 description: ""
399 }, 397 },
400 editedItem: { 398 editedItem: {
401 title: "", 399 title: "",
402 description: "" 400 description: ""
403 }, 401 },
404 defaultItem: { 402 defaultItem: {
405 title: "", 403 title: "",
406 description: "" 404 description: ""
407 }, 405 },
408 userName: "", 406 userName: "",
409 items: [ 407 items: [
410 { 408 {
411 href: "/changepassword", 409 href: "/changepassword",
412 title: "Change Password", 410 title: "Change Password",
413 click: e => { 411 click: e => {
414 console.log(e); 412 console.log(e);
415 } 413 }
416 }, 414 },
417 { 415 {
418 href: "#", 416 href: "#",
419 title: "Logout", 417 title: "Logout",
420 click: e => { 418 click: e => {
421 window.getApp.$emit("APP_LOGOUT"); 419 window.getApp.$emit("APP_LOGOUT");
422 } 420 }
423 } 421 }
424 ] 422 ]
425 }), 423 }),
426 watch: {
427 menu(val) {
428 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
429 },
430 menu1(val) {
431 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
432 }
433 },
434 methods: { 424 methods: {
435 pickFile() { 425 pickFile() {
436 this.$refs.image.click(); 426 this.$refs.image.click();
437 }, 427 },
438 428
439 onFilePicked(e) { 429 onFilePicked(e) {
440 // console.log(e) 430 // console.log(e)
441 const files = e.target.files; 431 const files = e.target.files;
442 this.imageData.upload = e.target.files[0]; 432 this.imageData.upload = e.target.files[0];
443 if (files[0] !== undefined) { 433 if (files[0] !== undefined) {
444 this.imageName = files[0].name; 434 this.imageName = files[0].name;
445 if (this.imageName.lastIndexOf(".") <= 0) { 435 if (this.imageName.lastIndexOf(".") <= 0) {
446 return; 436 return;
447 } 437 }
448 const fr = new FileReader(); 438 const fr = new FileReader();
449 fr.readAsDataURL(files[0]); 439 fr.readAsDataURL(files[0]);
450 fr.addEventListener("load", () => { 440 fr.addEventListener("load", () => {
451 this.imageUrl = fr.result; 441 this.imageUrl = fr.result;
452 this.imageFile = files[0]; // this is an image file that can be sent to server... 442 this.imageFile = files[0]; // this is an image file that can be sent to server...
453 this.imageData.imageUrl = URL.createObjectURL(this.imageFile); 443 this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
454 console.log("upload=======>", this.imageData.imageUrl); 444 console.log("upload=======>", this.imageData.imageUrl);
455 console.log("imageFile", this.imageFile); 445 console.log("imageFile", this.imageFile);
456 }); 446 });
457 } else { 447 } else {
458 this.imageName = ""; 448 this.imageName = "";
459 this.imageFile = ""; 449 this.imageFile = "";
460 this.imageUrl = ""; 450 this.imageUrl = "";
461 } 451 }
462 }, 452 },
463 getEventList() { 453 getEventList() {
464 this.showLoader = true; 454 this.showLoader = true;
465 var token = this.$store.state.token; 455 var token = this.$store.state.token;
466 http() 456 http()
467 .get("/getEventsList", { 457 .get("/getEventsList", {
468 headers: { Authorization: "Bearer " + token } 458 headers: { Authorization: "Bearer " + token }
469 }) 459 })
470 .then(response => { 460 .then(response => {
471 this.desserts = response.data.data; 461 this.desserts = response.data.data;
472 this.showLoader = false; 462 this.showLoader = false;
473 // console.log("getEventList=====>",this.desserts) 463 // console.log("getEventList=====>",this.desserts)
474 }) 464 })
475 .catch(err => { 465 .catch(err => {
476 this.showLoader = false; 466 this.showLoader = false;
477 // console.log("err====>", err); 467 // console.log("err====>", err);
478 this.$router.replace({ path: "/" }); 468 this.$router.replace({ path: "/" });
479 }); 469 });
480 }, 470 },
481 editItem(item) { 471 editItem(item) {
482 this.editedIndex = this.desserts.indexOf(item); 472 this.editedIndex = this.desserts.indexOf(item);
483 this.editedItem = Object.assign({}, item); 473 this.editedItem = Object.assign({}, item);
484 this.dialog = true; 474 this.dialog = true;
485 }, 475 },
486 profile(item) { 476 profile(item) {
487 this.editedIndex = this.desserts.indexOf(item); 477 this.editedIndex = this.desserts.indexOf(item);
488 this.editedItem = Object.assign({}, item); 478 this.editedItem = Object.assign({}, item);
489 this.dialog1 = true; 479 this.dialog1 = true;
490 }, 480 },
491 deleteItem(item) { 481 deleteItem(item) {
492 let deleteEvent = { 482 let deleteEvent = {
493 eventId: item._id 483 eventId: item._id
494 }; 484 };
495 http() 485 http()
496 .delete( 486 .delete(
497 "/deleteEvent", 487 "/deleteEvent",
498 confirm("Are you sure you want to delete this?") && { 488 confirm("Are you sure you want to delete this?") && {
499 params: deleteEvent 489 params: deleteEvent
500 } 490 }
501 ) 491 )
502 .then(response => { 492 .then(response => {
503 // console.log("deleteUers",deleteEvent) 493 // console.log("deleteUers",deleteEvent)
504 if ((this.snackbar = true)) { 494 if ((this.snackbar = true)) {
505 this.text = "Successfully delete Existing User"; 495 this.text = "Successfully delete Existing User";
506 } 496 }
507 this.getEventList(); 497 this.getEventList();
508 }) 498 })
509 .catch(error => { 499 .catch(error => {
510 // console.log(error); 500 // console.log(error);
511 }); 501 });
512 }, 502 },
513 activeTab(type) { 503 activeTab(type) {
514 switch (type) { 504 switch (type) {
515 case "existing": 505 case "existing":
516 this.newActive = false; 506 this.newActive = false;
517 this.isActive = true; 507 this.isActive = true;
518 break; 508 break;
519 509
520 default: 510 default:
521 this.newActive = true; 511 this.newActive = true;
522 this.isActive = false; 512 this.isActive = false;
523 break; 513 break;
524 } 514 }
525 }, 515 },
526 close() { 516 close() {
527 this.dialog = false; 517 this.dialog = false;
528 setTimeout(() => { 518 setTimeout(() => {
529 this.editedItem = Object.assign({}, this.defaultItem); 519 this.editedItem = Object.assign({}, this.defaultItem);
530 this.editedIndex = -1; 520 this.editedIndex = -1;
531 }, 300); 521 }, 300);
532 }, 522 },
533 close1() { 523 close1() {
534 this.dialog1 = false; 524 this.dialog1 = false;
535 }, 525 },
536 submit() { 526 submit() {
537 if (this.$refs.form.validate()) { 527 if (this.$refs.form.validate()) {
538 let imageData = new FormData(); 528 let imageData = new FormData();
539 imageData.append("upload", this.imageFile); 529 imageData.append("upload", this.imageFile);
540 console.log(imageData); 530 console.log(imageData);
541 let addEvent = { 531 let addEvent = {
542 title: this.addEvents.title, 532 title: this.addEvents.title,
543 description: this.addEvents.description 533 description: this.addEvents.description
544 }; 534 };
545 http() 535 http()
546 .post("/createEvent", addEvent) 536 .post("/createEvent", addEvent)
547 .then(response => { 537 .then(response => {
548 // console.log("addEvent=====>",addEvent) 538 // console.log("addEvent=====>",addEvent)
549 if ((this.snackbar = true)) { 539 if ((this.snackbar = true)) {
550 this.text = "New user added successfully"; 540 this.text = "New user added successfully";
551 } 541 }
552 this.getEventList(); 542 this.getEventList();
553 this.clear(); 543 this.clear();
554 }) 544 })
555 .catch(error => { 545 .catch(error => {
556 // console.log(error); 546 // console.log(error);
557 if ((this.snackbar = true)) { 547 if ((this.snackbar = true)) {
558 this.text = error.response.data.message; 548 this.text = error.response.data.message;
559 } 549 }
560 }); 550 });
561 } 551 }
562 }, 552 },
563 mail() {}, 553 mail() {},
564 download() {}, 554 download() {},
565 clear() { 555 clear() {
566 this.$refs.form.reset(); 556 this.$refs.form.reset();
567 }, 557 },
568 save() { 558 save() {
569 let imageData = new FormData(); 559 let imageData = new FormData();
570 imageData.append("upload", this.imageFile); 560 imageData.append("upload", this.imageFile);
571 console.log(imageData); 561 console.log(imageData);
572 let editEvent = { 562 let editEvent = {
573 eventId: this.editedItem._id, 563 eventId: this.editedItem._id,
574 title: this.editedItem.title, 564 title: this.editedItem.title,
575 description: this.editedItem.description, 565 description: this.editedItem.description,
576 imageData 566 imageData
577 }; 567 };
578 http() 568 http()
579 .put("/updateEvent", editEvent) 569 .put("/updateEvent", editEvent)
580 .then(response => { 570 .then(response => {
581 // console.log("editEvent",editEvent); 571 // console.log("editEvent",editEvent);
582 if ((this.snackbar = true)) { 572 if ((this.snackbar = true)) {
583 this.text = "Successfully Edit Existing User"; 573 this.text = "Successfully Edit Existing User";
584 } 574 }
585 this.getEventList(); 575 this.getEventList();
586 }) 576 })
587 .catch(error => { 577 .catch(error => {
588 // console.log(error); 578 // console.log(error);
589 }); 579 });
590 this.close(); 580 this.close();
591 }, 581 },
592 handleDrawerToggle() { 582 handleDrawerToggle() {
593 window.getApp.$emit("APP_DRAWER_TOGGLED"); 583 window.getApp.$emit("APP_DRAWER_TOGGLED");
594 }, 584 },
595 handleFullScreen() { 585 handleFullScreen() {
596 Util.toggleFullScreen(); 586 Util.toggleFullScreen();
597 } 587 }
598 }, 588 },
599 mounted() { 589 mounted() {
600 this.getEventList(); 590 this.getEventList();
601 }, 591 },
602 computed: { 592 computed: {
603 toolbarColor() { 593 toolbarColor() {
604 return this.$vuetify.options.extra.mainNav; 594 return this.$vuetify.options.extra.mainNav;
605 } 595 }
606 } 596 }
607 }; 597 };
608 </script> 598 </script>
609 <style scoped> 599 <style scoped>
610 .v-tabs__div { 600 .v-tabs__div {
611 text-transform: none; 601 text-transform: none;
612 } 602 }
613 .v-input__prepend-outer { 603 .v-input__prepend-outer {
614 margin-right: 0px !important; 604 margin-right: 0px !important;
615 } 605 }
616 .v-card__actions .v-btn { 606 .v-card__actions .v-btn {
617 margin: 0 15px; 607 margin: 0 15px;
618 min-width: 120px; 608 min-width: 120px;
619 } 609 }
620 .primary { 610 .primary {
621 background-color: #aaa !important; 611 background-color: #aaa !important;
622 border-color: #aaa !important; 612 border-color: #aaa !important;
623 } 613 }
624 h4 { 614 h4 {
625 background-repeat: no-repeat; 615 background-repeat: no-repeat;
626 padding: 8px; 616 padding: 8px;
627 margin: auto; 617 margin: auto;
628 font-size: 25px; 618 font-size: 25px;
629 } 619 }
630 #name { 620 #name {
631 position: absolute; 621 position: absolute;
632 left: 100px; 622 left: 100px;
633 top: 17px; 623 top: 17px;
634 } 624 }
635 #icon { 625 #icon {
636 position: absolute; 626 position: absolute;
637 right: 8px; 627 right: 8px;
638 top: 8px; 628 top: 8px;
639 } 629 }
640 #m { 630 #m {
641 position: relative; 631 position: relative;
642 left: 135px; 632 left: 135px;
643 top: -15px; 633 top: -15px;
644 } 634 }
645 #G { 635 #G {
646 position: absolute; 636 position: absolute;
647 top: 38px; 637 top: 38px;
648 color: white; 638 color: white;
649 } 639 }
650 #bt { 640 #bt {
651 position: relative; 641 position: relative;
652 top: -20px; 642 top: -20px;
653 left: 115px; 643 left: 115px;
654 } 644 }
655 #e { 645 #e {
656 position: relative; 646 position: relative;
657 top: 5px; 647 top: 5px;
658 right: -30px; 648 right: -30px;
659 height: 17px; 649 height: 17px;
660 cursor: pointer; 650 cursor: pointer;
661 } 651 }
662 #d { 652 #d {
663 position: relative; 653 position: relative;
664 top: 5px; 654 top: 5px;
665 right: -70px; 655 right: -70px;
666 height: 17px; 656 height: 17px;
667 cursor: pointer; 657 cursor: pointer;
668 } 658 }
669 #td { 659 #td {
670 border: 1px solid #dddddd; 660 border: 1px solid #dddddd;
671 text-align: left; 661 text-align: left;
672 padding: 8px; 662 padding: 8px;
673 } 663 }
674 #dialog { 664 #dialog {
675 height: 550px; 665 height: 550px;
676 } 666 }
677 .active { 667 .active {
678 background-color: black; 668 background-color: black;
679 color: white !important; 669 color: white !important;
680 } 670 }
681 .activebtn { 671 .activebtn {
682 color: black !important; 672 color: black !important;
683 } 673 }
684 #flex { 674 #flex {
685 height: 300px; 675 height: 300px;
686 } 676 }
687 .top { 677 .top {
688 margin-top: 100px; 678 margin-top: 100px;
689 } 679 }
690 .v-tabs__item a { 680 .v-tabs__item a {
691 font-size: 16px !important; 681 font-size: 16px !important;
692 } 682 }
693 @media screen and (max-width: 769px) { 683 @media screen and (max-width: 769px) {
694 .top { 684 .top {
695 margin-top: 0 !important; 685 margin-top: 0 !important;
696 } 686 }
697 .userSearch .v-icon { 687 .userSearch .v-icon {
698 font-size: 20px !important; 688 font-size: 20px !important;
699 margin-left: 20px; 689 margin-left: 20px;
700 } 690 }
701 } 691 }
702 @media screen and (max-width: 380px) { 692 @media screen and (max-width: 380px) {
703 .right { 693 .right {
704 float: none !important; 694 float: none !important;
705 } 695 }
706 .subheading { 696 .subheading {
707 font-size: 14px !important; 697 font-size: 14px !important;
708 } 698 }
709 .v-card__actions .v-btn { 699 .v-card__actions .v-btn {
710 margin: 0 0px; 700 margin: 0 0px;
711 min-width: 100px; 701 min-width: 100px;
712 } 702 }
713 /* .searchIcon .v-icon { 703 /* .searchIcon .v-icon {
714 font-size: 20px; 704 font-size: 20px;
715 margin-left: 20px; 705 margin-left: 20px;
716 } */ 706 } */
717 .subheading { 707 .subheading {
718 font-size: 12px !important; 708 font-size: 12px !important;
719 } 709 }
720 h5 { 710 h5 {
721 font-size: 13px; 711 font-size: 13px;
722 } 712 }
723 } 713 }
724 .v-icon { 714 .v-icon {
725 font-size: 30px; 715 font-size: 30px;
726 } 716 }
727 @media screen and (min-width: 1270px) { 717 @media screen and (min-width: 1270px) {
728 .hide { 718 .hide {
729 display: none; 719 display: none;
730 } 720 }
731 /* } 721 /* }
732 @media screen and (max-width: 962px) { 722 @media screen and (max-width: 962px) {
733 .imglogo{ 723 .imglogo{
734 position: absolute; 724 position: absolute;
735 top: 13px; 725 top: 13px;
736 left: 13px !important; 726 left: 13px !important;
737 width: 70px; 727 width: 70px;
738 height: 24px; 728 height: 24px;
739 } */ 729 } */
740 } 730 }
741 @media screen and (max-width: 420px) { 731 @media screen and (max-width: 420px) {
742 .userSearch .v-text-field .v-label { 732 .userSearch .v-text-field .v-label {
743 line-height: 24px !important; 733 line-height: 24px !important;
744 } 734 }
745 .userSearch .v-label { 735 .userSearch .v-label {
746 font-size: 13px !important; 736 font-size: 13px !important;
747 } 737 }
748 .v-list__tile { 738 .v-list__tile {
749 font-size: 14px; 739 font-size: 14px;
750 padding: 0 10px; 740 padding: 0 10px;
751 } 741 }
752 .name { 742 .name {
753 font-size: 15px; 743 font-size: 15px;
754 } 744 }
755 } 745 }
756 </style> 746 </style>
src/pages/News/news.vue
Diff comments   View file @55f72b7
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <v-toolbar class="fixcolors" fixed app> 3 <v-toolbar class="fixcolors" fixed app>
4 <v-toolbar-title class="ml-0 pl-3"> 4 <v-toolbar-title class="ml-0 pl-3">
5 <v-toolbar-side-icon @click.stop="handleDrawerToggle" class="hide"></v-toolbar-side-icon> 5 <v-toolbar-side-icon @click.stop="handleDrawerToggle" class="hide"></v-toolbar-side-icon>
6 </v-toolbar-title> 6 </v-toolbar-title>
7 <!-- ****** SEARCH ALL EXISTING NEWS ****** --> 7 <!-- ****** SEARCH ALL EXISTING NEWS ****** -->
8 <v-flex xs7 sm3 class="userSearch"> 8 <v-flex xs7 sm3 class="userSearch">
9 <v-text-field 9 <v-text-field
10 flat 10 flat
11 append-icon="search" 11 append-icon="search"
12 label="Find your Teachers" 12 label="Find your News"
13 v-model="search" 13 v-model="search"
14 color="white" 14 color="white"
15 dark 15 dark
16 ></v-text-field> 16 ></v-text-field>
17 </v-flex> 17 </v-flex>
18 <v-spacer></v-spacer> 18 <v-spacer></v-spacer>
19 <v-menu offset-y origin="center center" :nudge-bottom="10" transition="scale-transition"> 19 <v-menu offset-y origin="center center" :nudge-bottom="10" transition="scale-transition">
20 <v-btn icon large flat slot="activator"> 20 <v-btn icon large flat slot="activator">
21 <v-avatar size="40px"> 21 <v-avatar size="40px">
22 <img src="/static/icon/user.png"> 22 <img src="/static/icon/user.png">
23 </v-avatar> 23 </v-avatar>
24 </v-btn> 24 </v-btn>
25 <v-list class="pa-0"> 25 <v-list class="pa-0">
26 <v-list-tile 26 <v-list-tile
27 v-for="(item,index) in items" 27 v-for="(item,index) in items"
28 :to="!item.href ? { name: item.name } : null" 28 :to="!item.href ? { name: item.name } : null"
29 :href="item.href" 29 :href="item.href"
30 @click="item.click" 30 @click="item.click"
31 ripple="ripple" 31 ripple="ripple"
32 :disabled="item.disabled" 32 :disabled="item.disabled"
33 :target="item.target" 33 :target="item.target"
34 rel="noopener" 34 rel="noopener"
35 :key="index" 35 :key="index"
36 > 36 >
37 <v-list-tile-action v-if="item.icon"> 37 <v-list-tile-action v-if="item.icon">
38 <v-icon>{{ item.icon }}</v-icon> 38 <v-icon>{{ item.icon }}</v-icon>
39 </v-list-tile-action> 39 </v-list-tile-action>
40 <v-list-tile-content> 40 <v-list-tile-content>
41 <v-list-tile-title>{{ item.title }}</v-list-tile-title> 41 <v-list-tile-title>{{ item.title }}</v-list-tile-title>
42 </v-list-tile-content> 42 </v-list-tile-content>
43 </v-list-tile> 43 </v-list-tile>
44 </v-list> 44 </v-list>
45 </v-menu> 45 </v-menu>
46 </v-toolbar> 46 </v-toolbar>
47 <v-tabs grow slider-color="black"> 47 <v-tabs grow slider-color="black">
48 <v-tab 48 <v-tab
49 ripple 49 ripple
50 @click="activeTab('existing')" 50 @click="activeTab('existing')"
51 v-bind:class="{ active: isActive }" 51 v-bind:class="{ active: isActive }"
52 id="tab" 52 id="tab"
53 class="subheading" 53 class="subheading"
54 >Existing News</v-tab> 54 >Existing News</v-tab>
55 <v-tab 55 <v-tab
56 ripple 56 ripple
57 @click="activeTab('new')" 57 @click="activeTab('new')"
58 v-bind:class="{ active: newActive }" 58 v-bind:class="{ active: newActive }"
59 id="tab1" 59 id="tab1"
60 User 60 User
61 class="subheading" 61 class="subheading"
62 >Add News</v-tab> 62 >Add News</v-tab>
63 63
64 <!-- ****** EDITS ALL NEWS DETAILS ****** --> 64 <!-- ****** EDITS ALL NEWS DETAILS ****** -->
65 65
66 <v-tab-item> 66 <v-tab-item>
67 <v-snackbar 67 <v-snackbar
68 :timeout="timeout" 68 :timeout="timeout"
69 :top="y === 'top'" 69 :top="y === 'top'"
70 :right="x === 'right'" 70 :right="x === 'right'"
71 :vertical="mode === 'vertical'" 71 :vertical="mode === 'vertical'"
72 v-model="snackbar" 72 v-model="snackbar"
73 color="success" 73 color="success"
74 >{{ text }}</v-snackbar> 74 >{{ text }}</v-snackbar>
75 <v-dialog v-model="dialog" max-width="1000px"> 75 <v-dialog v-model="dialog" max-width="1000px">
76 <v-flex xs12 sm12 class> 76 <v-flex xs12 sm12 class>
77 <v-toolbar color="white"> 77 <v-toolbar color="white">
78 <v-spacer></v-spacer> 78 <v-spacer></v-spacer>
79 <v-toolbar-title>Edit Profile</v-toolbar-title> 79 <v-toolbar-title>Edit Profile</v-toolbar-title>
80 <v-spacer></v-spacer> 80 <v-spacer></v-spacer>
81 </v-toolbar> 81 </v-toolbar>
82 <v-card flat> 82 <v-card flat>
83 <v-form ref="form"> 83 <v-form ref="form">
84 <v-container fluid> 84 <v-container fluid>
85 <v-layout> 85 <v-layout>
86 <v-flex 86 <v-flex
87 xs12 87 xs12
88 class="text-xs-center text-sm-center text-md-center text-lg-center mr-4" 88 class="text-xs-center text-sm-center text-md-center text-lg-center mr-4"
89 > 89 >
90 <v-avatar size="100px"> 90 <v-avatar size="100px">
91 <img src="/static/icon/user.png" v-if="!imageUrl"> 91 <img src="/static/icon/user.png" v-if="!imageUrl">
92 </v-avatar> 92 </v-avatar>
93 <input 93 <input
94 type="file" 94 type="file"
95 style="display: none" 95 style="display: none"
96 ref="image" 96 ref="image"
97 accept="image/*" 97 accept="image/*"
98 @change="onFilePicked" 98 @change="onFilePicked"
99 > 99 >
100 <img 100 <img
101 :src="imageData.imageUrl" 101 :src="imageData.imageUrl"
102 height="150" 102 height="150"
103 v-if="imageUrl" 103 v-if="imageUrl"
104 style="border-radius:50%; width:200px" 104 style="border-radius:50%; width:200px"
105 > 105 >
106 </v-flex> 106 </v-flex>
107 </v-layout> 107 </v-layout>
108 <v-layout> 108 <v-layout>
109 <v-flex xs12 sm6> 109 <v-flex xs12 sm6>
110 <v-layout> 110 <v-layout>
111 <v-flex xs4 class="pt-4 subheading"> 111 <v-flex xs4 class="pt-4 subheading">
112 <label class="right">Select Class:</label> 112 <label class="right">Select Class:</label>
113 </v-flex> 113 </v-flex>
114 <v-flex xs8 class="ml-3"> 114 <v-flex xs8 class="ml-3">
115 <v-select 115 <v-select
116 :items="addclass" 116 :items="addclass"
117 label="Select Class" 117 label="Select Class"
118 v-model="editedItem.select" 118 v-model="editedItem.select"
119 item-text="classNum" 119 item-text="classNum"
120 item-value="_id" 120 item-value="_id"
121 name="Select Class" 121 name="Select Class"
122 @change="getSections(editedItem.select)" 122 @change="getSections(editedItem.select)"
123 required 123 required
124 ></v-select> 124 ></v-select>
125 </v-flex> 125 </v-flex>
126 </v-layout> 126 </v-layout>
127 </v-flex> 127 </v-flex>
128 <v-flex xs12 sm6> 128 <v-flex xs12 sm6>
129 <v-layout> 129 <v-layout>
130 <v-flex xs4 class="pt-4 subheading"> 130 <v-flex xs4 class="pt-4 subheading">
131 <label class="right">Select Section:</label> 131 <label class="right">Select Section:</label>
132 </v-flex> 132 </v-flex>
133 <v-flex xs8 class="ml-3"> 133 <v-flex xs8 class="ml-3">
134 <v-select 134 <v-select
135 :items="addSection" 135 :items="addSection"
136 label="Select Section" 136 label="Select Section"
137 v-model="editedItem.selectSection" 137 v-model="editedItem.selectSection"
138 item-text="name" 138 item-text="name"
139 item-value="_id" 139 item-value="_id"
140 name="Select Section" 140 name="Select Section"
141 required 141 required
142 ></v-select> 142 ></v-select>
143 </v-flex> 143 </v-flex>
144 </v-layout> 144 </v-layout>
145 </v-flex> 145 </v-flex>
146 </v-layout> 146 </v-layout>
147 <v-layout> 147 <v-layout>
148 <v-flex xs12 sm6> 148 <v-flex xs12 sm6>
149 <v-layout> 149 <v-layout>
150 <v-flex xs4 class="pt-4 subheading"> 150 <v-flex xs4 class="pt-4 subheading">
151 <label class="right">Title:</label> 151 <label class="right">Title:</label>
152 </v-flex> 152 </v-flex>
153 <v-flex xs8 class="ml-3"> 153 <v-flex xs8 class="ml-3">
154 <v-text-field 154 <v-text-field
155 v-model="editedItem.title" 155 v-model="editedItem.title"
156 placeholder="fill your Title" 156 placeholder="fill your Title"
157 name="name" 157 name="name"
158 type="text" 158 type="text"
159 required 159 required
160 ></v-text-field> 160 ></v-text-field>
161 </v-flex> 161 </v-flex>
162 </v-layout> 162 </v-layout>
163 </v-flex> 163 </v-flex>
164 <v-flex xs12 sm6> 164 <v-flex xs12 sm6>
165 <v-layout> 165 <v-layout>
166 <v-flex xs4 class="pt-4 subheading"> 166 <v-flex xs4 class="pt-4 subheading">
167 <label class="right">Description:</label> 167 <label class="right">Description:</label>
168 </v-flex> 168 </v-flex>
169 <v-flex xs8 class="ml-3"> 169 <v-flex xs8 class="ml-3">
170 <v-text-field 170 <v-text-field
171 placeholder="fill your Description" 171 placeholder="fill your Description"
172 v-model="editedItem.description" 172 v-model="editedItem.description"
173 type="text" 173 type="text"
174 name="email" 174 name="email"
175 required 175 required
176 ></v-text-field> 176 ></v-text-field>
177 </v-flex> 177 </v-flex>
178 </v-layout> 178 </v-layout>
179 </v-flex> 179 </v-flex>
180 </v-layout> 180 </v-layout>
181 <v-layout> 181 <v-layout>
182 <v-flex xs12 sm12> 182 <v-flex xs12 sm12>
183 <v-card-actions> 183 <v-card-actions>
184 <v-btn round dark @click.native="close">Cancel</v-btn> 184 <v-btn round dark @click.native="close">Cancel</v-btn>
185 <v-spacer></v-spacer> 185 <v-spacer></v-spacer>
186 <v-btn round dark @click="save">Save</v-btn> 186 <v-btn round dark @click="save">Save</v-btn>
187 </v-card-actions> 187 </v-card-actions>
188 </v-flex> 188 </v-flex>
189 </v-layout> 189 </v-layout>
190 </v-container> 190 </v-container>
191 </v-form> 191 </v-form>
192 </v-card> 192 </v-card>
193 </v-flex> 193 </v-flex>
194 </v-dialog> 194 </v-dialog>
195 195
196 <!-- ****** PROFILE VIEW ALL NEWS DEATILS ****** --> 196 <!-- ****** PROFILE VIEW ALL NEWS DEATILS ****** -->
197 <v-dialog v-model="dialog1" max-width="600px"> 197 <v-dialog v-model="dialog1" max-width="600px">
198 <v-toolbar color="white"> 198 <v-toolbar color="white">
199 <v-spacer></v-spacer> 199 <v-spacer></v-spacer>
200 <v-toolbar-title>Profile</v-toolbar-title> 200 <v-toolbar-title>Profile</v-toolbar-title>
201 <v-spacer></v-spacer> 201 <v-spacer></v-spacer>
202 <v-icon @click="close1">close</v-icon> 202 <v-icon @click="close1">close</v-icon>
203 </v-toolbar> 203 </v-toolbar>
204 <v-card> 204 <v-card>
205 <v-flex align-center justify-center layout text-xs-center> 205 <v-flex align-center justify-center layout text-xs-center>
206 <v-avatar size="50px" style="position:absolute; top:20px;"> 206 <v-avatar size="50px" style="position:absolute; top:20px;">
207 <img src="/static/icon/user.png"> 207 <img src="/static/icon/user.png">
208 </v-avatar> 208 </v-avatar>
209 </v-flex> 209 </v-flex>
210 <v-card-text> 210 <v-card-text>
211 <v-container grid-list-md> 211 <v-container grid-list-md>
212 <v-layout wrap> 212 <v-layout wrap>
213 <v-flex> 213 <v-flex>
214 <br> 214 <br>
215 <br> 215 <br>
216 <v-layout> 216 <v-layout>
217 <v-flex xs5 sm6> 217 <v-flex xs5 sm6>
218 <h5 class="right my-1">Title:</h5> 218 <h5 class="right my-1">Title:</h5>
219 </v-flex> 219 </v-flex>
220 <v-flex sm6 xs8> 220 <v-flex sm6 xs8>
221 <h5 class="my-1">{{ editedItem.title }}</h5> 221 <h5 class="my-1">{{ editedItem.title }}</h5>
222 </v-flex> 222 </v-flex>
223 </v-layout> 223 </v-layout>
224 <v-layout> 224 <v-layout>
225 <v-flex xs5 sm6> 225 <v-flex xs5 sm6>
226 <h5 class="right my-1">Description:</h5> 226 <h5 class="right my-1">Description:</h5>
227 </v-flex> 227 </v-flex>
228 <v-flex sm6 xs8> 228 <v-flex sm6 xs8>
229 <h5 class="my-1">{{ editedItem.description }}</h5> 229 <h5 class="my-1">{{ editedItem.description }}</h5>
230 </v-flex> 230 </v-flex>
231 </v-layout> 231 </v-layout>
232 </v-flex> 232 </v-flex>
233 </v-layout> 233 </v-layout>
234 </v-container> 234 </v-container>
235 </v-card-text> 235 </v-card-text>
236 </v-card> 236 </v-card>
237 </v-dialog> 237 </v-dialog>
238 238
239 <v-snackbar 239 <v-snackbar
240 :timeout="timeout" 240 :timeout="timeout"
241 :top="y === 'top'" 241 :top="y === 'top'"
242 :right="x === 'right'" 242 :right="x === 'right'"
243 :vertical="mode === 'vertical'" 243 :vertical="mode === 'vertical'"
244 v-model="snackbar" 244 v-model="snackbar"
245 color="success" 245 color="success"
246 >{{ text }}</v-snackbar> 246 >{{ text }}</v-snackbar>
247 247
248 <!-- ****** EXISTING-USERS NEWS TABLE ****** --> 248 <!-- ****** EXISTING-USERS NEWS TABLE ****** -->
249 <v-data-table 249 <v-data-table
250 :headers="headers" 250 :headers="headers"
251 :items="desserts" 251 :items="desserts"
252 :pagination.sync="pagination" 252 :pagination.sync="pagination"
253 :search="search" 253 :search="search"
254 > 254 >
255 <template slot="items" slot-scope="props"> 255 <template slot="items" slot-scope="props">
256 <td id="td" class="text-xs-center">{{ props.index}}</td> 256 <td id="td" class="text-xs-center">{{ props.index}}</td>
257 <td id="td" class="text-xs-center">{{ props.item.title}}</td> 257 <td id="td" class="text-xs-center">{{ props.item.title}}</td>
258 <td id="td" class="text-xs-center">{{ props.item.description}}</td> 258 <td id="td" class="text-xs-center">{{ props.item.description}}</td>
259 259
260 <td class="text-xs-center"> 260 <td class="text-xs-center">
261 <span> 261 <span>
262 <img 262 <img
263 style="cursor:pointer; width:25px; height:18px; " 263 style="cursor:pointer; width:25px; height:18px; "
264 class="mr-5" 264 class="mr-5"
265 @click="profile(props.item)" 265 @click="profile(props.item)"
266 src="/static/icon/eye1.png" 266 src="/static/icon/eye1.png"
267 > 267 >
268 <img 268 <img
269 style="cursor:pointer; width:20px; height:18px; " 269 style="cursor:pointer; width:20px; height:18px; "
270 class="mr-5" 270 class="mr-5"
271 @click="editItem(props.item)" 271 @click="editItem(props.item)"
272 src="/static/icon/edit1.png" 272 src="/static/icon/edit1.png"
273 > 273 >
274 <img 274 <img
275 style="cursor:pointer; height:20px; " 275 style="cursor:pointer; height:20px; "
276 class="mr-5" 276 class="mr-5"
277 @click="deleteItem(props.item)" 277 @click="deleteItem(props.item)"
278 src="/static/icon/delete1.png" 278 src="/static/icon/delete1.png"
279 > 279 >
280 </span> 280 </span>
281 </td> 281 </td>
282 </template> 282 </template>
283 <v-alert 283 <v-alert
284 slot="no-results" 284 slot="no-results"
285 :value="true" 285 :value="true"
286 color="error" 286 color="error"
287 icon="warning" 287 icon="warning"
288 >Your search for "{{ search }}" found no results.</v-alert> 288 >Your search for "{{ search }}" found no results.</v-alert>
289 </v-data-table> 289 </v-data-table>
290 </v-tab-item> 290 </v-tab-item>
291 291
292 <!-- ****** ADD MULTIPLE NEWS ****** --> 292 <!-- ****** ADD MULTIPLE NEWS ****** -->
293 293
294 <v-tab-item> 294 <v-tab-item>
295 <v-container> 295 <v-container>
296 <v-snackbar 296 <v-snackbar
297 :timeout="timeout" 297 :timeout="timeout"
298 :top="y === 'top'" 298 :top="y === 'top'"
299 :right="x === 'right'" 299 :right="x === 'right'"
300 :vertical="mode === 'vertical'" 300 :vertical="mode === 'vertical'"
301 v-model="snackbar" 301 v-model="snackbar"
302 color="success" 302 color="success"
303 >{{ text }}</v-snackbar> 303 >{{ text }}</v-snackbar>
304 <v-flex xs12 sm12 class="my-4"> 304 <v-flex xs12 sm12 class="my-4">
305 <v-card flat> 305 <v-card flat>
306 <v-form ref="form" v-model="valid" lazy-validation> 306 <v-form ref="form" v-model="valid" lazy-validation>
307 <v-container fluid> 307 <v-container fluid>
308 <v-layout> 308 <v-layout>
309 <v-flex 309 <v-flex
310 xs12 310 xs12
311 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4" 311 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4"
312 > 312 >
313 <v-avatar size="100px"> 313 <v-avatar size="100px">
314 <img src="/static/icon/user.png" v-if="!imageUrl"> 314 <img src="/static/icon/user.png" v-if="!imageUrl">
315 </v-avatar> 315 </v-avatar>
316 <input 316 <input
317 type="file" 317 type="file"
318 style="display: none" 318 style="display: none"
319 ref="image" 319 ref="image"
320 accept="image/*" 320 accept="image/*"
321 @change="onFilePicked" 321 @change="onFilePicked"
322 > 322 >
323 <img 323 <img
324 :src="imageData.imageUrl" 324 :src="imageData.imageUrl"
325 height="150" 325 height="150"
326 v-if="imageUrl" 326 v-if="imageUrl"
327 style="border-radius:50%; width:200px" 327 style="border-radius:50%; width:200px"
328 > 328 >
329 </v-flex> 329 </v-flex>
330 </v-layout> 330 </v-layout>
331 <v-flex xs12> 331 <v-flex xs12>
332 <v-layout> 332 <v-layout>
333 <v-flex xs4 class="pt-4 subheading"> 333 <v-flex xs4 class="pt-4 subheading">
334 <label class="right">Select Class:</label> 334 <label class="right">Select Class:</label>
335 </v-flex> 335 </v-flex>
336 <v-flex xs4 class="ml-3"> 336 <v-flex xs4 class="ml-3">
337 <v-select 337 <v-select
338 :items="addclass" 338 :items="addclass"
339 label="Select Class" 339 label="Select Class"
340 v-model="editedItem.select" 340 v-model="editedItem.select"
341 item-text="classNum" 341 item-text="classNum"
342 item-value="_id" 342 item-value="_id"
343 name="Select Class" 343 name="Select Class"
344 @change="getSections(editedItem.select)" 344 @change="getSections(editedItem.select)"
345 required 345 required
346 ></v-select> 346 ></v-select>
347 </v-flex> 347 </v-flex>
348 </v-layout> 348 </v-layout>
349 </v-flex> 349 </v-flex>
350 <v-flex xs12> 350 <v-flex xs12>
351 <v-layout> 351 <v-layout>
352 <v-flex xs4 class="pt-4 subheading"> 352 <v-flex xs4 class="pt-4 subheading">
353 <label class="right">Select Section:</label> 353 <label class="right">Select Section:</label>
354 </v-flex> 354 </v-flex>
355 <v-flex xs4 class="ml-3"> 355 <v-flex xs4 class="ml-3">
356 <v-select 356 <v-select
357 :items="addSection" 357 :items="addSection"
358 label="Select Section" 358 label="Select Section"
359 v-model="editedItem.selectSection" 359 v-model="editedItem.selectSection"
360 item-text="name" 360 item-text="name"
361 item-value="_id" 361 item-value="_id"
362 name="Select Section" 362 name="Select Section"
363 required 363 required
364 ></v-select> 364 ></v-select>
365 </v-flex> 365 </v-flex>
366 </v-layout> 366 </v-layout>
367 </v-flex> 367 </v-flex>
368 <v-flex xs12> 368 <v-flex xs12>
369 <v-layout> 369 <v-layout>
370 <v-flex xs4 class="pt-4 subheading"> 370 <v-flex xs4 class="pt-4 subheading">
371 <label class="right">Title:</label> 371 <label class="right">Title:</label>
372 </v-flex> 372 </v-flex>
373 <v-flex xs4 class="ml-3"> 373 <v-flex xs4 class="ml-3">
374 <v-text-field 374 <v-text-field
375 v-model="addNews.title" 375 v-model="addNews.title"
376 placeholder="fill your Title" 376 placeholder="fill your Title"
377 name="name" 377 name="name"
378 type="text" 378 type="text"
379 :rules="titleRules" 379 :rules="titleRules"
380 required 380 required
381 ></v-text-field> 381 ></v-text-field>
382 </v-flex> 382 </v-flex>
383 </v-layout> 383 </v-layout>
384 </v-flex> 384 </v-flex>
385 <v-flex xs12> 385 <v-flex xs12>
386 <v-layout> 386 <v-layout>
387 <v-flex xs4 class="pt-4 subheading"> 387 <v-flex xs4 class="pt-4 subheading">
388 <label class="right">Description:</label> 388 <label class="right">Description:</label>
389 </v-flex> 389 </v-flex>
390 <v-flex xs4 class="ml-3"> 390 <v-flex xs4 class="ml-3">
391 <v-text-field 391 <v-text-field
392 placeholder="fill your Description" 392 placeholder="fill your Description"
393 :rules="descriptionRules" 393 :rules="descriptionRules"
394 v-model="addNews.description" 394 v-model="addNews.description"
395 type="text" 395 type="text"
396 name="email" 396 name="email"
397 required 397 required
398 ></v-text-field> 398 ></v-text-field>
399 </v-flex> 399 </v-flex>
400 </v-layout> 400 </v-layout>
401 </v-flex> 401 </v-flex>
402 <v-layout> 402 <v-layout>
403 <v-flex xs12 sm6 offset-sm3> 403 <v-flex xs12 sm6 offset-sm3>
404 <v-card-actions> 404 <v-card-actions>
405 <v-btn @click="clear" round dark>clear</v-btn> 405 <v-btn @click="clear" round dark>clear</v-btn>
406 <v-spacer></v-spacer> 406 <v-spacer></v-spacer>
407 <v-btn @click="submit" round dark :loading="loading">Add</v-btn> 407 <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
408 </v-card-actions> 408 </v-card-actions>
409 </v-flex> 409 </v-flex>
410 </v-layout> 410 </v-layout>
411 </v-container> 411 </v-container>
412 </v-form> 412 </v-form>
413 </v-card> 413 </v-card>
414 </v-flex> 414 </v-flex>
415 </v-container> 415 </v-container>
416 </v-tab-item> 416 </v-tab-item>
417 </v-tabs> 417 </v-tabs>
418 <div class="loader" v-if="showLoader"> 418 <div class="loader" v-if="showLoader">
419 <v-progress-circular indeterminate color="white"></v-progress-circular> 419 <v-progress-circular indeterminate color="white"></v-progress-circular>
420 </div> 420 </div>
421 </v-app> 421 </v-app>
422 </template> 422 </template>
423 423
424 <script> 424 <script>
425 import http from "@/Services/http.js"; 425 import http from "@/Services/http.js";
426 import Util from "@/util"; 426 import Util from "@/util";
427 427
428 export default { 428 export default {
429 data: () => ({ 429 data: () => ({
430 snackbar: false, 430 snackbar: false,
431 y: "top", 431 y: "top",
432 x: "right", 432 x: "right",
433 mode: "", 433 mode: "",
434 timeout: 3000, 434 timeout: 3000,
435 text: "", 435 text: "",
436 loading: false, 436 loading: false,
437 date: null, 437 date: null,
438 search: "", 438 search: "",
439 showLoader:false, 439 showLoader:false,
440 menu: false,
441 menu1: false,
442 dialog: false, 440 dialog: false,
443 dialog1: false, 441 dialog1: false,
444 valid: true, 442 valid: true,
445 isActive: true, 443 isActive: true,
446 newActive: false, 444 newActive: false,
447 addclass: [], 445 addclass: [],
448 addSection: [], 446 addSection: [],
449 gender: ["Male", "Female"],
450 AddUsercredentials: {}, 447 AddUsercredentials: {},
451 pagination: { 448 pagination: {
452 rowsPerPage: 15 449 rowsPerPage: 15
453 }, 450 },
454 imageData: {}, 451 imageData: {},
455 imageName: "", 452 imageName: "",
456 imageUrl: "", 453 imageUrl: "",
457 imageFile: "", 454 imageFile: "",
458 titleRules: [v => !!v || " Tilte is required"], 455 titleRules: [v => !!v || " Tilte is required"],
459 descriptionRules: [v => !!v || " Description is required"], 456 descriptionRules: [v => !!v || " Description is required"],
460 headers: [ 457 headers: [
461 { 458 {
462 text: "No", 459 text: "No",
463 align: "center", 460 align: "center",
464 sortable: false, 461 sortable: false,
465 value: "No" 462 value: "No"
466 }, 463 },
467 { text: "Title", value: "title", sortable: false, align: "center" }, 464 { text: "Title", value: "title", sortable: false, align: "center" },
468 // { text: "Email", value: "email", sortable: false, align: "center" },
469 { text: "Description", value: "description", sortable: false, align: "center" }, 465 { text: "Description", value: "description", sortable: false, align: "center" },
470 { text: "Action", value: "", sortable: false, align: "center" } 466 { text: "Action", value: "", sortable: false, align: "center" }
471 ], 467 ],
472 desserts: [], 468 desserts: [],
473 editedIndex: -1, 469 editedIndex: -1,
474 addNews: { 470 addNews: {
475 title: "", 471 title: "",
476 description: "" 472 description: ""
477 }, 473 },
478 editedItem: { 474 editedItem: {
479 title: "", 475 title: "",
480 description: "" 476 description: ""
481 }, 477 },
482 defaultItem: { 478 defaultItem: {
483 title: "", 479 title: "",
484 description: "" 480 description: ""
485 }, 481 },
486 userName: "", 482 userName: "",
487 items: [ 483 items: [
488 { 484 {
489 href: "/changepassword", 485 href: "/changepassword",
490 title: "Change Password", 486 title: "Change Password",
491 click: e => { 487 click: e => {
492 console.log(e); 488 console.log(e);
493 } 489 }
494 }, 490 },
495 { 491 {
496 href: "#", 492 href: "#",
497 title: "Logout", 493 title: "Logout",
498 click: e => { 494 click: e => {
499 window.getApp.$emit("APP_LOGOUT"); 495 window.getApp.$emit("APP_LOGOUT");
500 } 496 }
501 } 497 }
502 ] 498 ]
503 }), 499 }),
504 watch: {
505 menu(val) {
506 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
507 },
508 menu1(val) {
509 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
510 }
511 },
512 methods: { 500 methods: {
513 getSections(_id) { 501 getSections(_id) {
514 var token = this.$store.state.token; 502 var token = this.$store.state.token;
515 http() 503 http()
516 .get( 504 .get(
517 "/getSectionsList", 505 "/getSectionsList",
518 { params: { classId: _id } }, 506 { params: { classId: _id } },
519 { 507 {
520 headers: { Authorization: "Bearer " + token } 508 headers: { Authorization: "Bearer " + token }
521 } 509 }
522 ) 510 )
523 .then(response => { 511 .then(response => {
524 this.addSection = response.data.data; 512 this.addSection = response.data.data;
525 // console.log("getSectionsList=====>", this.addSection); 513 // console.log("getSectionsList=====>", this.addSection);
526 }) 514 })
527 .catch(err => { 515 .catch(err => {
528 // console.log("err====>", err); 516 // console.log("err====>", err);
529 // this.$router.replace({ path: '/' }); 517 // this.$router.replace({ path: '/' });
530 }); 518 });
531 }, 519 },
532 pickFile() { 520 pickFile() {
533 this.$refs.image.click(); 521 this.$refs.image.click();
534 }, 522 },
535 523
536 onFilePicked(e) { 524 onFilePicked(e) {
537 // console.log(e) 525 // console.log(e)
538 const files = e.target.files; 526 const files = e.target.files;
539 this.imageData.upload = e.target.files[0]; 527 this.imageData.upload = e.target.files[0];
540 if (files[0] !== undefined) { 528 if (files[0] !== undefined) {
541 this.imageName = files[0].name; 529 this.imageName = files[0].name;
542 if (this.imageName.lastIndexOf(".") <= 0) { 530 if (this.imageName.lastIndexOf(".") <= 0) {
543 return; 531 return;
544 } 532 }
545 const fr = new FileReader(); 533 const fr = new FileReader();
546 fr.readAsDataURL(files[0]); 534 fr.readAsDataURL(files[0]);
547 fr.addEventListener("load", () => { 535 fr.addEventListener("load", () => {
548 this.imageUrl = fr.result; 536 this.imageUrl = fr.result;
549 this.imageFile = files[0]; // this is an image file that can be sent to server... 537 this.imageFile = files[0]; // this is an image file that can be sent to server...
550 this.imageData.imageUrl = URL.createObjectURL(this.imageFile); 538 this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
551 console.log("upload=======>", this.imageData.imageUrl); 539 console.log("upload=======>", this.imageData.imageUrl);
552 console.log("imageFile", this.imageFile); 540 console.log("imageFile", this.imageFile);
553 }); 541 });
554 } else { 542 } else {
555 this.imageName = ""; 543 this.imageName = "";
556 this.imageFile = ""; 544 this.imageFile = "";
557 this.imageUrl = ""; 545 this.imageUrl = "";
558 } 546 }
559 }, 547 },
560 getNewsList() { 548 getNewsList() {
561 this.showLoader = true; 549 this.showLoader = true;
562 var token = this.$store.state.token; 550 var token = this.$store.state.token;
563 http() 551 http()
564 .get("/getNewsList", { 552 .get("/getNewsList", {
565 headers: { Authorization: "Bearer " + token } 553 headers: { Authorization: "Bearer " + token }
566 }) 554 })
567 .then(response => { 555 .then(response => {
568 this.desserts = response.data.data; 556 this.desserts = response.data.data;
569 this.showLoader = false; 557 this.showLoader = false;
570 // console.log("getNewsList=====>",this.desserts) 558 // console.log("getNewsList=====>",this.desserts)
571 }) 559 })
572 .catch(err => { 560 .catch(err => {
573 // console.log("err====>", err); 561 // console.log("err====>", err);
574 this.showLoader = false; 562 this.showLoader = false;
575 this.$router.replace({ path: "/" }); 563 this.$router.replace({ path: "/" });
576 }); 564 });
577 }, 565 },
578 editItem(item) { 566 editItem(item) {
579 this.editedIndex = this.desserts.indexOf(item); 567 this.editedIndex = this.desserts.indexOf(item);
580 this.editedItem = Object.assign({}, item); 568 this.editedItem = Object.assign({}, item);
581 this.dialog = true; 569 this.dialog = true;
582 }, 570 },
583 profile(item) { 571 profile(item) {
584 this.editedIndex = this.desserts.indexOf(item); 572 this.editedIndex = this.desserts.indexOf(item);
585 this.editedItem = Object.assign({}, item); 573 this.editedItem = Object.assign({}, item);
586 this.dialog1 = true; 574 this.dialog1 = true;
587 }, 575 },
588 // report(item) {
589 // this.editedIndex = this.desserts.indexOf(item);
590 // this.editedItem = Object.assign({}, item);
591 // this.dialog2 = true;
592 // },
593
594 deleteItem(item) { 576 deleteItem(item) {
595 let deleteNews = { 577 let deleteNews = {
596 newsId: item._id 578 newsId: item._id
597 }; 579 };
598 http() 580 http()
599 .delete( 581 .delete(
600 "/deleteNews", 582 "/deleteNews",
601 confirm("Are you sure you want to delete this?") && { 583 confirm("Are you sure you want to delete this?") && {
602 params: deleteNews 584 params: deleteNews
603 } 585 }
604 ) 586 )
605 .then(response => { 587 .then(response => {
606 // console.log("deleteNews",deleteNews) 588 // console.log("deleteNews",deleteNews)
607 if ((this.snackbar = true)) { 589 if ((this.snackbar = true)) {
608 this.text = "Successfully delete Existing User"; 590 this.text = "Successfully delete Existing User";
609 } 591 }
610 this.getNewsList(); 592 this.getNewsList();
611 }) 593 })
612 .catch(error => { 594 .catch(error => {
613 // console.log(error); 595 // console.log(error);
614 }); 596 });
615 }, 597 },
616 activeTab(type) { 598 activeTab(type) {
617 switch (type) { 599 switch (type) {
618 case "existing": 600 case "existing":
619 this.newActive = false; 601 this.newActive = false;
620 this.isActive = true; 602 this.isActive = true;
621 break; 603 break;
622 604
623 default: 605 default:
624 this.newActive = true; 606 this.newActive = true;
625 this.isActive = false; 607 this.isActive = false;
626 break; 608 break;
627 } 609 }
628 }, 610 },
629 close() { 611 close() {
630 this.dialog = false; 612 this.dialog = false;
631 setTimeout(() => { 613 setTimeout(() => {
632 this.editedItem = Object.assign({}, this.defaultItem); 614 this.editedItem = Object.assign({}, this.defaultItem);
633 this.editedIndex = -1; 615 this.editedIndex = -1;
634 }, 300); 616 }, 300);
635 }, 617 },
636 close1() { 618 close1() {
637 this.dialog1 = false; 619 this.dialog1 = false;
638 }, 620 },
639 // close2() {
640 // this.dialog2 = false;
641 // },
642 submit() { 621 submit() {
643 if (this.$refs.form.validate()) { 622 if (this.$refs.form.validate()) {
644 let imageData = new FormData(); 623 let imageData = new FormData();
645 imageData.append("upload", this.imageFile); 624 imageData.append("upload", this.imageFile);
646 console.log(imageData); 625 console.log(imageData);
647 let addNewses = { 626 let addNewses = {
648 title: this.addNews.title, 627 title: this.addNews.title,
649 description: this.addNews.description, 628 description: this.addNews.description,
650 // imageData 629 // imageData
651 }; 630 };
652 http() 631 http()
653 .post("/createNews", addNewses) 632 .post("/createNews", addNewses)
654 .then(response => { 633 .then(response => {
655 // console.log(addNewses) 634 // console.log(addNewses)
656 if ((this.snackbar = true)) { 635 if ((this.snackbar = true)) {
657 this.text = "New user added successfully"; 636 this.text = "New user added successfully";
658 } 637 }
659 this.getNewsList(); 638 this.getNewsList();
660 this.clear(); 639 this.clear();
661 }) 640 })
662 .catch(error => { 641 .catch(error => {
663 // console.log(error); 642 // console.log(error);
664 if ((this.snackbar = true)) { 643 if ((this.snackbar = true)) {
665 this.text = error.response.data.message; 644 this.text = error.response.data.message;
666 } 645 }
667 }); 646 });
668 } 647 }
669 }, 648 },
670 mail() {}, 649 mail() {},
671 download() {}, 650 download() {},
672 clear() { 651 clear() {
673 this.$refs.form.reset(); 652 this.$refs.form.reset();
674 }, 653 },
675 save() { 654 save() {
676 let imageData = new FormData(); 655 let imageData = new FormData();
677 imageData.append("upload", this.imageFile); 656 imageData.append("upload", this.imageFile);
678 console.log(imageData); 657 console.log(imageData);
679 let editNews = { 658 let editNews = {
680 newsId: this.editedItem._id, 659 newsId: this.editedItem._id,
681 title: this.editedItem.title, 660 title: this.editedItem.title,
682 description: this.editedItem.description, 661 description: this.editedItem.description,
683 // imageData 662 // imageData
684 }; 663 };
685 http() 664 http()
686 .put("/updateNews", editNews) 665 .put("/updateNews", editNews)
687 .then(response => { 666 .then(response => {
688 // console.log("updateNews",updateNews); 667 // console.log("updateNews",updateNews);
689 if ((this.snackbar = true)) { 668 if ((this.snackbar = true)) {
690 this.text = "Successfully Edit Existing User"; 669 this.text = "Successfully Edit Existing User";
691 } 670 }
692 this.getNewsList(); 671 this.getNewsList();
693 }) 672 })
694 .catch(error => { 673 .catch(error => {
695 // console.log(error); 674 // console.log(error);
696 }); 675 });
697 this.close(); 676 this.close();
698 }, 677 },
699 handleDrawerToggle() { 678 handleDrawerToggle() {
700 window.getApp.$emit("APP_DRAWER_TOGGLED"); 679 window.getApp.$emit("APP_DRAWER_TOGGLED");
701 }, 680 },
702 handleFullScreen() { 681 handleFullScreen() {
703 Util.toggleFullScreen(); 682 Util.toggleFullScreen();
704 } 683 }
705 }, 684 },
706 mounted() { 685 mounted() {
707 this.getNewsList(); 686 this.getNewsList();
708 var token = this.$store.state.token; 687 var token = this.$store.state.token;
709 http() 688 http()
710 .get("/getClassesList", { 689 .get("/getClassesList", {
711 headers: { Authorization: "Bearer " + token } 690 headers: { Authorization: "Bearer " + token }
712 }) 691 })
713 .then(response => { 692 .then(response => {
714 this.addclass = response.data.data; 693 this.addclass = response.data.data;
715 // console.log("getClassesList=====>",this.addclass) 694 // console.log("getClassesList=====>",this.addclass)
716 }) 695 })
717 .catch(err => { 696 .catch(err => {
718 // console.log("err====>", err); 697 // console.log("err====>", err);
719 this.$router.replace({ path: "/" }); 698 this.$router.replace({ path: "/" });
720 }); 699 });
721 }, 700 },
722
723 // console.log("Id",this.$store.state.id)
724 // console.log("token",this.$store.state.token)
725 computed: { 701 computed: {
726 toolbarColor() { 702 toolbarColor() {
727 return this.$vuetify.options.extra.mainNav; 703 return this.$vuetify.options.extra.mainNav;
728 } 704 }
729 } 705 }
730 }; 706 };
731 </script> 707 </script>
732 <style scoped> 708 <style scoped>
733 .v-tabs__div { 709 .v-tabs__div {
734 text-transform: none; 710 text-transform: none;
735 } 711 }
736 .v-input__prepend-outer { 712 .v-input__prepend-outer {
737 margin-right: 0px !important; 713 margin-right: 0px !important;
738 } 714 }
739 .v-card__actions .v-btn { 715 .v-card__actions .v-btn {
740 margin: 0 15px; 716 margin: 0 15px;
741 min-width: 120px; 717 min-width: 120px;
742 } 718 }
743 .primary { 719 .primary {
744 background-color: #aaa !important; 720 background-color: #aaa !important;
745 border-color: #aaa !important; 721 border-color: #aaa !important;
746 } 722 }
747 h4 { 723 h4 {
748 background-repeat: no-repeat; 724 background-repeat: no-repeat;
749 padding: 8px; 725 padding: 8px;
750 margin: auto; 726 margin: auto;
751 font-size: 25px; 727 font-size: 25px;
752 } 728 }
753 #name { 729 #name {
754 position: absolute; 730 position: absolute;
755 left: 100px; 731 left: 100px;
756 top: 17px; 732 top: 17px;
757 } 733 }
758 #icon { 734 #icon {
759 position: absolute; 735 position: absolute;
760 right: 8px; 736 right: 8px;
761 top: 8px; 737 top: 8px;
762 } 738 }
763 #m { 739 #m {
764 position: relative; 740 position: relative;
765 left: 135px; 741 left: 135px;
766 top: -15px; 742 top: -15px;
767 } 743 }
768 #G { 744 #G {
769 position: absolute; 745 position: absolute;
770 top: 38px; 746 top: 38px;
771 color: white; 747 color: white;
772 } 748 }
773 #bt { 749 #bt {
774 position: relative; 750 position: relative;
775 top: -20px; 751 top: -20px;
776 left: 115px; 752 left: 115px;
777 } 753 }
778 #e { 754 #e {
779 position: relative; 755 position: relative;
780 top: 5px; 756 top: 5px;
781 right: -30px; 757 right: -30px;
782 height: 17px; 758 height: 17px;
783 cursor: pointer; 759 cursor: pointer;
784 } 760 }
785 #d { 761 #d {
786 position: relative; 762 position: relative;
787 top: 5px; 763 top: 5px;
788 right: -70px; 764 right: -70px;
789 height: 17px; 765 height: 17px;
790 cursor: pointer; 766 cursor: pointer;
791 } 767 }
792 #td { 768 #td {
793 border: 1px solid #dddddd; 769 border: 1px solid #dddddd;
794 text-align: left; 770 text-align: left;
795 padding: 8px; 771 padding: 8px;
796 } 772 }
797 #dialog { 773 #dialog {
798 height: 550px; 774 height: 550px;
799 } 775 }
800 .active { 776 .active {
801 background-color: black; 777 background-color: black;
802 color: white !important; 778 color: white !important;
803 } 779 }
804 .activebtn { 780 .activebtn {
805 color: black !important; 781 color: black !important;
806 } 782 }
807 #flex { 783 #flex {
808 height: 300px; 784 height: 300px;
809 } 785 }
810 .top { 786 .top {
811 margin-top: 100px; 787 margin-top: 100px;
812 } 788 }
813 .v-tabs__item a { 789 .v-tabs__item a {
814 font-size: 16px !important; 790 font-size: 16px !important;
815 } 791 }
816 @media screen and (max-width: 769px) { 792 @media screen and (max-width: 769px) {
817 .top { 793 .top {
818 margin-top: 0 !important; 794 margin-top: 0 !important;
819 } 795 }
820 .userSearch .v-icon { 796 .userSearch .v-icon {
821 font-size: 20px !important; 797 font-size: 20px !important;
822 margin-left: 20px; 798 margin-left: 20px;
823 } 799 }
824 } 800 }
825 @media screen and (max-width: 380px) { 801 @media screen and (max-width: 380px) {
826 .right { 802 .right {
827 float: none !important; 803 float: none !important;
828 } 804 }
829 .subheading { 805 .subheading {
830 font-size: 14px !important; 806 font-size: 14px !important;
831 } 807 }
832 .v-card__actions .v-btn { 808 .v-card__actions .v-btn {
833 margin: 0 0px; 809 margin: 0 0px;
834 min-width: 100px; 810 min-width: 100px;
835 } 811 }
836 /* .searchIcon .v-icon { 812 /* .searchIcon .v-icon {
837 font-size: 20px; 813 font-size: 20px;
838 margin-left: 20px; 814 margin-left: 20px;
839 } */ 815 } */
840 .subheading { 816 .subheading {
841 font-size: 12px !important; 817 font-size: 12px !important;
842 } 818 }
843 h5 { 819 h5 {
844 font-size: 13px; 820 font-size: 13px;
845 } 821 }
846 } 822 }
847 .v-icon { 823 .v-icon {
848 font-size: 30px; 824 font-size: 30px;
849 } 825 }
850 @media screen and (min-width: 1270px) { 826 @media screen and (min-width: 1270px) {
851 .hide { 827 .hide {
852 display: none; 828 display: none;
853 } 829 }
854 /* } 830 /* }
855 @media screen and (max-width: 962px) { 831 @media screen and (max-width: 962px) {
856 .imglogo{ 832 .imglogo{
857 position: absolute; 833 position: absolute;
858 top: 13px; 834 top: 13px;
859 left: 13px !important; 835 left: 13px !important;
860 width: 70px; 836 width: 70px;
861 height: 24px; 837 height: 24px;
862 } */ 838 } */
863 } 839 }
864 @media screen and (max-width: 420px) { 840 @media screen and (max-width: 420px) {
865 .userSearch .v-text-field .v-label { 841 .userSearch .v-text-field .v-label {
866 line-height: 24px !important; 842 line-height: 24px !important;
867 } 843 }
868 .userSearch .v-label { 844 .userSearch .v-label {
869 font-size: 13px !important; 845 font-size: 13px !important;
870 } 846 }
871 .v-list__tile { 847 .v-list__tile {
872 font-size: 14px; 848 font-size: 14px;
873 padding: 0 10px; 849 padding: 0 10px;
874 } 850 }
875 .name { 851 .name {
876 font-size: 15px; 852 font-size: 15px;
877 } 853 }
878 } 854 }
879 </style> 855 </style>
src/pages/Notification/notification.vue
Diff comments   View file @55f72b7
File was created 1 <template>
2 <v-app id="pages-dasboard">
3 <v-toolbar class="fixcolors" fixed app>
4 <v-toolbar-title class="ml-0 pl-3">
5 <v-toolbar-side-icon @click.stop="handleDrawerToggle" class="hide"></v-toolbar-side-icon>
6 </v-toolbar-title>
7
8 <!-- ****** SEARCH ALL EXISTING REMINDER ****** -->
9
10 <v-flex xs7 sm3 class="userSearch">
11 <v-text-field
12 flat
13 append-icon="search"
14 label="Find your Notifictaion"
15 v-model="search"
16 color="white"
17 dark
18 ></v-text-field>
19 </v-flex>
20 <v-spacer></v-spacer>
21 <v-menu offset-y origin="center center" :nudge-bottom="10" transition="scale-transition">
22 <v-btn icon large flat slot="activator">
23 <v-avatar size="40px">
24 <img src="/static/icon/user.png">
25 </v-avatar>
26 </v-btn>
27 <v-list class="pa-0">
28 <v-list-tile
29 v-for="(item,index) in items"
30 :to="!item.href ? { name: item.name } : null"
31 :href="item.href"
32 @click="item.click"
33 ripple="ripple"
34 :disabled="item.disabled"
35 :target="item.target"
36 rel="noopener"
37 :key="index"
38 >
39 <v-list-tile-action v-if="item.icon">
40 <v-icon>{{ item.icon }}</v-icon>
41 </v-list-tile-action>
42 <v-list-tile-content>
43 <v-list-tile-title>{{ item.title }}</v-list-tile-title>
44 </v-list-tile-content>
45 </v-list-tile>
46 </v-list>
47 </v-menu>
48 </v-toolbar>
49 <v-tabs grow slider-color="black">
50 <v-tab
51 ripple
52 @click="activeTab('existing')"
53 v-bind:class="{ active: isActive }"
54 id="tab"
55 class="subheading"
56 >Existing Notifictaion</v-tab>
57 <v-tab
58 ripple
59 @click="activeTab('new')"
60 v-bind:class="{ active: newActive }"
61 id="tab1"
62 User
63 class="subheading"
64 >Add New Notifictaion</v-tab>
65
66 <!-- ****** EDITS REMINDER DETAILS ****** -->
67
68 <v-tab-item>
69 <v-snackbar
70 :timeout="timeout"
71 :top="y === 'top'"
72 :right="x === 'right'"
73 :vertical="mode === 'vertical'"
74 v-model="snackbar"
75 color="success"
76 >{{ text }}</v-snackbar>
77 <v-dialog v-model="dialog" max-width="600px">
78 <v-flex xs12 sm12 class="">
79 <v-toolbar color="white">
80 <v-spacer></v-spacer>
81 <v-toolbar-title>Edit Notifictaion</v-toolbar-title>
82 <v-spacer></v-spacer>
83 </v-toolbar>
84 <v-card flat>
85 <v-form ref="form">
86 <v-container fluid>
87 <v-layout>
88 <v-flex
89 xs12
90 class="text-xs-center text-sm-center text-md-center text-lg-center mr-4"
91 >
92 <v-avatar size="100px">
93 <img src="/static/icon/user.png" v-if="!imageUrl">
94 </v-avatar>
95 <input
96 type="file"
97 style="display: none"
98 ref="image"
99 accept="image/*"
100 @change="onFilePicked"
101 >
102 <img
103 :src="imageData.imageUrl"
104 height="150"
105 v-if="imageUrl"
106 style="border-radius:50%; width:200px"
107 >
108 </v-flex>
109 </v-layout>
110 <v-flex xs12 sm12>
111 <v-layout>
112 <v-flex xs4 class="pt-4 subheading">
113 <label class="right">Title:</label>
114 </v-flex>
115 <v-flex xs5 class="ml-3">
116 <v-text-field
117 v-model="editedItem.title"
118 placeholder="fill your Title"
119 name="name"
120 type="text"
121 ></v-text-field>
122 </v-flex>
123 </v-layout>
124 </v-flex>
125 <v-flex xs12 sm12>
126 <v-layout>
127 <v-flex xs4 class="pt-4 subheading">
128 <label class="right">Description:</label>
129 </v-flex>
130 <v-flex xs5 class="ml-3">
131 <v-text-field
132 placeholder="fill your Description"
133 v-model="editedItem.description"
134 type="text"
135 ></v-text-field>
136 </v-flex>
137 </v-layout>
138 </v-flex>
139 <v-layout>
140 <v-flex xs12 sm10 offset-sm1>
141 <v-card-actions>
142 <v-btn round dark @click.native="close">Cancel</v-btn>
143 <v-spacer></v-spacer>
144 <v-btn round dark @click="save">Save</v-btn>
145 </v-card-actions>
146 </v-flex>
147 </v-layout>
148 </v-container>
149 </v-form>
150 </v-card>
151 </v-flex>
152 </v-dialog>
153
154 <!-- ****** PROFILE VIEW REMINDER DEATILS ****** -->
155
156 <v-dialog v-model="dialog1" max-width="600px">
157 <v-toolbar color="white">
158 <v-spacer></v-spacer>
159 <v-toolbar-title>Notification</v-toolbar-title>
160 <v-spacer></v-spacer>
161 <v-icon @click="close1">close</v-icon>
162 </v-toolbar>
163 <v-card>
164 <v-flex align-center justify-center layout text-xs-center>
165 <v-avatar size="50px" style="position:absolute; top:20px;">
166 <img src="/static/icon/user.png">
167 </v-avatar>
168 </v-flex>
169 <v-card-text>
170 <v-container grid-list-md>
171 <v-layout wrap>
172 <v-flex>
173 <br>
174 <br>
175 <v-layout>
176 <v-flex xs5 sm6>
177 <h5 class="right my-1">Title:</h5>
178 </v-flex>
179 <v-flex sm6 xs8>
180 <h5 class="my-1">{{ editedItem.title }}</h5>
181 </v-flex>
182 </v-layout>
183 <v-layout>
184 <v-flex xs5 sm6>
185 <h5 class="right my-1">Description:</h5>
186 </v-flex>
187 <v-flex sm6 xs8>
188 <h5 class="my-1">{{ editedItem.description }}</h5>
189 </v-flex>
190 </v-layout>
191 </v-flex>
192 </v-layout>
193 </v-container>
194 </v-card-text>
195 </v-card>
196 </v-dialog>
197 <v-snackbar
198 :timeout="timeout"
199 :top="y === 'top'"
200 :right="x === 'right'"
201 :vertical="mode === 'vertical'"
202 v-model="snackbar"
203 color="success"
204 >{{ text }}</v-snackbar>
205
206 <!-- ****** EXISTING-USERS REMINDER TABLE ****** -->
207
208 <v-data-table
209 :headers="headers"
210 :items="desserts"
211 :pagination.sync="pagination"
212 :search="search"
213 >
214 <template slot="items" slot-scope="props">
215 <td id="td" class="text-xs-center">{{ props.index}}</td>
216 <td id="td" class="text-xs-center">{{ props.item.title}}</td>
217 <td id="td" class="text-xs-center">{{ props.item.description}}</td>
218
219 <td class="text-xs-center">
220 <span>
221 <img
222 style="cursor:pointer; width:25px; height:18px; "
223 class="mr-5"
224 @click="profile(props.item)"
225 src="/static/icon/eye1.png"
226 >
227 <img
228 style="cursor:pointer; width:20px; height:18px; "
229 class="mr-5"
230 @click="editItem(props.item)"
231 src="/static/icon/edit1.png"
232 >
233 <img
234 style="cursor:pointer; height:20px; "
235 class="mr-5"
236 @click="deleteItem(props.item)"
237 src="/static/icon/delete1.png"
238 >
239 </span>
240 </td>
241 </template>
242 <v-alert
243 slot="no-results"
244 :value="true"
245 color="error"
246 icon="warning"
247 >Your search for "{{ search }}" found no results.</v-alert>
248 </v-data-table>
249 </v-tab-item>
250
251 <!-- ****** ADD MULTIPLE REMINDER ****** -->
252
253 <v-tab-item>
254 <v-container>
255 <v-snackbar
256 :timeout="timeout"
257 :top="y === 'top'"
258 :right="x === 'right'"
259 :vertical="mode === 'vertical'"
260 v-model="snackbar"
261 color="success"
262 >{{ text }}</v-snackbar>
263 <v-flex xs12 sm12 class="my-4">
264 <v-card flat>
265 <v-form ref="form" v-model="valid" lazy-validation>
266 <v-container fluid>
267 <v-layout>
268 <v-flex
269 xs12
270 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4"
271 >
272 <v-avatar size="100px">
273 <img src="/static/icon/user.png" v-if="!imageUrl">
274 </v-avatar>
275 <input
276 type="file"
277 style="display: none"
278 ref="image"
279 accept="image/*"
280 @change="onFilePicked"
281 >
282 <img
283 :src="imageData.imageUrl"
284 height="150"
285 v-if="imageUrl"
286 style="border-radius:50%; width:200px"
287 >
288 </v-flex>
289 </v-layout>
290 <v-flex xs12>
291 <v-layout>
292 <v-flex xs4 class="pt-4 subheading">
293 <label class="right">Title:</label>
294 </v-flex>
295 <v-flex xs4 class="ml-3">
296 <v-text-field
297 v-model="addNotification.title"
298 placeholder="fill your Title"
299 type="text"
300 :rules="titleRules"
301 required
302 ></v-text-field>
303 </v-flex>
304 </v-layout>
305 </v-flex>
306 <v-flex xs12>
307 <v-layout>
308 <v-flex xs4 class="pt-4 subheading">
309 <label class="right">Description:</label>
310 </v-flex>
311 <v-flex xs4 class="ml-3">
312 <v-text-field
313 placeholder="fill your Description"
314 :rules="descriptionRules"
315 v-model="addNotification.description"
316 type="text"
317 required
318 ></v-text-field>
319 </v-flex>
320 </v-layout>
321 </v-flex>
322 <v-layout>
323 <v-flex xs12 sm6 offset-sm3>
324 <v-card-actions>
325 <v-btn @click="clear" round dark>clear</v-btn>
326 <v-spacer></v-spacer>
327 <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
328 </v-card-actions>
329 </v-flex>
330 </v-layout>
331 </v-container>
332 </v-form>
333 </v-card>
334 </v-flex>
335 </v-container>
336 </v-tab-item>
337 </v-tabs>
338 <div class="loader" v-if="showLoader">
339 <v-progress-circular indeterminate color="white"></v-progress-circular>
340 </div>
341 </v-app>
342 </template>
343
344 <script>
345 import http from "@/Services/http.js";
346 import Util from "@/util";
347
348 export default {
349 data: () => ({
350 snackbar: false,
351 y: "top",
352 x: "right",
353 mode: "",
354 timeout: 3000,
355 text: "",
356 loading: false,
357 date: null,
358 search: "",
359 showLoader:false,
360 dialog: false,
361 dialog1: false,
362 valid: true,
363 isActive: true,
364 newActive: false,
365 pagination: {
366 rowsPerPage: 15
367 },
368 imageData: {},
369 imageName: "",
370 imageUrl: "",
371 imageFile: "",
372 titleRules: [v => !!v || " Tilte is required"],
373 descriptionRules: [v => !!v || " Description is required"],
374 headers: [
375 {
376 text: "No",
377 align: "center",
378 sortable: false,
379 value: "No"
380 },
381 { text: "Title", value: "title", sortable: false, align: "center" },
382 { text: "Description", value: "description", sortable: false, align: "center" },
383 { text: "Action", value: "", sortable: false, align: "center" }
384 ],
385 desserts: [],
386 editedIndex: -1,
387 addNotification:{
388 title:'',
389 description:''
390 },
391 editedItem: {
392 title:'',
393 description:''
394 },
395 defaultItem: {
396 title:'',
397 description:''
398 },
399 userName: "",
400 items: [
401 {
402 href: "/changepassword",
403 title: "Change Password",
404 click: e => {
405 console.log(e);
406 }
407 },
408 {
409 href: "#",
410 title: "Logout",
411 click: e => {
412 window.getApp.$emit("APP_LOGOUT");
413 }
414 }
415 ]
416 }),
417 methods: {
418 pickFile() {
419 this.$refs.image.click();
420 },
421
422 onFilePicked(e) {
423 // console.log(e)
424 const files = e.target.files;
425 this.imageData.upload = e.target.files[0];
426 if (files[0] !== undefined) {
427 this.imageName = files[0].name;
428 if (this.imageName.lastIndexOf(".") <= 0) {
429 return;
430 }
431 const fr = new FileReader();
432 fr.readAsDataURL(files[0]);
433 fr.addEventListener("load", () => {
434 this.imageUrl = fr.result;
435 this.imageFile = files[0]; // this is an image file that can be sent to server...
436 this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
437 console.log("upload=======>", this.imageData.imageUrl);
438 console.log("imageFile", this.imageFile);
439 });
440 } else {
441 this.imageName = "";
442 this.imageFile = "";
443 this.imageUrl = "";
444 }
445 },
446 getNotifications() {
447 this.showLoader = true;
448 var token = this.$store.state.token;
449 http()
450 .get("/getNotificationsList", {
451 headers: { Authorization: "Bearer " + token }
452 })
453 .then(response => {
454 this.desserts = response.data.data;
455 this.showLoader = false;
456 // console.log("getNotifications=====>",this.desserts)
457 })
458 .catch(err => {
459 // console.log("err====>", err);
460 this.showLoader = false;
461 this.$router.replace({ path: "/" });
462 });
463 },
464 editItem(item) {
465 this.editedIndex = this.desserts.indexOf(item);
466 this.editedItem = Object.assign({}, item);
467 this.dialog = true;
468 },
469 profile(item) {
470 this.editedIndex = this.desserts.indexOf(item);
471 this.editedItem = Object.assign({}, item);
472 this.dialog1 = true;
473 },
474
475 deleteItem(item) {
476 let deleteNotification = {
477 notificationId: item._id
478 };
479 http()
480 .delete(
481 "/deleteNotification",
482 confirm("Are you sure you want to delete this?") && {
483 params: deleteNotification
484 }
485 )
486 .then(response => {
487 // console.log("deleteNotification",deleteNotification)
488 if ((this.snackbar = true)) {
489 this.text = "Successfully Delete Notification";
490 }
491 this.getNotifications();
492 })
493 .catch(error => {
494 console.log(error);
495 });
496 },
497 activeTab(type) {
498 switch (type) {
499 case "existing":
500 this.newActive = false;
501 this.isActive = true;
502 break;
503
504 default:
505 this.newActive = true;
506 this.isActive = false;
507 break;
508 }
509 },
510 close() {
511 this.dialog = false;
512 setTimeout(() => {
513 this.editedItem = Object.assign({}, this.defaultItem);
514 this.editedIndex = -1;
515 }, 300);
516 },
517 close1() {
518 this.dialog1 = false;
519 },
520 submit() {
521 if (this.$refs.form.validate()) {
522 let imageData = new FormData();
523 imageData.append("upload", this.imageFile);
524 console.log(imageData);
525 let create = {
526 title: this.addNotification.title,
527 description: this.addNotification.description,
528 // imageData
529 };
530 console.log(create)
531 http()
532 .post("/createNotification", create)
533 .then(response => {
534 console.log(create)
535 if ((this.snackbar = true)) {
536 this.text = "New user added successfully";
537 }
538 this.getNotifications();
539 this.clear();
540 })
541 .catch(error => {
542 // console.log(error);
543 if ((this.snackbar = true)) {
544 this.text = error.response.data.message;
545 }
546 });
547 }
548 },
549 mail() {},
550 download() {},
551 clear() {
552 this.$refs.form.reset();
553 },
554 save() {
555 let imageData = new FormData();
556 imageData.append("upload", this.imageFile);
557 console.log(imageData);
558 let editNotification = {
559 notificationId:this.editedItem._id,
560 title: this.editedItem.title,
561 description: this.editedItem.description,
562 // imageData
563 };
564 http()
565 .put("/updateNotification", editNotification)
566 .then(response => {
567 // console.log("editNotification",editNotification);
568 if ((this.snackbar = true)) {
569 this.text = "Successfully Edit Notification";
570 }
571 this.getNotifications();
572 })
573 .catch(error => {
574 // console.log(error);
575 });
576 this.close();
577 },
578 handleDrawerToggle() {
579 window.getApp.$emit("APP_DRAWER_TOGGLED");
580 },
581 handleFullScreen() {
582 Util.toggleFullScreen();
583 }
584 },
585 mounted() {
586 this.getNotifications();
587 },
588 computed: {
589 toolbarColor() {
590 return this.$vuetify.options.extra.mainNav;
591 }
592 }
593 };
594 </script>
595 <style scoped>
596 .v-tabs__div {
597 text-transform: none;
598 }
599 .v-input__prepend-outer {
600 margin-right: 0px !important;
601 }
602 .v-card__actions .v-btn {
603 margin: 0 15px;
604 min-width: 120px;
605 }
606 .primary {
607 background-color: #aaa !important;
608 border-color: #aaa !important;
609 }
610 h4 {
611 background-repeat: no-repeat;
612 padding: 8px;
613 margin: auto;
614 font-size: 25px;
615 }
616 #name {
617 position: absolute;
618 left: 100px;
619 top: 17px;
620 }
621 #icon {
622 position: absolute;
623 right: 8px;
624 top: 8px;
625 }
626 #m {
627 position: relative;
628 left: 135px;
629 top: -15px;
630 }
631 #G {
632 position: absolute;
633 top: 38px;
634 color: white;
635 }
636 #bt {
637 position: relative;
638 top: -20px;
639 left: 115px;
640 }
641 #e {
642 position: relative;
643 top: 5px;
644 right: -30px;
645 height: 17px;
646 cursor: pointer;
647 }
648 #d {
649 position: relative;
650 top: 5px;
651 right: -70px;
652 height: 17px;
653 cursor: pointer;
654 }
655 #td {
656 border: 1px solid #dddddd;
657 text-align: left;
658 padding: 8px;
659 }
660 #dialog {
661 height: 550px;
662 }
663 .active {
664 background-color: black;
665 color: white !important;
666 }
667 .activebtn {
668 color: black !important;
669 }
670 #flex {
671 height: 300px;
672 }
673 .top {
674 margin-top: 100px;
675 }
676 .v-tabs__item a {
677 font-size: 16px !important;
678 }
679 @media screen and (max-width: 769px) {
680 .top {
681 margin-top: 0 !important;
682 }
683 .userSearch .v-icon {
684 font-size: 20px !important;
685 margin-left: 20px;
686 }
687 }
688 @media screen and (max-width: 380px) {
689 .right {
690 float: none !important;
691 }
692 .subheading {
693 font-size: 14px !important;
694 }
695 .v-card__actions .v-btn {
696 margin: 0 0px;
697 min-width: 100px;
698 }
699 /* .searchIcon .v-icon {
700 font-size: 20px;
701 margin-left: 20px;
702 } */
703 .subheading {
704 font-size: 12px !important;
705 }
706 h5 {
707 font-size: 13px;
708 }
709 }
710 .v-icon {
711 font-size: 30px;
712 }
713 @media screen and (min-width: 1270px) {
714 .hide {
715 display: none;
716 }
717 /* }
718 @media screen and (max-width: 962px) {
719 .imglogo{
720 position: absolute;
721 top: 13px;
722 left: 13px !important;
723 width: 70px;
724 height: 24px;
725 } */
726 }
727 @media screen and (max-width: 420px) {
728 .userSearch .v-text-field .v-label {
729 line-height: 24px !important;
730 }
731 .userSearch .v-label {
732 font-size: 13px !important;
733 }
734 .v-list__tile {
735 font-size: 14px;
736 padding: 0 10px;
737 }
738 .name {
739 font-size: 15px;
740 }
741 }
742 </style>
src/pages/Reminder/reminder.vue
Diff comments   View file @55f72b7
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <v-toolbar class="fixcolors" fixed app> 3 <v-toolbar class="fixcolors" fixed app>
4 <v-toolbar-title class="ml-0 pl-3"> 4 <v-toolbar-title class="ml-0 pl-3">
5 <v-toolbar-side-icon @click.stop="handleDrawerToggle" class="hide"></v-toolbar-side-icon> 5 <v-toolbar-side-icon @click.stop="handleDrawerToggle" class="hide"></v-toolbar-side-icon>
6 </v-toolbar-title> 6 </v-toolbar-title>
7 <!-- ****** SEARCH ALL EXISTING REMINDER ****** --> 7 <!-- ****** SEARCH ALL EXISTING REMINDER ****** -->
8 <v-flex xs7 sm3 class="userSearch"> 8 <v-flex xs7 sm3 class="userSearch">
9 <v-text-field 9 <v-text-field
10 flat 10 flat
11 append-icon="search" 11 append-icon="search"
12 label="Find your Teachers" 12 label="Find your Reminder Data"
13 v-model="search" 13 v-model="search"
14 color="white" 14 color="white"
15 dark 15 dark
16 ></v-text-field> 16 ></v-text-field>
17 </v-flex> 17 </v-flex>
18 <v-spacer></v-spacer> 18 <v-spacer></v-spacer>
19 <v-menu offset-y origin="center center" :nudge-bottom="10" transition="scale-transition"> 19 <v-menu offset-y origin="center center" :nudge-bottom="10" transition="scale-transition">
20 <v-btn icon large flat slot="activator"> 20 <v-btn icon large flat slot="activator">
21 <v-avatar size="40px"> 21 <v-avatar size="40px">
22 <img src="/static/icon/user.png"> 22 <img src="/static/icon/user.png">
23 </v-avatar> 23 </v-avatar>
24 </v-btn> 24 </v-btn>
25 <v-list class="pa-0"> 25 <v-list class="pa-0">
26 <v-list-tile 26 <v-list-tile
27 v-for="(item,index) in items" 27 v-for="(item,index) in items"
28 :to="!item.href ? { name: item.name } : null" 28 :to="!item.href ? { name: item.name } : null"
29 :href="item.href" 29 :href="item.href"
30 @click="item.click" 30 @click="item.click"
31 ripple="ripple" 31 ripple="ripple"
32 :disabled="item.disabled" 32 :disabled="item.disabled"
33 :target="item.target" 33 :target="item.target"
34 rel="noopener" 34 rel="noopener"
35 :key="index" 35 :key="index"
36 > 36 >
37 <v-list-tile-action v-if="item.icon"> 37 <v-list-tile-action v-if="item.icon">
38 <v-icon>{{ item.icon }}</v-icon> 38 <v-icon>{{ item.icon }}</v-icon>
39 </v-list-tile-action> 39 </v-list-tile-action>
40 <v-list-tile-content> 40 <v-list-tile-content>
41 <v-list-tile-title>{{ item.title }}</v-list-tile-title> 41 <v-list-tile-title>{{ item.title }}</v-list-tile-title>
42 </v-list-tile-content> 42 </v-list-tile-content>
43 </v-list-tile> 43 </v-list-tile>
44 </v-list> 44 </v-list>
45 </v-menu> 45 </v-menu>
46 </v-toolbar> 46 </v-toolbar>
47 <v-tabs grow slider-color="black"> 47 <v-tabs grow slider-color="black">
48 <v-tab 48 <v-tab
49 ripple 49 ripple
50 @click="activeTab('existing')" 50 @click="activeTab('existing')"
51 v-bind:class="{ active: isActive }" 51 v-bind:class="{ active: isActive }"
52 id="tab" 52 id="tab"
53 class="subheading" 53 class="subheading"
54 >Existing Reminder</v-tab> 54 >Existing Reminder</v-tab>
55 <v-tab 55 <v-tab
56 ripple 56 ripple
57 @click="activeTab('new')" 57 @click="activeTab('new')"
58 v-bind:class="{ active: newActive }" 58 v-bind:class="{ active: newActive }"
59 id="tab1" 59 id="tab1"
60 User 60 User
61 class="subheading" 61 class="subheading"
62 >Add New Reminder</v-tab> 62 >Add New Reminder</v-tab>
63 63
64 <!-- ****** EDITS REMINDER DETAILS ****** --> 64 <!-- ****** EDITS REMINDER DETAILS ****** -->
65 65
66 <v-tab-item> 66 <v-tab-item>
67 <v-snackbar 67 <v-snackbar
68 :timeout="timeout" 68 :timeout="timeout"
69 :top="y === 'top'" 69 :top="y === 'top'"
70 :right="x === 'right'" 70 :right="x === 'right'"
71 :vertical="mode === 'vertical'" 71 :vertical="mode === 'vertical'"
72 v-model="snackbar" 72 v-model="snackbar"
73 color="success" 73 color="success"
74 >{{ text }}</v-snackbar> 74 >{{ text }}</v-snackbar>
75 <v-dialog v-model="dialog" max-width="600px"> 75 <v-dialog v-model="dialog" max-width="600px">
76 <v-flex xs12 sm12 class=""> 76 <v-flex xs12 sm12 class="">
77 <v-toolbar color="white"> 77 <v-toolbar color="white">
78 <v-spacer></v-spacer> 78 <v-spacer></v-spacer>
79 <v-toolbar-title>Edit Profile</v-toolbar-title> 79 <v-toolbar-title>Edit Profile</v-toolbar-title>
80 <v-spacer></v-spacer> 80 <v-spacer></v-spacer>
81 </v-toolbar> 81 </v-toolbar>
82 <v-card flat> 82 <v-card flat>
83 <v-form ref="form"> 83 <v-form ref="form">
84 <v-container fluid> 84 <v-container fluid>
85 <v-layout> 85 <v-layout>
86 <v-flex 86 <v-flex
87 xs12 87 xs12
88 class="text-xs-center text-sm-center text-md-center text-lg-center mr-4" 88 class="text-xs-center text-sm-center text-md-center text-lg-center mr-4"
89 > 89 >
90 <v-avatar size="100px"> 90 <v-avatar size="100px">
91 <img src="/static/icon/user.png" v-if="!imageUrl"> 91 <img src="/static/icon/user.png" v-if="!imageUrl">
92 </v-avatar> 92 </v-avatar>
93 <input 93 <input
94 type="file" 94 type="file"
95 style="display: none" 95 style="display: none"
96 ref="image" 96 ref="image"
97 accept="image/*" 97 accept="image/*"
98 @change="onFilePicked" 98 @change="onFilePicked"
99 > 99 >
100 <img 100 <img
101 :src="imageData.imageUrl" 101 :src="imageData.imageUrl"
102 height="150" 102 height="150"
103 v-if="imageUrl" 103 v-if="imageUrl"
104 style="border-radius:50%; width:200px" 104 style="border-radius:50%; width:200px"
105 > 105 >
106 </v-flex> 106 </v-flex>
107 </v-layout> 107 </v-layout>
108 <v-flex xs12 sm12> 108 <v-flex xs12 sm12>
109 <v-layout> 109 <v-layout>
110 <v-flex xs4 class="pt-4 subheading"> 110 <v-flex xs4 class="pt-4 subheading">
111 <label class="right">Title:</label> 111 <label class="right">Title:</label>
112 </v-flex> 112 </v-flex>
113 <v-flex xs5 class="ml-3"> 113 <v-flex xs5 class="ml-3">
114 <v-text-field 114 <v-text-field
115 v-model="editedItem.title" 115 v-model="editedItem.title"
116 placeholder="fill your Title" 116 placeholder="fill your Title"
117 name="name" 117 name="name"
118 type="text" 118 type="text"
119 ></v-text-field> 119 ></v-text-field>
120 </v-flex> 120 </v-flex>
121 </v-layout> 121 </v-layout>
122 </v-flex> 122 </v-flex>
123 <v-flex xs12 sm12> 123 <v-flex xs12 sm12>
124 <v-layout> 124 <v-layout>
125 <v-flex xs4 class="pt-4 subheading"> 125 <v-flex xs4 class="pt-4 subheading">
126 <label class="right">Description:</label> 126 <label class="right">Description:</label>
127 </v-flex> 127 </v-flex>
128 <v-flex xs5 class="ml-3"> 128 <v-flex xs5 class="ml-3">
129 <v-text-field 129 <v-text-field
130 placeholder="fill your Description" 130 placeholder="fill your Description"
131 v-model="editedItem.description" 131 v-model="editedItem.description"
132 type="text" 132 type="text"
133 ></v-text-field> 133 ></v-text-field>
134 </v-flex> 134 </v-flex>
135 </v-layout> 135 </v-layout>
136 </v-flex> 136 </v-flex>
137 <v-layout> 137 <v-layout>
138 <v-flex xs12 sm10 offset-sm1> 138 <v-flex xs12 sm10 offset-sm1>
139 <v-card-actions> 139 <v-card-actions>
140 <v-btn round dark @click.native="close">Cancel</v-btn> 140 <v-btn round dark @click.native="close">Cancel</v-btn>
141 <v-spacer></v-spacer> 141 <v-spacer></v-spacer>
142 <v-btn round dark @click="save">Save</v-btn> 142 <v-btn round dark @click="save">Save</v-btn>
143 </v-card-actions> 143 </v-card-actions>
144 </v-flex> 144 </v-flex>
145 </v-layout> 145 </v-layout>
146 </v-container> 146 </v-container>
147 </v-form> 147 </v-form>
148 </v-card> 148 </v-card>
149 </v-flex> 149 </v-flex>
150 </v-dialog> 150 </v-dialog>
151 151
152 <!-- ****** PROFILE VIEW REMINDER DEATILS ****** --> 152 <!-- ****** PROFILE VIEW REMINDER DEATILS ****** -->
153 <v-dialog v-model="dialog1" max-width="600px"> 153 <v-dialog v-model="dialog1" max-width="600px">
154 <v-toolbar color="white"> 154 <v-toolbar color="white">
155 <v-spacer></v-spacer> 155 <v-spacer></v-spacer>
156 <v-toolbar-title>Profile</v-toolbar-title> 156 <v-toolbar-title>Profile</v-toolbar-title>
157 <v-spacer></v-spacer> 157 <v-spacer></v-spacer>
158 <v-icon @click="close1">close</v-icon> 158 <v-icon @click="close1">close</v-icon>
159 </v-toolbar> 159 </v-toolbar>
160 <v-card> 160 <v-card>
161 <v-flex align-center justify-center layout text-xs-center> 161 <v-flex align-center justify-center layout text-xs-center>
162 <v-avatar size="50px" style="position:absolute; top:20px;"> 162 <v-avatar size="50px" style="position:absolute; top:20px;">
163 <img src="/static/icon/user.png"> 163 <img src="/static/icon/user.png">
164 </v-avatar> 164 </v-avatar>
165 </v-flex> 165 </v-flex>
166 <v-card-text> 166 <v-card-text>
167 <v-container grid-list-md> 167 <v-container grid-list-md>
168 <v-layout wrap> 168 <v-layout wrap>
169 <v-flex> 169 <v-flex>
170 <br> 170 <br>
171 <br> 171 <br>
172 <v-layout> 172 <v-layout>
173 <v-flex xs5 sm6> 173 <v-flex xs5 sm6>
174 <h5 class="right my-1">Title:</h5> 174 <h5 class="right my-1">Title:</h5>
175 </v-flex> 175 </v-flex>
176 <v-flex sm6 xs8> 176 <v-flex sm6 xs8>
177 <h5 class="my-1">{{ editedItem.title }}</h5> 177 <h5 class="my-1">{{ editedItem.title }}</h5>
178 </v-flex> 178 </v-flex>
179 </v-layout> 179 </v-layout>
180 <v-layout> 180 <v-layout>
181 <v-flex xs5 sm6> 181 <v-flex xs5 sm6>
182 <h5 class="right my-1">Description:</h5> 182 <h5 class="right my-1">Description:</h5>
183 </v-flex> 183 </v-flex>
184 <v-flex sm6 xs8> 184 <v-flex sm6 xs8>
185 <h5 class="my-1">{{ editedItem.description }}</h5> 185 <h5 class="my-1">{{ editedItem.description }}</h5>
186 </v-flex> 186 </v-flex>
187 </v-layout> 187 </v-layout>
188 </v-flex> 188 </v-flex>
189 </v-layout> 189 </v-layout>
190 </v-container> 190 </v-container>
191 </v-card-text> 191 </v-card-text>
192 </v-card> 192 </v-card>
193 </v-dialog> 193 </v-dialog>
194 194
195 <v-snackbar 195 <v-snackbar
196 :timeout="timeout" 196 :timeout="timeout"
197 :top="y === 'top'" 197 :top="y === 'top'"
198 :right="x === 'right'" 198 :right="x === 'right'"
199 :vertical="mode === 'vertical'" 199 :vertical="mode === 'vertical'"
200 v-model="snackbar" 200 v-model="snackbar"
201 color="success" 201 color="success"
202 >{{ text }}</v-snackbar> 202 >{{ text }}</v-snackbar>
203 203
204 <!-- ****** EXISTING-USERS REMINDER TABLE ****** --> 204 <!-- ****** EXISTING-USERS REMINDER TABLE ****** -->
205 <v-data-table 205 <v-data-table
206 :headers="headers" 206 :headers="headers"
207 :items="desserts" 207 :items="desserts"
208 :pagination.sync="pagination" 208 :pagination.sync="pagination"
209 :search="search" 209 :search="search"
210 > 210 >
211 <template slot="items" slot-scope="props"> 211 <template slot="items" slot-scope="props">
212 <td id="td" class="text-xs-center">{{ props.index}}</td> 212 <td id="td" class="text-xs-center">{{ props.index}}</td>
213 <td id="td" class="text-xs-center">{{ props.item.title}}</td> 213 <td id="td" class="text-xs-center">{{ props.item.title}}</td>
214 <td id="td" class="text-xs-center">{{ props.item.description}}</td> 214 <td id="td" class="text-xs-center">{{ props.item.description}}</td>
215 215
216 <td class="text-xs-center"> 216 <td class="text-xs-center">
217 <span> 217 <span>
218 <img 218 <img
219 style="cursor:pointer; width:25px; height:18px; " 219 style="cursor:pointer; width:25px; height:18px; "
220 class="mr-5" 220 class="mr-5"
221 @click="profile(props.item)" 221 @click="profile(props.item)"
222 src="/static/icon/eye1.png" 222 src="/static/icon/eye1.png"
223 > 223 >
224 <img 224 <img
225 style="cursor:pointer; width:20px; height:18px; " 225 style="cursor:pointer; width:20px; height:18px; "
226 class="mr-5" 226 class="mr-5"
227 @click="editItem(props.item)" 227 @click="editItem(props.item)"
228 src="/static/icon/edit1.png" 228 src="/static/icon/edit1.png"
229 > 229 >
230 <img 230 <img
231 style="cursor:pointer; height:20px; " 231 style="cursor:pointer; height:20px; "
232 class="mr-5" 232 class="mr-5"
233 @click="deleteItem(props.item)" 233 @click="deleteItem(props.item)"
234 src="/static/icon/delete1.png" 234 src="/static/icon/delete1.png"
235 > 235 >
236 </span> 236 </span>
237 </td> 237 </td>
238 </template> 238 </template>
239 <v-alert 239 <v-alert
240 slot="no-results" 240 slot="no-results"
241 :value="true" 241 :value="true"
242 color="error" 242 color="error"
243 icon="warning" 243 icon="warning"
244 >Your search for "{{ search }}" found no results.</v-alert> 244 >Your search for "{{ search }}" found no results.</v-alert>
245 </v-data-table> 245 </v-data-table>
246 </v-tab-item> 246 </v-tab-item>
247 247
248 <!-- ****** ADD MULTIPLE REMINDER ****** --> 248 <!-- ****** ADD MULTIPLE REMINDER ****** -->
249 249
250 <v-tab-item> 250 <v-tab-item>
251 <v-container> 251 <v-container>
252 <v-snackbar 252 <v-snackbar
253 :timeout="timeout" 253 :timeout="timeout"
254 :top="y === 'top'" 254 :top="y === 'top'"
255 :right="x === 'right'" 255 :right="x === 'right'"
256 :vertical="mode === 'vertical'" 256 :vertical="mode === 'vertical'"
257 v-model="snackbar" 257 v-model="snackbar"
258 color="success" 258 color="success"
259 >{{ text }}</v-snackbar> 259 >{{ text }}</v-snackbar>
260 <v-flex xs12 sm12 class="my-4"> 260 <v-flex xs12 sm12 class="my-4">
261 <v-card flat> 261 <v-card flat>
262 <v-form ref="form" v-model="valid" lazy-validation> 262 <v-form ref="form" v-model="valid" lazy-validation>
263 <v-container fluid> 263 <v-container fluid>
264 <v-layout> 264 <v-layout>
265 <v-flex 265 <v-flex
266 xs12 266 xs12
267 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4" 267 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4"
268 > 268 >
269 <v-avatar size="100px"> 269 <v-avatar size="100px">
270 <img src="/static/icon/user.png" v-if="!imageUrl"> 270 <img src="/static/icon/user.png" v-if="!imageUrl">
271 </v-avatar> 271 </v-avatar>
272 <input 272 <input
273 type="file" 273 type="file"
274 style="display: none" 274 style="display: none"
275 ref="image" 275 ref="image"
276 accept="image/*" 276 accept="image/*"
277 @change="onFilePicked" 277 @change="onFilePicked"
278 > 278 >
279 <img 279 <img
280 :src="imageData.imageUrl" 280 :src="imageData.imageUrl"
281 height="150" 281 height="150"
282 v-if="imageUrl" 282 v-if="imageUrl"
283 style="border-radius:50%; width:200px" 283 style="border-radius:50%; width:200px"
284 > 284 >
285 </v-flex> 285 </v-flex>
286 </v-layout> 286 </v-layout>
287 <v-flex xs12> 287 <v-flex xs12>
288 <v-layout> 288 <v-layout>
289 <v-flex xs4 class="pt-4 subheading"> 289 <v-flex xs4 class="pt-4 subheading">
290 <label class="right">Title:</label> 290 <label class="right">Title:</label>
291 </v-flex> 291 </v-flex>
292 <v-flex xs4 class="ml-3"> 292 <v-flex xs4 class="ml-3">
293 <v-text-field 293 <v-text-field
294 v-model="addRemind.title" 294 v-model="addRemind.title"
295 placeholder="fill your Title" 295 placeholder="fill your Title"
296 type="text" 296 type="text"
297 :rules="titleRules" 297 :rules="titleRules"
298 required 298 required
299 ></v-text-field> 299 ></v-text-field>
300 </v-flex> 300 </v-flex>
301 </v-layout> 301 </v-layout>
302 </v-flex> 302 </v-flex>
303 <v-flex xs12> 303 <v-flex xs12>
304 <v-layout> 304 <v-layout>
305 <v-flex xs4 class="pt-4 subheading"> 305 <v-flex xs4 class="pt-4 subheading">
306 <label class="right">Description:</label> 306 <label class="right">Description:</label>
307 </v-flex> 307 </v-flex>
308 <v-flex xs4 class="ml-3"> 308 <v-flex xs4 class="ml-3">
309 <v-text-field 309 <v-text-field
310 placeholder="fill your Description" 310 placeholder="fill your Description"
311 :rules="descriptionRules" 311 :rules="descriptionRules"
312 v-model="addRemind.description" 312 v-model="addRemind.description"
313 type="text" 313 type="text"
314 required 314 required
315 ></v-text-field> 315 ></v-text-field>
316 </v-flex> 316 </v-flex>
317 </v-layout> 317 </v-layout>
318 </v-flex> 318 </v-flex>
319 <v-layout> 319 <v-layout>
320 <v-flex xs12 sm6 offset-sm3> 320 <v-flex xs12 sm6 offset-sm3>
321 <v-card-actions> 321 <v-card-actions>
322 <v-btn @click="clear" round dark>clear</v-btn> 322 <v-btn @click="clear" round dark>clear</v-btn>
323 <v-spacer></v-spacer> 323 <v-spacer></v-spacer>
324 <v-btn @click="submit" round dark :loading="loading">Add</v-btn> 324 <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
325 </v-card-actions> 325 </v-card-actions>
326 </v-flex> 326 </v-flex>
327 </v-layout> 327 </v-layout>
328 </v-container> 328 </v-container>
329 </v-form> 329 </v-form>
330 </v-card> 330 </v-card>
331 </v-flex> 331 </v-flex>
332 </v-container> 332 </v-container>
333 </v-tab-item> 333 </v-tab-item>
334 </v-tabs> 334 </v-tabs>
335 <div class="loader" v-if="showLoader"> 335 <div class="loader" v-if="showLoader">
336 <v-progress-circular indeterminate color="white"></v-progress-circular> 336 <v-progress-circular indeterminate color="white"></v-progress-circular>
337 </div> 337 </div>
338 </v-app> 338 </v-app>
339 </template> 339 </template>
340 340
341 <script> 341 <script>
342 import http from "@/Services/http.js"; 342 import http from "@/Services/http.js";
343 import Util from "@/util"; 343 import Util from "@/util";
344 344
345 export default { 345 export default {
346 data: () => ({ 346 data: () => ({
347 snackbar: false, 347 snackbar: false,
348 y: "top", 348 y: "top",
349 x: "right", 349 x: "right",
350 mode: "", 350 mode: "",
351 timeout: 3000, 351 timeout: 3000,
352 text: "", 352 text: "",
353 loading: false, 353 loading: false,
354 date: null, 354 date: null,
355 search: "", 355 search: "",
356 showLoader:false, 356 showLoader:false,
357 menu: false,
358 menu1: false,
359 dialog: false, 357 dialog: false,
360 dialog1: false, 358 dialog1: false,
361 valid: true, 359 valid: true,
362 isActive: true, 360 isActive: true,
363 newActive: false, 361 newActive: false,
364 addclass: [],
365 addSection: [],
366 gender: ["Male", "Female"],
367 AddUsercredentials: {}, 362 AddUsercredentials: {},
368 pagination: { 363 pagination: {
369 rowsPerPage: 15 364 rowsPerPage: 15
370 }, 365 },
371 imageData: {}, 366 imageData: {},
372 imageName: "", 367 imageName: "",
373 imageUrl: "", 368 imageUrl: "",
374 imageFile: "", 369 imageFile: "",
375 titleRules: [v => !!v || " Tilte is required"], 370 titleRules: [v => !!v || " Tilte is required"],
376 descriptionRules: [v => !!v || " Description is required"], 371 descriptionRules: [v => !!v || " Description is required"],
377 errorMessages: "",
378 emailRules: [
379 v => !!v || "E-mail is required",
380 v =>
381 /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) ||
382 "E-mail must be valid"
383 ],
384 headers: [ 372 headers: [
385 { 373 {
386 text: "No", 374 text: "No",
387 align: "center", 375 align: "center",
388 sortable: false, 376 sortable: false,
389 value: "No" 377 value: "No"
390 }, 378 },
391 { text: "Title", value: "title", sortable: false, align: "center" }, 379 { text: "Title", value: "title", sortable: false, align: "center" },
392 { text: "Description", value: "description", sortable: false, align: "center" }, 380 { text: "Description", value: "description", sortable: false, align: "center" },
393 { text: "Action", value: "", sortable: false, align: "center" } 381 { text: "Action", value: "", sortable: false, align: "center" }
394 ], 382 ],
395 desserts: [], 383 desserts: [],
396 editedIndex: -1, 384 editedIndex: -1,
397 addRemind:{ 385 addRemind:{
398 title:'', 386 title:'',
399 description:'' 387 description:''
400 }, 388 },
401 editedItem: { 389 editedItem: {
402 title:'', 390 title:'',
403 description:'' 391 description:''
404 }, 392 },
405 defaultItem: { 393 defaultItem: {
406 title:'', 394 title:'',
407 description:'' 395 description:''
408 }, 396 },
409 userName: "", 397 userName: "",
410 items: [ 398 items: [
411 { 399 {
412 href: "/changepassword", 400 href: "/changepassword",
413 title: "Change Password", 401 title: "Change Password",
414 click: e => { 402 click: e => {
415 console.log(e); 403 console.log(e);
416 } 404 }
417 }, 405 },
418 { 406 {
419 href: "#", 407 href: "#",
420 title: "Logout", 408 title: "Logout",
421 click: e => { 409 click: e => {
422 window.getApp.$emit("APP_LOGOUT"); 410 window.getApp.$emit("APP_LOGOUT");
423 } 411 }
424 } 412 }
425 ] 413 ]
426 }), 414 }),
427 watch: {
428 menu(val) {
429 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
430 },
431 menu1(val) {
432 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
433 }
434 },
435 methods: { 415 methods: {
436 pickFile() { 416 pickFile() {
437 this.$refs.image.click(); 417 this.$refs.image.click();
438 }, 418 },
439 419
440 onFilePicked(e) { 420 onFilePicked(e) {
441 // console.log(e) 421 // console.log(e)
442 const files = e.target.files; 422 const files = e.target.files;
443 this.imageData.upload = e.target.files[0]; 423 this.imageData.upload = e.target.files[0];
444 if (files[0] !== undefined) { 424 if (files[0] !== undefined) {
445 this.imageName = files[0].name; 425 this.imageName = files[0].name;
446 if (this.imageName.lastIndexOf(".") <= 0) { 426 if (this.imageName.lastIndexOf(".") <= 0) {
447 return; 427 return;
448 } 428 }
449 const fr = new FileReader(); 429 const fr = new FileReader();
450 fr.readAsDataURL(files[0]); 430 fr.readAsDataURL(files[0]);
451 fr.addEventListener("load", () => { 431 fr.addEventListener("load", () => {
452 this.imageUrl = fr.result; 432 this.imageUrl = fr.result;
453 this.imageFile = files[0]; // this is an image file that can be sent to server... 433 this.imageFile = files[0]; // this is an image file that can be sent to server...
454 this.imageData.imageUrl = URL.createObjectURL(this.imageFile); 434 this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
455 console.log("upload=======>", this.imageData.imageUrl); 435 console.log("upload=======>", this.imageData.imageUrl);
456 console.log("imageFile", this.imageFile); 436 console.log("imageFile", this.imageFile);
457 }); 437 });
458 } else { 438 } else {
459 this.imageName = ""; 439 this.imageName = "";
460 this.imageFile = ""; 440 this.imageFile = "";
461 this.imageUrl = ""; 441 this.imageUrl = "";
462 } 442 }
463 }, 443 },
464 getReminderList() { 444 getReminderList() {
465 this.showLoader = true; 445 this.showLoader = true;
466 var token = this.$store.state.token; 446 var token = this.$store.state.token;
467 http() 447 http()
468 .get("/getRemindersList", { 448 .get("/getRemindersList", {
469 headers: { Authorization: "Bearer " + token } 449 headers: { Authorization: "Bearer " + token }
470 }) 450 })
471 .then(response => { 451 .then(response => {
472 this.desserts = response.data.data; 452 this.desserts = response.data.data;
473 this.showLoader = false; 453 this.showLoader = false;
474 // console.log("getRemindersList=====>",this.desserts) 454 // console.log("getRemindersList=====>",this.desserts)
475 }) 455 })
476 .catch(err => { 456 .catch(err => {
477 // console.log("err====>", err); 457 // console.log("err====>", err);
478 this.showLoader = false; 458 this.showLoader = false;
479 this.$router.replace({ path: "/" }); 459 this.$router.replace({ path: "/" });
480 }); 460 });
481 }, 461 },
482 editItem(item) { 462 editItem(item) {
483 this.editedIndex = this.desserts.indexOf(item); 463 this.editedIndex = this.desserts.indexOf(item);
484 this.editedItem = Object.assign({}, item); 464 this.editedItem = Object.assign({}, item);
485 this.dialog = true; 465 this.dialog = true;
486 }, 466 },
487 profile(item) { 467 profile(item) {
488 this.editedIndex = this.desserts.indexOf(item); 468 this.editedIndex = this.desserts.indexOf(item);
489 this.editedItem = Object.assign({}, item); 469 this.editedItem = Object.assign({}, item);
490 this.dialog1 = true; 470 this.dialog1 = true;
491 }, 471 },
492 472
493 deleteItem(item) { 473 deleteItem(item) {
494 let deleteReminder = { 474 let deleteReminder = {
495 reminderId: item._id 475 reminderId: item._id
496 }; 476 };
497 http() 477 http()
498 .delete( 478 .delete(
499 "/deleteReminder", 479 "/deleteReminder",
500 confirm("Are you sure you want to delete this?") && { 480 confirm("Are you sure you want to delete this?") && {
501 params: deleteReminder 481 params: deleteReminder
502 } 482 }
503 ) 483 )
504 .then(response => { 484 .then(response => {
505 // console.log("deleteReminder",deleteReminder) 485 // console.log("deleteReminder",deleteReminder)
506 if ((this.snackbar = true)) { 486 if ((this.snackbar = true)) {
507 this.text = "Successfully delete Existing User"; 487 this.text = "Successfully delete Existing User";
508 } 488 }
509 this.getReminderList(); 489 this.getReminderList();
510 }) 490 })
511 .catch(error => { 491 .catch(error => {
512 // console.log(error); 492 // console.log(error);
513 }); 493 });
514 }, 494 },
515 activeTab(type) { 495 activeTab(type) {
516 switch (type) { 496 switch (type) {
517 case "existing": 497 case "existing":
518 this.newActive = false; 498 this.newActive = false;
519 this.isActive = true; 499 this.isActive = true;
520 break; 500 break;
521 501
522 default: 502 default:
523 this.newActive = true; 503 this.newActive = true;
524 this.isActive = false; 504 this.isActive = false;
525 break; 505 break;
526 } 506 }
527 }, 507 },
528 close() { 508 close() {
529 this.dialog = false; 509 this.dialog = false;
530 setTimeout(() => { 510 setTimeout(() => {
531 this.editedItem = Object.assign({}, this.defaultItem); 511 this.editedItem = Object.assign({}, this.defaultItem);
532 this.editedIndex = -1; 512 this.editedIndex = -1;
533 }, 300); 513 }, 300);
534 }, 514 },
535 close1() { 515 close1() {
536 this.dialog1 = false; 516 this.dialog1 = false;
537 }, 517 },
538 submit() { 518 submit() {
539 if (this.$refs.form.validate()) { 519 if (this.$refs.form.validate()) {
540 let imageData = new FormData(); 520 let imageData = new FormData();
541 imageData.append("upload", this.imageFile); 521 imageData.append("upload", this.imageFile);
542 console.log(imageData); 522 console.log(imageData);
543 let addReminds = { 523 let addReminds = {
544 title: this.addRemind.title, 524 title: this.addRemind.title,
545 description: this.addRemind.description, 525 description: this.addRemind.description,
546 // imageData 526 // imageData
547 }; 527 };
548 http() 528 http()
549 .post("/createReminder", addReminds) 529 .post("/createReminder", addReminds)
550 .then(response => { 530 .then(response => {
551 // console.log(addReminds) 531 // console.log(addReminds)
552 if ((this.snackbar = true)) { 532 if ((this.snackbar = true)) {
553 this.text = "New user added successfully"; 533 this.text = "New user added successfully";
554 } 534 }
555 this.getReminderList(); 535 this.getReminderList();
556 this.clear(); 536 this.clear();
557 }) 537 })
558 .catch(error => { 538 .catch(error => {
559 // console.log(error); 539 // console.log(error);
560 if ((this.snackbar = true)) { 540 if ((this.snackbar = true)) {
561 this.text = error.response.data.message; 541 this.text = error.response.data.message;
562 } 542 }
563 }); 543 });
564 } 544 }
565 }, 545 },
566 mail() {}, 546 mail() {},
567 download() {}, 547 download() {},
568 clear() { 548 clear() {
569 this.$refs.form.reset(); 549 this.$refs.form.reset();
570 }, 550 },
571 save() { 551 save() {
572 let imageData = new FormData(); 552 let imageData = new FormData();
573 imageData.append("upload", this.imageFile); 553 imageData.append("upload", this.imageFile);
574 console.log(imageData); 554 console.log(imageData);
575 let editReminder = { 555 let editReminder = {
576 reminderId:this.editedItem._id, 556 reminderId:this.editedItem._id,
577 title: this.editedItem.title, 557 title: this.editedItem.title,
578 description: this.editedItem.description, 558 description: this.editedItem.description,
579 // imageData 559 // imageData
580 }; 560 };
581 http() 561 http()
582 .put("/updateReminder", editReminder) 562 .put("/updateReminder", editReminder)
583 .then(response => { 563 .then(response => {
584 // console.log("updateReminder",updateReminder); 564 // console.log("updateReminder",updateReminder);
585 if ((this.snackbar = true)) { 565 if ((this.snackbar = true)) {
586 this.text = "Successfully Edit Existing User"; 566 this.text = "Successfully Edit Existing User";
587 } 567 }
588 this.getReminderList(); 568 this.getReminderList();
589 }) 569 })
590 .catch(error => { 570 .catch(error => {
591 // console.log(error); 571 // console.log(error);
592 }); 572 });
593 this.close(); 573 this.close();
594 }, 574 },
595 handleDrawerToggle() { 575 handleDrawerToggle() {
596 window.getApp.$emit("APP_DRAWER_TOGGLED"); 576 window.getApp.$emit("APP_DRAWER_TOGGLED");
597 }, 577 },
598 handleFullScreen() { 578 handleFullScreen() {
599 Util.toggleFullScreen(); 579 Util.toggleFullScreen();
600 } 580 }
601 }, 581 },
602 mounted() { 582 mounted() {
603 this.getReminderList(); 583 this.getReminderList();
604 // var token = this.$store.state.token;
605 // http()
606 // .get("/getReminderList", {
607 // headers: { Authorization: "Bearer " + token }
608 // })
609 // .then(response => {
610 // this.addclass = response.data.data;
611 // // console.log("getClassesList=====>",this.addclass)
612 // })
613 // .catch(err => {
614 // // console.log("err====>", err);
615 // this.$router.replace({ path: "/" });
616 // });
617 }, 584 },
618 computed: { 585 computed: {
619 toolbarColor() { 586 toolbarColor() {
620 return this.$vuetify.options.extra.mainNav; 587 return this.$vuetify.options.extra.mainNav;
621 } 588 }
622 } 589 }
623 }; 590 };
624 </script> 591 </script>
625 <style scoped> 592 <style scoped>
626 .v-tabs__div { 593 .v-tabs__div {
627 text-transform: none; 594 text-transform: none;
628 } 595 }
629 .v-input__prepend-outer { 596 .v-input__prepend-outer {
630 margin-right: 0px !important; 597 margin-right: 0px !important;
631 } 598 }
632 .v-card__actions .v-btn { 599 .v-card__actions .v-btn {
633 margin: 0 15px; 600 margin: 0 15px;
634 min-width: 120px; 601 min-width: 120px;
635 } 602 }
636 .primary { 603 .primary {
637 background-color: #aaa !important; 604 background-color: #aaa !important;
638 border-color: #aaa !important; 605 border-color: #aaa !important;
639 } 606 }
640 h4 { 607 h4 {
641 background-repeat: no-repeat; 608 background-repeat: no-repeat;
642 padding: 8px; 609 padding: 8px;
643 margin: auto; 610 margin: auto;
644 font-size: 25px; 611 font-size: 25px;
645 } 612 }
646 #name { 613 #name {
647 position: absolute; 614 position: absolute;
648 left: 100px; 615 left: 100px;
649 top: 17px; 616 top: 17px;
650 } 617 }
651 #icon { 618 #icon {
652 position: absolute; 619 position: absolute;
653 right: 8px; 620 right: 8px;
654 top: 8px; 621 top: 8px;
655 } 622 }
656 #m { 623 #m {
657 position: relative; 624 position: relative;
658 left: 135px; 625 left: 135px;
659 top: -15px; 626 top: -15px;
660 } 627 }
661 #G { 628 #G {
662 position: absolute; 629 position: absolute;
663 top: 38px; 630 top: 38px;
664 color: white; 631 color: white;
665 } 632 }
666 #bt { 633 #bt {
667 position: relative; 634 position: relative;
668 top: -20px; 635 top: -20px;
669 left: 115px; 636 left: 115px;
670 } 637 }
671 #e { 638 #e {
672 position: relative; 639 position: relative;
673 top: 5px; 640 top: 5px;
674 right: -30px; 641 right: -30px;
675 height: 17px; 642 height: 17px;
676 cursor: pointer; 643 cursor: pointer;
677 } 644 }
678 #d { 645 #d {
679 position: relative; 646 position: relative;
680 top: 5px; 647 top: 5px;
681 right: -70px; 648 right: -70px;
682 height: 17px; 649 height: 17px;
683 cursor: pointer; 650 cursor: pointer;
684 } 651 }
685 #td { 652 #td {
686 border: 1px solid #dddddd; 653 border: 1px solid #dddddd;
687 text-align: left; 654 text-align: left;
688 padding: 8px; 655 padding: 8px;
689 } 656 }
690 #dialog { 657 #dialog {
691 height: 550px; 658 height: 550px;
692 } 659 }
693 .active { 660 .active {
694 background-color: black; 661 background-color: black;
695 color: white !important; 662 color: white !important;
696 } 663 }
697 .activebtn { 664 .activebtn {
698 color: black !important; 665 color: black !important;
699 } 666 }
700 #flex { 667 #flex {
701 height: 300px; 668 height: 300px;
702 } 669 }
703 .top { 670 .top {
704 margin-top: 100px; 671 margin-top: 100px;
705 } 672 }
706 .v-tabs__item a { 673 .v-tabs__item a {
707 font-size: 16px !important; 674 font-size: 16px !important;
708 } 675 }
709 @media screen and (max-width: 769px) { 676 @media screen and (max-width: 769px) {
710 .top { 677 .top {
711 margin-top: 0 !important; 678 margin-top: 0 !important;
712 } 679 }
713 .userSearch .v-icon { 680 .userSearch .v-icon {
714 font-size: 20px !important; 681 font-size: 20px !important;
715 margin-left: 20px; 682 margin-left: 20px;
716 } 683 }
717 } 684 }
718 @media screen and (max-width: 380px) { 685 @media screen and (max-width: 380px) {
719 .right { 686 .right {
720 float: none !important; 687 float: none !important;
721 } 688 }
722 .subheading { 689 .subheading {
723 font-size: 14px !important; 690 font-size: 14px !important;
724 } 691 }
725 .v-card__actions .v-btn { 692 .v-card__actions .v-btn {
726 margin: 0 0px; 693 margin: 0 0px;
727 min-width: 100px; 694 min-width: 100px;
728 } 695 }
729 /* .searchIcon .v-icon { 696 /* .searchIcon .v-icon {
730 font-size: 20px; 697 font-size: 20px;
731 margin-left: 20px; 698 margin-left: 20px;
732 } */ 699 } */
733 .subheading { 700 .subheading {
734 font-size: 12px !important; 701 font-size: 12px !important;
735 } 702 }
736 h5 { 703 h5 {
737 font-size: 13px; 704 font-size: 13px;
738 } 705 }
739 } 706 }
740 .v-icon { 707 .v-icon {
741 font-size: 30px; 708 font-size: 30px;
742 } 709 }
743 @media screen and (min-width: 1270px) { 710 @media screen and (min-width: 1270px) {
744 .hide { 711 .hide {
745 display: none; 712 display: none;
746 } 713 }
747 /* } 714 /* }
748 @media screen and (max-width: 962px) { 715 @media screen and (max-width: 962px) {
749 .imglogo{ 716 .imglogo{
750 position: absolute; 717 position: absolute;
751 top: 13px; 718 top: 13px;
752 left: 13px !important; 719 left: 13px !important;
753 width: 70px; 720 width: 70px;
754 height: 24px; 721 height: 24px;
755 } */ 722 } */
756 } 723 }
757 @media screen and (max-width: 420px) { 724 @media screen and (max-width: 420px) {
758 .userSearch .v-text-field .v-label { 725 .userSearch .v-text-field .v-label {
759 line-height: 24px !important; 726 line-height: 24px !important;
760 } 727 }
761 .userSearch .v-label { 728 .userSearch .v-label {
762 font-size: 13px !important; 729 font-size: 13px !important;
763 } 730 }
764 .v-list__tile { 731 .v-list__tile {
765 font-size: 14px; 732 font-size: 14px;
766 padding: 0 10px; 733 padding: 0 10px;
767 } 734 }
768 .name { 735 .name {
769 font-size: 15px; 736 font-size: 15px;
770 } 737 }
771 } 738 }
772 </style> 739 </style>
src/pages/Section/section.vue
Diff comments   View file @55f72b7
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <v-toolbar 3 <v-toolbar
4 class="fixcolors" 4 class="fixcolors"
5 fixed 5 fixed
6 app 6 app
7 > 7 >
8 <v-toolbar-title class="ml-0 pl-3"> 8 <v-toolbar-title class="ml-0 pl-3">
9 <v-toolbar-side-icon @click.stop="handleDrawerToggle" class="hide"></v-toolbar-side-icon> 9 <v-toolbar-side-icon @click.stop="handleDrawerToggle" class="hide"></v-toolbar-side-icon>
10 </v-toolbar-title> 10 </v-toolbar-title>
11 <!-- ****** SEARCH ALL EXISTING SECTION ****** --> 11 <!-- ****** SEARCH ALL EXISTING SECTION ****** -->
12 <v-flex xs7 sm3 class="userSearch"> 12 <v-flex xs7 sm3 class="userSearch">
13 <v-text-field 13 <v-text-field
14 flat 14 flat
15 append-icon="search" 15 append-icon="search"
16 label="Find your Teachers" 16 label="Find your Section Data"
17 v-model="search" 17 v-model="search"
18 color="white" 18 color="white"
19 dark 19 dark
20 > 20 >
21 </v-text-field> 21 </v-text-field>
22 </v-flex> 22 </v-flex>
23 <v-spacer></v-spacer> 23 <v-spacer></v-spacer>
24 <v-menu offset-y origin="center center" :nudge-bottom="10" transition="scale-transition"> 24 <v-menu offset-y origin="center center" :nudge-bottom="10" transition="scale-transition">
25 <v-btn icon large flat slot="activator"> 25 <v-btn icon large flat slot="activator">
26 <v-avatar size="40px"> 26 <v-avatar size="40px">
27 <img src="/static/icon/user.png"/> 27 <img src="/static/icon/user.png"/>
28 </v-avatar> 28 </v-avatar>
29 </v-btn> 29 </v-btn>
30 <v-list class="pa-0"> 30 <v-list class="pa-0">
31 <v-list-tile v-for="(item,index) in items" :to="!item.href ? { name: item.name } : null" :href="item.href" @click="item.click" ripple="ripple" :disabled="item.disabled" :target="item.target" rel="noopener" :key="index"> 31 <v-list-tile v-for="(item,index) in items" :to="!item.href ? { name: item.name } : null" :href="item.href" @click="item.click" ripple="ripple" :disabled="item.disabled" :target="item.target" rel="noopener" :key="index">
32 <v-list-tile-action v-if="item.icon"> 32 <v-list-tile-action v-if="item.icon">
33 <v-icon>{{ item.icon }}</v-icon> 33 <v-icon>{{ item.icon }}</v-icon>
34 </v-list-tile-action> 34 </v-list-tile-action>
35 <v-list-tile-content> 35 <v-list-tile-content>
36 <v-list-tile-title>{{ item.title }}</v-list-tile-title> 36 <v-list-tile-title>{{ item.title }}</v-list-tile-title>
37 </v-list-tile-content> 37 </v-list-tile-content>
38 </v-list-tile> 38 </v-list-tile>
39 </v-list> 39 </v-list>
40 </v-menu> 40 </v-menu>
41 </v-toolbar> 41 </v-toolbar>
42 <v-tabs grow slider-color="black"> 42 <v-tabs grow slider-color="black">
43 <v-tab 43 <v-tab
44 ripple 44 ripple
45 @click="activeTab('existing')" 45 @click="activeTab('existing')"
46 v-bind:class="{ active: isActive }" 46 v-bind:class="{ active: isActive }"
47 id="tab" 47 id="tab"
48 class="subheading" 48 class="subheading"
49 >Existing Section</v-tab> 49 >Existing Section</v-tab>
50 <v-tab 50 <v-tab
51 ripple 51 ripple
52 @click="activeTab('new')" 52 @click="activeTab('new')"
53 v-bind:class="{ active: newActive }" 53 v-bind:class="{ active: newActive }"
54 id="tab1"User 54 id="tab1"User
55 class="subheading" 55 class="subheading"
56 >Add New Section</v-tab> 56 >Add New Section</v-tab>
57 57
58 <!-- ****** EDIT SECTION ****** --> 58 <!-- ****** EDIT SECTION ****** -->
59 <v-tab-item> 59 <v-tab-item>
60 <v-snackbar 60 <v-snackbar
61 :timeout="timeout" 61 :timeout="timeout"
62 :top="y === 'top'" 62 :top="y === 'top'"
63 :right="x === 'right'" 63 :right="x === 'right'"
64 :vertical="mode === 'vertical'" 64 :vertical="mode === 'vertical'"
65 v-model="snackbar" 65 v-model="snackbar"
66 color="success" 66 color="success"
67 >{{ text }}</v-snackbar> 67 >{{ text }}</v-snackbar>
68 <v-dialog v-model="dialog" max-width="500px"> 68 <v-dialog v-model="dialog" max-width="500px">
69 <v-toolbar color="white"> 69 <v-toolbar color="white">
70 <v-spacer></v-spacer> 70 <v-spacer></v-spacer>
71 <v-toolbar-title>Edit Section</v-toolbar-title> 71 <v-toolbar-title>Edit Section</v-toolbar-title>
72 <v-spacer></v-spacer> 72 <v-spacer></v-spacer>
73 </v-toolbar> 73 </v-toolbar>
74 <v-card> 74 <v-card>
75 <v-card-text> 75 <v-card-text>
76 <v-container> 76 <v-container>
77 <v-layout wrap justify-center> 77 <v-layout wrap justify-center>
78 <v-flex xs12 sm9> 78 <v-flex xs12 sm9>
79 <v-form ref="forms" v-model="validEdit" lazy-validation> 79 <v-form ref="forms" v-model="validEdit" lazy-validation>
80 <v-layout style="position:relative;"> 80 <v-layout style="position:relative;">
81 <v-flex xs4 class="pt-4 subheading"> 81 <v-flex xs4 class="pt-4 subheading">
82 <label>Class Name:</label> 82 <label>Class Name:</label>
83 </v-flex> 83 </v-flex>
84 <v-flex xs8> 84 <v-flex xs8>
85 <v-autocomplete 85 <v-autocomplete
86 :items="addclass" 86 :items="addclass"
87 :label="editedItem.classData.classNum" 87 :label="editedItem.classData.classNum"
88 v-model="select" 88 v-model="select"
89 item-text="classNum" 89 item-text="classNum"
90 :rules="classRules" 90 :rules="classRules"
91 item-value="_id" 91 item-value="_id"
92 name="Select Class" 92 name="Select Class"
93 ></v-autocomplete> 93 ></v-autocomplete>
94 </v-flex> 94 </v-flex>
95 </v-layout> 95 </v-layout>
96 <v-layout style="position:relative;"> 96 <v-layout style="position:relative;">
97 <v-flex xs4 class="pt-4 subheading"> 97 <v-flex xs4 class="pt-4 subheading">
98 <label>Section Name:</label> 98 <label>Section Name:</label>
99 </v-flex> 99 </v-flex>
100 <v-flex xs8> 100 <v-flex xs8>
101 <v-text-field 101 <v-text-field
102 v-model="editedItem.name" 102 v-model="editedItem.name"
103 placeholder="fill your Section Name" 103 placeholder="fill your Section Name"
104 type="text" 104 type="text"
105 required 105 required
106 ></v-text-field> 106 ></v-text-field>
107 </v-flex> 107 </v-flex>
108 108
109 </v-layout> 109 </v-layout>
110 <v-card-actions> 110 <v-card-actions>
111 <v-btn round dark @click.native="close">Cancel</v-btn> 111 <v-btn round dark @click.native="close">Cancel</v-btn>
112 <v-spacer></v-spacer> 112 <v-spacer></v-spacer>
113 <v-btn round dark @click="save">Save</v-btn> 113 <v-btn round dark @click="save">Save</v-btn>
114 </v-card-actions> 114 </v-card-actions>
115 </v-form> 115 </v-form>
116 </v-flex> 116 </v-flex>
117 </v-layout> 117 </v-layout>
118 </v-container> 118 </v-container>
119 </v-card-text> 119 </v-card-text>
120 </v-card> 120 </v-card>
121 </v-dialog> 121 </v-dialog>
122 122
123 <!-- ****** PROFILE VIEW SECTION DATA ****** --> 123 <!-- ****** PROFILE VIEW SECTION DATA ****** -->
124 124
125 <v-dialog v-model="dialog1" max-width="600px"> 125 <v-dialog v-model="dialog1" max-width="600px">
126 <v-toolbar color="white"> 126 <v-toolbar color="white">
127 <v-spacer></v-spacer> 127 <v-spacer></v-spacer>
128 <v-toolbar-title>Section</v-toolbar-title> 128 <v-toolbar-title>Section</v-toolbar-title>
129 <v-spacer></v-spacer> 129 <v-spacer></v-spacer>
130 <v-icon @click="close1">close</v-icon> 130 <v-icon @click="close1">close</v-icon>
131 </v-toolbar> 131 </v-toolbar>
132 <v-card> 132 <v-card>
133 <v-flex align-center justify-center layout text-xs-center> 133 <v-flex align-center justify-center layout text-xs-center>
134 <v-avatar size="50px" style="position:absolute; top:20px;"> 134 <v-avatar size="50px" style="position:absolute; top:20px;">
135 <img src="/static/icon/user.png"> 135 <img src="/static/icon/user.png">
136 </v-avatar> 136 </v-avatar>
137 </v-flex> 137 </v-flex>
138 <v-card-text> 138 <v-card-text>
139 <v-container grid-list-md> 139 <v-container grid-list-md>
140 <v-layout wrap> 140 <v-layout wrap>
141 <v-flex><br><br> 141 <v-flex><br><br>
142 <v-layout> 142 <v-layout>
143 <v-flex xs5 sm6> 143 <v-flex xs5 sm6>
144 <h5 class="right my-1">Class Name:</h5> 144 <h5 class="right my-1">Class Name:</h5>
145 </v-flex> 145 </v-flex>
146 <v-flex sm6 xs8> 146 <v-flex sm6 xs8>
147 <h5 class="my-1">{{ editedItem.classData.classNum }}</h5> 147 <h5 class="my-1">{{ editedItem.classData.classNum }}</h5>
148 </v-flex> 148 </v-flex>
149 </v-layout> 149 </v-layout>
150 <v-layout> 150 <v-layout>
151 <v-flex xs5 sm6> 151 <v-flex xs5 sm6>
152 <h5 class="right my-1">Section Name:</h5> 152 <h5 class="right my-1">Section Name:</h5>
153 </v-flex> 153 </v-flex>
154 <v-flex sm6 xs8> 154 <v-flex sm6 xs8>
155 <h5 class="my-1">{{ editedItem.name }}</h5> 155 <h5 class="my-1">{{ editedItem.name }}</h5>
156 </v-flex> 156 </v-flex>
157 </v-layout> 157 </v-layout>
158 </v-flex> 158 </v-flex>
159 </v-layout> 159 </v-layout>
160 </v-container> 160 </v-container>
161 </v-card-text> 161 </v-card-text>
162 </v-card> 162 </v-card>
163 </v-dialog> 163 </v-dialog>
164 164
165 <v-snackbar 165 <v-snackbar
166 :timeout="timeout" 166 :timeout="timeout"
167 :top="y === 'top'" 167 :top="y === 'top'"
168 :right="x === 'right'" 168 :right="x === 'right'"
169 :vertical="mode === 'vertical'" 169 :vertical="mode === 'vertical'"
170 v-model="snackbar" 170 v-model="snackbar"
171 color="success" 171 color="success"
172 >{{ text }}</v-snackbar> 172 >{{ text }}</v-snackbar>
173 173
174 <!-- ****** EXISTING-USERS StudentS Table ****** --> 174 <!-- ****** EXISTING-USERS StudentS Table ****** -->
175 175
176 <v-data-table 176 <v-data-table
177 :headers="headers" 177 :headers="headers"
178 :items="desserts" 178 :items="desserts"
179 :pagination.sync="pagination" 179 :pagination.sync="pagination"
180 :search="search" 180 :search="search"
181 > 181 >
182 <template slot="items" slot-scope="props"> 182 <template slot="items" slot-scope="props">
183 <td id="td" class="text-xs-center">{{ props.index}}</td> 183 <td id="td" class="text-xs-center">{{ props.index}}</td>
184 <td id="td" class="text-xs-center">{{ props.item.classData.classNum}}</td> 184 <td id="td" class="text-xs-center">{{ props.item.classData.classNum}}</td>
185 <td id="td" class="text-xs-center">{{ props.item.name}}</td> 185 <td id="td" class="text-xs-center">{{ props.item.name}}</td>
186 <td class="text-xs-center"> 186 <td class="text-xs-center">
187 <span> 187 <span>
188 <img 188 <img
189 style="cursor:pointer; width:25px; height:18px; " 189 style="cursor:pointer; width:25px; height:18px; "
190 class="mr-5" 190 class="mr-5"
191 @click="profile(props.item)" 191 @click="profile(props.item)"
192 src="/static/icon/eye1.png" 192 src="/static/icon/eye1.png"
193 > 193 >
194 <img 194 <img
195 style="cursor:pointer; width:20px; height:18px; " 195 style="cursor:pointer; width:20px; height:18px; "
196 class="mr-5" 196 class="mr-5"
197 @click="editItem(props.item)" 197 @click="editItem(props.item)"
198 src="/static/icon/edit1.png" 198 src="/static/icon/edit1.png"
199 > 199 >
200 <img 200 <img
201 style="cursor:pointer; height:20px; " 201 style="cursor:pointer; height:20px; "
202 class="mr-5" 202 class="mr-5"
203 @click="deleteItem(props.item)" 203 @click="deleteItem(props.item)"
204 src="/static/icon/delete1.png" 204 src="/static/icon/delete1.png"
205 > 205 >
206 </span> 206 </span>
207 </td> 207 </td>
208 </template> 208 </template>
209 <v-alert 209 <v-alert
210 slot="no-results" 210 slot="no-results"
211 :value="true" 211 :value="true"
212 color="error" 212 color="error"
213 icon="warning" 213 icon="warning"
214 >Your search for "{{ search }}" found no results.</v-alert> 214 >Your search for "{{ search }}" found no results.</v-alert>
215 </v-data-table> 215 </v-data-table>
216 </v-tab-item> 216 </v-tab-item>
217 217
218 <!-- ****** ADD multiple Students ****** --> 218 <!-- ****** ADD multiple Students ****** -->
219 219
220 <v-tab-item> 220 <v-tab-item>
221 <v-container> 221 <v-container>
222 <v-snackbar 222 <v-snackbar
223 :timeout="timeout" 223 :timeout="timeout"
224 :top="y === 'top'" 224 :top="y === 'top'"
225 :right="x === 'right'" 225 :right="x === 'right'"
226 :vertical="mode === 'vertical'" 226 :vertical="mode === 'vertical'"
227 v-model="snackbar" 227 v-model="snackbar"
228 color="success" 228 color="success"
229 >{{ text }}</v-snackbar> 229 >{{ text }}</v-snackbar>
230 <v-flex xs12 sm8 offset-sm2 class="top"> 230 <v-flex xs12 sm8 offset-sm2 class="top">
231 <v-card flat> 231 <v-card flat>
232 <v-container fluid fill-height> 232 <v-container fluid fill-height>
233 <v-layout align-center> 233 <v-layout align-center>
234 <v-flex xs12> 234 <v-flex xs12>
235 <v-flex offset-xs5> 235 <v-flex offset-xs5>
236 <v-avatar size="55px"> 236 <v-avatar size="55px">
237 <img src="/static/icon/user.png"> 237 <img src="/static/icon/user.png">
238 </v-avatar> 238 </v-avatar>
239 </v-flex> 239 </v-flex>
240 <v-form ref="form" v-model="valid" lazy-validation> 240 <v-form ref="form" v-model="valid" lazy-validation>
241 <v-layout> 241 <v-layout>
242 <v-flex xs4 class="pt-4 subheading"> 242 <v-flex xs4 class="pt-4 subheading">
243 <label class="right">Section Name:</label> 243 <label class="right">Section Name:</label>
244 </v-flex> 244 </v-flex>
245 <v-flex xs6 class="ml-3"> 245 <v-flex xs6 class="ml-3">
246 <v-text-field 246 <v-text-field
247 v-model="editedItem.name" 247 v-model="editedItem.name"
248 placeholder="fill your Section Name" 248 placeholder="fill your Section Name"
249 name="name" 249 name="name"
250 type="text" 250 type="text"
251 :rules="nameRules" 251 :rules="nameRules"
252 required 252 required
253 ></v-text-field> 253 ></v-text-field>
254 </v-flex> 254 </v-flex>
255 </v-layout> 255 </v-layout>
256 <v-layout> 256 <v-layout>
257 <v-flex xs4 class="pt-4 subheading"> 257 <v-flex xs4 class="pt-4 subheading">
258 <label class="right">Select Class:</label> 258 <label class="right">Select Class:</label>
259 </v-flex> 259 </v-flex>
260 <v-flex xs6 class="ml-3"> 260 <v-flex xs6 class="ml-3">
261 <v-autocomplete 261 <v-autocomplete
262 :items="addclass" 262 :items="addclass"
263 label="Select Class" 263 label="Select Class"
264 v-model="select" 264 v-model="select"
265 item-text="classNum" 265 item-text="classNum"
266 item-value="_id" 266 item-value="_id"
267 name="Select Class" 267 name="Select Class"
268 :rules="classRules" 268 :rules="classRules"
269 required 269 required
270 ></v-autocomplete> 270 ></v-autocomplete>
271 </v-flex> 271 </v-flex>
272 </v-layout> 272 </v-layout>
273 <v-layout> 273 <v-layout>
274 <v-flex xs4 class="pt-4 subheading"> 274 <v-flex xs4 class="pt-4 subheading">
275 <label class="right">Session:</label> 275 <label class="right">Session:</label>
276 </v-flex> 276 </v-flex>
277 <v-flex xs6 class="ml-3"> 277 <v-flex xs6 class="ml-3">
278 <v-text-field 278 <v-text-field
279 v-model="editedItem.session" 279 v-model="editedItem.session"
280 placeholder="fill your Session" 280 placeholder="fill your Session"
281 name="name" 281 name="name"
282 type="text" 282 type="text"
283 :rules="sessionRules" 283 :rules="sessionRules"
284 required 284 required
285 ></v-text-field> 285 ></v-text-field>
286 </v-flex> 286 </v-flex>
287 </v-layout> 287 </v-layout>
288 <v-layout> 288 <v-layout>
289 <v-flex xs12 sm9 offset-sm2> 289 <v-flex xs12 sm9 offset-sm2>
290 <v-card-actions> 290 <v-card-actions>
291 <v-btn @click="clear" round dark>clear</v-btn> 291 <v-btn @click="clear" round dark>clear</v-btn>
292 <v-spacer></v-spacer> 292 <v-spacer></v-spacer>
293 <v-btn @click="submit" round dark :loading="loading">Add</v-btn> 293 <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
294 </v-card-actions> 294 </v-card-actions>
295 </v-flex> 295 </v-flex>
296 </v-layout> 296 </v-layout>
297 </v-form> 297 </v-form>
298 </v-flex> 298 </v-flex>
299 </v-layout> 299 </v-layout>
300 </v-container> 300 </v-container>
301 </v-card> 301 </v-card>
302 </v-flex> 302 </v-flex>
303 </v-container> 303 </v-container>
304 </v-tab-item> 304 </v-tab-item>
305 </v-tabs> 305 </v-tabs>
306 <div class="loader" v-if="showLoader"> 306 <div class="loader" v-if="showLoader">
307 <v-progress-circular indeterminate color="white"></v-progress-circular> 307 <v-progress-circular indeterminate color="white"></v-progress-circular>
308 </div> 308 </div>
309 </v-app> 309 </v-app>
310 </template> 310 </template>
311 311
312 <script> 312 <script>
313 import http from "@/Services/http.js"; 313 import http from "@/Services/http.js";
314 import Util from "@/util"; 314 import Util from "@/util";
315 315
316 export default { 316 export default {
317 data: () => ({ 317 data: () => ({
318 snackbar: false, 318 snackbar: false,
319 y: "top", 319 y: "top",
320 x: "right", 320 x: "right",
321 mode: "", 321 mode: "",
322 timeout: 3000, 322 timeout: 3000,
323 text: "", 323 text: "",
324 showLoader:false, 324 showLoader:false,
325 loading: false, 325 loading: false,
326 date:null, 326 date:null,
327 search: '', 327 search: '',
328 menu: false,
329 menu1:false,
330 dialog: false, 328 dialog: false,
331 dialog1: false, 329 dialog1: false,
332 valid: true, 330 valid: true,
333 validEdit:true, 331 validEdit:true,
334 isActive: true, 332 isActive: true,
335 newActive: false, 333 newActive: false,
336 details: [], 334 details: [],
337 AddUsercredentials: {}, 335 AddUsercredentials: {},
338 pagination: { 336 pagination: {
339 rowsPerPage: 15 337 rowsPerPage: 15
340 }, 338 },
341 nameRules: [v => !!v || " Section Name is required"], 339 nameRules: [v => !!v || " Section Name is required"],
342 classRules: [v => !!v || " Class Name is required"], 340 classRules: [v => !!v || " Class Name is required"],
343 sessionRules: [v => !!v || " Session is required"], 341 sessionRules: [v => !!v || " Session is required"],
344 headers: [ 342 headers: [
345 { 343 {
346 text: "No", 344 text: "No",
347 align: "center", 345 align: "center",
348 sortable: false, 346 sortable: false,
349 value: "No" 347 value: "No"
350 }, 348 },
351 { text: "Class Name", value: "name", sortable: false, align: "center" }, 349 { text: "Class Name", value: "classData.classNum", sortable: false, align: "center" },
352 { text: "Section Name", value: "sectionName", sortable: false, align: "center" }, 350 { text: "Section Name", value: "name", sortable: false, align: "center" },
353 { text: "Action", value: "", sortable: false, align: "center" } 351 { text: "Action", value: "", sortable: false, align: "center" }
354 ], 352 ],
355 desserts: [], 353 desserts: [],
356 addclass:[], 354 addclass:[],
357 // addIncharge:[], 355 // addIncharge:[],
358 // selectIncharge:'', 356 // selectIncharge:'',
359 select:'', 357 select:'',
360 selectId:'', 358 selectId:'',
361 editedIndex: -1, 359 editedIndex: -1,
362 editedItem: { 360 editedItem: {
363 classData:{ 361 classData:{
364 classNum:"", 362 classNum:"",
365 }, 363 },
366 name:'', 364 name:'',
367 session:new Date().getFullYear() 365 session:new Date().getFullYear()
368 366
369 }, 367 },
370 items: [ 368 items: [
371 { 369 {
372 href: "/changepassword", 370 href: "/changepassword",
373 title: "Change Password", 371 title: "Change Password",
374 click: e => { 372 click: e => {
375 console.log(e); 373 console.log(e);
376 } 374 }
377 }, 375 },
378 { 376 {
379 href: "#", 377 href: "#",
380 title: "Logout", 378 title: "Logout",
381 click: e => { 379 click: e => {
382 window.getApp.$emit("APP_LOGOUT"); 380 window.getApp.$emit("APP_LOGOUT");
383 } 381 }
384 } 382 }
385 ] 383 ]
386 }), 384 }),
387 watch: { 385 methods: {
388 menu (val) {
389 val && this.$nextTick(() => (this.$refs.picker.activePicker = 'YEAR'))
390 },
391 menu1 (val) {
392 val && this.$nextTick(() => (this.$refs.picker.activePicker = 'YEAR'))
393 }
394 },
395 methods: {
396 getSectionList() { 386 getSectionList() {
397 this.showLoader = true; 387 this.showLoader = true;
398 var token = this.$store.state.token; 388 var token = this.$store.state.token;
399 http() 389 http()
400 .get("/getAllSections", { 390 .get("/getAllSections", {
401 headers: { Authorization: "Bearer " + token } 391 headers: { Authorization: "Bearer " + token }
402 }) 392 })
403 .then(response => { 393 .then(response => {
404 this.desserts = response.data.data; 394 this.desserts = response.data.data;
405 this.showLoader = false; 395 this.showLoader = false;
406 // console.log("getAllSections=====>",response.data.data) 396 // console.log("getAllSections=====>",response.data.data)
407 397
408 }) 398 })
409 .catch(err => { 399 .catch(err => {
410 // console.log("err====>", err); 400 // console.log("err====>", err);
411 this.showLoader = false; 401 this.showLoader = false;
412 this.$router.replace({ path: '/' }); 402 this.$router.replace({ path: '/' });
413 }); 403 });
414 }, 404 },
415 editItem(item) { 405 editItem(item) {
416 this.editedIndex = this.desserts.indexOf(item); 406 this.editedIndex = this.desserts.indexOf(item);
417 this.editedItem = Object.assign({}, item); 407 this.editedItem = Object.assign({}, item);
418 console.log(this.editedItem) 408 console.log(this.editedItem)
419 this.dialog = true; 409 this.dialog = true;
420 }, 410 },
421 profile(item) { 411 profile(item) {
422 this.editedIndex = this.desserts.indexOf(item); 412 this.editedIndex = this.desserts.indexOf(item);
423 this.editedItem = Object.assign({}, item); 413 this.editedItem = Object.assign({}, item);
424 this.dialog1 = true; 414 this.dialog1 = true;
425 }, 415 },
426 deleteItem(item) { 416 deleteItem(item) {
427 let deleteStudent = { 417 let deleteStudent = {
428 sectionId: item._id 418 sectionId: item._id
429 }; 419 };
430 http() 420 http()
431 .delete("/deleteSection", confirm('Are you sure you want to delete this?') && { params: deleteStudent }) 421 .delete("/deleteSection", confirm('Are you sure you want to delete this?') && { params: deleteStudent })
432 .then(response => { 422 .then(response => {
433 // console.log("deleteUers",deleteStudent) 423 // console.log("deleteUers",deleteStudent)
434 if ((this.snackbar = true)) { 424 if ((this.snackbar = true)) {
435 this.text = "Successfully delete Existing User"; 425 this.text = "Successfully delete Existing User";
436 } 426 }
437 this.getSectionList(); 427 this.getSectionList();
438 }) 428 })
439 .catch(error => { 429 .catch(error => {
440 // console.log(error); 430 // console.log(error);
441 }); 431 });
442 }, 432 },
443 activeTab(type) { 433 activeTab(type) {
444 switch (type) { 434 switch (type) {
445 case "existing": 435 case "existing":
446 this.newActive = false; 436 this.newActive = false;
447 this.isActive = true; 437 this.isActive = true;
448 break; 438 break;
449 439
450 default: 440 default:
451 this.newActive = true; 441 this.newActive = true;
452 this.isActive = false; 442 this.isActive = false;
453 break; 443 break;
454 } 444 }
455 }, 445 },
456 close() { 446 close() {
457 this.dialog = false; 447 this.dialog = false;
458 setTimeout(() => { 448 setTimeout(() => {
459 this.editedItem = Object.assign({}, this.defaultItem); 449 this.editedItem = Object.assign({}, this.defaultItem);
460 this.editedIndex = -1; 450 this.editedIndex = -1;
461 }, 300); 451 }, 300);
462 }, 452 },
463 close1() { 453 close1() {
464 this.dialog1 = false; 454 this.dialog1 = false;
465 }, 455 },
466 close2() { 456 close2() {
467 this.dialog2 = false; 457 this.dialog2 = false;
468 }, 458 },
469 submit() { 459 submit() {
470 if (this.$refs.forms.validate()) { 460 if (this.$refs.forms.validate()) {
471 let addSection = { 461 let addSection = {
472 name: this.editedItem.name, 462 name: this.editedItem.name,
473 classId: this.select, 463 classId: this.select,
474 session:this.editedItem.session 464 session:this.editedItem.session
475 }; 465 };
476 console.log(addSection) 466 console.log(addSection)
477 http() 467 http()
478 .post("/createSection", addSection) 468 .post("/createSection", addSection)
479 .then(response => { 469 .then(response => {
480 console.log(addSection) 470 console.log(addSection)
481 // this.getStudentList(); 471 // this.getStudentList();
482 if (this.snackbar = true) { 472 if (this.snackbar = true) {
483 this.text = "New user added successfully"; 473 this.text = "New user added successfully";
484 } 474 }
485 475
486 this.clear(); 476 this.clear();
487 }) 477 })
488 .catch(error => { 478 .catch(error => {
489 // console.log(error); 479 // console.log(error);
490 if (this.snackbar = true) { 480 if (this.snackbar = true) {
491 this.text = error.response.data.message; 481 this.text = error.response.data.message;
492 } 482 }
493 }); 483 });
494 } 484 }
495 }, 485 },
496 mail() { 486 mail() {
497 }, 487 },
498 download() { 488 download() {
499 }, 489 },
500 clear() { 490 clear() {
501 this.$refs.form.reset(); 491 this.$refs.form.reset();
502 }, 492 },
503 save() { 493 save() {
504 // if (this.$refs.form.validate()) { 494 // if (this.$refs.form.validate()) {
505 let editStudent = { 495 let editStudent = {
506 name: this.editedItem.name, 496 name: this.editedItem.name,
507 classId: this.select, 497 classId: this.select,
508 sectionId: this.editedItem._id 498 sectionId: this.editedItem._id
509 }; 499 };
510 http() 500 http()
511 .put("/updateSection", editStudent) 501 .put("/updateSection", editStudent)
512 .then(response => { 502 .then(response => {
513 // console.log("editStudent",editStudent); 503 // console.log("editStudent",editStudent);
514 if ((this.snackbar = true)) { 504 if ((this.snackbar = true)) {
515 this.text = "Successfully Edit Existing User"; 505 this.text = "Successfully Edit Existing User";
516 } 506 }
517 this.getSectionList(); 507 this.getSectionList();
518 // this.showLoader = false; 508 // this.showLoader = false;
519 }) 509 })
520 .catch(error => { 510 .catch(error => {
521 this.text = error.response.data.message; 511 this.text = error.response.data.message;
522 // console.log(error); 512 // console.log(error);
523 }); 513 });
524 this.close(); 514 this.close();
525 // } 515 // }
526 }, 516 },
527 handleDrawerToggle() { 517 handleDrawerToggle() {
528 window.getApp.$emit("APP_DRAWER_TOGGLED"); 518 window.getApp.$emit("APP_DRAWER_TOGGLED");
529 }, 519 },
530 handleFullScreen() { 520 handleFullScreen() {
531 Util.toggleFullScreen(); 521 Util.toggleFullScreen();
532 } 522 }
533 }, 523 },
534 mounted() { 524 mounted() {
535 this.getSectionList(); 525 this.getSectionList();
536 526
537 var token = this.$store.state.token; 527 var token = this.$store.state.token;
538 http() 528 http()
539 .get("/getClassesList", { 529 .get("/getClassesList", {
540 headers: { Authorization: "Bearer " + token } 530 headers: { Authorization: "Bearer " + token }
541 }) 531 })
542 .then(response => { 532 .then(response => {
543 this.addclass = response.data.data; 533 this.addclass = response.data.data;
544 console.log("getClassesList=====>",this.addclass) 534 console.log("getClassesList=====>",this.addclass)
545 535
546 }) 536 })
547 .catch(err => { 537 .catch(err => {
548 // console.log("err====>", err); 538 // console.log("err====>", err);
549 this.$router.replace({ path: '/' }); 539 this.$router.replace({ path: '/' });
550 }); 540 });
551 }, 541 },
552 542
553 computed:{ 543 computed:{
554 toolbarColor() { 544 toolbarColor() {
555 return this.$vuetify.options.extra.mainNav; 545 return this.$vuetify.options.extra.mainNav;
556 } 546 }
557 } 547 }
558 }; 548 };
559 </script> 549 </script>
560 <style scoped> 550 <style scoped>
561 .v-tabs__div { 551 .v-tabs__div {
562 text-transform: none; 552 text-transform: none;
563 } 553 }
564 .v-input__prepend-outer { 554 .v-input__prepend-outer {
565 margin-right: 0px !important; 555 margin-right: 0px !important;
566 } 556 }
567 .v-card__actions .v-btn { 557 .v-card__actions .v-btn {
568 margin: 0 15px; 558 margin: 0 15px;
569 min-width: 120px; 559 min-width: 120px;
570 } 560 }
571 .primary { 561 .primary {
572 background-color: #aaa !important; 562 background-color: #aaa !important;
573 border-color: #aaa !important; 563 border-color: #aaa !important;
574 } 564 }
575 h4 { 565 h4 {
576 background-repeat: no-repeat; 566 background-repeat: no-repeat;
577 padding: 8px; 567 padding: 8px;
578 margin: auto; 568 margin: auto;
579 font-size: 25px; 569 font-size: 25px;
580 } 570 }
581 #name { 571 #name {
582 position: absolute; 572 position: absolute;
583 left: 100px; 573 left: 100px;
584 top: 17px; 574 top: 17px;
585 } 575 }
586 #icon { 576 #icon {
587 position: absolute; 577 position: absolute;
588 right: 8px; 578 right: 8px;
589 top: 8px; 579 top: 8px;
590 } 580 }
591 #m { 581 #m {
592 position: relative; 582 position: relative;
593 left: 135px; 583 left: 135px;
594 top: -15px; 584 top: -15px;
595 } 585 }
596 #G { 586 #G {
597 position: absolute; 587 position: absolute;
598 top: 38px; 588 top: 38px;
599 color: white; 589 color: white;
600 } 590 }
601 #bt { 591 #bt {
602 position: relative; 592 position: relative;
603 top: -20px; 593 top: -20px;
604 left: 115px; 594 left: 115px;
605 } 595 }
606 #e { 596 #e {
607 position: relative; 597 position: relative;
608 top: 5px; 598 top: 5px;
609 right: -30px; 599 right: -30px;
610 height: 17px; 600 height: 17px;
611 cursor: pointer; 601 cursor: pointer;
612 } 602 }
613 #d { 603 #d {
614 position: relative; 604 position: relative;
615 top: 5px; 605 top: 5px;
616 right: -70px; 606 right: -70px;
617 height: 17px; 607 height: 17px;
618 cursor: pointer; 608 cursor: pointer;
619 } 609 }
620 #td { 610 #td {
621 border: 1px solid #dddddd; 611 border: 1px solid #dddddd;
622 text-align: left; 612 text-align: left;
623 padding: 8px; 613 padding: 8px;
624 } 614 }
625 #dialog { 615 #dialog {
626 height: 550px; 616 height: 550px;
627 } 617 }
628 .active { 618 .active {
629 background-color: black; 619 background-color: black;
630 color: white !important; 620 color: white !important;
631 } 621 }
632 .activebtn { 622 .activebtn {
633 color: black !important; 623 color: black !important;
634 } 624 }
635 #flex { 625 #flex {
636 height: 300px; 626 height: 300px;
637 } 627 }
638 .top{ 628 .top{
639 margin-top:100px; 629 margin-top:100px;
640 } 630 }
641 .v-tabs__item a{ 631 .v-tabs__item a{
642 font-size:16px !important; 632 font-size:16px !important;
643 } 633 }
644 @media screen and (max-width: 769px){ 634 @media screen and (max-width: 769px){
645 .top{ 635 .top{
646 margin-top:0 !important; 636 margin-top:0 !important;
647 } 637 }
648 .userSearch .v-icon { 638 .userSearch .v-icon {
649 font-size: 20px !important; 639 font-size: 20px !important;
650 margin-left: 20px ; 640 margin-left: 20px ;
651 } 641 }
652 } 642 }
653 @media screen and (max-width: 380px) { 643 @media screen and (max-width: 380px) {
654 .right { 644 .right {
655 float: none !important; 645 float: none !important;
656 } 646 }
657 .subheading { 647 .subheading {
658 font-size: 14px !important; 648 font-size: 14px !important;
659 } 649 }
660 .v-card__actions .v-btn{ 650 .v-card__actions .v-btn{
661 margin: 0 0px; 651 margin: 0 0px;
662 min-width: 100px; 652 min-width: 100px;
663 } 653 }
664 /* .searchIcon .v-icon { 654 /* .searchIcon .v-icon {
665 font-size: 20px; 655 font-size: 20px;
666 margin-left: 20px; 656 margin-left: 20px;
667 } */ 657 } */
668 .subheading { 658 .subheading {
669 font-size: 12px !important; 659 font-size: 12px !important;
670 } 660 }
671 h5 { 661 h5 {
672 font-size: 13px; 662 font-size: 13px;
673 } 663 }
674 } 664 }
675 .v-icon{ 665 .v-icon{
676 font-size:30px; 666 font-size:30px;
677 } 667 }
678 @media screen and (min-width: 1270px){ 668 @media screen and (min-width: 1270px){
679 .hide{ 669 .hide{
680 display: none; 670 display: none;
681 } 671 }
682 /* } 672 /* }
683 @media screen and (max-width: 962px) { 673 @media screen and (max-width: 962px) {
684 .imglogo{ 674 .imglogo{
685 position: absolute; 675 position: absolute;
686 top: 13px; 676 top: 13px;
687 left: 13px !important; 677 left: 13px !important;
688 width: 70px; 678 width: 70px;
689 height: 24px; 679 height: 24px;
690 } */ 680 } */
691 } 681 }
692 @media screen and (max-width: 420px){ 682 @media screen and (max-width: 420px){
693 .userSearch .v-text-field .v-label{ 683 .userSearch .v-text-field .v-label{
694 line-height: 24px !important; 684 line-height: 24px !important;
695 } 685 }
696 .userSearch .v-label{ 686 .userSearch .v-label{
697 font-size: 13px !important; 687 font-size: 13px !important;
698 } 688 }
699 .v-list__tile { 689 .v-list__tile {
700 font-size:14px; 690 font-size:14px;
701 padding: 0 10px; 691 padding: 0 10px;
702 } 692 }
703 .name{ 693 .name{
704 font-size:15px; 694 font-size:15px;
705 } 695 }
706 } 696 }
707 </style> 697 </style>
src/pages/TimeTable/timeTable.vue
Diff comments   View file @55f72b7
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <v-toolbar class="fixcolors" fixed app> 3 <v-toolbar class="fixcolors" fixed app>
4 <v-toolbar-title class="ml-0 pl-3"> 4 <v-toolbar-title class="ml-0 pl-3">
5 <v-toolbar-side-icon @click.stop="handleDrawerToggle" class="hide"></v-toolbar-side-icon> 5 <v-toolbar-side-icon @click.stop="handleDrawerToggle" class="hide"></v-toolbar-side-icon>
6 </v-toolbar-title> 6 </v-toolbar-title>
7 <!-- ****** SEARCH ALL EXISTING TIME-TABLE ****** --> 7 <!-- ****** SEARCH ALL EXISTING TIME-TABLE ****** -->
8 <v-flex xs7 sm3 class="userSearch"> 8 <v-flex xs7 sm3 class="userSearch">
9 <v-text-field 9 <v-text-field
10 flat 10 flat
11 append-icon="search" 11 append-icon="search"
12 label="Find your Teachers" 12 label="Find your Time Talbe"
13 v-model="search" 13 v-model="search"
14 color="white" 14 color="white"
15 dark 15 dark
16 ></v-text-field> 16 ></v-text-field>
17 </v-flex> 17 </v-flex>
18 <v-spacer></v-spacer> 18 <v-spacer></v-spacer>
19 <v-menu offset-y origin="center center" :nudge-bottom="10" transition="scale-transition"> 19 <v-menu offset-y origin="center center" :nudge-bottom="10" transition="scale-transition">
20 <v-btn icon large flat slot="activator"> 20 <v-btn icon large flat slot="activator">
21 <v-avatar size="40px"> 21 <v-avatar size="40px">
22 <img src="/static/icon/user.png"> 22 <img src="/static/icon/user.png">
23 </v-avatar> 23 </v-avatar>
24 </v-btn> 24 </v-btn>
25 <v-list class="pa-0"> 25 <v-list class="pa-0">
26 <v-list-tile 26 <v-list-tile
27 v-for="(item,index) in items" 27 v-for="(item,index) in items"
28 :to="!item.href ? { name: item.name } : null" 28 :to="!item.href ? { name: item.name } : null"
29 :href="item.href" 29 :href="item.href"
30 @click="item.click" 30 @click="item.click"
31 ripple="ripple" 31 ripple="ripple"
32 :disabled="item.disabled" 32 :disabled="item.disabled"
33 :target="item.target" 33 :target="item.target"
34 rel="noopener" 34 rel="noopener"
35 :key="index" 35 :key="index"
36 > 36 >
37 <v-list-tile-action v-if="item.icon"> 37 <v-list-tile-action v-if="item.icon">
38 <v-icon>{{ item.icon }}</v-icon> 38 <v-icon>{{ item.icon }}</v-icon>
39 </v-list-tile-action> 39 </v-list-tile-action>
40 <v-list-tile-content> 40 <v-list-tile-content>
41 <v-list-tile-title>{{ item.title }}</v-list-tile-title> 41 <v-list-tile-title>{{ item.title }}</v-list-tile-title>
42 </v-list-tile-content> 42 </v-list-tile-content>
43 </v-list-tile> 43 </v-list-tile>
44 </v-list> 44 </v-list>
45 </v-menu> 45 </v-menu>
46 </v-toolbar> 46 </v-toolbar>
47 <v-tabs grow slider-color="black"> 47 <v-tabs grow slider-color="black">
48 <v-tab 48 <v-tab
49 ripple 49 ripple
50 @click="activeTab('existing')" 50 @click="activeTab('existing')"
51 v-bind:class="{ active: isActive }" 51 v-bind:class="{ active: isActive }"
52 id="tab" 52 id="tab"
53 class="subheading" 53 class="subheading"
54 >Existing Time Table</v-tab> 54 >Existing Time Table</v-tab>
55 <v-tab 55 <v-tab
56 ripple 56 ripple
57 @click="activeTab('new')" 57 @click="activeTab('new')"
58 v-bind:class="{ active: newActive }" 58 v-bind:class="{ active: newActive }"
59 id="tab1" 59 id="tab1"
60 User 60 User
61 class="subheading" 61 class="subheading"
62 >Add New Time Table</v-tab> 62 >Add New Time Table</v-tab>
63 63
64 <!-- ****** EDITS TIME-TABLE****** --> 64 <!-- ****** EDITS TIME-TABLE****** -->
65 65
66 <v-tab-item> 66 <v-tab-item>
67 <v-snackbar 67 <v-snackbar
68 :timeout="timeout" 68 :timeout="timeout"
69 :top="y === 'top'" 69 :top="y === 'top'"
70 :right="x === 'right'" 70 :right="x === 'right'"
71 :vertical="mode === 'vertical'" 71 :vertical="mode === 'vertical'"
72 v-model="snackbar" 72 v-model="snackbar"
73 color="success" 73 color="success"
74 >{{ text }}</v-snackbar> 74 >{{ text }}</v-snackbar>
75 <v-dialog v-model="dialog" max-width="1000px"> 75 <v-dialog v-model="dialog" max-width="1000px">
76 <v-flex xs12 sm12 class> 76 <v-flex xs12 sm12 class>
77 <v-toolbar color="white"> 77 <v-toolbar color="white">
78 <v-spacer></v-spacer> 78 <v-spacer></v-spacer>
79 <v-toolbar-title>Edit Time Table</v-toolbar-title> 79 <v-toolbar-title>Edit Time Table</v-toolbar-title>
80 <v-spacer></v-spacer> 80 <v-spacer></v-spacer>
81 </v-toolbar> 81 </v-toolbar>
82 <v-card flat> 82 <v-card flat>
83 <v-form ref="form"> 83 <v-form ref="form">
84 <v-container fluid> 84 <v-container fluid>
85 <v-layout> 85 <v-layout>
86 <v-flex 86 <v-flex
87 xs12 87 xs12
88 class="text-xs-center text-sm-center text-md-center text-lg-center mr-4" 88 class="text-xs-center text-sm-center text-md-center text-lg-center mr-4"
89 > 89 >
90 <v-avatar size="100px"> 90 <v-avatar size="100px">
91 <img src="/static/icon/user.png" v-if="!imageUrl"> 91 <img src="/static/icon/user.png" v-if="!imageUrl">
92 </v-avatar> 92 </v-avatar>
93 <input 93 <input
94 type="file" 94 type="file"
95 style="display: none" 95 style="display: none"
96 ref="image" 96 ref="image"
97 accept="image/*" 97 accept="image/*"
98 @change="onFilePicked" 98 @change="onFilePicked"
99 > 99 >
100 <img 100 <img
101 :src="imageData.imageUrl" 101 :src="imageData.imageUrl"
102 height="150" 102 height="150"
103 v-if="imageUrl" 103 v-if="imageUrl"
104 style="border-radius:50%; width:200px" 104 style="border-radius:50%; width:200px"
105 > 105 >
106 </v-flex> 106 </v-flex>
107 </v-layout> 107 </v-layout>
108 <v-flex xs12 sm12> 108 <v-flex xs12 sm12>
109 <v-layout> 109 <v-layout>
110 <v-flex xs4 class="pt-4 subheading"> 110 <v-flex xs4 class="pt-4 subheading">
111 <label class="right">class No:</label> 111 <label class="right">class No:</label>
112 </v-flex> 112 </v-flex>
113 <v-flex xs12 sm5 class="ml-3"> 113 <v-flex xs12 sm5 class="ml-3">
114 <v-select 114 <v-select
115 :items="addclass" 115 :items="addclass"
116 label="Select Class" 116 label="Select Class"
117 v-model="editedItem.classNum" 117 v-model="editedItem.classNum"
118 item-text="classNum" 118 item-text="classNum"
119 item-value= "_id" 119 item-value="_id"
120 @change="getSections(editedItem.classNum)" 120 @change="getSections(editedItem.classNum)"
121 ></v-select> 121 ></v-select>
122 </v-flex> 122 </v-flex>
123 </v-layout> 123 </v-layout>
124 </v-flex> 124 </v-flex>
125 <v-flex xs12 sm12> 125 <v-flex xs12 sm12>
126 <v-layout> 126 <v-layout>
127 <v-flex xs4 class="pt-4 subheading"> 127 <v-flex xs4 class="pt-4 subheading">
128 <label class="right">Section Name:</label> 128 <label class="right">Section Name:</label>
129 </v-flex> 129 </v-flex>
130 <v-flex xs5 class="ml-3"> 130 <v-flex xs5 class="ml-3">
131 <v-select 131 <v-select
132 :items="addSection" 132 :items="addSection"
133 label="Select Section" 133 label="Select Section"
134 v-model="editedItem.selectSection" 134 v-model="editedItem.selectSection"
135 item-text="name" 135 item-text="name"
136 item-value="_id" 136 item-value="_id"
137 ></v-select> 137 ></v-select>
138 </v-flex> 138 </v-flex>
139 </v-layout> 139 </v-layout>
140 </v-flex> 140 </v-flex>
141 <v-layout> 141 <v-layout>
142 <v-flex xs12 sm8 offset-sm2> 142 <v-flex xs12 sm8 offset-sm2>
143 <v-card-actions> 143 <v-card-actions>
144 <v-btn round dark @click.native="close">Cancel</v-btn> 144 <v-btn round dark @click.native="close">Cancel</v-btn>
145 <v-spacer></v-spacer> 145 <v-spacer></v-spacer>
146 <v-btn round dark @click="save">Save</v-btn> 146 <v-btn round dark @click="save">Save</v-btn>
147 </v-card-actions> 147 </v-card-actions>
148 </v-flex> 148 </v-flex>
149 </v-layout> 149 </v-layout>
150 </v-container> 150 </v-container>
151 </v-form> 151 </v-form>
152 </v-card> 152 </v-card>
153 </v-flex> 153 </v-flex>
154 </v-dialog> 154 </v-dialog>
155 155
156 <!-- ****** ADD LECTURES TIME-TABLE ****** --> 156 <!-- ****** ADD LECTURES TIME-TABLE ****** -->
157 157
158 <v-dialog v-model="dialogAddLecture" max-width="1000px"> 158 <v-dialog v-model="dialogAddLecture" max-width="1000px">
159 <v-flex xs12 sm12 class> 159 <v-flex xs12 sm12 class>
160 <v-toolbar color="white"> 160 <v-toolbar color="white">
161 <v-spacer></v-spacer> 161 <v-spacer></v-spacer>
162 <v-toolbar-title>Add Lecture</v-toolbar-title> 162 <v-toolbar-title>Add Lecture</v-toolbar-title>
163 <v-spacer></v-spacer> 163 <v-spacer></v-spacer>
164 </v-toolbar> 164 </v-toolbar>
165 <v-card flat> 165 <v-card flat>
166 <v-form ref="form" v-model="valid" lazy-validation> 166 <v-form ref="form" v-model="valid" lazy-validation>
167 <v-container fluid> 167 <v-container fluid>
168 <v-flex xs12 sm12> 168 <v-flex xs12 sm12>
169 <v-layout> 169 <v-layout>
170 <v-flex xs4 class="pt-4 subheading"> 170 <v-flex xs4 class="pt-4 subheading">
171 <label class="right">Subject Name:</label> 171 <label class="right">Subject Name:</label>
172 </v-flex> 172 </v-flex>
173 <v-flex xs5 class="ml-3"> 173 <v-flex xs5 class="ml-3">
174 <v-text-field 174 <v-text-field
175 v-model="addlectures.subjectName" 175 v-model="addlectures.subjectName"
176 :rules="subjectNameRules" 176 :rules="subjectNameRules"
177 placeholder="fill your Subject Name" 177 placeholder="fill your Subject Name"
178 type="text" 178 type="text"
179 ></v-text-field> 179 ></v-text-field>
180 </v-flex> 180 </v-flex>
181 </v-layout> 181 </v-layout>
182 </v-flex> 182 </v-flex>
183 <v-flex xs12 sm12> 183 <v-flex xs12 sm12>
184 <v-layout> 184 <v-layout>
185 <v-flex xs4 class="pt-4 subheading"> 185 <v-flex xs4 class="pt-4 subheading">
186 <label class="right">Time In:</label> 186 <label class="right">Time In:</label>
187 </v-flex> 187 </v-flex>
188 <v-flex xs5 class="ml-3"> 188 <v-flex xs5 class="ml-3">
189 <v-text-field 189 <v-text-field
190 v-model="addlectures.timeIn" 190 v-model="addlectures.timeIn"
191 :rules="timeInRules" 191 :rules="timeInRules"
192 placeholder="fill your Time In" 192 placeholder="fill your Time In"
193 type="text" 193 type="text"
194 ></v-text-field> 194 ></v-text-field>
195 </v-flex> 195 </v-flex>
196 </v-layout> 196 </v-layout>
197 </v-flex> 197 </v-flex>
198 <v-flex xs12 sm12> 198 <v-flex xs12 sm12>
199 <v-layout> 199 <v-layout>
200 <v-flex xs4 class="pt-4 subheading"> 200 <v-flex xs4 class="pt-4 subheading">
201 <label class="right">Time Out:</label> 201 <label class="right">Time Out:</label>
202 </v-flex> 202 </v-flex>
203 <v-flex xs5 class="ml-3"> 203 <v-flex xs5 class="ml-3">
204 <v-text-field 204 <v-text-field
205 v-model="addlectures.timeOut" 205 v-model="addlectures.timeOut"
206 :rules="timeOutRules" 206 :rules="timeOutRules"
207 placeholder="fill your Time Out" 207 placeholder="fill your Time Out"
208 type="text" 208 type="text"
209 ></v-text-field> 209 ></v-text-field>
210 </v-flex> 210 </v-flex>
211 </v-layout> 211 </v-layout>
212 </v-flex> 212 </v-flex>
213 <v-flex xs12 sm12> 213 <v-flex xs12 sm12>
214 <v-layout> 214 <v-layout>
215 <v-flex xs4 class="pt-4 subheading"> 215 <v-flex xs4 class="pt-4 subheading">
216 <label class="right">Select Teacher:</label> 216 <label class="right">Select Teacher:</label>
217 </v-flex> 217 </v-flex>
218 <v-flex xs5 class="ml-3"> 218 <v-flex xs5 class="ml-3">
219 <v-select 219 <v-select
220 :items="addTeachers" 220 :items="addTeachers"
221 label="Select Teacher" 221 label="Select Teacher"
222 v-model="addlectures.teacherId" 222 v-model="addlectures.teacherId"
223 :rules="subjectNameRules" 223 :rules="subjectNameRules"
224 item-text="name" 224 item-text="name"
225 item-value="_id" 225 item-value="_id"
226 required 226 required
227 ></v-select> 227 ></v-select>
228 </v-flex> 228 </v-flex>
229 </v-layout> 229 </v-layout>
230 </v-flex> 230 </v-flex>
231 <v-layout> 231 <v-layout>
232 <v-flex xs12 sm8 offset-sm2> 232 <v-flex xs12 sm8 offset-sm2>
233 <v-card-actions> 233 <v-card-actions>
234 <v-btn round dark @click.native="closedialogLecture">Cancel</v-btn> 234 <v-btn round dark @click.native="closedialogLecture">Cancel</v-btn>
235 <v-spacer></v-spacer> 235 <v-spacer></v-spacer>
236 <!-- <v-btn round dark @click="updateParticularTable">Save</v-btn> --> 236 <!-- <v-btn round dark @click="updateParticularTable">Save</v-btn> -->
237 <v-btn round dark @click="AddLecture">Save</v-btn> 237 <v-btn round dark @click="AddLecture">Save</v-btn>
238
239 </v-card-actions> 238 </v-card-actions>
240 </v-flex> 239 </v-flex>
241 </v-layout> 240 </v-layout>
242 </v-container> 241 </v-container>
243 </v-form> 242 </v-form>
244 </v-card> 243 </v-card>
245 </v-flex> 244 </v-flex>
246 </v-dialog> 245 </v-dialog>
247 246
248 <!-- ****** EDIT LECTURES TIME-TABLE ****** --> 247 <!-- ****** EDIT LECTURES TIME-TABLE ****** -->
249 248
250 <v-dialog v-model="dialogUpdateLectures" max-width="1000px"> 249 <v-dialog v-model="dialogUpdateLectures" max-width="1000px">
251 <v-flex xs12 sm12 class> 250 <v-flex xs12 sm12 class>
252 <v-toolbar color="white"> 251 <v-toolbar color="white">
253 <v-spacer></v-spacer> 252 <v-spacer></v-spacer>
254 <v-toolbar-title>Edit Lecture</v-toolbar-title> 253 <v-toolbar-title>Edit Lecture</v-toolbar-title>
255 <v-spacer></v-spacer> 254 <v-spacer></v-spacer>
256 </v-toolbar> 255 </v-toolbar>
257 <v-card flat> 256 <v-card flat>
258 <v-form ref="form"> 257 <v-form ref="form">
259 <v-container fluid> 258 <v-container fluid>
260 <v-flex xs12 sm12> 259 <v-flex xs12 sm12>
261 <v-layout> 260 <v-layout>
262 <v-flex xs4 class="pt-4 subheading"> 261 <v-flex xs4 class="pt-4 subheading">
263 <label class="right">Subject Name:</label> 262 <label class="right">Subject Name:</label>
264 </v-flex> 263 </v-flex>
265 <v-flex xs5 class="ml-3"> 264 <v-flex xs5 class="ml-3">
266 <v-text-field 265 <v-text-field
267 v-model="updateLectures.subjectName" 266 v-model="updateLectures.subjectName"
268 placeholder="fill your Subject Name" 267 placeholder="fill your Subject Name"
269 type="text" 268 type="text"
270 ></v-text-field> 269 ></v-text-field>
271 </v-flex> 270 </v-flex>
272 </v-layout> 271 </v-layout>
273 </v-flex> 272 </v-flex>
274 <v-flex xs12 sm12> 273 <v-flex xs12 sm12>
275 <v-layout> 274 <v-layout>
276 <v-flex xs4 class="pt-4 subheading"> 275 <v-flex xs4 class="pt-4 subheading">
277 <label class="right">Time In:</label> 276 <label class="right">Time In:</label>
278 </v-flex> 277 </v-flex>
279 <v-flex xs5 class="ml-3"> 278 <v-flex xs5 class="ml-3">
280 <v-text-field 279 <v-text-field
281 v-model="updateLectures.timeIn" 280 v-model="updateLectures.timeIn"
282 placeholder="fill your Time In" 281 placeholder="fill your Time In"
283 type="text" 282 type="text"
284 ></v-text-field> 283 ></v-text-field>
285 </v-flex> 284 </v-flex>
286 </v-layout> 285 </v-layout>
287 </v-flex> 286 </v-flex>
288 <v-flex xs12 sm12> 287 <v-flex xs12 sm12>
289 <v-layout> 288 <v-layout>
290 <v-flex xs4 class="pt-4 subheading"> 289 <v-flex xs4 class="pt-4 subheading">
291 <label class="right">Time Out:</label> 290 <label class="right">Time Out:</label>
292 </v-flex> 291 </v-flex>
293 <v-flex xs5 class="ml-3"> 292 <v-flex xs5 class="ml-3">
294 <v-text-field 293 <v-text-field
295 v-model="updateLectures.timeOut" 294 v-model="updateLectures.timeOut"
296 placeholder="fill your Time Out" 295 placeholder="fill your Time Out"
297 type="text" 296 type="text"
298 ></v-text-field> 297 ></v-text-field>
299 </v-flex> 298 </v-flex>
300 </v-layout> 299 </v-layout>
301 </v-flex> 300 </v-flex>
302 <v-flex xs12 sm12> 301 <v-flex xs12 sm12>
303 <v-layout> 302 <v-layout>
304 <v-flex xs4 class="pt-4 subheading"> 303 <v-flex xs4 class="pt-4 subheading">
305 <label class="right">Select Teacher:</label> 304 <label class="right">Select Teacher:</label>
306 </v-flex> 305 </v-flex>
307 <v-flex xs5 class="ml-3"> 306 <v-flex xs5 class="ml-3">
308 <v-select 307 <v-select
309 :items="addTeachers" 308 :items="addTeachers"
310 label="Select Teacher" 309 label="Select Teacher"
311 v-model="updateLectures.teacherId" 310 v-model="updateLectures.teacherId"
312 item-text="name" 311 item-text="name"
313 item-value="_id" 312 item-value="_id"
314 required 313 required
315 ></v-select> 314 ></v-select>
316 </v-flex> 315 </v-flex>
317 </v-layout> 316 </v-layout>
318 </v-flex> 317 </v-flex>
319 <v-layout> 318 <v-layout>
320 <v-flex xs12 sm8 offset-sm2> 319 <v-flex xs12 sm8 offset-sm2>
321 <v-card-actions> 320 <v-card-actions>
322 <v-btn round dark @click.native="closeUpdateLectures">Cancel</v-btn> 321 <v-btn round dark @click.native="closeUpdateLectures">Cancel</v-btn>
323 <v-spacer></v-spacer> 322 <v-spacer></v-spacer>
324 <v-btn round dark @click="updateParticularTable">Save</v-btn> 323 <v-btn round dark @click="updateParticularTable">Save</v-btn>
325
326 </v-card-actions> 324 </v-card-actions>
327 </v-flex> 325 </v-flex>
328 </v-layout> 326 </v-layout>
329 </v-container> 327 </v-container>
330 </v-form> 328 </v-form>
331 </v-card> 329 </v-card>
332 </v-flex> 330 </v-flex>
333 </v-dialog> 331 </v-dialog>
334 332
335 <v-snackbar 333 <v-snackbar
336 :timeout="timeout" 334 :timeout="timeout"
337 :top="y === 'top'" 335 :top="y === 'top'"
338 :right="x === 'right'" 336 :right="x === 'right'"
339 :vertical="mode === 'vertical'" 337 :vertical="mode === 'vertical'"
340 v-model="snackbar" 338 v-model="snackbar"
341 color="success" 339 color="success"
342 >{{ text }}</v-snackbar> 340 >{{ text }}</v-snackbar>
343 341
344 <!-- ****** EXISTING-USERS TIME-TABLE ****** --> 342 <!-- ****** EXISTING-USERS TIME-TABLE ****** -->
345 <v-flex xs12> 343 <v-flex xs12>
346 <v-data-table :headers="headers" :items="desserts" item-key="_id"> 344 <v-data-table
345 :headers="headers"
346 :items="desserts"
347 :pagination.sync="pagination"
348 :search="search"
349 item-key="_id"
350 >
347 <template slot="items" slot-scope="props"> 351 <template slot="items" slot-scope="props">
348 <tr 352 <tr
349 style="cursor: pointer;" 353 style="cursor: pointer;"
350 @click="getTimeTable(props.item), props.expanded = !props.expanded" 354 @click="getTimeTable(props.item), props.expanded = !props.expanded"
351 > 355 >
352 <td class="text-xs-center">{{ props.index }}</td> 356 <td class="text-xs-center">{{ props.index }}</td>
353 <td class="text-xs-center">{{ props.item.classData.classNum}}</td> 357 <td class="text-xs-center">{{ props.item.classData.classNum}}</td>
354 <td class="text-xs-center">{{ props.item.sectionData.name }}</td> 358 <td class="text-xs-center">{{ props.item.sectionData.name }}</td>
355 <td class="text-xs-center"> 359 <td class="text-xs-center">
356 <span> 360 <span>
357 <img 361 <img
358 style="cursor:pointer; width:20px; height:18px; " 362 style="cursor:pointer; width:20px; height:18px; "
359 class="mr-5" 363 class="mr-5"
360 @click="editItem(props.item)" 364 @click="editItem(props.item)"
361 src="/static/icon/edit1.png" 365 src="/static/icon/edit1.png"
362 > 366 >
363 <img 367 <img
364 style="cursor:pointer; height:20px; " 368 style="cursor:pointer; height:20px; "
365 class="mr-5" 369 class="mr-5"
366 @click="deleteItem(props.item)" 370 @click="deleteItem(props.item)"
367 src="/static/icon/delete1.png" 371 src="/static/icon/delete1.png"
368 > 372 >
369 </span> 373 </span>
370 </td> 374 </td>
371 </tr> 375 </tr>
372 </template> 376 </template>
373 <template slot="expand" slot-scope="props"> 377 <template slot="expand" slot-scope="props">
374 <v-data-table 378 <v-data-table
375 :items="timeTableList.schedule" 379 :items="timeTableList.schedule"
376 hide-actions 380 hide-actions
377 item-key="title" 381 item-key="title"
378 style="width: auto;" 382 style="width: auto;"
379 > 383 >
380 <template slot="items" slot-scope="props"> 384 <template slot="items" slot-scope="props">
381 <tr> 385 <tr>
382 <td class="text-xs-left subheading"> <b> {{ props.item.day }} </b> </td> 386 <td class="text-xs-left subheading">
387 <b>{{ props.item.day }}</b>
388 </td>
383 <td> 389 <td>
384 <b> Subject</b><br/> 390 <b>Subject</b>
385 <b> Time In</b><br/> 391 <br>
386 <b> Time Out</b> 392 <b>Time In</b>
393 <br>
394 <b>Time Out</b>
387 </td> 395 </td>
388 <td v-for="list in props.item.lectures"> 396 <td v-for="list in props.item.lectures">
389 <b> {{ list.subjectName }} </b> 397 <b>{{ list.subjectName }}</b>
390 <img 398 <img
391 style="cursor:pointer; width:20px; height:18px; " 399 style="cursor:pointer; width:20px; height:18px; "
392 class="mr-2 ml-2" 400 class="mr-2 ml-2"
393 src="/static/icon/edit1.png" 401 src="/static/icon/edit1.png"
394 @click="updateTimeTable(list, timeTableList)" 402 @click="updateTimeTable(list, timeTableList)"
395 > 403 >
396 <img 404 <img
397 style="cursor:pointer; height:20px; " 405 style="cursor:pointer; height:20px; "
398 src="/static/icon/delete1.png" 406 src="/static/icon/delete1.png"
399 @click="deleteTimeTable(list, timeTableList)" 407 @click="deleteTimeTable(list, timeTableList)"
400 > 408 >
401 <br/> {{list.timeIn.slice(0,16)}} <br/> {{list.timeOut.slice(0,16)}} 409 <br>
410 {{list.timeIn.slice(0,16)}}
411 <br>
412 {{list.timeOut.slice(0,16)}}
402 </td> 413 </td>
403 <td > 414 <td>
404 <v-icon 415 <v-icon
405 color="black" 416 color="black"
406 @click="addLecture(props.item._id, timeTableList._id)" 417 @click="addLecture(props.item._id, timeTableList._id)"
407 >add_circle_outline</v-icon> 418 >add_circle_outline</v-icon>
408 </td> 419 </td>
409 </tr> 420 </tr>
410 </template> 421 </template>
411 </v-data-table> 422 </v-data-table>
412 </template> 423 </template>
424 <v-alert
425 slot="no-results"
426 :value="true"
427 color="error"
428 icon="warning"
429 >Your search for "{{ search }}" found no results.</v-alert>
413 </v-data-table> 430 </v-data-table>
414 <br> 431 <br>
415 <br> 432 <br>
416 </v-flex> 433 </v-flex>
417 </v-tab-item> 434 </v-tab-item>
418 435
419 <!-- ****** ADD MULTIPLE TIME-TABLE ****** --> 436 <!-- ****** ADD MULTIPLE TIME-TABLE ****** -->
420 437
421 <v-tab-item> 438 <v-tab-item>
422 <v-container> 439 <v-container>
423 <v-snackbar 440 <v-snackbar
424 :timeout="timeout" 441 :timeout="timeout"
425 :top="y === 'top'" 442 :top="y === 'top'"
426 :right="x === 'right'" 443 :right="x === 'right'"
427 :vertical="mode === 'vertical'" 444 :vertical="mode === 'vertical'"
428 v-model="snackbar" 445 v-model="snackbar"
429 color="success" 446 color="success"
430 >{{ text }}</v-snackbar> 447 >{{ text }}</v-snackbar>
431 <v-flex xs12 sm12 class="my-4"> 448 <v-flex xs12 sm12 class="my-4">
432 <v-card flat> 449 <v-card flat>
433 <v-form ref="form" v-model="valid" lazy-validation> 450 <v-form ref="form" v-model="valid" lazy-validation>
434 <v-container fluid> 451 <v-container fluid>
435 <v-layout> 452 <v-layout>
436 <v-flex 453 <v-flex
437 xs12 454 xs12
438 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4" 455 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4"
439 > 456 >
440 <v-avatar size="100px"> 457 <v-avatar size="100px">
441 <img src="/static/icon/user.png" v-if="!imageUrl"> 458 <img src="/static/icon/user.png" v-if="!imageUrl">
442 </v-avatar> 459 </v-avatar>
443 <input 460 <input
444 type="file" 461 type="file"
445 style="display: none" 462 style="display: none"
446 ref="image" 463 ref="image"
447 accept="image/*" 464 accept="image/*"
448 @change="onFilePicked" 465 @change="onFilePicked"
449 > 466 >
450 <img 467 <img
451 :src="imageData.imageUrl" 468 :src="imageData.imageUrl"
452 height="150" 469 height="150"
453 v-if="imageUrl" 470 v-if="imageUrl"
454 style="border-radius:50%; width:200px" 471 style="border-radius:50%; width:200px"
455 > 472 >
456 </v-flex> 473 </v-flex>
457 </v-layout> 474 </v-layout>
458 <v-flex xs12> 475 <v-flex xs12>
459 <v-layout> 476 <v-layout>
460 <v-flex xs4 class="pt-4 subheading"> 477 <v-flex xs4 class="pt-4 subheading">
461 <label class="right">Select Class:</label> 478 <label class="right">Select Class:</label>
462 </v-flex> 479 </v-flex>
463 <v-flex xs4 class="ml-3"> 480 <v-flex xs4 class="ml-3">
464 <v-select 481 <v-select
465 :items="addclass" 482 :items="addclass"
466 label="Select Class" 483 label="Select Class"
467 v-model="timeTable.select" 484 v-model="timeTable.select"
468 item-text="classNum" 485 item-text="classNum"
469 item-value="_id" 486 item-value="_id"
470 @change="getSections(timeTable.select)" 487 @change="getSections(timeTable.select)"
471 required 488 required
472 ></v-select> 489 ></v-select>
473 </v-flex> 490 </v-flex>
474 </v-layout> 491 </v-layout>
475 </v-flex> 492 </v-flex>
476 <v-flex xs12> 493 <v-flex xs12>
477 <v-layout> 494 <v-layout>
478 <v-flex xs4 class="pt-4 subheading"> 495 <v-flex xs4 class="pt-4 subheading">
479 <label class="right">Select Section:</label> 496 <label class="right">Select Section:</label>
480 </v-flex> 497 </v-flex>
481 <v-flex xs4 class="ml-3"> 498 <v-flex xs4 class="ml-3">
482 <v-select 499 <v-select
483 :items="addSection" 500 :items="addSection"
484 label="Select Section" 501 label="Select Section"
485 v-model="timeTable.selectSection" 502 v-model="timeTable.selectSection"
486 item-text="name" 503 item-text="name"
487 item-value="_id" 504 item-value="_id"
488 required 505 required
489 ></v-select> 506 ></v-select>
490 </v-flex> 507 </v-flex>
491 </v-layout> 508 </v-layout>
492 </v-flex> 509 </v-flex>
493 <v-flex xs12> 510 <v-flex xs12>
494 <v-layout> 511 <v-layout>
495 <v-flex xs4 class="pt-4 subheading"> 512 <v-flex xs4 class="pt-4 subheading">
496 <label class="right">Select Teacher:</label> 513 <label class="right">Select Teacher:</label>
497 </v-flex> 514 </v-flex>
498 <v-flex xs4 class="ml-3"> 515 <v-flex xs4 class="ml-3">
499 <v-select 516 <v-select
500 :items="addTeachers" 517 :items="addTeachers"
501 label="Select Teacher" 518 label="Select Teacher"
502 v-model="timeTable.selectTeacher" 519 v-model="timeTable.selectTeacher"
503 item-text="name" 520 item-text="name"
504 item-value="_id" 521 item-value="_id"
505 required 522 required
506 ></v-select> 523 ></v-select>
507 </v-flex> 524 </v-flex>
508 </v-layout> 525 </v-layout>
509 </v-flex> 526 </v-flex>
510 <v-flex xs12> 527 <v-flex xs12>
511 <v-layout> 528 <v-layout>
512 <v-flex xs4 class="pt-4 subheading"> 529 <v-flex xs4 class="pt-4 subheading">
513 <label class="right">Select Day:</label> 530 <label class="right">Select Day:</label>
514 </v-flex> 531 </v-flex>
515 <v-flex xs4 class="ml-3"> 532 <v-flex xs4 class="ml-3">
516 <v-select 533 <v-select
517 :items="addOneDay" 534 :items="addOneDay"
518 label="Select Day" 535 label="Select Day"
519 v-model="timeTable.selectDay" 536 v-model="timeTable.selectDay"
520 item-text="name" 537 item-text="name"
521 item-value="_id" 538 item-value="_id"
522 required 539 required
523 ></v-select> 540 ></v-select>
524 </v-flex> 541 </v-flex>
525 </v-layout> 542 </v-layout>
526 </v-flex> 543 </v-flex>
527 <v-flex xs12> 544 <v-flex xs12>
528 <v-layout> 545 <v-layout>
529 <v-flex xs4 class="pt-4 subheading"> 546 <v-flex xs4 class="pt-4 subheading">
530 <label class="right">Time In:</label> 547 <label class="right">Time In:</label>
531 </v-flex> 548 </v-flex>
532 <v-flex xs4 class="ml-3"> 549 <v-flex xs4 class="ml-3">
533 <v-text-field 550 <v-text-field
534 v-model="timeTable.timeIn" 551 v-model="timeTable.timeIn"
535 placeholder="fill your Time In" 552 placeholder="fill your Time In"
536 type="text" 553 type="text"
537 :rules="timeInRules" 554 :rules="timeInRules"
538 required 555 required
539 ></v-text-field> 556 ></v-text-field>
540 </v-flex> 557 </v-flex>
541 </v-layout> 558 </v-layout>
542 </v-flex> 559 </v-flex>
543 <v-flex xs12> 560 <v-flex xs12>
544 <v-layout> 561 <v-layout>
545 <v-flex xs4 class="pt-4 subheading"> 562 <v-flex xs4 class="pt-4 subheading">
546 <label class="right">Time Out:</label> 563 <label class="right">Time Out:</label>
547 </v-flex> 564 </v-flex>
548 <v-flex xs4 class="ml-3"> 565 <v-flex xs4 class="ml-3">
549 <v-text-field 566 <v-text-field
550 placeholder="fill your Time Out" 567 placeholder="fill your Time Out"
551 :rules="timeOutRules" 568 :rules="timeOutRules"
552 v-model="timeTable.timeOut" 569 v-model="timeTable.timeOut"
553 type="text" 570 type="text"
554 required 571 required
555 ></v-text-field> 572 ></v-text-field>
556 </v-flex> 573 </v-flex>
557 </v-layout> 574 </v-layout>
558 </v-flex> 575 </v-flex>
559 <v-flex xs12> 576 <v-flex xs12>
560 <v-layout> 577 <v-layout>
561 <v-flex xs4 class="pt-4 subheading"> 578 <v-flex xs4 class="pt-4 subheading">
562 <label class="right">Lecture No:</label> 579 <label class="right">Lecture No:</label>
563 </v-flex> 580 </v-flex>
564 <v-flex xs4 class="ml-3"> 581 <v-flex xs4 class="ml-3">
565 <v-text-field 582 <v-text-field
566 placeholder="fill your Lecture No" 583 placeholder="fill your Lecture No"
567 :rules="lectureRules" 584 :rules="lectureRules"
568 v-model="timeTable.lectureNum" 585 v-model="timeTable.lectureNum"
569 type="number" 586 type="number"
570 required 587 required
571 ></v-text-field> 588 ></v-text-field>
572 </v-flex> 589 </v-flex>
573 </v-layout> 590 </v-layout>
574 </v-flex> 591 </v-flex>
575 <v-flex xs12> 592 <v-flex xs12>
576 <v-layout> 593 <v-layout>
577 <v-flex xs4 class="pt-4 subheading"> 594 <v-flex xs4 class="pt-4 subheading">
578 <label class="right">Subject Name:</label> 595 <label class="right">Subject Name:</label>
579 </v-flex> 596 </v-flex>
580 <v-flex xs4 class="ml-3"> 597 <v-flex xs4 class="ml-3">
581 <v-text-field 598 <v-text-field
582 placeholder="fill your Subject Name" 599 placeholder="fill your Subject Name"
583 :rules="subjectNameRules" 600 :rules="subjectNameRules"
584 v-model="timeTable.subjectName" 601 v-model="timeTable.subjectName"
585 type="text" 602 type="text"
586 required 603 required
587 ></v-text-field> 604 ></v-text-field>
588 </v-flex> 605 </v-flex>
589 </v-layout> 606 </v-layout>
590 </v-flex> 607 </v-flex>
591 <v-layout> 608 <v-layout>
592 <v-flex xs12 sm6 offset-sm3> 609 <v-flex xs12 sm6 offset-sm3>
593 <v-card-actions> 610 <v-card-actions>
594 <v-btn @click="clear" round dark>clear</v-btn> 611 <v-btn @click="clear" round dark>clear</v-btn>
595 <v-spacer></v-spacer> 612 <v-spacer></v-spacer>
596 <v-btn @click="submit" round dark :loading="loading">Add</v-btn> 613 <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
597 </v-card-actions> 614 </v-card-actions>
598 </v-flex> 615 </v-flex>
599 </v-layout> 616 </v-layout>
600 </v-container> 617 </v-container>
601 </v-form> 618 </v-form>
602 </v-card> 619 </v-card>
603 </v-flex> 620 </v-flex>
604 </v-container> 621 </v-container>
605 </v-tab-item> 622 </v-tab-item>
606 </v-tabs> 623 </v-tabs>
607 <div class="loader" v-if="showLoader"> 624 <div class="loader" v-if="showLoader">
608 <v-progress-circular indeterminate color="white"></v-progress-circular> 625 <v-progress-circular indeterminate color="white"></v-progress-circular>
609 </div> 626 </div>
610 </v-app> 627 </v-app>
611 </template> 628 </template>
612 629
613 <script> 630 <script>
614 import http from "@/Services/http.js"; 631 import http from "@/Services/http.js";
615 import Util from "@/util"; 632 import Util from "@/util";
616 633
617 export default { 634 export default {
618 data: () => ({ 635 data: () => ({
619 y: "top", 636 y: "top",
620 x: "right", 637 x: "right",
621 mode: "", 638 mode: "",
622 timeout: 3000, 639 timeout: 3000,
623 text: "", 640 text: "",
624 search: "", 641 search: "",
625 snackbar: false, 642 snackbar: false,
626 loading: false, 643 loading: false,
627 showLoader: false, 644 showLoader: false,
628 menu: false,
629 menu1: false,
630 dialog: false, 645 dialog: false,
631 dialogAddLecture : false, 646 dialogAddLecture: false,
632 dialogUpdateLectures:false, 647 dialogUpdateLectures: false,
633 dialog1: false, 648 dialog1: false,
634 valid: true, 649 valid: true,
635 // validLeacture:true, 650 // validLeacture:true,
636 isActive: true, 651 isActive: true,
637 newActive: false, 652 newActive: false,
638 addclass: [], 653 addclass: [],
639 addSection: [], 654 addSection: [],
640 addTeachers: [], 655 addTeachers: [],
641 gender: ["Male", "Female"], 656 gender: ["Male", "Female"],
642 AddUsercredentials: {}, 657 AddUsercredentials: {},
643 pagination: { 658 pagination: {
644 rowsPerPage: 15 659 rowsPerPage: 15
645 }, 660 },
646 imageData: {}, 661 imageData: {},
647 imageName: "", 662 imageName: "",
648 imageUrl: "", 663 imageUrl: "",
649 imageFile: "", 664 imageFile: "",
650 timeInRules: [v => !!v || "Time In is required"], 665 timeInRules: [v => !!v || "Time In is required"],
651 timeOutRules: [v => !!v || "Time Out is required"], 666 timeOutRules: [v => !!v || "Time Out is required"],
652 lectureRules: [v => !!v || "Lecture No is required"], 667 lectureRules: [v => !!v || "Lecture No is required"],
653 subjectNameRules: [v => !!v || "Subject Name is required"], 668 subjectNameRules: [v => !!v || "Subject Name is required"],
654 headers: [ 669 headers: [
655 { 670 {
656 text: "No", 671 text: "No",
657 align: "center", 672 align: "center",
658 sortable: false, 673 sortable: false,
659 value: "No" 674 value: "No"
660 }, 675 },
661 { 676 {
662 text: "Class Name", 677 text: "Class Name",
663 value: "subjectName", 678 value: "classData.classNum",
664 sortable: false, 679 sortable: false,
665 align: "center" 680 align: "center"
666 }, 681 },
667 { 682 {
668 text: "Section Name", 683 text: "Section Name",
669 value: "sectionData", 684 value: "sectionData.name",
670 sortable: false, 685 sortable: false,
671 align: "center" 686 align: "center"
672 }, 687 },
673 { text: "Action", value: "", sortable: false, align: "center" } 688 { text: "Action", value: "", sortable: false, align: "center" }
674 ], 689 ],
675 daysHeaders: [ 690 daysHeaders: [
676 { text: "Day", value: "dayday", sortable: false, align: "center" }, 691 { text: "Day", value: "dayday", sortable: false, align: "center" },
677 { 692 {
678 text: "Subject Name", 693 text: "Subject Name",
679 value: "subjectName", 694 value: "subjectName",
680 sortable: false, 695 sortable: false,
681 align: "center" 696 align: "center"
682 }, 697 },
683 { text: "Time In", value: "timeIn", sortable: false, align: "center" }, 698 { text: "Time In", value: "timeIn", sortable: false, align: "center" },
684 { text: "Time Out", value: "timeOut", sortable: false, align: "center" } 699 { text: "Time Out", value: "timeOut", sortable: false, align: "center" }
685 ], 700 ],
686 addOneDay: [ 701 addOneDay: [
687 "Monday", 702 "Monday",
688 "Tuesday", 703 "Tuesday",
689 "Wednesday", 704 "Wednesday",
690 "Thursday", 705 "Thursday",
691 "Friday", 706 "Friday",
692 "Saturday", 707 "Saturday",
693 "Sunday" 708 "Sunday"
694 ], 709 ],
695 desserts: [], 710 desserts: [],
696 timeTableList: [], 711 timeTableList: [],
697 editedIndex: -1, 712 editedIndex: -1,
698 timeTable: { 713 timeTable: {
699 select: "", 714 select: "",
700 selectSection: "", 715 selectSection: "",
701 selectDay: "", 716 selectDay: "",
702 timeIn: "", 717 timeIn: "",
703 timeOut: "", 718 timeOut: "",
704 lectureNum: "", 719 lectureNum: "",
705 subjectName: "", 720 subjectName: "",
706 selectTeacher: "" 721 selectTeacher: ""
707 }, 722 },
708 editedItem: { 723 editedItem: {
709 classNum:"", 724 classNum: "",
710 selectSection: "" 725 selectSection: ""
711 }, 726 },
712 addlectures: { 727 addlectures: {
713 timeIn: "", 728 timeIn: "",
714 timeOut: "", 729 timeOut: "",
715 subjectName: "", 730 subjectName: "",
716 teacherId: "", 731 teacherId: "",
717 scheduleId:"", 732 scheduleId: "",
718 timeTableId:"" 733 timeTableId: ""
719 }, 734 },
720 updateLectures:{ 735 updateLectures: {
721 timeIn: "", 736 timeIn: "",
722 timeOut: "", 737 timeOut: "",
723 subjectName: "", 738 subjectName: "",
724 teacherId: "", 739 teacherId: "",
725 lectureId:"", 740 lectureId: "",
726 scheduleId:"", 741 scheduleId: ""
727 }, 742 },
728 items: [ 743 items: [
729 { 744 {
730 href: "/changepassword", 745 href: "/changepassword",
731 title: "Change Password", 746 title: "Change Password",
732 click: e => { 747 click: e => {
733 console.log(e); 748 console.log(e);
734 } 749 }
735 }, 750 },
736 { 751 {
737 href: "#", 752 href: "#",
738 title: "Logout", 753 title: "Logout",
739 click: e => { 754 click: e => {
740 window.getApp.$emit("APP_LOGOUT"); 755 window.getApp.$emit("APP_LOGOUT");
741 } 756 }
742 } 757 }
743 ] 758 ]
744 }), 759 }),
745 watch: {
746 menu(val) {
747 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
748 },
749 menu1(val) {
750 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
751 }
752 },
753 methods: { 760 methods: {
754 getSections(_id) { 761 getSections(_id) {
755 var token = this.$store.state.token; 762 var token = this.$store.state.token;
756 http() 763 http()
757 .get( 764 .get(
758 "/getSectionsList", 765 "/getSectionsList",
759 { params: { classId: _id } }, 766 { params: { classId: _id } },
760 { 767 {
761 headers: { Authorization: "Bearer " + token } 768 headers: { Authorization: "Bearer " + token }
762 } 769 }
763 ) 770 )
764 .then(response => { 771 .then(response => {
765 this.addSection = response.data.data; 772 this.addSection = response.data.data;
766 // console.log("getSectionsList=====>", this.addSection); 773 // console.log("getSectionsList=====>", this.addSection);
767 }) 774 })
768 .catch(err => { 775 .catch(err => {
769 // console.log("err====>", err); 776 // console.log("err====>", err);
770 }); 777 });
771 }, 778 },
772 getTimeTable(item) { 779 getTimeTable(item) {
773 this.showLoader = true; 780 this.showLoader = true;
774 var token = this.$store.state.token; 781 var token = this.$store.state.token;
775 http() 782 http()
776 .get( 783 .get(
777 "/getParticularTimeTable", 784 "/getParticularTimeTable",
778 { params: { timeTableId: item._id } }, 785 { params: { timeTableId: item._id } },
779 { 786 {
780 headers: { Authorization: "Bearer " + token } 787 headers: { Authorization: "Bearer " + token }
781 } 788 }
782 ) 789 )
783 .then(response => { 790 .then(response => {
784 this.timeTableList = response.data.data; 791 this.timeTableList = response.data.data;
785 this.showLoader = false; 792 this.showLoader = false;
786 // console.log("getParticularTimeTable=====>", this.timeTableList); 793 // console.log("getParticularTimeTable=====>", this.timeTableList);
787 }) 794 })
788 .catch(err => { 795 .catch(err => {
789 this.showLoader = false; 796 this.showLoader = false;
790 // console.log("err====>", err); 797 // console.log("err====>", err);
791 }); 798 });
792 }, 799 },
793 pickFile() { 800 pickFile() {
794 this.$refs.image.click(); 801 this.$refs.image.click();
795 }, 802 },
796 803
797 onFilePicked(e) { 804 onFilePicked(e) {
798 // console.log(e) 805 // console.log(e)
799 const files = e.target.files; 806 const files = e.target.files;
800 this.imageData.upload = e.target.files[0]; 807 this.imageData.upload = e.target.files[0];
801 if (files[0] !== undefined) { 808 if (files[0] !== undefined) {
802 this.imageName = files[0].name; 809 this.imageName = files[0].name;
803 if (this.imageName.lastIndexOf(".") <= 0) { 810 if (this.imageName.lastIndexOf(".") <= 0) {
804 return; 811 return;
805 } 812 }
806 const fr = new FileReader(); 813 const fr = new FileReader();
807 fr.readAsDataURL(files[0]); 814 fr.readAsDataURL(files[0]);
808 fr.addEventListener("load", () => { 815 fr.addEventListener("load", () => {
809 this.imageUrl = fr.result; 816 this.imageUrl = fr.result;
810 this.imageFile = files[0]; // this is an image file that can be sent to server... 817 this.imageFile = files[0]; // this is an image file that can be sent to server...
811 this.imageData.imageUrl = URL.createObjectURL(this.imageFile); 818 this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
812 // console.log("upload=======>", this.imageData.imageUrl); 819 // console.log("upload=======>", this.imageData.imageUrl);
813 // console.log("imageFile", this.imageFile); 820 // console.log("imageFile", this.imageFile);
814 }); 821 });
815 } else { 822 } else {
816 this.imageName = ""; 823 this.imageName = "";
817 this.imageFile = ""; 824 this.imageFile = "";
818 this.imageUrl = ""; 825 this.imageUrl = "";
819 } 826 }
820 }, 827 },
821 getTimeTableList() { 828 getTimeTableList() {
822 this.showLoader = true; 829 this.showLoader = true;
823 var token = this.$store.state.token; 830 var token = this.$store.state.token;
824 http() 831 http()
825 .get("/getTimeTablesList", { 832 .get("/getTimeTablesList", {
826 headers: { Authorization: "Bearer " + token } 833 headers: { Authorization: "Bearer " + token }
827 }) 834 })
828 .then(response => { 835 .then(response => {
829 this.desserts = response.data.data; 836 this.desserts = response.data.data;
830 this.showLoader = false; 837 this.showLoader = false;
831 // console.log("getTimeTableList=====>", response.data.data); 838 // console.log("getTimeTableList=====>", response.data.data);
832 }) 839 })
833 .catch(err => { 840 .catch(err => {
834 // console.log("err====>", err); 841 // console.log("err====>", err);
835 this.showLoader = false; 842 this.showLoader = false;
836 this.$router.replace({ path: "/" }); 843 this.$router.replace({ path: "/" });
837 }); 844 });
838 }, 845 },
839 editItem(item) { 846 editItem(item) {
840 this.editedIndex = this.desserts.indexOf(item); 847 this.editedIndex = this.desserts.indexOf(item);
841 this.editedItem = Object.assign({}, item); 848 this.editedItem = Object.assign({}, item);
842 this.dialog = true; 849 this.dialog = true;
843 }, 850 },
844 updateTimeTable(timeToUpdate, classToUpdate){ 851 updateTimeTable(timeToUpdate, classToUpdate) {
845 console.log('timeToUpdate, classToUpdate', timeToUpdate._id, classToUpdate.schedule); 852 console.log(
846 for (let i = 0; i < classToUpdate.schedule.length; i++){ 853 "timeToUpdate, classToUpdate",
847 this.updateLectures.scheduleId = classToUpdate.schedule[i]._id; 854 timeToUpdate._id,
855 classToUpdate.schedule
856 );
857 for (let i = 0; i < classToUpdate.schedule.length; i++) {
858 this.updateLectures.scheduleId = classToUpdate.schedule[i]._id;
848 } 859 }
849 this.updateLectures.lectureId = timeToUpdate._id, 860 (this.updateLectures.lectureId = timeToUpdate._id),
850 this.updateLectures= timeToUpdate 861 (this.updateLectures = timeToUpdate);
851 this.dialogUpdateLectures = true; 862 this.dialogUpdateLectures = true;
852 }, 863 },
853 addLecture(scheduleId, timeTableId){ 864 addLecture(scheduleId, timeTableId) {
854 // console.log('timeToAdd, classToAdd', scheduleId, timeTableId); 865 // console.log('timeToAdd, classToAdd', scheduleId, timeTableId);
855 this.addlectures.scheduleId = scheduleId 866 this.addlectures.scheduleId = scheduleId;
856 this.addlectures.timeTableId = timeTableId 867 this.addlectures.timeTableId = timeTableId;
857 this.dialogAddLecture = true; 868 this.dialogAddLecture = true;
858 }, 869 },
859 AddLecture(){ 870 AddLecture() {
860 if (this.$refs.form.validate()) { 871 if (this.$refs.form.validate()) {
861 http() 872 http()
862 .post("/addLecture", this.addlectures) 873 .post("/addLecture", this.addlectures)
863 .then(response => { 874 .then(response => {
864 // console.log("addTimeTable=====>", this.addlectures); 875 // console.log("addTimeTable=====>", this.addlectures);
865 if ((this.snackbar = true)) { 876 if ((this.snackbar = true)) {
866 this.text = "New Add Lecture successfully"; 877 this.text = "New Add Lecture successfully";
867 } 878 }
868 this.closedialogLecture(); 879 this.closedialogLecture();
869 }) 880 })
870 .catch(error => { 881 .catch(error => {
871 if ((this.snackbar = true)) { 882 if ((this.snackbar = true)) {
872 this.text = error.response.data.message; 883 this.text = error.response.data.message;
873 } 884 }
874 }); 885 });
875 } 886 }
876 }, 887 },
877 updateParticularTable(){ 888 updateParticularTable() {
878 let EditLecture = { 889 let EditLecture = {
879 lectureId:this.updateLectures.lectureId, 890 lectureId: this.updateLectures.lectureId,
880 scheduleId:this.updateLectures.scheduleId, 891 scheduleId: this.updateLectures.scheduleId,
881 updatedLecture:{ 892 updatedLecture: {
882 timeIn:this.updateLectures.timeIn, 893 timeIn: this.updateLectures.timeIn,
883 timeOut: this.updateLectures.timeOut, 894 timeOut: this.updateLectures.timeOut,
884 subjectName: this.updateLectures.subjectName, 895 subjectName: this.updateLectures.subjectName,
885 teacherId: this.updateLectures.teacherId, 896 teacherId: this.updateLectures.teacherId
886 } 897 }
887 } 898 };
888 console.log("updateLecture", EditLecture); 899 console.log("updateLecture", EditLecture);
889 http() 900 http()
890 .put("/updateLecture", EditLecture) 901 .put("/updateLecture", EditLecture)
891 .then(response => { 902 .then(response => {
892 console.log("updateLecture", EditLecture); 903 console.log("updateLecture", EditLecture);
893 if ((this.snackbar = true)) { 904 if ((this.snackbar = true)) {
894 this.text = "Successfully Edit Update Lecture"; 905 this.text = "Successfully Edit Update Lecture";
895 } 906 }
896 this.$router.go(0) 907 this.$router.go(0);
897 }) 908 })
898 .catch(error => { 909 .catch(error => {
899 // console.log(error); 910 // console.log(error);
900 }); 911 });
901 this.closeUpdateLectures() 912 this.closeUpdateLectures();
902 }, 913 },
903 deleteItem(item) { 914 deleteItem(item) {
904 let deleteTimeTable = { 915 let deleteTimeTable = {
905 timeTableId: item._id 916 timeTableId: item._id
906 }; 917 };
907 http() 918 http()
908 .delete( 919 .delete(
909 "/deleteTimeTable", 920 "/deleteTimeTable",
910 confirm("Are you sure you want to delete this?") && { 921 confirm("Are you sure you want to delete this?") && {
911 params: deleteTimeTable 922 params: deleteTimeTable
912 } 923 }
913 ) 924 )
914 .then(response => { 925 .then(response => {
915 // console.log("deleteUers",deleteTimeTable) 926 // console.log("deleteUers",deleteTimeTable)
916 if ((this.snackbar = true)) { 927 if ((this.snackbar = true)) {
917 this.text = "Successfully delete Existing User"; 928 this.text = "Successfully delete Existing User";
918 } 929 }
919 this.getTimeTableList(); 930 this.getTimeTableList();
920 }) 931 })
921 .catch(error => { 932 .catch(error => {
922 // console.log(error); 933 // console.log(error);
923 }); 934 });
924 }, 935 },
925 activeTab(type) { 936 activeTab(type) {
926 switch (type) { 937 switch (type) {
927 case "existing": 938 case "existing":
928 this.newActive = false; 939 this.newActive = false;
929 this.isActive = true; 940 this.isActive = true;
930 break; 941 break;
931 942
932 default: 943 default:
933 this.newActive = true; 944 this.newActive = true;
934 this.isActive = false; 945 this.isActive = false;
935 break; 946 break;
936 } 947 }
937 }, 948 },
938 close() { 949 close() {
939 this.dialog = false; 950 this.dialog = false;
940 setTimeout(() => { 951 setTimeout(() => {
941 this.editedItem = Object.assign({}, this.defaultItem); 952 this.editedItem = Object.assign({}, this.defaultItem);
942 this.editedIndex = -1; 953 this.editedIndex = -1;
943 }, 300); 954 }, 300);
944 }, 955 },
945 close1() { 956 close1() {
946 this.dialog1 = false; 957 this.dialog1 = false;
947 }, 958 },
948 closedialogLecture() { 959 closedialogLecture() {
949 this.dialogAddLecture = false; 960 this.dialogAddLecture = false;
950 this.$router.go(0) 961 this.$router.go(0);
951 }, 962 },
952 closeUpdateLectures(){ 963 closeUpdateLectures() {
953 this.dialogUpdateLectures = false; 964 this.dialogUpdateLectures = false;
954 }, 965 },
955 submit() { 966 submit() {
956 if (this.$refs.form.validate()) { 967 if (this.$refs.form.validate()) {
957 let imageData = new FormData(); 968 let imageData = new FormData();
958 imageData.append("upload", this.imageFile); 969 imageData.append("upload", this.imageFile);
959 // console.log(imageData); 970 // console.log(imageData);
960 let addTimeTable = { 971 let addTimeTable = {
961 sectionId: this.timeTable.selectSection, 972 sectionId: this.timeTable.selectSection,
962 classId: this.timeTable.select, 973 classId: this.timeTable.select,
963 schedule: [ 974 schedule: [
964 { 975 {
965 day: this.timeTable.selectDay, 976 day: this.timeTable.selectDay,
966 lectures: [ 977 lectures: [
967 { 978 {
968 timeIn: this.timeTable.timeIn, 979 timeIn: this.timeTable.timeIn,
969 timeOut: this.timeTable.timeOut, 980 timeOut: this.timeTable.timeOut,
970 lectureNum: this.timeTable.lectureNum, 981 lectureNum: this.timeTable.lectureNum,
971 subjectName: this.timeTable.subjectName, 982 subjectName: this.timeTable.subjectName,
972 teacherId: this.timeTable.selectTeacher 983 teacherId: this.timeTable.selectTeacher
973 } 984 }
974 ] 985 ]
975 } 986 }
976 ] 987 ]
977 }; 988 };
978 http() 989 http()
979 .post("/createTimeTable", addTimeTable) 990 .post("/createTimeTable", addTimeTable)
980 .then(response => { 991 .then(response => {
981 // console.log("addTimeTable=====>", addTimeTable); 992 // console.log("addTimeTable=====>", addTimeTable);
982 if ((this.snackbar = true)) { 993 if ((this.snackbar = true)) {
983 this.text = "New Time Table added successfully"; 994 this.text = "New Time Table added successfully";
984 } 995 }
985 this.getTimeTableList(); 996 this.getTimeTableList();
986 this.clear(); 997 this.clear();
987 }) 998 })
988 .catch(error => { 999 .catch(error => {
989 // console.log(error); 1000 // console.log(error);
990 if ((this.snackbar = true)) { 1001 if ((this.snackbar = true)) {
991 this.text = error.response.data.message; 1002 this.text = error.response.data.message;
992 } 1003 }
993 }); 1004 });
994 } 1005 }
995 }, 1006 },
996 mail() {}, 1007 mail() {},
997 download() {}, 1008 download() {},
998 clear() { 1009 clear() {
999 this.$refs.form.reset(); 1010 this.$refs.form.reset();
1000 }, 1011 },
1001 save() { 1012 save() {
1002 let imageData = new FormData(); 1013 let imageData = new FormData();
1003 imageData.append("upload", this.imageFile); 1014 imageData.append("upload", this.imageFile);
1004 // console.log(imageData); 1015 // console.log(imageData);
1005 let editTimeTable = { 1016 let editTimeTable = {
1006 timeTableId: this.editedItem._id, 1017 timeTableId: this.editedItem._id,
1007 classId: this.editedItem.classNum, 1018 classId: this.editedItem.classNum,
1008 sectionId: this.editedItem.selectSection 1019 sectionId: this.editedItem.selectSection
1009 // imageData 1020 // imageData
1010 }; 1021 };
1011 http() 1022 http()
1012 .put("/updateTimeTable", editTimeTable) 1023 .put("/updateTimeTable", editTimeTable)
1013 .then(response => { 1024 .then(response => {
1014 console.log("editTimeTable",editTimeTable); 1025 console.log("editTimeTable", editTimeTable);
1015 if ((this.snackbar = true)) { 1026 if ((this.snackbar = true)) {
1016 this.text = "Successfully Edit Existing User"; 1027 this.text = "Successfully Edit Existing User";
1017 } 1028 }
1018 this.getTimeTableList(); 1029 this.getTimeTableList();
1019 }) 1030 })
1020 .catch(error => { 1031 .catch(error => {
1021 // console.log(error); 1032 // console.log(error);
1022 }); 1033 });
1023 this.close(); 1034 this.close();
1024 }, 1035 },
1025 handleDrawerToggle() { 1036 handleDrawerToggle() {
1026 window.getApp.$emit("APP_DRAWER_TOGGLED"); 1037 window.getApp.$emit("APP_DRAWER_TOGGLED");
1027 }, 1038 },
1028 handleFullScreen() { 1039 handleFullScreen() {
1029 Util.toggleFullScreen(); 1040 Util.toggleFullScreen();
1030 }, 1041 },
1031 deleteTimeTable(timeToDelete){ 1042 deleteTimeTable(timeToDelete) {
1032 // console.log('timeToUpdate', timeToDelete._id); 1043 // console.log('timeToUpdate', timeToDelete._id);
1033 let deleteLecture = { 1044 let deleteLecture = {
1034 lectureId: timeToDelete._id 1045 lectureId: timeToDelete._id
1035 }; 1046 };
1036 http() 1047 http()
1037 .delete( 1048 .delete(
1038 "/deleteLecture", 1049 "/deleteLecture",
1039 confirm("Are you sure you want to delete this?") && { 1050 confirm("Are you sure you want to delete this?") && {
1040 params: deleteLecture 1051 params: deleteLecture
1041 } 1052 }
1042 ) 1053 )
1043 .then(response => { 1054 .then(response => {
1044 // console.log("deleteLecture",deleteLecture) 1055 // console.log("deleteLecture",deleteLecture)
1045 if ((this.snackbar = true)) { 1056 if ((this.snackbar = true)) {
1046 this.text = "Successfully delete Existing User"; 1057 this.text = "Successfully delete Existing User";
1047 } 1058 }
1048 this.$router.go(0) 1059 this.$router.go(0);
1049 // this.getTimeTable(); 1060 // this.getTimeTable();
1050 }) 1061 })
1051 .catch(error => { 1062 .catch(error => {
1052 console.log(error); 1063 console.log(error);
1053 }); 1064 });
1054 }, 1065 }
1055 }, 1066 },
1056 mounted() { 1067 mounted() {
1057 this.getTimeTableList(); 1068 this.getTimeTableList();
1058 var token = this.$store.state.token; 1069 var token = this.$store.state.token;
1059 http() 1070 http()
1060 .get("/getClassesList", { 1071 .get("/getClassesList", {
1061 headers: { Authorization: "Bearer " + token } 1072 headers: { Authorization: "Bearer " + token }
1062 }) 1073 })
1063 .then(response => { 1074 .then(response => {
1064 this.addclass = response.data.data; 1075 this.addclass = response.data.data;
1065 // console.log("getClassesList=====>",this.addclass) 1076 // console.log("getClassesList=====>",this.addclass)
1066 }) 1077 })
1067 .catch(err => { 1078 .catch(err => {
1068 // console.log("err====>", err); 1079 // console.log("err====>", err);
1069 }); 1080 });
1070 1081
1071 http() 1082 http()
1072 .get("/getTeachersList", { 1083 .get("/getTeachersList", {
1073 headers: { Authorization: "Bearer " + token } 1084 headers: { Authorization: "Bearer " + token }
1074 }) 1085 })
1075 .then(response => { 1086 .then(response => {
1076 this.addTeachers = response.data.data; 1087 this.addTeachers = response.data.data;
1077 // console.log("getClassesList=====>",this.addTeachers) 1088 // console.log("getClassesList=====>",this.addTeachers)
1078 }) 1089 })
1079 .catch(err => { 1090 .catch(err => {
1080 // console.log("err====>", err); 1091 // console.log("err====>", err);
1081 }); 1092 });
1082 }, 1093 },
1083 computed: { 1094 computed: {
1084 toolbarColor() { 1095 toolbarColor() {
1085 return this.$vuetify.options.extra.mainNav; 1096 return this.$vuetify.options.extra.mainNav;
1086 } 1097 }
1087 } 1098 }
1088 }; 1099 };
1089 </script> 1100 </script>
1090 <style scoped> 1101 <style scoped>
1091 .theme--light .v-label, .application .theme--light.v-label { 1102 .theme--light .v-label,
1092 color: black; 1103 .application .theme--light.v-label {
1104 color: black;
1093 } 1105 }
1094 .v-tabs__div { 1106 .v-tabs__div {
1095 text-transform: none; 1107 text-transform: none;
1096 } 1108 }
1097 .v-input__prepend-outer { 1109 .v-input__prepend-outer {
1098 margin-right: 0px !important; 1110 margin-right: 0px !important;
1099 } 1111 }
1100 .v-card__actions .v-btn { 1112 .v-card__actions .v-btn {
1101 margin: 0 15px; 1113 margin: 0 15px;
1102 min-width: 120px; 1114 min-width: 120px;
1103 } 1115 }
1104 .primary { 1116 .primary {
1105 background-color: #aaa !important; 1117 background-color: #aaa !important;
1106 border-color: #aaa !important; 1118 border-color: #aaa !important;
1107 } 1119 }
1108 h4 { 1120 h4 {
1109 background-repeat: no-repeat; 1121 background-repeat: no-repeat;
1110 padding: 8px; 1122 padding: 8px;
1111 margin: auto; 1123 margin: auto;
1112 font-size: 25px; 1124 font-size: 25px;
1113 } 1125 }
1114 #name { 1126 #name {
1115 position: absolute; 1127 position: absolute;
1116 left: 100px; 1128 left: 100px;
1117 top: 17px; 1129 top: 17px;
1118 } 1130 }
1119 #icon { 1131 #icon {
1120 position: absolute; 1132 position: absolute;
1121 right: 8px; 1133 right: 8px;
1122 top: 8px; 1134 top: 8px;
1123 } 1135 }
1124 #m { 1136 #m {
1125 position: relative; 1137 position: relative;
1126 left: 135px; 1138 left: 135px;
1127 top: -15px; 1139 top: -15px;
1128 } 1140 }
1129 #G { 1141 #G {
1130 position: absolute; 1142 position: absolute;
1131 top: 38px; 1143 top: 38px;
1132 color: white; 1144 color: white;
1133 } 1145 }
1134 #bt { 1146 #bt {
1135 position: relative; 1147 position: relative;
1136 top: -20px; 1148 top: -20px;
1137 left: 115px; 1149 left: 115px;
1138 } 1150 }
1139 #e { 1151 #e {
1140 position: relative; 1152 position: relative;
1141 top: 5px; 1153 top: 5px;
1142 right: -30px; 1154 right: -30px;
1143 height: 17px; 1155 height: 17px;
1144 cursor: pointer; 1156 cursor: pointer;
1145 } 1157 }
1146 #d { 1158 #d {
1147 position: relative; 1159 position: relative;
1148 top: 5px; 1160 top: 5px;
1149 right: -70px; 1161 right: -70px;
1150 height: 17px; 1162 height: 17px;
1151 cursor: pointer; 1163 cursor: pointer;
1152 } 1164 }
1153 #td { 1165 #td {
1154 border: 1px solid #dddddd; 1166 border: 1px solid #dddddd;
1155 text-align: left; 1167 text-align: left;
1156 padding: 8px; 1168 padding: 8px;
1157 } 1169 }
1158 #dialog { 1170 #dialog {
1159 height: 550px; 1171 height: 550px;
1160 } 1172 }
1161 .active { 1173 .active {
1162 background-color: black; 1174 background-color: black;
1163 color: white !important; 1175 color: white !important;
1164 } 1176 }
1165 .activebtn { 1177 .activebtn {
1166 color: black !important; 1178 color: black !important;
1167 } 1179 }
1168 #flex { 1180 #flex {
1169 height: 300px; 1181 height: 300px;
1170 } 1182 }
1171 .top { 1183 .top {
1172 margin-top: 100px; 1184 margin-top: 100px;
1173 } 1185 }
1174 .v-tabs__item a { 1186 .v-tabs__item a {
1175 font-size: 16px !important; 1187 font-size: 16px !important;
1176 } 1188 }
1177 @media screen and (max-width: 769px) { 1189 @media screen and (max-width: 769px) {
1178 .top { 1190 .top {
1179 margin-top: 0 !important; 1191 margin-top: 0 !important;
1180 } 1192 }
1181 .userSearch .v-icon { 1193 .userSearch .v-icon {
1182 font-size: 20px !important; 1194 font-size: 20px !important;
1183 margin-left: 20px; 1195 margin-left: 20px;
1184 } 1196 }
1185 } 1197 }
1186 @media screen and (max-width: 380px) { 1198 @media screen and (max-width: 380px) {
1187 .right { 1199 .right {
1188 float: none !important; 1200 float: none !important;
1189 } 1201 }
1190 .subheading { 1202 .subheading {
1191 font-size: 14px !important; 1203 font-size: 14px !important;
1192 } 1204 }
1193 .v-card__actions .v-btn { 1205 .v-card__actions .v-btn {
1194 margin: 0 0px; 1206 margin: 0 0px;
1195 min-width: 100px; 1207 min-width: 100px;
1196 } 1208 }
1197 /* .searchIcon .v-icon { 1209 /* .searchIcon .v-icon {
1198 font-size: 20px; 1210 font-size: 20px;
1199 margin-left: 20px; 1211 margin-left: 20px;
1200 } */ 1212 } */
1201 .subheading { 1213 .subheading {
1202 font-size: 12px !important; 1214 font-size: 12px !important;
1203 } 1215 }
1204 h5 { 1216 h5 {
1205 font-size: 13px; 1217 font-size: 13px;
1206 } 1218 }
1207 } 1219 }
1208 .v-icon { 1220 .v-icon {
1209 font-size: 30px; 1221 font-size: 30px;
1210 } 1222 }
1211 @media screen and (min-width: 1270px) { 1223 @media screen and (min-width: 1270px) {
1212 .hide { 1224 .hide {
1213 display: none; 1225 display: none;
1214 } 1226 }
1215 /* } 1227 /* }
1216 @media screen and (max-width: 962px) { 1228 @media screen and (max-width: 962px) {
1217 .imglogo{ 1229 .imglogo{
1218 position: absolute; 1230 position: absolute;
1219 top: 13px; 1231 top: 13px;
1220 left: 13px !important; 1232 left: 13px !important;
1221 width: 70px; 1233 width: 70px;
1222 height: 24px; 1234 height: 24px;
1223 } */ 1235 } */
1224 } 1236 }
1225 @media screen and (max-width: 420px) { 1237 @media screen and (max-width: 420px) {
1226 .userSearch .v-text-field .v-label { 1238 .userSearch .v-text-field .v-label {
1227 line-height: 24px !important; 1239 line-height: 24px !important;
1228 } 1240 }
src/router/paths.js
Diff comments   View file @55f72b7
1 export default [ 1 export default [
2 2
3 { 3 {
4 path: '*', 4 path: '*',
5 meta: { 5 meta: {
6 public: true, 6 public: true,
7 }, 7 },
8 redirect: { 8 redirect: {
9 path: '/404' 9 path: '/404'
10 } 10 }
11 }, 11 },
12 { 12 {
13 path: '/404', 13 path: '/404',
14 meta: { 14 meta: {
15 public: true, 15 public: true,
16 }, 16 },
17 name: 'NotFound', 17 name: 'NotFound',
18 component: () => import( 18 component: () => import(
19 /* webpackChunkName: "routes" */ 19 /* webpackChunkName: "routes" */
20 /* webpackMode: "lazy-once" */ 20 /* webpackMode: "lazy-once" */
21 `@/pages/NotFound/NotFound.vue` 21 `@/pages/NotFound/NotFound.vue`
22 ) 22 )
23 }, 23 },
24 { 24 {
25 path: '/500', 25 path: '/500',
26 meta: { 26 meta: {
27 public: true, 27 public: true,
28 }, 28 },
29 name: 'ServerError', 29 name: 'ServerError',
30 component: () => import( 30 component: () => import(
31 /* webpackChunkName: "routes" */ 31 /* webpackChunkName: "routes" */
32 /* webpackMode: "lazy-once" */ 32 /* webpackMode: "lazy-once" */
33 `@/pages/NotFound/Error.vue` 33 `@/pages/NotFound/Error.vue`
34 ) 34 )
35 }, 35 },
36 { 36 {
37 path: '/changepassword', 37 path: '/changepassword',
38 meta: { }, 38 meta: { },
39 name: 'changepassword', 39 name: 'changepassword',
40 props: (route) => ({ type: route.query.type }), 40 props: (route) => ({ type: route.query.type }),
41 component: () => import( 41 component: () => import(
42 /* webpackChunkName: "routes" */ 42 /* webpackChunkName: "routes" */
43 /* webpackMode: "lazy-once" */ 43 /* webpackMode: "lazy-once" */
44 `@/pages/Authentication/changepassword.vue` 44 `@/pages/Authentication/changepassword.vue`
45 ) 45 )
46 }, 46 },
47 { 47 {
48 path: '/teachers', 48 path: '/teachers',
49 meta: { breadcrumb: false }, 49 meta: { breadcrumb: false },
50 name: 'teachers', 50 name: 'teachers',
51 component: () => import( 51 component: () => import(
52 /* webpackChunkName: "routes" */ 52 /* webpackChunkName: "routes" */
53 /* webpackMode: "lazy-once" */ 53 /* webpackMode: "lazy-once" */
54 `@/pages/Teachers/teachers.vue` 54 `@/pages/Teachers/teachers.vue`
55 ) 55 )
56 }, 56 },
57 { 57 {
58 path: '/', 58 path: '/',
59 meta: { 59 meta: {
60 public: true, 60 public: true,
61 }, 61 },
62 name: 'Login', 62 name: 'Login',
63 component: () => import( 63 component: () => import(
64 /* webpackChunkName: "routes" */ 64 /* webpackChunkName: "routes" */
65 /* webpackMode: "lazy-once" */ 65 /* webpackMode: "lazy-once" */
66 `@/pages/Authentication/Login.vue` 66 `@/pages/Authentication/Login.vue`
67 ) 67 )
68 }, 68 },
69 { 69 {
70 path: '/forgetpassword', 70 path: '/forgetpassword',
71 meta: { 71 meta: {
72 public: true, 72 public: true,
73 }, 73 },
74 name: 'forgetpassword', 74 name: 'forgetpassword',
75 component: () => import( 75 component: () => import(
76 /* webpackChunkName: "routes" */ 76 /* webpackChunkName: "routes" */
77 /* webpackMode: "lazy-once" */ 77 /* webpackMode: "lazy-once" */
78 `@/pages/Authentication/forgetpassword.vue` 78 `@/pages/Authentication/forgetpassword.vue`
79 ) 79 )
80 }, 80 },
81 { 81 {
82 path: '/students', 82 path: '/students',
83 meta: { }, 83 meta: { },
84 name: 'Students', 84 name: 'Students',
85 props: (route) => ({ type: route.query.type }), 85 props: (route) => ({ type: route.query.type }),
86 component: () => import( 86 component: () => import(
87 /* webpackChunkName: "routes" */ 87 /* webpackChunkName: "routes" */
88 /* webpackMode: "lazy-once" */ 88 /* webpackMode: "lazy-once" */
89 `@/pages/Students/students.vue` 89 `@/pages/Students/students.vue`
90 ) 90 )
91 }, 91 },
92 { 92 {
93 path: '/addclass', 93 path: '/addclass',
94 meta: { }, 94 meta: { },
95 name: 'addclass', 95 name: 'addclass',
96 props: (route) => ({ type: route.query.type }), 96 props: (route) => ({ type: route.query.type }),
97 component: () => import( 97 component: () => import(
98 /* webpackChunkName: "routes" */ 98 /* webpackChunkName: "routes" */
99 /* webpackMode: "lazy-once" */ 99 /* webpackMode: "lazy-once" */
100 `@/pages/Class/addclass.vue` 100 `@/pages/Class/addclass.vue`
101 ) 101 )
102 }, 102 },
103 { 103 {
104 path: '/section', 104 path: '/section',
105 meta: { }, 105 meta: { },
106 name: 'section', 106 name: 'section',
107 props: (route) => ({ type: route.query.type }), 107 props: (route) => ({ type: route.query.type }),
108 component: () => import( 108 component: () => import(
109 /* webpackChunkName: "routes" */ 109 /* webpackChunkName: "routes" */
110 /* webpackMode: "lazy-once" */ 110 /* webpackMode: "lazy-once" */
111 `@/pages/Section/section.vue` 111 `@/pages/Section/section.vue`
112 ) 112 )
113 }, 113 },
114 { 114 {
115 path: '/event', 115 path: '/event',
116 meta: { }, 116 meta: { },
117 name: 'event', 117 name: 'event',
118 props: (route) => ({ type: route.query.type }), 118 props: (route) => ({ type: route.query.type }),
119 component: () => import( 119 component: () => import(
120 /* webpackChunkName: "routes" */ 120 /* webpackChunkName: "routes" */
121 /* webpackMode: "lazy-once" */ 121 /* webpackMode: "lazy-once" */
122 `@/pages/Event/event.vue` 122 `@/pages/Event/event.vue`
123 ) 123 )
124 }, 124 },
125 { 125 {
126 path: '/news', 126 path: '/news',
127 meta: { }, 127 meta: { },
128 name: 'news', 128 name: 'news',
129 props: (route) => ({ type: route.query.type }), 129 props: (route) => ({ type: route.query.type }),
130 component: () => import( 130 component: () => import(
131 /* webpackChunkName: "routes" */ 131 /* webpackChunkName: "routes" */
132 /* webpackMode: "lazy-once" */ 132 /* webpackMode: "lazy-once" */
133 `@/pages/News/news.vue` 133 `@/pages/News/news.vue`
134 ) 134 )
135 }, 135 },
136 { 136 {
137 path: '/reminder', 137 path: '/reminder',
138 meta: { }, 138 meta: { },
139 name: 'reminder', 139 name: 'reminder',
140 props: (route) => ({ type: route.query.type }), 140 props: (route) => ({ type: route.query.type }),
141 component: () => import( 141 component: () => import(
142 /* webpackChunkName: "routes" */ 142 /* webpackChunkName: "routes" */
143 /* webpackMode: "lazy-once" */ 143 /* webpackMode: "lazy-once" */
144 `@/pages/Reminder/reminder.vue` 144 `@/pages/Reminder/reminder.vue`
145 ) 145 )
146 }, 146 },
147 { 147 {
148 path: '/timeTable', 148 path: '/timeTable',
149 meta: { }, 149 meta: { },
150 name: 'timeTable', 150 name: 'timeTable',
151 props: (route) => ({ type: route.query.type }), 151 props: (route) => ({ type: route.query.type }),
152 component: () => import( 152 component: () => import(
153 /* webpackChunkName: "routes" */ 153 /* webpackChunkName: "routes" */
154 /* webpackMode: "lazy-once" */ 154 /* webpackMode: "lazy-once" */
155 `@/pages/TimeTable/timeTable.vue` 155 `@/pages/TimeTable/timeTable.vue`
156 ) 156 )
157 },
158 {
159 path: '/notification',
160 meta: { },
161 name: 'notification',
162 props: (route) => ({ type: route.query.type }),
163 component: () => import(
164 /* webpackChunkName: "routes" */
165 /* webpackMode: "lazy-once" */
166 `@/pages/Notification/notification.vue`
167 )
157 } 168 }
158 ]; 169 ];
159 170