Skip to content

Commit 41f315b

Browse files
nil1729nil1729
authored
Merge pull request #18 from nil1729/develop
develop complete
2 parents cc8e3ba + 6919fa5 commit 41f315b

File tree

3 files changed

+73
-194
lines changed

3 files changed

+73
-194
lines changed

‎vue-calender-demo/package-lock.json‎

Lines changed: 5 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎vue-calender-demo/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
"dependencies": {
1111
"core-js": "^3.6.5",
1212
"firebase": "^8.2.8",
13+
"moment": "^2.29.1",
1314
"vue": "^2.6.11",
1415
"vue-textarea-autosize": "^1.1.1",
1516
"vuetify": "^2.4.0"

‎vue-calender-demo/src/components/Calender.vue‎

Lines changed: 67 additions & 194 deletions
Original file line numberDiff line numberDiff line change
@@ -69,27 +69,18 @@
6969
offset-x
7070
>
7171
<v-card color="grey lighten-4" min-width="350px" flat>
72-
<v-toolbar :color="selectedEvent.color" dark>
73-
<v-btn icon>
74-
<v-icon>mdi-pencil</v-icon>
75-
</v-btn>
76-
<v-toolbar-title v-html="selectedEvent.name"></v-toolbar-title>
72+
<v-toolbar :color="selectedEvent.color" dark height="45">
73+
<v-toolbar-title v-html="selectedEvent.title"></v-toolbar-title>
7774
<v-spacer></v-spacer>
7875
<v-btn icon>
79-
<v-icon>mdi-heart</v-icon>
80-
</v-btn>
81-
<v-btn icon>
82-
<v-icon>mdi-dots-vertical</v-icon>
76+
<v-btn icon @click="selectedOpen = false">
77+
<v-icon>mdi-close</v-icon>
78+
</v-btn>
8379
</v-btn>
8480
</v-toolbar>
8581
<v-card-text>
8682
<span v-html="selectedEvent.details"></span>
8783
</v-card-text>
88-
<v-card-actions>
89-
<v-btn text color="secondary" @click="selectedOpen = false">
90-
Cancel
91-
</v-btn>
92-
</v-card-actions>
9384
</v-card>
9485
</v-menu>
9586
</v-sheet>
@@ -99,6 +90,7 @@
9990

10091
<script>
10192
import { db } from '../main';
93+
import moment from 'moment';
10294
export default {
10395
data: () => ({
10496
focus: '',
@@ -117,25 +109,16 @@ export default {
117109
events: [],
118110
courses: [],
119111
dataLoaded: false,
120-
colors: [
121-
'blue',
122-
'indigo',
123-
'deep-purple',
124-
'cyan',
125-
'green',
126-
'orange',
127-
'grey darken-1',
128-
],
129-
names: [
130-
'Meeting',
131-
'Holiday',
132-
'PTO',
133-
'Travel',
134-
'Event',
135-
'Birthday',
136-
'Conference',
137-
'Party',
138-
],
112+
colorsMapper: {
113+
labs: 'deep-purple',
114+
lectures: 'green',
115+
tutorials: 'orange',
116+
},
117+
typesMapper: {
118+
labs: 'Practical',
119+
lectures: 'Lecture',
120+
tutorials: 'Tutorial',
121+
},
139122
daysMapper: {
140123
0: 'Su',
141124
1: 'M',
@@ -182,103 +165,22 @@ export default {
182165
} else {
183166
open();
184167
}
185-
186168
nativeEvent.stopPropagation();
187169
},
188170
async getEvents() {
189-
let events = [];
190-
191171
const snaps = await db.collection('courses').get();
192-
let s = this.startTimestamp.date;
193-
let e = this.endTimestamp.date;
194172
let courses = [];
195-
let daysArr = this.getDaysArray(s, e);
196-
197-
snaps.forEach((doc) => {
198-
let evData = { id: doc.id, ...doc.data() };
199-
courses.push(evData);
200-
});
173+
snaps.forEach((doc) => courses.push({ id: doc.id, ...doc.data() }));
201174
202175
this.courses = courses;
203176
this.$emit('stopLoading');
204177
this.dataLoaded = true;
205178
206-
for (let j = 0; j < daysArr.length; j++) {
207-
let curDt = daysArr[j];
208-
for (let i = 0; i < courses.length; i++) {
209-
let sb = courses[i];
210-
let lec = sb.lectures.length > 0,
211-
tut = sb.tutorials.length > 0,
212-
lab = sb.labs.length > 0;
213-
if (lec) {
214-
lec = sb.lectures[0];
215-
let timings = lec.timings;
216-
let curDtCode = this.daysMapper[curDt.getDay()];
217-
let hasClass = timings.findIndex((it) => it.dayCode === curDtCode);
218-
if (hasClass >= 0) {
219-
let classHour = timings[hasClass].time;
220-
let [s, e] = classHour.split(' - ');
221-
let startEvent = `${curDt.toISOString().substr(0, 10)} ${s}`;
222-
let endEvent = `${curDt.toISOString().substr(0, 10)} ${e}`;
223-
224-
let evData = {
225-
start: startEvent,
226-
end: endEvent,
227-
color: 'green',
228-
name: `${sb.courseCode} - ${lec.section}`,
229-
details: `${sb.courseName} - ${lec.instructors.join(', ')}`,
230-
};
231-
232-
events.push(evData);
233-
}
234-
}
235-
if (tut) {
236-
tut = sb.tutorials[0];
237-
let timings = tut.timings;
238-
let curDtCode = this.daysMapper[curDt.getDay()];
239-
let hasClass = timings.findIndex((it) => it.dayCode === curDtCode);
240-
if (hasClass >= 0) {
241-
let classHour = timings[hasClass].time;
242-
let [s, e] = classHour.split(' - ');
243-
let startEvent = `${curDt.toISOString().substr(0, 10)} ${s}`;
244-
let endEvent = `${curDt.toISOString().substr(0, 10)} ${e}`;
245-
246-
let evData = {
247-
start: startEvent,
248-
end: endEvent,
249-
color: 'orange',
250-
name: `${sb.courseCode} - ${tut.section}`,
251-
details: `${sb.courseName} - ${tut.instructors.join(', ')}`,
252-
};
253-
254-
events.push(evData);
255-
}
256-
}
257-
if (lab) {
258-
lab = sb.labs[0];
259-
let timings = lab.timings;
260-
let curDtCode = this.daysMapper[curDt.getDay()];
261-
let hasClass = timings.findIndex((it) => it.dayCode === curDtCode);
262-
if (hasClass >= 0) {
263-
let classHour = timings[hasClass].time;
264-
let [s, e] = classHour.split(' - ');
265-
let startEvent = `${curDt.toISOString().substr(0, 10)} ${s}`;
266-
let endEvent = `${curDt.toISOString().substr(0, 10)} ${e}`;
267-
268-
let evData = {
269-
start: startEvent,
270-
end: endEvent,
271-
color: 'deep-purple',
272-
name: `${sb.courseCode} - ${lab.section}`,
273-
details: `${sb.courseName} - ${lab.instructors.join(', ')}`,
274-
};
275-
276-
events.push(evData);
277-
}
278-
}
279-
}
280-
}
281-
this.events = events;
179+
let daysArr = this.getDaysArray(
180+
this.startTimestamp.date,
181+
this.endTimestamp.date
182+
);
183+
this.setCalenderSlots(daysArr);
282184
},
283185
getDaysArray(start, end) {
284186
var arr = [];
@@ -294,93 +196,64 @@ export default {
294196
updateRange({ start, end }) {
295197
this.startTimestamp = start;
296198
this.endTimestamp = end;
297-
199+
let daysArr = this.getDaysArray(start.date, end.date);
200+
this.setCalenderSlots(daysArr);
201+
},
202+
setCalenderSlots(daysArr) {
298203
let events = [];
299-
300-
let s = start.date;
301-
let e = end.date;
302204
let courses = this.courses;
303-
let daysArr = this.getDaysArray(s, e);
304-
305205
for (let j = 0; j < daysArr.length; j++) {
306206
let curDt = daysArr[j];
307207
for (let i = 0; i < courses.length; i++) {
308208
let sb = courses[i];
309209
let lec = sb.lectures.length > 0,
310210
tut = sb.tutorials.length > 0,
311211
lab = sb.labs.length > 0;
312-
if (lec) {
313-
lec = sb.lectures[0];
314-
let timings = lec.timings;
315-
let curDtCode = this.daysMapper[curDt.getDay()];
316-
let hasClass = timings.findIndex((it) => it.dayCode === curDtCode);
317-
if (hasClass >= 0) {
318-
let classHour = timings[hasClass].time;
319-
let [s, e] = classHour.split(' - ');
320-
let startEvent = `${curDt.toISOString().substr(0, 10)} ${s}`;
321-
let endEvent = `${curDt.toISOString().substr(0, 10)} ${e}`;
322-
323-
let evData = {
324-
start: startEvent,
325-
end: endEvent,
326-
color: 'green',
327-
name: `${sb.courseCode} - ${lec.section}`,
328-
details: `${sb.courseName} - ${lec.instructors.join(', ')}`,
329-
};
330-
331-
events.push(evData);
332-
}
333-
}
334-
if (tut) {
335-
tut = sb.tutorials[0];
336-
let timings = tut.timings;
337-
let curDtCode = this.daysMapper[curDt.getDay()];
338-
let hasClass = timings.findIndex((it) => it.dayCode === curDtCode);
339-
if (hasClass >= 0) {
340-
let classHour = timings[hasClass].time;
341-
let [s, e] = classHour.split(' - ');
342-
let startEvent = `${curDt.toISOString().substr(0, 10)} ${s}`;
343-
let endEvent = `${curDt.toISOString().substr(0, 10)} ${e}`;
344-
345-
let evData = {
346-
start: startEvent,
347-
end: endEvent,
348-
color: 'orange',
349-
name: `${sb.courseCode} - ${tut.section}`,
350-
details: `${sb.courseName} - ${tut.instructors.join(', ')}`,
351-
};
352-
353-
events.push(evData);
354-
}
355-
}
356-
if (lab) {
357-
lab = sb.labs[0];
358-
let timings = lab.timings;
359-
let curDtCode = this.daysMapper[curDt.getDay()];
360-
let hasClass = timings.findIndex((it) => it.dayCode === curDtCode);
361-
if (hasClass >= 0) {
362-
let classHour = timings[hasClass].time;
363-
let [s, e] = classHour.split(' - ');
364-
let startEvent = `${curDt.toISOString().substr(0, 10)} ${s}`;
365-
let endEvent = `${curDt.toISOString().substr(0, 10)} ${e}`;
366-
367-
let evData = {
368-
start: startEvent,
369-
end: endEvent,
370-
color: 'deep-purple',
371-
name: `${sb.courseCode} - ${lab.section}`,
372-
details: `${sb.courseName} - ${lab.instructors.join(', ')}`,
373-
};
374-
375-
events.push(evData);
376-
}
377-
}
212+
if (lec) events.push(...this.setSlots(sb, curDt, 'lectures'));
213+
if (tut) events.push(...this.setSlots(sb, curDt, 'tutorials'));
214+
if (lab) events.push(...this.setSlots(sb, curDt, 'labs'));
378215
}
379216
}
380217
this.events = events;
381218
},
382-
rnd(a, b) {
383-
return Math.floor((b - a + 1) * Math.random()) + a;
219+
setSlots(course, date, type) {
220+
let slots = [];
221+
let currSlot = course[type][0];
222+
let timings = currSlot.timings;
223+
let curDtCode = this.daysMapper[date.getDay()];
224+
let hasClass = timings.findIndex((it) => it.dayCode === curDtCode);
225+
if (hasClass >= 0) {
226+
let classHour = timings[hasClass].time;
227+
let [s, e] = classHour.split(' - ');
228+
let startEvent = `${date.toISOString().substr(0, 10)} ${s}`;
229+
let endEvent = `${date.toISOString().substr(0, 10)} ${e}`;
230+
231+
let instructorsList = ``;
232+
currSlot.instructors.forEach(
233+
(it) => (instructorsList += `<li>${it}</li>`)
234+
);
235+
236+
let evData = {
237+
start: startEvent,
238+
end: endEvent,
239+
color: this.colorsMapper[type],
240+
name: `${course.courseCode}`,
241+
title: `${course.courseName}`,
242+
details: `
243+
<h4>${this.typesMapper[type]} Section - ${currSlot.section}</h4>
244+
<h4>Instructor(s)</h4>
245+
<ul>
246+
${instructorsList}
247+
</ul>
248+
<h4>Comprehensive Exam: ${moment(course.comprehensiveExamDate).format(
249+
'Do MMM, h:mm A'
250+
)}</h4>
251+
<h4>Course IC: ${course.IC}</h4>
252+
`,
253+
};
254+
slots.push(evData);
255+
}
256+
return slots;
384257
},
385258
},
386259
};

0 commit comments

Comments
 (0)