Skip to content

Commit 1d1981a

Browse files
almerkalmerk
committed
Added badges
1 parent 0f64c7c commit 1d1981a

File tree

4 files changed

+157
-133
lines changed

4 files changed

+157
-133
lines changed

‎client/src/components/Main.vue‎

Lines changed: 127 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -1,120 +1,163 @@
11
<template>
2-
<div id="main">
2+
<div id="main">
33
<aside>
4-
<toolbar>
5-
<fieldset>
6-
<legend @click="showOrHideAllTypes()">Types</legend>
7-
<label v-for="type in types" :key="type.id">
8-
<input type="checkbox" :value="type.id" v-model="selectedTypeIds"/>
9-
<span>{{type.name}}</span>
10-
</label>
11-
</fieldset>
12-
<fieldset>
13-
<legend @click="showOrHideAllCalendars()">Calendars</legend>
14-
<label v-for="calendar in calendars" :key="calendar.id" :class="['']">
15-
<input type="checkbox" :value="calendar.id" v-model="selectedCalendarIds" :disabled="!inArray(calendar.typeId, selectedTypeIds)"/>
16-
<span>{{calendar.name}}</span>
17-
</label>
18-
</fieldset>
19-
</toolbar>
4+
<toolbar>
5+
<fieldset>
6+
<legend @click="showOrHideAllTypes()">Types</legend>
7+
<ul>
8+
<li v-for="type in types" :key="type.id">
9+
<label>
10+
<input
11+
type="checkbox"
12+
:value="type.id"
13+
v-model="selectedTypeIds"
14+
/>
15+
<span>{{ type.name }}</span>
16+
<badge>{{ calendarsOfType(type.id) }}</badge>
17+
</label>
18+
</li>
19+
</ul>
20+
</fieldset>
21+
<fieldset>
22+
<legend @click="showOrHideAllCalendars()">Calendars</legend>
23+
<ul>
24+
<li v-for="calendar in calendars" :key="calendar.id">
25+
<label>
26+
<input
27+
type="checkbox"
28+
:value="calendar.id"
29+
v-model="selectedCalendarIds"
30+
:disabled="!inArray(calendar.typeId, selectedTypeIds)"
31+
/>
32+
<span>{{ calendar.name }}</span>
33+
<badge>{{ eventsOfCalendar(calendar.id) }}</badge>
34+
</label>
35+
</li>
36+
</ul>
37+
</fieldset>
38+
</toolbar>
2039
</aside>
2140
<main>
2241
<feed :events="events" :selectedEventId="selectedEventId"></feed>
23-
<div id="calendar">
24-
</div>
42+
<div id="calendar"></div>
2543
</main>
26-
</div>
27-
44+
</div>
2845
</template>
2946

