Skip to content

Commit 1197c9e

Browse files
MikkelhostMikkelhost
committed
Finished filtering functionality, and added tooltip to danger icon for secret challenges
1 parent 6121f83 commit 1197c9e

File tree

1 file changed

+161
-47
lines changed

1 file changed

+161
-47
lines changed

‎client/src/Pages/Challenges.vue

+161-47
Original file line numberDiff line numberDiff line change
@@ -55,33 +55,54 @@
5555
<b-col class="text-center" md="12" v-html="category.catDesc"></b-col>
5656
</b-row>
5757
<b-row class="text-center difficulties">
58-
<b-col class="difficulty"><p>Very Easy</p></b-col>
59-
<b-col class="difficulty"><p>Easy</p></b-col>
60-
<b-col class="difficulty"><p>Medium</p></b-col>
61-
<b-col class="difficulty"><p>Hard</p></b-col>
62-
<b-col class="difficulty"><p>Very Hard</p></b-col>
58+
<b-col class="difficulty" v-bind:class="{ active: difficulty.enabled }" v-on:click="filterItems(category, difficulty)" v-for="difficulty in category.difficulties" :key="difficulty"><p>{{ difficulty.name }}</p></b-col>
6359
</b-row>
6460
<b-row class="info-container">
6561
<b-col md="5" class="challenges customscroll">
66-
<div
67-
v-for="challenge in category.challenges"
68-
:key="challenge"
69-
class="challenge"
70-
>
71-
<b-row>
72-
<b-col md="1">
73-
<div class="info-icon" v-on:click="showOrgDescription(challenge)"><b-icon icon="info-circle"></b-icon></div>
74-
</b-col>
75-
<template v-if="challenge.secret">
62+
<template v-if="!category.filterOn">
63+
<div
64+
v-for="(challenge, index) in category.challenges"
65+
:key="challenge"
66+
class="challenge"
67+
>
68+
<b-row>
69+
<b-col md="1">
70+
<div class="info-icon" v-on:click="showOrgDescription(challenge)"><b-icon icon="info-circle"></b-icon></div>
71+
</b-col>
72+
<template v-if="challenge.secret">
73+
<b-col md="1">
74+
<div :id="category.tag+'-'+index" class="danger-icon"><b-icon icon="exclamation-triangle-fill" variant="danger"></b-icon></div>
75+
<b-tooltip :target="category.tag+'-'+index" triggers="hover">Challenge is secret</b-tooltip>
76+
</b-col>
77+
</template>
78+
<b-col md="9">
79+
{{ challenge.text }}
80+
</b-col>
81+
</b-row>
82+
</div>
83+
</template>
84+
<template v-else>
85+
<div
86+
v-for="(challenge, index) in category.filteredItems"
87+
:key="challenge"
88+
class="challenge"
89+
>
90+
<b-row>
7691
<b-col md="1">
77-
<div class="danger-icon"><b-icon icon="exclamation-triangle-fill" variant="danger"></b-icon></div>
92+
<div class="info-icon" v-on:click="showOrgDescription(challenge)"><b-icon icon="info-circle"></b-icon></div>
93+
</b-col>
94+
<template v-if="challenge.secret">
95+
<b-col md="1">
96+
<div :id="category.tag+'-'+index" class="danger-icon"><b-icon icon="exclamation-triangle-fill" variant="danger"></b-icon></div>
97+
<b-tooltip :target="category.tag+'-'+index" triggers="hover">Challenge is secret</b-tooltip>
98+
</b-col>
99+
</template>
100+
<b-col md="9">
101+
{{ challenge.text }}
78102
</b-col>
79-
</template>
80-
<b-col md="9">
81-
{{ challenge.text }}
82-
</b-col>
83-
</b-row>
84-
</div>
103+
</b-row>
104+
</div>
105+
</template>
85106
</b-col>
86107
<b-col md="7" class="chaldescs">
87108
<template v-for="category in categories">
@@ -110,33 +131,54 @@
110131
<b-col class="text-center" md="12" v-html="category.catDesc"></b-col>
111132
</b-row>
112133
<b-row class="text-center difficulties">
113-
<b-col class="difficulty"><p>Very Easy</p></b-col>
114-
<b-col class="difficulty"><p>Easy</p></b-col>
115-
<b-col class="difficulty"><p>Medium</p></b-col>
116-
<b-col class="difficulty"><p>Hard</p></b-col>
117-
<b-col class="difficulty"><p>Very Hard</p></b-col>
134+
<b-col class="difficulty" v-bind:class="{ active: difficulty.enabled }" v-on:click="filterItems(category, difficulty)" v-for="difficulty in category.difficulties" :key="difficulty"><p>{{ difficulty.name }}</p></b-col>
118135
</b-row>
119136
<b-row class="info-container">
120137
<b-col md="5" class="challenges customscroll">
121-
<div
122-
v-for="challenge in category.challenges"
123-
:key="challenge"
124-
class="challenge"
125-
>
126-
<b-row>
127-
<b-col md="1">
128-
<div class="info-icon" v-on:click="showOrgDescription(challenge)"><b-icon icon="info-circle"></b-icon></div>
129-
</b-col>
130-
<template v-if="challenge.secret">
138+
<template v-if="!category.filterOn">
139+
<div
140+
v-for="(challenge, index) in category.challenges"
141+
:key="challenge"
142+
class="challenge"
143+
>
144+
<b-row>
131145
<b-col md="1">
132-
<div class="danger-icon"><b-icon icon="exclamation-triangle-fill" variant="danger"></b-icon></div>
146+
<div class="info-icon" v-on:click="showOrgDescription(challenge)"><b-icon icon="info-circle"></b-icon></div>
147+
</b-col>
148+
<template v-if="challenge.secret">
149+
<b-col md="1">
150+
<div :id="category.tag+'-'+index" class="danger-icon"><b-icon icon="exclamation-triangle-fill" variant="danger"></b-icon></div>
151+
<b-tooltip :target="category.tag+'-'+index" triggers="hover">Challenge is secret</b-tooltip>
152+
</b-col>
153+
</template>
154+
<b-col md="9">
155+
{{ challenge.text }}
133156
</b-col>
134-
</template>
135-
<b-col md="10">
136-
{{ challenge.text }}
137-
</b-col>
138-
</b-row>
139-
</div>
157+
</b-row>
158+
</div>
159+
</template>
160+
<template v-else>
161+
<div
162+
v-for="(challenge, index) in category.filteredItems"
163+
:key="challenge"
164+
class="challenge"
165+
>
166+
<b-row>
167+
<b-col md="1">
168+
<div class="info-icon" v-on:click="showOrgDescription(challenge)"><b-icon icon="info-circle"></b-icon></div>
169+
</b-col>
170+
<template v-if="challenge.secret">
171+
<b-col md="1">
172+
<div :id="category.tag+'-'+index" class="danger-icon"><b-icon icon="exclamation-triangle-fill" variant="danger"></b-icon></div>
173+
<b-tooltip :target="category.tag+'-'+index" triggers="hover">Challenge is secret</b-tooltip>
174+
</b-col>
175+
</template>
176+
<b-col md="9">
177+
{{ challenge.text }}
178+
</b-col>
179+
</b-row>
180+
</div>
181+
</template>
140182
</b-col>
141183
<b-col md="7" class="chaldescs">
142184
<template v-for="category in categories">
@@ -183,6 +225,41 @@ export default {
183225
this.getCategories();
184226
},
185227
methods: {
228+
removeItem: function(array, key, value) {
229+
const index = array.findIndex(obj => obj[key] === value)
230+
return index >= 0 ? [
231+
...array.slice(0, index),
232+
...array.slice(index+1)
233+
] : array;
234+
},
235+
filterItems: function(category, difficulty) {
236+
difficulty.enabled = !difficulty.enabled
237+
const that = this
238+
if (difficulty.enabled) {
239+
category.challenges.forEach( function(challenge) {
240+
if (challenge.difficulty == difficulty.name){
241+
category.filteredItems.push(challenge)
242+
}
243+
})
244+
} else {
245+
category.filteredItems.forEach(function(challenge){
246+
//window.console.log(challenge, index)
247+
if (challenge.difficulty == difficulty.name){
248+
//window.console.log(challenge.difficulty, " Equals ", difficulty.name)
249+
//window.console.log("Removing challenge from filter: ", challenge.text)
250+
category.filteredItems = that.removeItem(category.filteredItems, "difficulty", difficulty.name)
251+
}
252+
})
253+
}
254+
category.filterOn = false
255+
category.difficulties.forEach(function(difficulty){
256+
if (difficulty.enabled) {
257+
category.filterOn = true
258+
}
259+
})
260+
//window.console.log(category.filteredItems)
261+
//window.console.log(category, difficulty)
262+
},
186263
showOrgDescription: function(challenge) {
187264
window.console.log("Showing org description")
188265
// Emptying/resetting the description field
@@ -212,7 +289,23 @@ export default {
212289
let name = element.getName()
213290
214291
let description = element.getCatdescription()
215-
let category = {tag: tag, name: name, catDesc: description, isInfoShown: false, challenges: [], taglist: []}
292+
let category = {
293+
tag: tag,
294+
name: name,
295+
catDesc: description,
296+
isInfoShown: false,
297+
challenges: [],
298+
taglist: [],
299+
filteredItems: [],
300+
filterOn: false,
301+
difficulties: [
302+
{name: "Very Easy", enabled: false},
303+
{name: "Easy", enabled: false},
304+
{name: "Medium", enabled: false},
305+
{name: "Hard", enabled: false},
306+
{name: "Very Hard", enabled: false}
307+
]
308+
}
216309
//window.console.log(category)
217310
that.categories.push(category)
218311
})
@@ -245,11 +338,31 @@ export default {
245338
exercisesListObj.forEach(function (element) {
246339
let childrenChallengesObj = element.getExerciseinfoList();
247340
that.childrenChallenges = " (";
248-
341+
let totalPoints = 0;
249342
for (let i = 0; i < childrenChallengesObj.length; i++) {
250343
that.cat = childrenChallengesObj[i].getCategory();
251344
that.childrenChallenges += childrenChallengesObj[i].getName() + ", "
345+
totalPoints += childrenChallengesObj[i].getPoints();
346+
}
347+
let averagePoints = totalPoints / childrenChallengesObj.length
348+
let averageDifficulty = ''
349+
if (averagePoints < 21) {
350+
averageDifficulty = "Very Easy"
351+
//window.console.log("Challenge was very easy")
352+
} else if (averagePoints >= 21 && averagePoints < 41) {
353+
averageDifficulty = "Easy"
354+
//window.console.log("Challenge was easy")
355+
} else if (averagePoints >= 41 && averagePoints < 61) {
356+
averageDifficulty = "Medium"
357+
//window.console.log("Challenge was Medium")
358+
} else if (averagePoints >= 61 && averagePoints < 81) {
359+
averageDifficulty = "Hard"
360+
//window.console.log("Challenge was Hard")
361+
} else if (averagePoints >= 81 && averagePoints <= 100) {
362+
averageDifficulty = "Very Hard"
363+
//window.console.log("Challenge was Very Hard")
252364
}
365+
//window.console.log("Average difficulty: ", averageDifficulty, averagePoints)
253366
that.childrenChallenges = that.childrenChallenges.substring(0, that.childrenChallenges.length - 2)
254367
that.childrenChallenges += ")";
255368
if (childrenChallengesObj.length == 1) {
@@ -264,7 +377,8 @@ export default {
264377
value: taglist[0],
265378
orgDesc: orgDesc,
266379
isInfoShown: false,
267-
secret: secret
380+
secret: secret,
381+
difficulty: averageDifficulty
268382
};
269383
that.categories.forEach(function (category) {
270384
if (that.cat == category.name) {

0 commit comments

Comments
 (0)