Skip to content

Commit 7730d11

Browse files
MikkelhostMikkelhost
authored
Merge pull request #222 from aau-network-security/feature/create-event-secret-icons-#000
Secret icons + more
2 parents 9285f8a + c36b904 commit 7730d11

File tree

3 files changed

+405
-100
lines changed

3 files changed

+405
-100
lines changed

‎client/src/Pages/Challenges.vue

+164-67
Original file line numberDiff line numberDiff line change
@@ -55,9 +55,14 @@
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" v-bind:class="{ active: difficulty.enabled }"
58+
<b-col class="difficulty noselect" v-bind:class="{ active: difficulty.enabled }"
5959
v-on:click="filterItems(category, difficulty)" v-for="difficulty in category.difficulties"
60-
:key="difficulty"><p>{{ difficulty.name }}</p></b-col>
60+
:key="difficulty">
61+
<p>
62+
<span class="dot" :class="difficulty.tag"></span>
63+
{{ difficulty.name }}
64+
</p>
65+
</b-col>
6166
</b-row>
6267
<template v-if="profile.selectedChallenges.length > 0">
6368
<b-row>
@@ -122,6 +127,7 @@
122127
v-model="profile.selectedChallenges"
123128
:name="category.tag"
124129
class="ml-4"
130+
style="margin-left: 10px!important"
125131
stacked
126132
>
127133
<div
@@ -130,24 +136,31 @@
130136
class="challenge"
131137
>
132138
<b-row>
133-
<b-col md="1">
134-
<div class="info-icon" v-on:click="showOrgDescription(challenge)">
135-
<b-icon icon="info-circle"></b-icon>
139+
<template v-if="secretChallenges.size">
140+
<template v-if="challenge.secret">
141+
<b-col md="1" style="padding: 0; max-width: 25px;">
142+
<div class="danger-icon">
143+
<b-icon :id="category.tag+'-'+index" icon="exclamation-triangle-fill"
144+
variant="danger"></b-icon>
145+
</div>
146+
<b-tooltip :target="category.tag+'-'+index" triggers="hover">Challenge is secret
147+
</b-tooltip>
148+
</b-col>
149+
</template>
150+
<template v-else>
151+
<b-col md="1" style="padding: 0; max-width: 25px;">
152+
</b-col>
153+
</template>
154+
</template>
155+
<b-col md="1" style="padding: 0; max-width: 25px;">
156+
<div v-on:click="showOrgDescription(challenge)">
157+
<b-icon class="info-icon" icon="info-circle"></b-icon>
136158
</div>
137159
</b-col>
138-
<template v-if="challenge.secret">
139-
<b-col md="1">
140-
<div class="danger-icon">
141-
<b-icon :id="category.tag+'-'+index" icon="exclamation-triangle-fill"
142-
variant="danger"></b-icon>
143-
</div>
144-
<b-tooltip :target="category.tag+'-'+index" triggers="hover">Challenge is secret
145-
</b-tooltip>
146-
</b-col>
147-
</template>
148-
<b-col md="9">
160+
<b-col md="9" style="padding: 0;">
149161
<b-form-checkbox @change="updateSecret"
150162
:value="{tag: challenge.value, name: challenge.name, secret: challenge.secret}">
163+
<span class="dot" :class="challenge.difficultytag"></span>
151164
{{ challenge.text }}
152165
</b-form-checkbox>
153166
</b-col>
@@ -161,6 +174,7 @@
161174
v-model="profile.selectedChallenges"
162175
:name="category.tag"
163176
class="ml-4"
177+
style="margin-left: 10px!important"
164178
stacked
165179
>
166180
<div
@@ -169,24 +183,31 @@
169183
class="challenge"
170184
>
171185
<b-row>
172-
<b-col md="1">
173-
<div class="info-icon" v-on:click="showOrgDescription(challenge)">
174-
<b-icon icon="info-circle"></b-icon>
186+
<template v-if="secretChallenges.size">
187+
<template v-if="challenge.secret">
188+
<b-col md="1" style="padding: 0; max-width: 25px;">
189+
<div class="danger-icon">
190+
<b-icon :id="category.tag+'-'+index" icon="exclamation-triangle-fill"
191+
variant="danger"></b-icon>
192+
</div>
193+
<b-tooltip :target="category.tag+'-'+index" triggers="hover">Challenge is secret
194+
</b-tooltip>
195+
</b-col>
196+
</template>
197+
<template v-else>
198+
<b-col md="1" style="padding: 0; max-width: 25px;">
199+
</b-col>
200+
</template>
201+
</template>
202+
<b-col md="1" style="padding: 0; max-width: 25px;">
203+
<div v-on:click="showOrgDescription(challenge)">
204+
<b-icon class="info-icon" icon="info-circle"></b-icon>
175205
</div>
176206
</b-col>
177-
<template v-if="challenge.secret">
178-
<b-col md="1">
179-
<div class="danger-icon">
180-
<b-icon :id="category.tag+'-'+index" icon="exclamation-triangle-fill"
181-
variant="danger"></b-icon>
182-
</div>
183-
<b-tooltip :target="category.tag+'-'+index" triggers="hover">Challenge is secret
184-
</b-tooltip>
185-
</b-col>
186-
</template>
187-
<b-col md="9">
207+
<b-col md="9" style="padding: 0;">
188208
<b-form-checkbox @change="updateSecret"
189209
:value="{tag: challenge.value, name: challenge.name, secret: challenge.secret}">
210+
<span class="dot" :class="challenge.difficultytag"></span>
190211
{{ challenge.text }}
191212
</b-form-checkbox>
192213
</b-col>
@@ -246,9 +267,14 @@
246267
<b-col class="text-center" md="12" v-html="category.catDesc"></b-col>
247268
</b-row>
248269
<b-row class="text-center difficulties">
249-
<b-col class="difficulty" v-bind:class="{ active: difficulty.enabled }"
270+
<b-col class="difficulty noselect" v-bind:class="{ active: difficulty.enabled }"
250271
v-on:click="filterItems(category, difficulty)" v-for="difficulty in category.difficulties"
251-
:key="difficulty"><p>{{ difficulty.name }}</p></b-col>
272+
:key="difficulty">
273+
<p>
274+
<span class="dot" :class="difficulty.tag"></span>
275+
{{ difficulty.name }}
276+
</p>
277+
</b-col>
252278
</b-row>
253279
<template v-if="profile.selectedChallenges.length > 0">
254280
<b-row>
@@ -313,6 +339,7 @@
313339
v-model="profile.selectedChallenges"
314340
:name="category.tag"
315341
class="ml-4"
342+
style="margin-left: 10px!important"
316343
stacked
317344
>
318345
<div
@@ -321,24 +348,31 @@
321348
class="challenge"
322349
>
323350
<b-row>
324-
<b-col md="1">
325-
<div class="info-icon" v-on:click="showOrgDescription(challenge)">
326-
<b-icon icon="info-circle"></b-icon>
351+
<template v-if="secretChallenges.size">
352+
<template v-if="challenge.secret">
353+
<b-col md="1" style="padding: 0; max-width: 25px;">
354+
<div class="danger-icon">
355+
<b-icon :id="category.tag+'-'+index" icon="exclamation-triangle-fill"
356+
variant="danger"></b-icon>
357+
</div>
358+
<b-tooltip :target="category.tag+'-'+index" triggers="hover">Challenge is secret
359+
</b-tooltip>
360+
</b-col>
361+
</template>
362+
<template v-else>
363+
<b-col md="1" style="padding: 0; max-width: 25px;">
364+
</b-col>
365+
</template>
366+
</template>
367+
<b-col md="1" style="padding: 0; max-width: 25px;">
368+
<div v-on:click="showOrgDescription(challenge)">
369+
<b-icon class="info-icon" icon="info-circle"></b-icon>
327370
</div>
328371
</b-col>
329-
<template v-if="challenge.secret">
330-
<b-col md="1">
331-
<div class="danger-icon">
332-
<b-icon :id="category.tag+'-'+index" icon="exclamation-triangle-fill"
333-
variant="danger"></b-icon>
334-
</div>
335-
<b-tooltip :target="category.tag+'-'+index" triggers="hover">Challenge is secret
336-
</b-tooltip>
337-
</b-col>
338-
</template>
339-
<b-col md="9">
372+
<b-col md="9" style="padding: 0;">
340373
<b-form-checkbox @change="updateSecret"
341374
:value="{tag: challenge.value, name: challenge.name, secret: challenge.secret}">
375+
<span class="dot" :class="challenge.difficultytag"></span>
342376
{{ challenge.text }}
343377
</b-form-checkbox>
344378
</b-col>
@@ -352,6 +386,7 @@
352386
v-model="profile.selectedChallenges"
353387
:name="category.tag"
354388
class="ml-4"
389+
style="margin-left: 10px!important"
355390
stacked
356391
>
357392
<div
@@ -360,24 +395,31 @@
360395
class="challenge"
361396
>
362397
<b-row>
363-
<b-col md="1">
364-
<div class="info-icon" v-on:click="showOrgDescription(challenge)">
365-
<b-icon icon="info-circle"></b-icon>
398+
<template v-if="secretChallenges.size">
399+
<template v-if="challenge.secret">
400+
<b-col md="1" style="padding: 0; max-width: 25px;">
401+
<div class="danger-icon">
402+
<b-icon :id="category.tag+'-'+index" icon="exclamation-triangle-fill"
403+
variant="danger"></b-icon>
404+
</div>
405+
<b-tooltip :target="category.tag+'-'+index" triggers="hover">Challenge is secret
406+
</b-tooltip>
407+
</b-col>
408+
</template>
409+
<template v-else>
410+
<b-col md="1" style="padding: 0; max-width: 25px;">
411+
</b-col>
412+
</template>
413+
</template>
414+
<b-col md="1" style="padding: 0; max-width: 25px;">
415+
<div v-on:click="showOrgDescription(challenge)">
416+
<b-icon class="info-icon" icon="info-circle"></b-icon>
366417
</div>
367418
</b-col>
368-
<template v-if="challenge.secret">
369-
<b-col md="1">
370-
<div class="danger-icon">
371-
<b-icon :id="category.tag+'-'+index" icon="exclamation-triangle-fill"
372-
variant="danger"></b-icon>
373-
</div>
374-
<b-tooltip :target="category.tag+'-'+index" triggers="hover">Challenge is secret
375-
</b-tooltip>
376-
</b-col>
377-
</template>
378-
<b-col md="9">
419+
<b-col md="9" style="padding: 0;">
379420
<b-form-checkbox @change="updateSecret"
380421
:value="{tag: challenge.value, name: challenge.name, secret: challenge.secret}">
422+
<span class="dot" :class="challenge.difficultytag"></span>
381423
{{ challenge.text }}
382424
</b-form-checkbox>
383425
</b-col>
@@ -558,14 +600,15 @@ export default {
558600
const that = this
559601
if (difficulty.enabled) {
560602
category.challenges.forEach(function (challenge) {
603+
561604
if (challenge.difficulty == difficulty.name) {
562605
category.filteredItems.push(challenge)
563606
}
564607
})
565608
} else {
566609
category.filteredItems.forEach(function (challenge) {
567610
//window.console.log(challenge, index)
568-
if (challenge.difficulty == difficulty.name) {
611+
if (challenge.difficulty == difficulty.name) {
569612
//window.console.log(challenge.difficulty, " Equals ", difficulty.name)
570613
//window.console.log("Removing challenge from filter: ", challenge.text)
571614
category.filteredItems = that.removeItem(category.filteredItems, "difficulty", difficulty.name)
@@ -630,11 +673,11 @@ export default {
630673
filteredItems: [],
631674
filterOn: false,
632675
difficulties: [
633-
{name: "Very Easy", enabled: false},
634-
{name: "Easy", enabled: false},
635-
{name: "Medium", enabled: false},
636-
{name: "Hard", enabled: false},
637-
{name: "Very Hard", enabled: false}
676+
{name: "Very Easy", tag: "veryeasy", enabled: false},
677+
{name: "Easy", tag: "easy", enabled: false},
678+
{name: "Medium", tag: "medium", enabled: false},
679+
{name: "Hard", tag: "hard", enabled: false},
680+
{name: "Very Hard", tag: "veryhard", enabled: false}
638681
]
639682
}
640683
//window.console.log(category)
@@ -677,20 +720,26 @@ export default {
677720
}
678721
let averagePoints = totalPoints / childrenChallengesObj.length
679722
let averageDifficulty = ''
723+
let difficultytag = ''
680724
if (averagePoints < 21) {
681725
averageDifficulty = "Very Easy"
726+
difficultytag = "veryeasy"
682727
//window.console.log("Challenge was very easy")
683728
} else if (averagePoints >= 21 && averagePoints < 41) {
684729
averageDifficulty = "Easy"
730+
difficultytag = "easy"
685731
//window.console.log("Challenge was easy")
686732
} else if (averagePoints >= 41 && averagePoints < 61) {
687733
averageDifficulty = "Medium"
734+
difficultytag = "medium"
688735
//window.console.log("Challenge was Medium")
689736
} else if (averagePoints >= 61 && averagePoints < 81) {
690737
averageDifficulty = "Hard"
738+
difficultytag = "hard"
691739
//window.console.log("Challenge was Hard")
692740
} else if (averagePoints >= 81 && averagePoints <= 100) {
693741
averageDifficulty = "Very Hard"
742+
difficultytag = "veryhard"
694743
//window.console.log("Challenge was Very Hard")
695744
}
696745
//window.console.log("Average difficulty: ", averageDifficulty, averagePoints)
@@ -710,7 +759,8 @@ export default {
710759
orgDesc: orgDesc,
711760
isInfoShown: false,
712761
secret: secret,
713-
difficulty: averageDifficulty
762+
difficulty: averageDifficulty,
763+
difficultytag: difficultytag
714764
};
715765
if (secret) {
716766
that.secretChallenges.set(taglist[0], true)
@@ -749,6 +799,12 @@ export default {
749799
cursor: pointer;
750800
}
751801
802+
@media only screen and (max-width: 1200px) {
803+
.difficulty {
804+
margin: 0 10px 0 10px;
805+
}
806+
}
807+
752808
.difficulty.active {
753809
color: #fff !important;
754810
background-color: #211a52 !important;
@@ -849,4 +905,45 @@ export default {
849905
h3 {
850906
font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
851907
}
908+
909+
.dot {
910+
height: 10px;
911+
width: 10px;
912+
border-radius: 50%;
913+
display: inline-block;
914+
}
915+
916+
.dot.veryeasy{
917+
background-color: #42bf18;
918+
}
919+
920+
.dot.easy{
921+
background-color: #97c019;
922+
}
923+
924+
.dot.medium{
925+
background-color: #d0c219;
926+
}
927+
928+
.dot.hard{
929+
background-color: #d27d19;
930+
}
931+
932+
.dot.veryhard{
933+
background-color: #d35819;
934+
}
935+
936+
.noselect {
937+
-webkit-touch-callout: none; /* iOS Safari */
938+
-webkit-user-select: none; /* Safari */
939+
-khtml-user-select: none; /* Konqueror HTML */
940+
-moz-user-select: none; /* Old versions of Firefox */
941+
-ms-user-select: none; /* Internet Explorer/Edge */
942+
user-select: none; /* Non-prefixed version, currently
943+
supported by Chrome, Edge, Opera and Firefox */
944+
}
945+
946+
.info-icon{
947+
cursor: pointer;
948+
}
852949
</style>

0 commit comments

Comments
 (0)