3047
<script>
31-
import toolbar from '../components/toolbar.vue'
32-
import feed from '../components/feed.vue'
48+
import toolbar from "../components/toolbar.vue";
49+
import feed from "../components/feed.vue";
50+
import badge from "../components/ui/badge";
51+
import Badge from "./ui/badge.vue";
3352
export default {
34-
components:{
35-
toolbar,
36-
feed
53+
components: {
54+
toolbar,
55+
feed,
56+
badge,
57+
Badge,
3758
},
38-
data () {
59+
data() {
3960
return {
40-
selectedEventId : this.$route.params.eventId,
61+
selectedEventId: this.$route.params.eventId,
4162
selectedTypeIds: [],
42-
selectedCalendarIds: []
43-
}
63+
selectedCalendarIds: [],
64+
};
4465
},
4566
methods: {
46-
inArray(value, array){
67+
inArray(value, array) {
4768
return array.includes(value);
4869
},
4970
showOrHideAllTypes() {
50-
this.selectedTypeIds = this.showOrHide(this.selectedTypeIds, this.types.map(x => x.id));
71+
this.selectedTypeIds = this.showOrHide(
72+
this.selectedTypeIds,
73+
this.types.map((x) => x.id)
74+
);
5175
},
5276
showOrHideAllCalendars() {
53-
const canBeDisplayed = this.calendars
54-
.filter(x => this.selectedTypeIds.includes(x.typeId))
55-
.map(x => x.id);
56-
this.selectedCalendarIds = this.showOrHide(this.selectedCalendarIds, canBeDisplayed);
77+
const canBeDisplayed = this.calendars
78+
.filter((x) => this.selectedTypeIds.includes(x.typeId))
79+
.map((x) => x.id);
80+
this.selectedCalendarIds = this.showOrHide(
81+
this.selectedCalendarIds,
82+
canBeDisplayed
83+
);
84+
},
85+
showOrHide(current, full) {
86+
const notIn = full.filter((x) => !current.includes(x));
87+
return notIn.length == 0 ? [] : full;
88+
},
89+
calendarsOfType(id) {
90+
return this.calendars.filter((x) => x.typeId == id).length;
91+
},
92+
eventsOfCalendar(id) {
93+
return this.$store.getters.events.filter((x) => x.calendarId == id).length;
5794
},
58-
showOrHide(current, full){
59-
const notIn = full.filter(x => !current.includes(x))
60-
return notIn.length == 0? [] : full;
95+
eventMapFunction(ev) {
96+
return {
97+
...ev,
98+
isDisplayed: this.selectedCalendarIds.includes(ev.calendarId),
99+
};
61100
},
62-
eventMapFunction(ev){
63-
return {
64-
...ev,
65-
isDisplayed: this.selectedCalendarIds.includes(ev.calendarId)
66-
}
67-
}
68101
},
69-
created(){
70-
this.$store.commit('initialize')
102+
created() {
103+
this.$store.commit("initialize");
71104
},
72105
computed: {
73106
types() {
74107
return this.$store.getters.types;
75108
},
76-
calendars(){
109+
calendars() {
77110
return this.$store.getters.calendars;
78111
},
79-
events() {
80-
return this.$store.getters.events.map(this.eventMapFunction);
112+
events() {
113+
return this.$store.getters.events.map(this.eventMapFunction);
81114
},
82115
},
83-
watch: {
84-
'$route'() {
85-
this.selectedEventId = this.$route.params.eventId
86-
},
87-
types(newTypes, oldTypes) {
88-
const added = newTypes.filter(x => !oldTypes.some(y => y.id == x.id))
89-
this.selectedTypeIds = this.selectedTypeIds.concat(added.map(x => x.id))
90-
},
91-
calendars(newValue, oldValue){
92-
const added = newValue.filter(x => !oldValue.some(y => y.id == x.id));
93-
this.selectedCalendarIds = this.selectedCalendarIds.concat(added.map(x => x.id));
94-
},
95-
selectedTypeIds(newValue, oldValue) {
96-
const addedTypes = newValue.filter(x => !oldValue.includes(x))
97-
const canBeDisplayed = this.calendars.filter(x => newValue.includes(x.typeId)).map(x => x.id);
98-
const mustBeDisplayed = this.calendars.filter(x => addedTypes.includes(x.typeId)).map(x => x.id);
99-
this.selectedCalendarIds = [...this.selectedCalendarIds.filter(x => canBeDisplayed.includes(x)), ...mustBeDisplayed];
100-
}
101-
}
102-
}
116+
watch: {
117+
$route() {
118+
this.selectedEventId = this.$route.params.eventId;
119+
},
120+
types(newTypes, oldTypes) {
121+
const added = newTypes.filter((x) => !oldTypes.some((y) => y.id == x.id));
122+
this.selectedTypeIds = this.selectedTypeIds.concat(
123+
added.map((x) => x.id)
124+
);
125+
},
126+
calendars(newValue, oldValue) {
127+
const added = newValue.filter((x) => !oldValue.some((y) => y.id == x.id));
128+
this.selectedCalendarIds = this.selectedCalendarIds.concat(
129+
added.map((x) => x.id)
130+
);
131+
},
132+
selectedTypeIds(newValue, oldValue) {
133+
const addedTypes = newValue.filter((x) => !oldValue.includes(x));
134+
const canBeDisplayed = this.calendars
135+
.filter((x) => newValue.includes(x.typeId))
136+
.map((x) => x.id);
137+
const mustBeDisplayed = this.calendars
138+
.filter((x) => addedTypes.includes(x.typeId))
139+
.map((x) => x.id);
140+
this.selectedCalendarIds = [
141+
...this.selectedCalendarIds.filter((x) => canBeDisplayed.includes(x)),
142+
...mustBeDisplayed,
143+
];
144+
},
145+
},
146+
};
103147
</script>
104148

105149
<style>
106-
#main {
107-
display: grid;
108-
grid-template-columns: minmax(auto, 25%) 1fr;
109-
grid-row: auto;
110-
column-gap: .5em;
111-
overflow: hidden;
112-
width:100%;
113-
height: 100%;
114-
}
115-
#main > *{
116-
overflow:auto;
117-
height: 100%;
118-
}
119-
150+
#main {
151+
display: grid;
152+
grid-template-columns: minmax(auto, 25%) 1fr;
153+
grid-row: auto;
154+
column-gap: 0.5em;
155+
overflow: hidden;
156+
width: 100%;
157+
height: 100%;
158+
}
159+
#main > * {
160+
overflow: auto;
161+
height: 100%;
162+
}
120163
</style>

‎client/src/components/feed.vue‎

Lines changed: 1 addition & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -45,8 +45,7 @@ export default {
4545
}
4646
.item {
4747
--s: auto;
48-
--c:0,0,0;
49-
48+
--c: 0,0,0;
5049
overflow: hidden;
5150
border: 3px solid rgb(var(--c));
5251
margin:2px;
@@ -62,48 +61,6 @@ export default {
6261
.item.selected > * {
6362
text-indent: .5em;
6463
}
65-
.item:not(.active) {
66-
border-image: linear-gradient(to right bottom, rgb(var(--c),.65), rgb(var(--c), .15));
67-
border-image-slice: 1;
68-
}
69-
.item:not(.active)::before {
70-
content: '\2713';
71-
font-weight: bold;
72-
position: absolute;
73-
transform: translate(10%, -20%);
74-
top: 0;
75-
right: 0;
76-
z-index: -1;
77-
background: linear-gradient(to right bottom, rgb(var(--c),.65), rgb(var(--c), .15));
78-
background-clip: text;
79-
-webkit-text-fill-color: transparent;
80-
opacity: .5;
81-
font-size: 3em;
82-
}
83-
.item.size-1{
84-
--s:2em;
85-
}
86-
.item.size-2{
87-
grid-column:span 2;
88-
grid-row: span 2;
89-
90-
}
91-
.item.size-3{
92-
grid-column:span 3;
93-
grid-row: span 3;
94-
}
95-
.item.color-1{
96-
--c: 192, 9, 9;
97-
}
98-
.item.color-2{
99-
--c:52, 158, 20;
100-
}
101-
.item.color-3{
102-
--c: 236, 221, 6;
103-
}
104-
.item.color-4{
105-
--c: 87, 87, 87;
106-
}
10764
.item.selected{
10865
box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
10966
grid-column-start: 1;
@@ -118,9 +75,6 @@ export default {
11875
.item:not(.selected) > header{
11976
display: block;
12077
}
121-
.item:not(.selected):hover{
122-
scale: 1.03;
123-
}
12478
12579
12680
</style>

‎client/src/components/toolbar.vue‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,18 +36,25 @@ export default {
3636
text-overflow: ellipsis;
3737
overflow: hidden;
3838
border:none;
39+
flex-shrink: 0;
3940
}
40-
#toolbar label,
41+
#toolbar label span,
4142
#toolbar legend {
4243
white-space: nowrap;
4344
overflow: hidden;
4445
text-overflow: ellipsis;
4546
cursor: pointer;
47+
position: relative;
48+
width:auto;
49+
max-width:100%;
4650
}
4751
#toolbar fieldset legend {
4852
font-size: 0.7em;
49-
margin-bottom: 0.25em;
5053
}
54+
#toolbar fieldset label{
55+
display:flex;
56+
}
57+
5158
#toolbar input ~ span {
5259
font-weight: 500;
5360
}

‎client/src/components/ui/badge.vue‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<template>
2+
<sup role="badge">
3+
<slot></slot>
4+
</sup>
5+
</template>
6+
7+
<script>
8+
export default {
9+
data(){}
10+
}
11+
</script>
12+
13+
<style>
14+
[role=badge] {
15+
font-size: .55em;
16+
display: inline;
17+
background: rgba(255,255,255,.8);
18+
border-radius: 50%;
19+
}
20+
</style>

0 commit comments

Comments
 (0)