Skip to content

Commit 2e211a1

Browse files
stadialstadial
committed
feat: deletable course + fix dark mode
1 parent ec85421 commit 2e211a1

3 files changed

Lines changed: 154 additions & 27 deletions

File tree

‎components/ClassesCalendar.vue‎

Lines changed: 143 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,105 @@
11
<template>
22
<v-row justify="center" align="center">
33
<v-col cols="12" sm="12" md="12" lg="8">
4-
<v-calendar
5-
ref="calendar"
6-
:now="today"
7-
:value="today"
8-
first-interval="7"
9-
:interval-count="intervalCount"
10-
type="week"
11-
:events="events"
12-
></v-calendar>
4+
<v-sheet>
5+
<v-calendar
6+
ref="calendar"
7+
:now="today"
8+
:value="today"
9+
first-interval="7"
10+
:interval-count="intervalCount"
11+
type="week"
12+
:events="events"
13+
:event-color="getEventColor"
14+
@click:event="showEvent"
15+
>
16+
<template v-slot:event="{ event, eventParsed }">
17+
<v-card
18+
:key="event.crn"
19+
:title="event.name"
20+
:color="getEventColor(event)"
21+
height="100%"
22+
class="text-center"
23+
tile
24+
>
25+
{{ event.name }}
26+
<!-- <v-chip> {{ event.start)}} </v-chip> -->
27+
<!-- <v-chip> {{ event.end)}} </v-chip> -->
28+
</v-card>
29+
</template>
30+
</v-calendar>
31+
<v-menu
32+
v-model="selectedOpen"
33+
:close-on-content-click="false"
34+
:activator="selectedElement"
35+
offset-x
36+
>
37+
<v-card min-width="350px" flat>
38+
<v-toolbar :color="getEventColor(selectedEvent)">
39+
<v-btn
40+
@click="
41+
$emit('class:delete', selectedEvent)
42+
selectedOpen = false
43+
"
44+
icon
45+
>
46+
<v-icon>mdi-delete</v-icon>
47+
</v-btn>
48+
<v-toolbar-title v-html="selectedEvent.name"></v-toolbar-title>
49+
<v-spacer></v-spacer>
50+
<!-- <v-btn icon> <v-icon>mdi-heart</v-icon> </v-btn> -->
51+
<!-- <v-btn icon> <v-icon>mdi-dots-vertical</v-icon> </v-btn> -->
52+
</v-toolbar>
53+
<v-card-text>
54+
<v-simple-table>
55+
<template v-slot:default>
56+
<tbody>
57+
<tr>
58+
<td>Name:</td>
59+
<td>{{ selectedEvent.name }}</td>
60+
</tr>
61+
62+
<tr>
63+
<td>Code:</td>
64+
<td>{{ selectedEvent.code }}</td>
65+
</tr>
66+
67+
<tr>
68+
<td>CRN:</td>
69+
<td>{{ selectedEvent.crn }}</td>
70+
</tr>
71+
72+
<tr>
73+
<td>Start:</td>
74+
<td>{{ selectedEvent.start }}</td>
75+
</tr>
76+
77+
<tr>
78+
<td>End:</td>
79+
<td>{{ selectedEvent.end }}</td>
80+
</tr>
81+
82+
<tr>
83+
<td>Section:</td>
84+
<td>{{ selectedEvent.section }}</td>
85+
</tr>
86+
87+
<tr>
88+
<td>Instructor:</td>
89+
<td>{{ selectedEvent.instructor }}</td>
90+
</tr>
91+
</tbody>
92+
</template>
93+
</v-simple-table>
94+
</v-card-text>
95+
<v-card-actions>
96+
<v-btn text color="secondary" @click="selectedOpen = false">
97+
Close
98+
</v-btn>
99+
</v-card-actions>
100+
</v-card>
101+
</v-menu>
102+
</v-sheet>
13103
</v-col>
14104
</v-row>
15105
</template>
@@ -18,14 +108,55 @@
18108
export default {
19109
props: { classes: { type: Array, default: () => [] } },
20110
data() {
21-
return { today: '2022-05-0' }
111+
return {
112+
colors: ['blue', 'indigo', 'deep-purple', 'cyan', 'green', 'orange'],
113+
114+
today: '2022-05-0',
115+
selectedEvent: {},
116+
selectedElement: null,
117+
selectedOpen: false,
118+
}
119+
},
120+
methods: {
121+
getEventColor(e) {
122+
// in case nothing is selected yet
123+
if (!e.name) {
124+
return null
125+
}
126+
//generate 'random' color based on name of the course
127+
let rand_number = e.name
128+
.split('')
129+
.map((c) => c.codePointAt(0))
130+
.reduce((a, b) => a + b)
131+
let l = this.colors.length
132+
return this.colors[rand_number % l]
133+
},
134+
showEvent({ nativeEvent, event }) {
135+
const open = () => {
136+
this.selectedEvent = event
137+
let other_data = this.classes.find((c) => c.name == event.name)
138+
this.selectedEvent = { ...event, ...other_data }
139+
140+
this.selectedElement = nativeEvent.target
141+
requestAnimationFrame(() =>
142+
requestAnimationFrame(() => (this.selectedOpen = true))
143+
)
144+
}
145+
146+
if (this.selectedOpen) {
147+
this.selectedOpen = false
148+
requestAnimationFrame(() => requestAnimationFrame(() => open()))
149+
} else {
150+
open()
151+
}
152+
153+
nativeEvent.stopPropagation()
154+
},
22155
},
23156
computed: {
24157
intervalCount() {
25158
let intervals = this.events.map((e) => e.end.slice(11, 13))
26-
console.log(intervals)
27159
intervals = intervals.map(Number)
28-
console.log(intervals)
29160
30161
if (intervals.length == 0) {
31162
return 5

‎layouts/default.vue‎

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -54,14 +54,7 @@
5454
</div>
5555
<!-- Language button -->
5656
<!-- Dark/Light Mode -->
57-
<v-btn
58-
color="grey"
59-
large
60-
icon
61-
v-bind="attrs"
62-
v-on="on"
63-
@click="switchTheme"
64-
>
57+
<v-btn color="grey" large icon @click="switchTheme">
6558
<v-icon>{{ 'mdi-brightness-6' }}</v-icon>
6659
</v-btn>
6760
</v-app-bar>

‎pages/index.vue‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
<template>
22
<div>
3-
<pre>
3+
<!-- <pre> -->
44
<!-- {{ selectedClasses.map((c) => ({ name: c.name, crn: c.crn })) }} -->
55
<!-- {{ selectedClasses }} -->
6-
</pre>
7-
<ClassesCalendar :classes="selectedClasses" />
8-
<!-- <ClassesSelectedStats /> -->
6+
<!-- </pre> -->
7+
<ClassesCalendar @class:delete="deleteClass" :classes="selectedClasses" />
8+
<ClassesSelectedStats :selectedClasses="selectedClasses" />
99
<ClassesFilters
1010
@major:change="majorChange($event)"
1111
@department:change="departmentChange($event)"
@@ -81,6 +81,11 @@ export default {
8181
},
8282
},
8383
methods: {
84+
deleteClass(e) {
85+
this.selectedClasses = this.selectedClasses.filter(
86+
(c) => c.code != e.code
87+
)
88+
},
8489
majorChange(e) {
8590
this.selectedMajor = e.abbrv
8691
this.getCP()
@@ -109,9 +114,7 @@ export default {
109114
if (this.selectedClasses.find((c) => c.crn == e.crn)) {
110115
this.snackbarActive = !this.snackbarActive
111116
this.snackbarText = `Removing ${e.name}`
112-
this.selectedClasses = this.selectedClasses.filter(
113-
(c) => c.code != e.code
114-
)
117+
this.deleteClass(e)
115118
//
116119
} else if (this.selectedClasses.find((c) => c.code == e.code)) {
117120
this.snackbarActive = !this.snackbarActive

0 commit comments

Comments
 (0)