Skip to content

Commit d697db5

Browse files
mrtrkmnmrtrkmn
committed
update chalmodal with new category and descriptions
Signed-off-by: Ahmet Turkmen <f.ahmet.turkmen@icloud.com>
1 parent eb31132 commit d697db5

File tree

1 file changed

+212
-14
lines changed

1 file changed

+212
-14
lines changed

‎client/src/components/ChalModal.vue

+212-14
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
<div class="col-3">
1717
<div class="nav flex-column nav-pills sticky-top" id="challengesCategory" role="tablist" aria-orientation="vertical">
1818
<a class="nav-link active show" id="starters-tab" data-toggle="pill" href="#starters" role="tab" aria-controls="starters" aria-selected="true">Starters</a>
19+
<a class="nav-link" id="cyber-championships-tab" data-toggle="pill" href="#cyber-championship" role="tab" aria-controls="cyber-championship" aria-selected="false">Cyber Champ.</a>
1920
<a class="nav-link" id="web-exploit-tab" data-toggle="pill" href="#web-exploit" role="tab" aria-controls="web-exploit" aria-selected="false">Web Exploit.</a>
2021
<a class="nav-link" id="forensics-tab" data-toggle="pill" href="#forensics" role="tab" aria-controls="forensics" aria-selected="false">Forensics</a>
2122
<a class="nav-link" id="binary-tab" data-toggle="pill" href="#binary" role="tab" aria-controls="binary" aria-selected="false">Binary</a>
@@ -29,64 +30,192 @@
2930
<b-form-checkbox-group
3031
id="challengesS"
3132
v-model="selectedChallenges"
32-
:options="challengesTextS"
3333
name="challengesS"
3434
class="ml-4"
3535
stacked
36-
></b-form-checkbox-group>
36+
>
37+
<!--{{ selectedChallenges }} Used for debugging-->
38+
<div
39+
v-for="text in challengesTextS"
40+
:key="text"
41+
class="challenge-container"
42+
>
43+
<div class="checkbox-container">
44+
<b-form-checkbox
45+
:value="text.value"
46+
>
47+
{{ text.text }}
48+
</b-form-checkbox>
49+
<div class="info-icon" v-on:click="text.isInfoShown = !text.isInfoShown"><b-icon icon="info-circle"></b-icon></div>
50+
</div>
51+
<div class="chalInfo" v-bind:class="{ visible: text.isInfoShown}" v-html="text.orgDesc">
52+
<!--{{ text.orgDesc }} This is just dummy data for now-->
53+
</div>
54+
</div>
55+
56+
</b-form-checkbox-group>
57+
</div>
58+
59+
<div class="tab-pane fade" id="cyber-championship" role="tabpanel" aria-labelledby="cyber-championship">
60+
<b-form-checkbox-group
61+
id="challengesCS"
62+
v-model="selectedChallenges"
63+
name="challengesCS"
64+
class="ml-4"
65+
stacked
66+
>
67+
<div
68+
v-for="text in challengesTextCS"
69+
:key="text"
70+
class="challenge-container"
71+
>
72+
<div class="checkbox-container">
73+
<b-form-checkbox
74+
:value="text.value"
75+
>
76+
{{ text.text }}
77+
</b-form-checkbox>
78+
<div class="info-icon" v-on:click="text.isInfoShown = !text.isInfoShown"><b-icon icon="info-circle"></b-icon></div>
79+
</div>
80+
<div class="chalInfo" v-bind:class="{ visible: text.isInfoShown}" v-html="text.orgDesc">
81+
<!--{{ text.orgDesc }} This is just dummy data for now-->
82+
</div>
83+
</div>
84+
85+
</b-form-checkbox-group>
3786
</div>
3887

3988
<div class="tab-pane fade" id="web-exploit" role="tabpanel" aria-labelledby="web-exploit-tab">
4089
<b-form-checkbox-group
4190
id="challengesWE"
4291
v-model="selectedChallenges"
43-
:options="challengesTextWE"
4492
name="challengesWE"
4593
class="ml-4"
4694
stacked
47-
></b-form-checkbox-group>
95+
>
96+
<div
97+
v-for="text in challengesTextWE"
98+
:key="text"
99+
class="challenge-container"
100+
>
101+
<div class="checkbox-container">
102+
<b-form-checkbox
103+
:value="text.value"
104+
>
105+
{{ text.text }}
106+
</b-form-checkbox>
107+
<div class="info-icon" v-on:click="text.isInfoShown = !text.isInfoShown"><b-icon icon="info-circle"></b-icon></div>
108+
</div>
109+
<div class="chalInfo" v-bind:class="{ visible: text.isInfoShown}" v-html="text.orgDesc">
110+
</div>
111+
</div>
112+
</b-form-checkbox-group>
48113
</div>
49114

