Skip to content

Commit

Permalink
update chalmodal with new category and descriptions
Browse files Browse the repository at this point in the history 
Signed-off-by: Ahmet Turkmen <[email protected]>
  • Loading branch information
@mrtrkmn
mrtrkmn committed Aug 13, 2021
1 parent eb31132 commit d697db5
Showing 1 changed file with 212 additions and 14 deletions.
226 changes: 212 additions & 14 deletions client/src/components/ChalModal.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
<div class="col-3">
<div class="nav flex-column nav-pills sticky-top" id="challengesCategory" role="tablist" aria-orientation="vertical">
<a class="nav-link active show" id="starters-tab" data-toggle="pill" href="#starters" role="tab" aria-controls="starters" aria-selected="true">Starters</a>
<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>
<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>
<a class="nav-link" id="forensics-tab" data-toggle="pill" href="#forensics" role="tab" aria-controls="forensics" aria-selected="false">Forensics</a>
<a class="nav-link" id="binary-tab" data-toggle="pill" href="#binary" role="tab" aria-controls="binary" aria-selected="false">Binary</a>
Expand All @@ -29,64 +30,192 @@
<b-form-checkbox-group
id="challengesS"
v-model="selectedChallenges"
:options="challengesTextS"
name="challengesS"
class="ml-4"
stacked
></b-form-checkbox-group>
>
<!--{{ selectedChallenges }} Used for debugging-->
<div
v-for="text in challengesTextS"
:key="text"
class="challenge-container"
>
<div class="checkbox-container">
<b-form-checkbox
:value="text.value"
>
{{ text.text }}
</b-form-checkbox>
<div class="info-icon" v-on:click="text.isInfoShown = !text.isInfoShown"><b-icon icon="info-circle"></b-icon></div>
</div>
<div class="chalInfo" v-bind:class="{ visible: text.isInfoShown}" v-html="text.orgDesc">
<!--{{ text.orgDesc }} This is just dummy data for now-->
</div>
</div>

</b-form-checkbox-group>
</div>

<div class="tab-pane fade" id="cyber-championship" role="tabpanel" aria-labelledby="cyber-championship">
<b-form-checkbox-group
id="challengesCS"
v-model="selectedChallenges"
name="challengesCS"
class="ml-4"
stacked
>
<div
v-for="text in challengesTextCS"
:key="text"
class="challenge-container"
>
<div class="checkbox-container">
<b-form-checkbox
:value="text.value"
>
{{ text.text }}
</b-form-checkbox>
<div class="info-icon" v-on:click="text.isInfoShown = !text.isInfoShown"><b-icon icon="info-circle"></b-icon></div>
</div>
<div class="chalInfo" v-bind:class="{ visible: text.isInfoShown}" v-html="text.orgDesc">
<!--{{ text.orgDesc }} This is just dummy data for now-->
</div>
</div>

</b-form-checkbox-group>
</div>

<div class="tab-pane fade" id="web-exploit" role="tabpanel" aria-labelledby="web-exploit-tab">
<b-form-checkbox-group
id="challengesWE"
v-model="selectedChallenges"
:options="challengesTextWE"
name="challengesWE"
class="ml-4"
stacked
></b-form-checkbox-group>
>
<div
v-for="text in challengesTextWE"
:key="text"
class="challenge-container"
>
<div class="checkbox-container">
<b-form-checkbox
:value="text.value"
>
{{ text.text }}
</b-form-checkbox>
<div class="info-icon" v-on:click="text.isInfoShown = !text.isInfoShown"><b-icon icon="info-circle"></b-icon></div>
</div>
<div class="chalInfo" v-bind:class="{ visible: text.isInfoShown}" v-html="text.orgDesc">
</div>
</div>
</b-form-checkbox-group>
</div>

<div class="tab-pane fade" id="forensics" role="tabpanel" aria-labelledby="forensics-tab">
<b-form-checkbox-group
id="challengesF"
v-model="selectedChallenges"
:options="challengesTextF"
name="challengesF"
class="ml-4"
stacked
></b-form-checkbox-group>
>
<div
v-for="text in challengesTextF"
:key="text"
class="challenge-container"
>
<div class="checkbox-container">
<b-form-checkbox
:value="text.value"
>
{{ text.text }}
</b-form-checkbox>
<div class="info-icon" v-on:click="text.isInfoShown = !text.isInfoShown"><b-icon icon="info-circle"></b-icon></div>
</div>
<div class="chalInfo" v-bind:class="{ visible: text.isInfoShown}" v-html="text.orgDesc">
</div>
</div>
</b-form-checkbox-group>
</div>

