Commit 3840ba4b authored by Honcoop, T.'s avatar Honcoop, T.
Browse files

Merge branch '55-add-useful-information-to-the-list-of-items' into 'master'

Resolve "Add useful information to the list of items"

Closes #55

See merge request !19
parents b9faf787 deeaf89f
Pipeline #2500 passed with stages
in 2 minutes and 55 seconds
......@@ -257,7 +257,7 @@ export default {
isPrimary: false,
level: 0,
top_nav: [],
level_0: ["/home", "/settings", "/contact"],
level_0: ["/home", "/settings",],
platforms: settings.platforms,
bottom_nav: nav.bottom_items,
testCount: 5,
......
......@@ -4,10 +4,6 @@ export default {
icon: 'fa fa-cog',
url: '/settings',
},
{
name: 'Contact',
icon: 'fa fa-envelope',
url: '/contact',
},
],
}
......@@ -10,7 +10,6 @@ const DefaultContainer = () => import('@/containers/DefaultContainer')
// Views
const Home = () => import('@/views/Home')
const Contact = () => import('@/views/Contact')
const Settings = () => import('@/views/Settings')
const AdminPanel = () => import('@/views/admin/AdminPanel')
const AdminHome = () => import('@/views/admin/AdminHome')
......@@ -116,11 +115,7 @@ const router = new VueRouter({
name: 'Settings',
component: Settings,
},
{
path: '/contact',
name: 'Contact',
component: Contact,
},
],
},
{
......
......@@ -26,6 +26,12 @@ export default new Vuex.Store({
toDate: null,
},
tooltips: true,
warnings: true,
gradeval: 0.7,
passingval: 0.7,
attemptsval: 1.5,
watchval: 0.7,
dislikeval: 0.8,
},
getters: {
......@@ -61,6 +67,25 @@ export default new Vuex.Store({
setTooltips(state, tooltips) {
state.tooltips = tooltips;
},
setWarnings(state, warnings) {
state.warnings = warnings;
},
setGradeVal(state, gradeval) {
state.gradeval = gradeval;
},
setAttemptsVal(state, attemptsval) {
state.attemptsval = attemptsval;
},
setPassingVal(state, passingval) {
state.passingval = passingval;
},
setWatchVal(state, watchval) {
state.watchval = watchval;
},
setDislikeVal(state, dislikeval) {
state.dislikeval = dislikeval;
},
},
actions: {
login(context, {
......
<template>
<div class="animated fadeIn">
<b-row class="begin-text">
<b-col sm="12">
<b-card class="border-0">
<h1>It is easy to contact us, try it!</h1>
</b-card>
</b-col>
</b-row>
<b-row>
<b-col sm="6" md="6" lg="6">
<b-card class="bg" no-body>
<b-card-header class="border-contact header-text"><h2>Contact</h2></b-card-header>
<b-card-body>
<form>
<div class="text-color"><h6>Firstname</h6></div>
<input class="form" type="text" name="firstname"><br><br>
<div class="text-color"><h6>Lastname</h6></div>
<input class="form" type="text" name="lastname"><br><br>
<div class="text-color"><h6>Email adress</h6></div>
<input class="form" type="email" name="email"><br><br>
<div class="text-color"><h6>Message</h6></div>
<textarea class="form" name="message" cols="30" rows="7"></textarea><br><br>
<input class="text-color" type="button" value="Send" onclick="alert('Sending not yet implemented!')">
</form>
</b-card-body>
</b-card>
</b-col>
<b-col sm="6" md="6" lg="6">
<b-card class="bg" no-body>
<b-card-header class="border-contact header-text"><h2>Details</h2></b-card-header>
<b-card-body class="border-contact">
<div class="text-color">
<h6>
Den Dolech 2 <br>
5612 AZ Eindhoven <br>
The Netherlands <br><br>
Email: <a href="dashit@dashit.com">dashit@dashit.com</a><br>
Phone: (0031) (0) 6 87654321
</h6>
</div>
</b-card-body>
<b-card-body class="border-contact border-top">
<div class="align-icons">
<img id="cursor-change" src="../../public/img/social/fbicon.png" alt="Facebook" class="icons-style" onclick="alert('Facebook not yet implemented!')">
<img id="cursor-change" src="../../public/img/social/twicon.png" alt="Twitter" class="icons-style" onclick="alert('Twitter not yet implemented!')">
<img id="cursor-change" src="../../public/img/social/instaicon.png" alt="Instagram," class="icons-style" onclick="alert('Instagram not yet implemented!')">
</div>
<div>
<img src="../../public/img/logo.svg" alt="DASH-IT" class="logo-style">
</div>
</b-card-body>
</b-card>
</b-col>
</b-row>
</div>
</template>
<script>
export default {
name: "Contact",
};
</script>
<style scoped>
.begin-text {
text-align: center;
}
.header-text {
text-align: left;
}
.form {
width: 100%;
}
.icons-style {
width: 50px;
height: 50px;
margin: 10px;
}
.align-icons {
text-align: center;
}
.logo-style {
width: 100%;
margin-top: 20px;
margin-left: 0pt;
}
#cursor-change {
cursor: pointer;
}
</style>
......@@ -6,8 +6,8 @@
<table>
<tbody>
<tr>
<td>
<label for="switchid" id="hoverdesc">Enable tooltips: </label>
<td width="80%">
<label for="switchid" id="hoverdesc">Enable tooltips:</label>
</td>
<td>
<label class="switch switch-pill switch-primary" id="switchid">
......@@ -16,6 +16,137 @@
</label>
</td>
</tr>
<tr>
<td>
<label for="switchid" id="warninglabel">Enable warnings:</label>
</td>
<td>
<label class="switch switch-pill switch-primary" id="warningid">
<input type="checkbox" class="switch-input" v-model="warningEnable" checked>
<span class="switch-slider"></span>
</label>
</td>
</tr>
</tbody>
</table>
<table v-if="warningEnable">
<tbody>
<tr>
<td>
<label for="switchid" id="slider1">
<b>Quizzes warning thresholds:</b>
</label>
</td>
</tr>
<tr>
<td>
<label for="switchid" id="s-passfraction">Passing fraction:</label>
</td>
</tr>
<tr>
<td>
<div>
<!-- <vue-slider ref="slider" v-model="value"></vue-slider> -->
<vue-slider v-model="passingval" :interval="0.01" :max="1" id="s-passfraction">
<div
class="diy-tooltip"
slot="tooltip"
slot-scope="{ value }"
>&lt;{{ passingval }}</div>
</vue-slider>
</div>
</td>
</tr>
<tr>
<td>
<label for="switchid" id="s-avggrade">Average grade:</label>
</td>
</tr>
<tr>
<td>
<div>
<!-- <vue-slider ref="slider" v-model="value"></vue-slider> -->
<vue-slider v-model="gradeval" :interval="0.01" :max="1" id="s-avggrade">
<div
class="diy-tooltip"
slot="tooltip"
slot-scope="{ value }"
>&lt;{{ gradeval }}</div>
</vue-slider>
</div>
</td>
</tr>
<tr>
<td>
<label for="switchid" id="s-avgattempts">Average attempts:</label>
</td>
</tr>
<tr>
<td>
<div>
<!-- <vue-slider ref="slider" v-model="value"></vue-slider> -->
<vue-slider
v-model="attemptsval"
:interval="0.01"
:min="1"
:max="3"
id="s-avgattempts"
>
<div
class="diy-tooltip"
slot="tooltip"
slot-scope="{ value }"
>>{{ attemptsval }}</div>
</vue-slider>
</div>
</td>
</tr>
<tr>
<td>
<label for="switchid" id="slider1">
<b>Videos warning thresholds:</b>
</label>
</td>
</tr>
<tr>
<td>
<label for="switchid" id="s-watchratio">Completed/watched ratio:</label>
</td>
</tr>
<tr>
<td>
<div>
<!-- <vue-slider ref="slider" v-model="value"></vue-slider> -->
<vue-slider v-model="watchval" :interval="0.01" :max="1" id="s-watchratio">
<div
class="diy-tooltip"
slot="tooltip"
slot-scope="{ value }"
>&lt;{{ watchval }}</div>
</vue-slider>
</div>
</td>
</tr>
<tr>
<td>
<label for="switchid" id="s-watchratio">Like/dislike ratio:</label>
</td>
</tr>
<tr>
<td>
<div>
<!-- <vue-slider ref="slider" v-model="value"></vue-slider> -->
<vue-slider v-model="dislikeval" :interval="0.01" :max="1" id="s-dislikeratio">
<div
class="diy-tooltip"
slot="tooltip"
slot-scope="{ value }"
>&lt;{{ dislikeval }}</div>
</vue-slider>
</div>
</td>
</tr>
<!-- <tr>
<td>
<label>Default platform: </label>
......@@ -31,70 +162,40 @@
<td>
<b-form-radio-group v-model="sortMode" :options="sortOptions" stacked></b-form-radio-group>
</td>
</tr> -->
</tr>-->
</tbody>
</table>
<b-alert variant="success" :show="showAlertGeneral" dismissible @dismissed="showAlertGeneral=false">Changes saved!</b-alert>
<b-alert
variant="success"
:show="showAlertGeneral"
dismissible
@dismissed="showAlertGeneral=false"
>Changes saved!</b-alert>
<b-btn class="submit" @click="save" variant="success">Save changes</b-btn>
</b-card>
</b-col>
<b-col md="8" lg="6">
<b-card header="<h3>Profile settings</h3>">
<b-card header="<h3>Profile</h3>">
<b-row>
<b-col lg="6">
<b-card class="profilecard" header="Your Profile:">
<p>Email: {{ currentEmail }}</p>
<b-card class="accordion" no-body>
<b-card-header class="clickable" v-b-toggle.collapse1 header-bg-variant="primary">Edit display name</b-card-header>
<b-collapse class="accordion" id="collapse1" accordion="accordion1">
<b-card-body class="accordion">
<b-form-input class="profilefield" v-model="newProfile.displayName" type="text" placeholder="New display name"></b-form-input>
<b-alert variant="success" :show="showAlertName" dismissible @dismissed="showAlertName=false">Changes saved!</b-alert>
<b-btn class="submit" @click="showAlertName=true">Submit</b-btn>
</b-card-body>
</b-collapse>
</b-card>
<b-card class="accordion" no-body>
<b-card-header class="clickable" v-b-toggle.collapse2 header-bg-variant="primary">Edit email</b-card-header>
<b-collapse class="accordion" id="collapse2" accordion="accordion1">
<b-card-body class="accordion">
<b-form-input class="profilefield" v-model="newProfile.email" type="text" placeholder="New email"></b-form-input>
<b-alert variant="success" :show="showAlertEmail" dismissible @dismissed="showAlertEmail=false">Confirmation email sent!</b-alert>
<b-btn class="submit" @click="showAlertEmail=true">Submit</b-btn>
</b-card-body>
</b-collapse>
</b-card>
<b-card class="accordion" no-body>
<b-card-header class="clickable" v-b-toggle.collapse3 header-bg-variant="primary">Edit password</b-card-header>
<b-collapse class="accordion" id="collapse3" accordion="accordion1">
<b-card-body class="accordion">
<b-form-input class="profilefield" type="text" placeholder="Old password"></b-form-input>
<b-form-input class="profilefield" type="text" placeholder="New password"></b-form-input>
<b-form-input class="profilefield" type="text" placeholder="Repeat new password"></b-form-input>
<b-alert variant="success" :show="showAlertPassword" dismissible @dismissed="showAlertPassword=false">Changes saved!</b-alert>
<b-btn class="submit" @click="showAlertPassword=true">Submit</b-btn>
</b-card-body>
</b-collapse>
<p>Role: {{ currentRole }}</p>
<p>Organization: {{ currentOrganization }}</p>
</b-card>
</b-col>
<b-col lg="6">
<b-card class="profilecard" header="Profile preview:">
<p v-if="newProfile.displayName">
{{ newProfile.displayName }}
</p>
<p v-else>
{{ currentProfile.displayName }}
</p>
<p v-if="newProfile.email">
{{ newProfile.email }}
</p>
<p v-else>
{{ currentProfile.email }}
<b-card class="profilecard" header="Contact us:">
<p>
Email:
<a href="dashit@dashit.com">dashit@dashit.com</a>
</p>
<p></p>
<p>Den Dolech 2</p>
<p>5612 AZ Eindhoven</p>
<p>The Netherlands</p>
</b-card>
</b-col>
</b-row>
......@@ -105,6 +206,7 @@
</template>
<script>
import vueSlider from "vue-slider-component";
export default {
name: "Settings",
data() {
......@@ -120,15 +222,10 @@ export default {
},
],
newProfile: {
displayName: "",
email: "",
},
currentEmail: this.$store.state.user.email,
currentOrganization: this.$store.state.user.organization,
currentRole: this.$store.state.user.role,
currentProfile: {
displayName: "Some Profile",
email: "very.real@email.com",
},
sortOptions: [
{ text: "Favorites first", value: "favorite", },
{ text: "Most recently visited first", value: "recent", },
......@@ -136,7 +233,13 @@ export default {
selectedPlatform: "1",
hoverEnable: this.$store.state.tooltips,
warningEnable: this.$store.state.warnings,
sortMode: "favorite",
gradeval: this.$store.state.gradeval,
passingval: this.$store.state.passingval,
attemptsval: this.$store.state.attemptsval,
watchval: this.$store.state.watchval,
dislikeval: this.$store.state.dislikeval,
showAlertGeneral: false,
showAlertName: false,
......@@ -147,9 +250,18 @@ export default {
methods: {
save() {
this.$store.commit("setTooltips", this.hoverEnable);
this.$store.commit("setWarnings", this.warningEnable);
this.$store.commit("setGradeVal", this.gradeval);
this.$store.commit("setAttemptsVal", this.attemptsval);
this.$store.commit("setPassingVal", this.passingval);
this.$store.commit("setWatchVal", this.watchval);
this.$store.commit("setDislikeVal", this.dislikeval);
this.showAlertGeneral = true;
},
},
components: {
vueSlider,
},
};
</script>
......
......@@ -10,17 +10,34 @@
</div>
<div v-for="lesson of lessons" :key="lesson[0].lesson" class="lesson" v-if="lessonView">
<h4 class="lesson__title" v-bind:style="{ 'color': mainColor}">Lesson: {{lesson[0].lesson_name}}</h4>
<h4
class="lesson__title"
v-bind:style="{ 'color': mainColor}"
>Lesson: {{lesson[0].lesson_name}}</h4>
<b-row>
<b-col sm="4" lg="4" v-for="assignment of lesson" :key="assignment.item_id">
<b-card no-body class="bg assignment-card">
<b-card-header>
<router-link :to="link + '/' + assignment.item_id">{{ assignment.name }}</router-link>
<div
v-if="warnings && (assignment.average_grade < grade_warn || assignment.submission_ratio < ratio_warn)"
class="warning-container"
>
<i
class="fa fa-exclamation icon-color-red font-2xl mb-0"
align="right"
style="color:red"
></i>
</div>
</b-card-header>
<b-card-body class="pb-0">
<ul>
<li v-if="assignment.optional"><span class="li-title">Optional:</span> yes</li>
<li v-if="!assignment.optional"><span class="li-title">Optional:</span> no</li>
<li v-if="assignment.optional">
<span class="li-title">Optional:</span> yes
</li>
<li v-if="!assignment.optional">
<span class="li-title">Optional:</span> no
</li>
</ul>
</b-card-body>
</b-card>
......@@ -28,7 +45,6 @@
</b-row>
</div>
<b-row v-if="!lessonView">
<b-col sm="4" lg="4" v-for="assignment of assignments" :key="assignment.item_id">
<b-card no-body class="bg assignment-card">
......@@ -37,8 +53,12 @@
</b-card-header>
<b-card-body class="pb-0">
<ul>
<li v-if="assignment.optional"><span class="li-title">Optional:</span> yes</li>
<li v-if="!assignment.optional"><span class="li-title">Optional:</span> no</li>
<li v-if="assignment.optional">
<span class="li-title">Optional:</span> yes
</li>
<li v-if="!assignment.optional">
<span class="li-title">Optional:</span> no
</li>
</ul>
</b-card-body>
</b-card>
......@@ -73,7 +93,12 @@ export default {
assignments: [],
lessons: [],
lessonView: true,
link: this.$route.fullPath
link: this.$route.fullPath,
//Warnings
grade_warn: 0.65,
ratio_warn: 0.03,
warnings: this.$store.state.warnings,
};
},
// Set the link variable to the path of the current page.
......@@ -114,8 +139,8 @@ export default {
this.loadingText = strings.connection_error;
});
}
}
}
},
},
};
</script>
......
......@@ -19,6 +19,17 @@
<b-card no-body class="bg quiz-card">
<b-card-header>
<router-link :to="link + '/' + quiz.base_id + '-' + quiz.version">{{ quiz.name }}</router-link>
<div
v-if="warnings && quiz.graded && (quiz.passing_fraction < passing_warn || quiz.average_grade < grade_warn ||
quiz.average_attempts > attempt_warn)"
class="warning-container"
>
<i
class="fa fa-exclamation icon-color-red font-2xl mb-0"
align="right"
style="color:red"
></i>
</div>
</b-card-header>
<b-card-body class="pb-0">
<ul>
......@@ -51,12 +62,12 @@
<b-card-header>
<router-link :to="link + '/' + quiz.base_id + '-' + quiz.version">{{ quiz.name }}</router-link>
<div
v-if="quiz.graded && (quiz.passing_fraction < passing_warn || quiz.average_grade < grade_warn ||
v-if="warnings && quiz.graded && (quiz.passing_fraction < passing_warn || quiz.average_grade < grade_warn ||
quiz.average_attempts > attempt_warn)"
class="warning-container"
>
<i
class="fa fa-exclamation icon-color-red font-1xl mb-0"
class="fa fa-exclamation icon-color-red font-2xl mb-0"
align="right"
style="color:red"
></i>
......@@ -113,9 +124,10 @@ export default {
link: this.$route.fullPath,
lessonView: true,
// Warning thresholds
passing_warn: 0.8,
grade_warn: 0.6,
attempt_warn: 1.5
warnings: this.$store.state.warnings,
passing_warn: this.$store.state.passingval,
grade_warn: this.$store.state.gradeval,
attempt_warn: this.$store.state.attemptval
};
},