50115
<div class="tab-pane fade" id="forensics" role="tabpanel" aria-labelledby="forensics-tab">
51116
<b-form-checkbox-group
52117
id="challengesF"
53118
v-model="selectedChallenges"
54-
:options="challengesTextF"
55119
name="challengesF"
56120
class="ml-4"
57121
stacked
58-
></b-form-checkbox-group>
122+
>
123+
<div
124+
v-for="text in challengesTextF"
125+
:key="text"
126+
class="challenge-container"
127+
>
128+
<div class="checkbox-container">
129+
<b-form-checkbox
130+
:value="text.value"
131+
>
132+
{{ text.text }}
133+
</b-form-checkbox>
134+
<div class="info-icon" v-on:click="text.isInfoShown = !text.isInfoShown"><b-icon icon="info-circle"></b-icon></div>
135+
</div>
136+
<div class="chalInfo" v-bind:class="{ visible: text.isInfoShown}" v-html="text.orgDesc">
137+
</div>
138+
</div>
139+
</b-form-checkbox-group>
59140
</div>
60141

61142
<div class="tab-pane fade" id="binary" role="tabpanel" aria-labelledby="binary-tab">
62143
<b-form-checkbox-group
63144
id="challengesB"
64145
v-model="selectedChallenges"
65-
:options="challengesTextB"
66-
name="challengesWE"
146+
name="challengesB"
67147
class="ml-4"
68148
stacked
69-
></b-form-checkbox-group>
149+
>
150+
<div
151+
v-for="text in challengesTextB"
152+
:key="text"
153+
class="challenge-container"
154+
>
155+
<div class="checkbox-container">
156+
<b-form-checkbox
157+
:value="text.value"
158+
>
159+
{{ text.text }}
160+
</b-form-checkbox>
161+
<div class="info-icon" v-on:click="text.isInfoShown = !text.isInfoShown"><b-icon icon="info-circle"></b-icon></div>
162+
</div>
163+
<div class="chalInfo" v-bind:class="{ visible: text.isInfoShown}" v-html="text.orgDesc">
164+
</div>
165+
</div>
166+
</b-form-checkbox-group>
70167
</div>
71168
<div class="tab-pane fade" id="reverse-eng" role="tabpanel" aria-labelledby="reverse-eng-tab">
72169
<b-form-checkbox-group
73170
id="challengesRE"
74171
v-model="selectedChallenges"
75-
:options="challengesTextRE"
76172
name="challengesRE"
77173
class="ml-4"
78174
stacked
79-
></b-form-checkbox-group>
175+
>
176+
<div
177+
v-for="text in challengesTextRE"
178+
:key="text"
179+
class="challenge-container"
180+
>
181+
<div class="checkbox-container">
182+
<b-form-checkbox
183+
:value="text.value"
184+
>
185+
{{ text.text }}
186+
</b-form-checkbox>
187+
<div class="info-icon" v-on:click="text.isInfoShown = !text.isInfoShown"><b-icon icon="info-circle"></b-icon></div>
188+
</div>
189+
<div class="chalInfo" v-bind:class="{ visible: text.isInfoShown}" v-html="text.orgDesc">
190+
</div>
191+
</div>
192+
</b-form-checkbox-group>
80193
</div>
81194
<div class="tab-pane fade" id="cryptography" role="tabpanel" aria-labelledby="cryptography-tab">
82195
<b-form-checkbox-group
83196
id="challengesC"
84197
v-model="selectedChallenges"
85-
:options="challengesTextC"
86198
name="challengesC"
87199
class="ml-4"
88200
stacked
89-
></b-form-checkbox-group>
201+
>
202+
<div
203+
v-for="text in challengesTextC"
204+
:key="text"
205+
class="challenge-container"
206+
>
207+
<div class="checkbox-container">
208+
<b-form-checkbox
209+
:value="text.value"
210+
>
211+
{{ text.text }}
212+
</b-form-checkbox>
213+
<div class="info-icon" v-on:click="text.isInfoShown = !text.isInfoShown"><b-icon icon="info-circle"></b-icon></div>
214+
</div>
215+
<div class="chalInfo" v-bind:class="{ visible: text.isInfoShown}" v-html="text.orgDesc">
216+
</div>
217+
</div>
218+
</b-form-checkbox-group>
90219
</div>
91220
</div>
92221
</div>
@@ -134,6 +263,7 @@ export default {
134263
challengesRE: [], challengesTextRE: [],
135264
challengesC: [], challengesTextC: [],
136265
challengesS: [], challengesTextS: [],
266+
challengeCS: [], challengesTextCS:[],
137267
cat: '', childrenChallenges: '', isDisabled: false,
138268
}
139269
},
@@ -147,6 +277,7 @@ export default {
147277
.concat(this.challengesF)
148278
.concat(this.challengesRE)
149279
.concat(this.challengesS)
280+
.concat(this.challengeCS)
150281
.concat(this.challengesC): []
151282
},
152283
encodeHTML: function(s) {
@@ -187,7 +318,8 @@ export default {
187318
188319
let taglist = element.getTagsList();
189320
let name = element.getName();
190-
let parentChallenge = { text: name + that.childrenChallenges, value: taglist[0] };
321+
let orgDesc = element.getOrgdescription()
322+
let parentChallenge = { text: name + that.childrenChallenges, value: taglist[0], orgDesc: orgDesc, isInfoShown: false };
191323
switch (that.cat) {
192324
case "Web exploitation":
193325
that.challengesTextWE.push(parentChallenge);
@@ -212,6 +344,11 @@ export default {
212344
case "Starters":
213345
that.challengesTextS.push(parentChallenge);
214346
that.challengesS.push(taglist[0])
347+
break;
348+
case "Cybermesterskaberne":
349+
that.challengesTextCS.push(parentChallenge);
350+
that.challengesCS.push(taglist[0]);
351+
break;
215352
}
216353
})
217354
});
@@ -260,6 +397,67 @@ export default {
260397
border: 1px solid #ced4da;
261398
border-radius: .35rem;
262399
}
400+
401+
402+
.info-icon {
403+
position: relative;
404+
top: 1px;
405+
left: -515px;
406+
width: 16px;
407+
padding: 0px;
408+
margin: 0px;
409+
z-index: 99999;
410+
}
411+
.chalInfo{
412+
background-color: #221d52;
413+
color: #ffffff;
414+
position: relative;
415+
margin: auto;
416+
padding-left: 10px;
417+
padding-right: 10px;
418+
width: 500px;
419+
max-height: 0;
420+
overflow: hidden;
421+
transition: all .5s ease-in-out;
422+
visibility: hidden;
423+
}
424+
.chalInfo.visible {
425+
max-height: 200px;
426+
/*transform-origin: top-center;*/
427+
transition: all .5s ease-in-out;
428+
padding: 10px;
429+
overflow-y: auto;
430+
box-shadow: 5px 5px 5px rgba(73, 80, 87, 0.83);
431+
visibility: visible;
432+
}
433+
434+
.checkbox-container {
435+
display: flex;
436+
}
437+
438+
.custom-control{
439+
width: 100%;
440+
}
441+
442+
.chalInfo::-webkit-scrollbar {
443+
background-color: #221d52;
444+
width: 5px;
445+
}
446+
447+
.chalInfo::-webkit-scrollbar-track {
448+
background-color: #221d52;
449+
}
450+
451+
/* scrollbar itself */
452+
.chalInfo::-webkit-scrollbar-thumb {
453+
background-color: #babac0;
454+
border-radius: 16px;
455+
}
456+
457+
/* set button(top and bottom of the scrollbar) */
458+
.chalInfo::-webkit-scrollbar-button {
459+
display:none;
460+
}
263461
.my-is-invalid{
264462
border: 2px solid rgba(220,53,69,0.9);
265463
box-shadow: 1px 1px 2px rgba(220,53,69,0.7);

0 commit comments

Comments
 (0)