<div class="tab-pane fade" id="binary" role="tabpanel" aria-labelledby="binary-tab">
<b-form-checkbox-group
id="challengesB"
v-model="selectedChallenges"
:options="challengesTextB"
name="challengesWE"
name="challengesB"
class="ml-4"
stacked
></b-form-checkbox-group>
>
<div
v-for="text in challengesTextB"
:key="text"
class="challenge-container"
>
<div class="checkbox-container">
<b-form-checkbox
:value="text.value"
>
{{ text.text }}
</b-form-checkbox>
<div class="info-icon" v-on:click="text.isInfoShown = !text.isInfoShown"><b-icon icon="info-circle"></b-icon></div>
</div>
<div class="chalInfo" v-bind:class="{ visible: text.isInfoShown}" v-html="text.orgDesc">
</div>
</div>
</b-form-checkbox-group>
</div>
<div class="tab-pane fade" id="reverse-eng" role="tabpanel" aria-labelledby="reverse-eng-tab">
<b-form-checkbox-group
id="challengesRE"
v-model="selectedChallenges"
:options="challengesTextRE"
name="challengesRE"
class="ml-4"
stacked
></b-form-checkbox-group>
>
<div
v-for="text in challengesTextRE"
:key="text"
class="challenge-container"
>
<div class="checkbox-container">
<b-form-checkbox
:value="text.value"
>
{{ text.text }}
</b-form-checkbox>
<div class="info-icon" v-on:click="text.isInfoShown = !text.isInfoShown"><b-icon icon="info-circle"></b-icon></div>
</div>
<div class="chalInfo" v-bind:class="{ visible: text.isInfoShown}" v-html="text.orgDesc">
</div>
</div>
</b-form-checkbox-group>
</div>
<div class="tab-pane fade" id="cryptography" role="tabpanel" aria-labelledby="cryptography-tab">
<b-form-checkbox-group
id="challengesC"
v-model="selectedChallenges"
:options="challengesTextC"
name="challengesC"
class="ml-4"
stacked
></b-form-checkbox-group>
>
<div
v-for="text in challengesTextC"
:key="text"
class="challenge-container"
>
<div class="checkbox-container">
<b-form-checkbox
:value="text.value"
>
{{ text.text }}
</b-form-checkbox>
<div class="info-icon" v-on:click="text.isInfoShown = !text.isInfoShown"><b-icon icon="info-circle"></b-icon></div>
</div>
<div class="chalInfo" v-bind:class="{ visible: text.isInfoShown}" v-html="text.orgDesc">
</div>
</div>
</b-form-checkbox-group>
</div>
</div>
</div>
Expand Down Expand Up @@ -134,6 +263,7 @@ export default {
challengesRE: [], challengesTextRE: [],
challengesC: [], challengesTextC: [],
challengesS: [], challengesTextS: [],
challengeCS: [], challengesTextCS:[],
cat: '', childrenChallenges: '', isDisabled: false,
}
},
Expand All @@ -147,6 +277,7 @@ export default {
.concat(this.challengesF)
.concat(this.challengesRE)
.concat(this.challengesS)
.concat(this.challengeCS)
.concat(this.challengesC): []
},
encodeHTML: function(s) {
Expand Down Expand Up @@ -187,7 +318,8 @@ export default {
let taglist = element.getTagsList();
let name = element.getName();
let parentChallenge = { text: name + that.childrenChallenges, value: taglist[0] };
let orgDesc = element.getOrgdescription()
let parentChallenge = { text: name + that.childrenChallenges, value: taglist[0], orgDesc: orgDesc, isInfoShown: false };
switch (that.cat) {
case "Web exploitation":
that.challengesTextWE.push(parentChallenge);
Expand All @@ -212,6 +344,11 @@ export default {
case "Starters":
that.challengesTextS.push(parentChallenge);
that.challengesS.push(taglist[0])
break;
case "Cybermesterskaberne":
that.challengesTextCS.push(parentChallenge);
that.challengesCS.push(taglist[0]);
break;
}
})
});
Expand Down Expand Up @@ -260,6 +397,67 @@ export default {
border: 1px solid #ced4da;
border-radius: .35rem;
}
.info-icon {
position: relative;
top: 1px;
left: -515px;
width: 16px;
padding: 0px;
margin: 0px;
z-index: 99999;
}
.chalInfo{
background-color: #221d52;
color: #ffffff;
position: relative;
margin: auto;
padding-left: 10px;
padding-right: 10px;
width: 500px;
max-height: 0;
overflow: hidden;
transition: all .5s ease-in-out;
visibility: hidden;
}
.chalInfo.visible {
max-height: 200px;
/*transform-origin: top-center;*/
transition: all .5s ease-in-out;
padding: 10px;
overflow-y: auto;
box-shadow: 5px 5px 5px rgba(73, 80, 87, 0.83);
visibility: visible;
}
.checkbox-container {
display: flex;
}
.custom-control{
width: 100%;
}
.chalInfo::-webkit-scrollbar {
background-color: #221d52;
width: 5px;
}
.chalInfo::-webkit-scrollbar-track {
background-color: #221d52;
}
/* scrollbar itself */
.chalInfo::-webkit-scrollbar-thumb {
background-color: #babac0;
border-radius: 16px;
}
/* set button(top and bottom of the scrollbar) */
.chalInfo::-webkit-scrollbar-button {
display:none;
}
.my-is-invalid{
border: 2px solid rgba(220,53,69,0.9);
box-shadow: 1px 1px 2px rgba(220,53,69,0.7);
Expand Down

0 comments on commit d697db5

Please sign in to comment.