API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Jun 26th, 2019
167
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 23.89 KB | None | 0 0
raw download clone embed print report
  1. <template>
  2. <div id="app">
  3. <v-app id="inspire">
  4.  
  5. <v-card-actions class="justify-center">
  6. <v-btn
  7. text
  8. color="transparent"
  9. class="elevation-0"
  10. :disabled="step === 1"
  11. flat
  12. @click="step--"
  13. >
  14. <v-icon color="#616161">mdi-chevron-left</v-icon>
  15. </v-btn>
  16. <span class="title font-weight-regular justify-space-between">{{ currentTitle }}</span>
  17. <v-btn
  18. text
  19. :disabled="step === 3"
  20. @click="step++"
  21. flat
  22. color="transparent"
  23. class="elevation-0"
  24. >
  25. <v-icon color="#616161">mdi-chevron-right</v-icon>
  26. </v-btn>
  27. </v-card-actions>
  28. <v-window v-model="step">
  29. <v-container grid-list-md text-xs-center>
  30. <v-layout row wrap>
  31. <v-flex xs12>
  32. <v-container grid-list-md text-xs-center>
  33. <v-window-item :value="1">
  34. <v-layout row>
  35.  
  36. <v-flex xs1>
  37. </v-flex>
  38. <v-flex xs2 v-for="day in dayID.slice(0,7)" :key="day.valueOf()" >
  39. <v-card color="#ffb74d" dark class="elevation-0" >
  40. <v-card-text class="dni">{{ getDayName(day.valueOf())}} </v-card-text>
  41. </v-card>
  42. </v-flex>
  43.  
  44. </v-layout>
  45. <v-divider inset></v-divider>
  46. <template v-for="timeslot in timeslots">
  47. <v-layout row >
  48.  
  49. <v-flex md1>
  50. <v-card color="transparent" class="elevation-0">
  51. <v-card-text class="px-0" color="#616161">{{ timeslot.start }}</v-card-text>
  52. </v-card>
  53. </v-flex>
  54.  
  55. <v-flex xs2 v-for="day in dayID.slice(0,7)" :key="day.valueOf() + '' + timeslot.start ">
  56. <template v-for="item in content(day, timeslot)">
  57. <v-card v-if="isLoggedIn()==true" :color="getMembership(item.id)[0].membership == false ? 'rgb(255, 183, 77, 0.7)' : 'rgb(0, 172, 193, 0.7)'" px-2 dark class="elevation-1 pa-0" @click="dialog = true" @click.native="selectItem(item)">
  58. <v-card-text class="pa-2" >{{item.name}}<br>{{ getTime(item.startingTime)}} </v-card-text>
  59.  
  60. </v-card>
  61. <v-card v-else :color="'rgb(255, 183, 77, 0.7)' " px-2 dark class="elevation-1 pa-0" @click="dialog = true" @click.native="selectItem(item)">
  62. <v-card-text class="pa-2" >{{item.name}}<br>{{ getTime(item.startingTime)}} </v-card-text>
  63.  
  64. </v-card>
  65. </template>
  66.  
  67. </v-flex>
  68. </v-layout>
  69. <v-divider inset></v-divider>
  70. </template>
  71. </v-window-item>
  72. <v-window-item :value="2">
  73. <v-layout row>
  74.  
  75. <v-flex xs1>
  76. </v-flex>
  77.  
  78. <v-flex xs2 v-for="day in dayID.slice(7,14)" :key="day.valueOf()" >
  79. <v-card color="#ffb74d" dark class="elevation-0" >
  80. <v-card-text class="dni">{{ getDayName(day.valueOf())}}</v-card-text>
  81. </v-card>
  82. </v-flex>
  83.  
  84. </v-layout>
  85. <v-divider inset></v-divider>
  86. <template v-for="timeslot in timeslots">
  87. <v-layout row >
  88.  
  89. <v-flex md1>
  90. <v-card color="transparent" class="elevation-0">
  91. <v-card-text class="px-0">{{ timeslot.start }}</v-card-text>
  92. </v-card>
  93. </v-flex>
  94.  
  95. <v-flex xs2 v-for="day in dayID.slice(7,14)" :key="day.valueOf() + '' + timeslot.start ">
  96. <template v-for="item in content(day, timeslot)">
  97. <v-card v-if="isLoggedIn()==true" :color="getMembership(item.id)[0].membership == false ? 'rgb(255, 183, 77, 0.7)' : 'rgb(0, 172, 193, 0.7)'" px-2 dark class="elevation-1 pa-0" @click="dialog = true" @click.native="selectItem(item)">
  98. <v-card-text class="pa-2" >{{item.name}}<br>{{ getTime(item.startingTime)}} </v-card-text>
  99.  
  100. </v-card>
  101. <v-card v-else :color="'rgb(255, 183, 77, 0.7)' " px-2 dark class="elevation-1 pa-0" @click="dialog = true" @click.native="selectItem(item)">
  102. <v-card-text class="pa-2" >{{item.name}}<br>{{ getTime(item.startingTime)}} </v-card-text>
  103.  
  104. </v-card>
  105. </template>
  106.  
  107. </v-flex>
  108. </v-layout>
  109. <v-divider inset></v-divider>
  110. </template>
  111. </v-window-item>
  112. <v-window-item :value="3">
  113. <v-layout row>
  114.  
  115. <v-flex xs1>
  116. </v-flex>
  117.  
  118. <v-flex xs2 v-for="day in dayID.slice(14,21)" :key="day.valueOf()" >
  119. <v-card color="#ffb74d" dark class="elevation-0" >
  120. <v-card-text class="dni">{{ getDayName(day.valueOf())}}</v-card-text>
  121. </v-card>
  122. </v-flex>
  123.  
  124. </v-layout>
  125. <v-divider inset></v-divider>
  126. <template v-for="timeslot in timeslots">
  127. <v-layout row >
  128.  
  129. <v-flex md1>
  130. <v-card color="transparent" class="elevation-0">
  131. <v-card-text class="px-0">{{ timeslot.start }}</v-card-text>
  132. </v-card>
  133. </v-flex>
  134.  
  135. <v-flex xs2 v-for="day in dayID.slice(14,21)" :key="day.valueOf() + '' + timeslot.start ">
  136. <template v-for="item in content(day, timeslot)">
  137. <v-card v-if="isLoggedIn()==true" :color="getMembership(item.id)[0].membership == false ? 'rgb(255, 183, 77, 0.7)' : 'rgb(0, 172, 193, 0.7)'" px-2 dark class="elevation-1 pa-0" @click="dialog = true" @click.native="selectItem(item)">
  138. <v-card-text class="pa-2" >{{item.name}}<br>{{ getTime(item.startingTime)}} </v-card-text>
  139.  
  140. </v-card>
  141. <v-card v-else :color="'rgb(255, 183, 77, 0.7)' " px-2 dark class="elevation-1 pa-0" @click="dialog = true" @click.native="selectItem(item)">
  142. <v-card-text class="pa-2" >{{item.name}}<br>{{ getTime(item.startingTime)}} </v-card-text>
  143.  
  144. </v-card>
  145. </template>
  146.  
  147. </v-flex>
  148. </v-layout>
  149. <v-divider inset></v-divider>
  150. </template>
  151. </v-window-item>
  152.  
  153. <v-dialog
  154. v-model="dialog"
  155. transition="dialog-bottom-transition"
  156. max-width="500px"
  157. >
  158. <v-toolbar
  159. color="#F48FB1"
  160. dark
  161. v-if="selectedItem"
  162. >
  163. <v-icon large>bookmark_border</v-icon>
  164. <v-toolbar-title :value="selectedItem" class="dni">{{selectedItem.name}}</v-toolbar-title>
  165. </v-toolbar>
  166.  
  167. <v-card v-if="selectedItem">
  168. <v-card-title :value="selectedItem">
  169. <div>
  170. <span> Godzina rozpoczęcia: <b> {{getTime(selectedItem.startingTime)}} </b> </span><br>
  171. <span> Czas trwania: <b>{{selectedItem.durationInMinutes}} min</b> </span><br>
  172. <span> Ilość wolnych miejsc: <b>{{selectedItem.spotsLeft}}</b> </span><br>
  173. <span>Prowadzący: <b>{{getTrainer(selectedItem.trainerId)[0].name }}&nbsp{{ getTrainer(selectedItem.trainerId)[0].surname}}</b></span>
  174.  
  175. </div>
  176. </v-card-title>
  177.  
  178. </v-card>
  179. </v-dialog>
  180. </v-container>
  181. </v-flex>
  182.  
  183. </v-layout>
  184.  
  185. </v-container>
  186. </v-window>
  187. <v-container grid-list-xl >
  188. <v-flex
  189. xs12
  190. md8
  191. class="text-xs-center"
  192. >
  193. <v-layout wrap >
  194. <v-flex xs3>
  195. <v-sheet
  196. class="d-flex"
  197. color="rgb(0, 172, 193, 0.7)"
  198. height="40"
  199. >
  200. </v-sheet>
  201. </v-flex>
  202. <v-flex xs3> Zajęcia, na które jesteś zapisany </v-flex>
  203. <v-flex xs3>
  204. <v-sheet
  205. class="d-flex"
  206. color="rgb(255, 183, 77, 0.7)"
  207. height="40"
  208. >
  209. </v-sheet>
  210. </v-flex>
  211. <v-flex xs3> Zajęcia, na które możesz się zapisać </v-flex>
  212. </v-layout>
  213. </v-flex>
  214. </v-container>
  215. </v-app>
  216. </div>
  217. </template>
  218.  
  219. <script>
  220. import moment from 'moment'
  221. import axios from 'axios'
  222. import {mapMutations, mapState} from 'vuex'
  223. import AuthorizationManagerService from "@/services/AuthorizationManagerService";
  224. import {BASE_URL} from "../../constants";
  225.  
  226. export default {
  227.  
  228.  
  229. data: () => ({
  230. step: 1,
  231. dialog: false,
  232. selectedItem: null,
  233. trainers : [],
  234. lessons: [],
  235. authCookie: '',
  236. trainings: [],
  237. trainingsMember: [],
  238. lesson: null,
  239. dayID: [],
  240. timeslots: [
  241. {
  242. 'id': 1,
  243. 'start': '07:00',
  244. 'end': '08:00'
  245. },
  246. {
  247. 'id': 2,
  248. 'start': '08:00',
  249. 'end': '09:00'
  250. },
  251. {
  252. 'id': 3,
  253. 'start': ' ',
  254. 'end': ' '
  255. },
  256. {
  257. 'id': 4,
  258. 'start': '16:00',
  259. 'end': '17:00'
  260. },
  261. {
  262. 'id': 5,
  263. 'start': '18:00',
  264. 'end': '19:00'
  265. },
  266. {
  267. 'id': 6,
  268. 'start': '19:00',
  269. 'end': '20:00'
  270. },
  271. {
  272. 'id': 7,
  273. 'start': '20:00',
  274. 'end': '21:00'
  275. }
  276. ],
  277. newItem: {
  278. id: '',
  279. creationDate: '',
  280. removed: '',
  281. groupTrainingId: '',
  282. clientId: ''
  283. },
  284. lessonsIndividual: [],
  285. self: ''
  286.  
  287. }),
  288. computed: {
  289. ...mapState(['token']),
  290.  
  291. currentTitle () {
  292. switch (this.step) {
  293. case 1: return moment(String(this.dayID[0])).format("DD-MM-YYYY") + ' - ' + moment(String(this.dayID[6])).format("DD-MM-YYYY")
  294. case 2: return moment(String(this.dayID[7])).format("DD-MM-YYYY") + ' - ' + moment(String(this.dayID[13])).format("DD-MM-YYYY")
  295. default: return moment(String(this.dayID[14])).format("DD-MM-YYYY") + ' - ' + moment(String(this.dayID[20])).format("DD-MM-YYYY")
  296. }
  297. },
  298. formTitle () {
  299. return this.editedIndex === -1 ? 'New Item' : 'Edit Item'
  300.  
  301. },
  302. pages () {
  303. if (this.pagination.rowsPerPage == null ||
  304. this.pagination.totalItems == null
  305. ) return 0
  306.  
  307. return Math.ceil(this.pagination.totalItems / this.pagination.rowsPerPage)
  308. }
  309. },
  310.  
  311. watch: {
  312. dialog (val) {
  313. val || this.close()
  314. }
  315. },
  316. created () {
  317. this.initialize()
  318. },
  319.  
  320. methods: {
  321.  
  322. content(day, timeslot) {
  323. this.lessons.forEach(function(item, index) {
  324. });
  325. var events = this.lessons.filter(function(lesson) {
  326. // console.log(moment(String(lesson.date)).format("YYYY-MM-DD"));
  327.  
  328. var time = lesson.startingTime[0] + ":" + lesson.startingTime[1];
  329.  
  330. return moment(String(lesson.date)).format("YYYY-MM-DD") === day.valueOf()
  331. && moment(time, "HH:mm").format("HH:mm") >= timeslot.start
  332. && moment(time, "HH:mm").format("HH:mm") < timeslot.end
  333. });
  334.  
  335. return events ? events : '&nbsp;'
  336.  
  337. },
  338.  
  339. getTime: function(time)
  340. {
  341. var time = time[0] + ":" + time[1];
  342. return moment(time, "HH:mm").format("HH:mm");
  343. },
  344.  
  345. getTrainer: function(id)
  346. {
  347. this.trainers.forEach(function(item, index) {
  348. });
  349.  
  350. var name = this.trainers.filter(function(trainer) {
  351. return trainer.id == id
  352. });
  353. return name ? name : '&nbsp;'
  354. },
  355.  
  356. getMembership(id)
  357. {
  358. var membership = this.lessons.filter(function (member) {
  359. return member.id == id
  360. });
  361.  
  362. return membership;
  363. },
  364.  
  365. getDayName(date){
  366. var day;
  367. switch (new Date(date).getDay()) {
  368. case 0:
  369. day = "Niedziela";
  370. break;
  371. case 1:
  372. day = "Poniedziałek";
  373. break;
  374. case 2:
  375. day = "Wtorek";
  376. break;
  377. case 3:
  378. day = "Środa";
  379. break;
  380. case 4:
  381. day = "Czwartek";
  382. break;
  383. case 5:
  384. day = "Piątek";
  385. break;
  386. case 6:
  387. day = "Sobota";
  388. }
  389.  
  390. return day;
  391. },
  392. selectItem(item) {
  393. this.selectedItem = item;
  394. },
  395. isLoggedIn(){
  396. var cookies = document.cookie
  397. var tempCookies = cookies.split(';')
  398. for(var x=0; x< tempCookies.length; x++)
  399. {
  400. var cookie = tempCookies[x].split('=')
  401. console.log(cookie[0].trim(' '))
  402. if(cookie[0].trim(' ') === 'access_token_trainer'){
  403. this.authCookie = cookie[1];
  404.  
  405. }}
  406. return this.authCookie !== '';
  407. },
  408. async initialize() {
  409.  
  410. const tab = [];
  411. if(this.isLoggedIn() == true)
  412. {
  413. axios.get(BASE_URL + '/api/trainers/self', {headers: {Authorization: this.authCookie}}).then(Response => {
  414. var data = Object.values(Response.data)
  415. this.self = data;
  416.  
  417. });
  418. await axios.get(BASE_URL + '/api/trainings/individual/trainer', {headers: {Authorization: this.authCookie}}).then(Response => {
  419. var data = Object.values(Response.data)
  420. this.lessonsIndividual = data;
  421. });
  422.  
  423. await this.lessonsIndividual.forEach(function(item) {
  424. tab.push({id: item.id, name: item.name, description: '', date: item.date, startingTime: item.startingTime,
  425. durationInMinutes: item.durationInMinutes, maxMembersAmount: 1, gender: '', intensity: '',
  426. createdBy: '', creationDate: '', removed: '', trainerId: item.trainerId, membership: true, spotsLeft: 0, trainer: '' });
  427. });
  428. axios.get(BASE_URL + '/api/training/groups/all', {headers: {Authorization: this.authCookie}}).then(Response => {
  429. var data = Object.values(Response.data)
  430. this.lessons = data;
  431. for(var i=0; i<this.lessons.length; i++)
  432. {
  433. console.log(this.lessons[i].trainerId)
  434. console.log(this.self[0])
  435. if(this.lessons[i].trainerId == this.self[0])
  436. {
  437. this.lessons[i].membership = true;
  438. }
  439. }
  440. for(var i=0; i<tab.length; i++)
  441. {
  442. this.lessons.push(tab[i]);
  443. }
  444. console.log(this.lessons)
  445. });
  446.  
  447. axios.get(BASE_URL + '/api/trainers/all', {headers: {Authorization: this.authCookie}}).then(Response => {
  448. var data = Object.values(Response.data)
  449. this.trainers = data;
  450. // console.log(this.trainers);
  451. });
  452. }
  453. else{
  454. axios.get(BASE_URL + '/api/training/groups/all').then(Response => {
  455. var data = Object.values(Response.data)
  456. this.lessons = data;
  457. });
  458. axios.get(BASE_URL + '/api/trainers/all').then(Response => {
  459. var data = Object.values(Response.data)
  460. this.trainers = data;
  461. // console.log(this.trainers);
  462. });
  463. }
  464.  
  465.  
  466.  
  467. if(this.isLoggedIn() == true){
  468.  
  469. axios.get(BASE_URL + '/api/training/groups/client', {headers: {Authorization: this.authCookie}}).then(Response => {
  470. var data = Object.values(Response.data)
  471. this.trainingsMember = data;
  472.  
  473. });
  474.  
  475. axios.get(BASE_URL + '/api/clients/self', {headers: {Authorization: this.authCookie}}).then(Response => {
  476. var data = Object.values(Response.data)
  477. this.client = data;
  478.  
  479. });
  480. }
  481.  
  482. var currentDate = moment();
  483.  
  484. var weekStart = currentDate.clone().startOf('isoWeek');
  485.  
  486. var daysID = [];
  487.  
  488. for (var i = 0; i <= 20; i++) {
  489. daysID.push(moment(weekStart).add(i, 'days').format("YYYY-MM-DD"));
  490. }
  491. // console.log(daysID);
  492. this.dayID = daysID;
  493. },
  494.  
  495. async signUp(id){
  496. this.newItem.groupTrainingId = id;
  497.  
  498. this.trainings.push(this.newItem);
  499. // console.log(this.trainings);
  500.  
  501. axios.post(BASE_URL + '/api/training/group/members', this.newItem, {headers: {Authorization: this.authCookie}}).then(Response => {
  502. var data = Object.values(Response.data)
  503. });
  504.  
  505. this.initialize();
  506.  
  507. },
  508. async leave(id){
  509. this.newItem.groupTrainingId = id;
  510.  
  511. this.trainings.push(this.newItem);
  512. // console.log(this.trainings);
  513.  
  514. axios.post(BASE_URL + '/api/training/group/members', this.newItem, {headers: {Authorization: this.authCookie}}).then(Response => {
  515. var data = Object.values(Response.data)
  516. });
  517.  
  518. this.initialize();
  519.  
  520. },
  521. close() {
  522. this.dialog = false
  523. setTimeout(() => {
  524. this.editedItem = Object.assign({}, this.defaultItem)
  525. this.editedIndex = -1
  526. }, 300)
  527. },
  528.  
  529. }
  530. }
  531. </script>
  532.  
  533. <style scoped>
  534. .dni{
  535. font-family: 'Hoefler Text', Georgia, 'Times New Roman', serif;
  536. font-weight: normal;
  537. text-align: center;
  538. text-transform: uppercase;
  539.  
  540. }
  541. .title{
  542. color: #616161;
  543. }
  544. </style>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!