Commit 96fbb81b authored by Tim Honcoop's avatar Tim Honcoop
Browse files

Added excluded from breadcrumb

parent a0f2b26f
Pipeline #2522 failed with stages
in 1 minute and 1 second
......@@ -250,7 +250,7 @@ export default {
TopbarNav,
BackButton,
MultiSelect,
Datepicker,
Datepicker
},
data() {
return {
......@@ -258,7 +258,7 @@ export default {
isPrimary: false,
level: 0,
top_nav: [],
level_0: ["/home", "/settings",],
level_0: ["/home", "/settings"],
platforms: store.state.platforms,
bottom_nav: nav.bottom_items,
testCount: 5,
......@@ -276,7 +276,7 @@ export default {
action: {
date: null,
title: "",
description: "",
description: ""
},
actionToDelete: {},
......@@ -294,24 +294,24 @@ export default {
filterOptions: [
{
text: "No filter",
id: "no_filter",
id: "no_filter"
},
{
text: "Has paid only",
id: "has_paid",
},
id: "has_paid"
}
],
cohorts: [{ name: "Cohorts not yet implemented", id: "no_cohort", },],
cohorts: [{ name: "Cohorts not yet implemented", id: "no_cohort" }],
selectedCohort: "no_cohort",
countries: [{ name: "Netherlands", id: 1, }, { name: "Germany", id: 2, },],
countries: [{ name: "Netherlands", id: 1 }, { name: "Germany", id: 2 }],
selectedCountries: [],
selectedCourse: settings.course_default,
selectedSubitem: "",
// Mock
courses: {
coursera: [],
},
coursera: []
}
};
},
beforeMount() {
......@@ -325,7 +325,7 @@ export default {
this.courses.coursera.push({
name: course.course_name,
description: "",
slug: course.course_slug,
slug: course.course_slug
});
}
util
......@@ -340,7 +340,7 @@ export default {
},
mounted() {
this.platformOptions = [
{ value: settings.platform_default, text: strings.select_platform, },
{ value: settings.platform_default, text: strings.select_platform }
];
this.setPlatforms();
......@@ -358,18 +358,21 @@ export default {
var routes = [];
var path = "";
for (var subroute of this.$route.path.split("/")) {
if (subroute !== strings.home && subroute !== "compare") {
path += subroute + "/";
if (
subroute !== strings.home &&
settings.excludeFromBreadcrumb.indexOf(subroute) === -1
) {
routes.push({
text: subroute.charAt(0).toUpperCase() + subroute.slice(1),
to: path.substring(0, path.length - 1),
to: path.substring(0, path.length - 1)
});
}
}
routes[0].text = strings.home;
routes[0].to = "/";
return routes;
},
}
},
methods: {
saveAction() {
......@@ -401,7 +404,7 @@ export default {
this.action = {
date: null,
title: "",
description: "",
description: ""
};
this.showAddActionModal = false;
this.showActionsModal = true;
......@@ -586,8 +589,8 @@ export default {
this.courseOptions = [
{
value: settings.course_default,
text: strings.select_course,
},
text: strings.select_course
}
];
},
setPlatforms() {
......@@ -595,17 +598,17 @@ export default {
this.top_nav[0].push({
name: strings.home,
icon: "cui-home",
url: "/home",
url: "/home"
});
for (var platform of this.platforms) {
this.top_nav[0].push({
name: platform.name,
url: "/p/" + platform.id,
icon: "fa fa-line-chart",
icon: "fa fa-line-chart"
});
this.platformOptions.push({
value: platform.id,
text: platform.name,
text: platform.name
});
}
},
......@@ -613,21 +616,21 @@ export default {
this.courseOptions = [
{
value: settings.course_default,
text: strings.select_course,
},
text: strings.select_course
}
];
this.top_nav[2] = [];
for (var course of c) {
// Push to dropdown
this.courseOptions.push({
value: course.slug,
text: course.name,
text: course.name
});
// Push to navbar
this.top_nav[2].push({
name: course.name,
url: "/p/" + this.selectedPlatform + "/" + course.slug,
icon: "fa fa-line-chart",
icon: "fa fa-line-chart"
});
}
},
......@@ -643,7 +646,7 @@ export default {
"/" +
this.selectedCourse +
"/" +
coursepPage.slug,
coursepPage.slug
});
}
},
......@@ -663,7 +666,7 @@ export default {
this.selectedCourse +
"/videos/" +
video.item_id,
icon: "fa fa-video-camera",
icon: "fa fa-video-camera"
});
this.$forceUpdate();
}
......@@ -690,7 +693,7 @@ export default {
quiz.base_id +
"-" +
quiz.version,
icon: "fa fa-check ",
icon: "fa fa-check "
});
this.$forceUpdate();
}
......@@ -718,7 +721,7 @@ export default {
this.selectedCourse +
"/assignments/" +
assignment.item_id,
icon: "cui-calendar ",
icon: "cui-calendar "
});
this.$forceUpdate();
}
......@@ -727,8 +730,8 @@ export default {
this.top_nav[4] = [];
console.log(err);
});
},
},
}
}
};
</script>
......
......@@ -18,7 +18,13 @@ export default {
resources: [{
name: "Coursera for Educators",
link: "https://blog.coursera.org/for-educators/",
}, ],
},],
// Subroutes excluded the breadcrumb
excludeFromBreadcrumb: [
"compare",
"p",
],
// Constants
quiz_id: 5,
......@@ -35,5 +41,5 @@ export default {
}, {
name: "Admin",
id: "admin",
}, ],
},],
}
......@@ -4,13 +4,21 @@
<b-row>
<b-col class="title-col" sm="12" md="6" lg="9">
<h1 v-bind:style="{ 'color': mainColor}">{{ this.courseName }}</h1>
<a v-bind:style="{ 'color': mainColor}" :href="`https://www.coursera.org/teach/${courseSlug}/content/`" target="_blank">Coursera editing</a> -
<a v-bind:style="{ 'color': mainColor}" :href="`https://www.coursera.org/teach/${courseSlug}/analytics/`" target="_blank">Coursera analytics</a>
<a
v-bind:style="{ 'color': mainColor}"
:href="`https://www.coursera.org/teach/${courseSlug}/content/`"
target="_blank"
>Coursera editing</a> -
<a
v-bind:style="{ 'color': mainColor}"
:href="`https://www.coursera.org/teach/${courseSlug}/analytics/`"
target="_blank"
>Coursera analytics</a>
</b-col>
<!-- Course comparison button -->
<b-col v-if="showCompare" sm="12" md="6" lg="3">
<div class="link-container">
<router-link :to=compareUrl>
<router-link :to="compareUrl">
<b-card class="link-card">
<table>
<tr>
......@@ -35,8 +43,14 @@
<span class="iconsquare" v-bind:style="{ 'background-color': mainColor}">
<i class="fa fa-users icon-color p-4 font-2xl mr-3"></i>
</span>
<div v-bind:style="{ 'color': mainColor}" class="h5 text-color mb-0 pt-3" id="enrolled-learners">{{ enrolledStudents }}</div>
<div class="text-muted text-uppercase font-weight-bold text-font-size">Enrolled learners</div>
<div
v-bind:style="{ 'color': mainColor}"
class="h5 text-color mb-0 pt-3"
id="enrolled-learners"
>{{ enrolledStudents }}</div>
<div
class="text-muted text-uppercase font-weight-bold text-font-size"
>Enrolled learners</div>
</b-card-body>
</b-card>
</b-col>
......@@ -47,13 +61,20 @@
<span class="iconsquare" v-bind:style="{ 'background-color': mainColor}">
<i class="fa fa-user-times icon-color p-4 font-2xl mr-3 float-left"></i>
</span>
<div v-bind:style="{ 'color': mainColor}" class="h5 text-color mb-0 pt-3" id="leaving-learners">{{ leavingLearners }}</div>
<div class="text-muted text-uppercase font-weight-bold text-font-size">Leaving learners</div>
<div
v-bind:style="{ 'color': mainColor}"
class="h5 text-color mb-0 pt-3"
id="leaving-learners"
>{{ leavingLearners }}</div>
<div
class="text-muted text-uppercase font-weight-bold text-font-size"
>Leaving learners</div>
</b-card-body>
</b-card>
<b-tooltip v-if="tooltips" target="leaving-learners-card">
{{ strings.leaving_learners_text }}
</b-tooltip>
<b-tooltip
v-if="tooltips"
target="leaving-learners-card"
>{{ strings.leaving_learners_text }}</b-tooltip>
</b-col>
<b-col sm="12" md="6" lg="3" v-if="qdt">
......@@ -62,7 +83,11 @@
<span class="iconsquare" v-bind:style="{ 'background-color': mainColor}">
<i class="fa fa-money icon-color p-4 font-2xl mr-3 float-left"></i>
</span>
<div v-bind:style="{ 'color': mainColor}" class="h5 text-color mb-0 pt-3" id="leaving-learners">{{ payingLearners }}</div>
<div
v-bind:style="{ 'color': mainColor}"
class="h5 text-color mb-0 pt-3"
id="leaving-learners"
>{{ payingLearners }}</div>
<div class="text-muted text-uppercase font-weight-bold text-font-size">Paying learners</div>
</b-card-body>
</b-card>
......@@ -74,8 +99,14 @@
<span class="iconsquare" v-bind:style="{ 'background-color': mainColor}">
<i class="fa fa-check icon-color p-4 font-2xl mr-3 float-left"></i>
</span>
<div v-bind:style="{ 'color': mainColor}" class="h5 text-color mb-0 pt-3" id="finished-learners">{{ finishedLearners }}</div>
<div class="text-muted text-uppercase font-weight-bold text-font-size">Finished learners</div>
<div
v-bind:style="{ 'color': mainColor}"
class="h5 text-color mb-0 pt-3"
id="finished-learners"
>{{ finishedLearners }}</div>
<div
class="text-muted text-uppercase font-weight-bold text-font-size"
>Finished learners</div>
</b-card-body>
</b-card>
</b-col>
......@@ -86,7 +117,11 @@
<span class="iconsquare" v-bind:style="{ 'background-color': mainColor}">
<i class="fa fa-video-camera icon-color p-4 font-2xl mr-3 float-left"></i>
</span>
<div v-bind:style="{ 'color': mainColor}" class="h5 text-color mb-0 pt-3" id="no-videos">{{ numberOfVideos }}</div>
<div
v-bind:style="{ 'color': mainColor}"
class="h5 text-color mb-0 pt-3"
id="no-videos"
>{{ numberOfVideos }}</div>
<div class="text-muted text-uppercase font-weight-bold text-font-size">Videos</div>
</b-card-body>
</b-card>
......@@ -98,7 +133,11 @@
<span class="iconsquare" v-bind:style="{ 'background-color': mainColor}">
<i class="fa fa-question icon-color p-4 font-2xl mr-3 float-left"></i>
</span>
<div v-bind:style="{ 'color': mainColor}" class="h5 text-color mb-0 pt-3" id="no-quizzes">{{ numberOfQuizzes }}</div>
<div
v-bind:style="{ 'color': mainColor}"
class="h5 text-color mb-0 pt-3"
id="no-quizzes"
>{{ numberOfQuizzes }}</div>
<div class="text-muted text-uppercase font-weight-bold text-font-size">Quizzes</div>
</b-card-body>
</b-card>
......@@ -110,7 +149,11 @@
<span class="iconsquare" v-bind:style="{ 'background-color': mainColor}">
<i class="fa fa-pencil icon-color p-4 font-2xl mr-0 float-left"></i>
</span>
<div v-bind:style="{ 'color': mainColor}" class="h5 text-color mb-0 pt-3" id="no-assignments">{{ numberOfAssignments }}</div>
<div
v-bind:style="{ 'color': mainColor}"
class="h5 text-color mb-0 pt-3"
id="no-assignments"
>{{ numberOfAssignments }}</div>
<div class="text-muted text-uppercase font-weight-bold text-font-size">Assignments</div>
</b-card-body>
</b-card>
......@@ -122,7 +165,11 @@
<span class="iconsquare" v-bind:style="{ 'background-color': mainColor}">
<i class="fa fa-th-list icon-color p-4 font-2xl mr-3 float-left"></i>
</span>
<div v-bind:style="{ 'color': mainColor}" class="h5 text-color mb-0 pt-3" id="no-modules">{{ numberOfModules }}</div>
<div
v-bind:style="{ 'color': mainColor}"
class="h5 text-color mb-0 pt-3"
id="no-modules"
>{{ numberOfModules }}</div>
<div class="text-muted text-uppercase font-weight-bold text-font-size">Modules</div>
</b-card-body>
</b-card>
......@@ -134,13 +181,15 @@
<span class="iconsquare" v-bind:style="{ 'background-color': mainColor}">
<i class="fa fa-calendar icon-color p-4 font-2xl mr-3 float-left"></i>
</span>
<div v-bind:style="{ 'color': mainColor}" class="h5 text-color mb-0 pt-3" id="no-cohorts">{{ numberOfCohorts }}</div>
<div
v-bind:style="{ 'color': mainColor}"
class="h5 text-color mb-0 pt-3"
id="no-cohorts"
>{{ numberOfCohorts }}</div>
<div class="text-muted text-uppercase font-weight-bold text-font-size">Cohorts</div>
</b-card-body>
</b-card>
<b-tooltip v-if="tooltips" target="cohort-card">
{{ strings.cohort_text }}
</b-tooltip>
<b-tooltip v-if="tooltips" target="cohort-card">{{ strings.cohort_text }}</b-tooltip>
</b-col>
<b-col sm="12" md="6" lg="3">
......@@ -149,15 +198,18 @@
<span class="iconsquare" v-bind:style="{ 'background-color': mainColor}">
<i class="fa fa-calendar icon-color p-4 font-2xl mr-3 float-left"></i>
</span>
<div v-bind:style="{ 'color': mainColor}" class="h5 text-color mb-0 pt-3" id="no-cohorts">{{ avgTime }}</div>
<div class="text-muted text-uppercase font-weight-bold text-font-size">Average active timespan (in days)</div>
<div
v-bind:style="{ 'color': mainColor}"
class="h5 text-color mb-0 pt-3"
id="no-cohorts"
>{{ avgTime }}</div>
<div
class="text-muted text-uppercase font-weight-bold text-font-size"
>Average active timespan (in days)</div>
</b-card-body>
</b-card>
<b-tooltip v-if="tooltips" target="timespan-card">
{{ strings.timespan_text }}
</b-tooltip>
<b-tooltip v-if="tooltips" target="timespan-card">{{ strings.timespan_text }}</b-tooltip>
</b-col>
</b-row>
<b-row>
......@@ -165,7 +217,7 @@
<b-col lg="12" xl="8">
<b-card id="geo-data" header="Geographical location of learners">
<div class="chart-wrapper">
<chart :data=geoData :layout=geoLayout id="graph-5"></chart>
<chart :data="geoData" :layout="geoLayout" id="graph-5"></chart>
</div>
</b-card>
</b-col>
......@@ -173,7 +225,7 @@
<b-col lg="6" xl="4">
<b-card id="dist-eval" header="Distribution of evaluation rating">
<div class="chart-wrapper">
<chart :data=distEvalRateData :layout=distEvalLayout id="graph-1"></chart>
<chart :data="distEvalRateData" :layout="distEvalLayout" id="graph-1"></chart>
</div>
</b-card>
</b-col>
......@@ -181,7 +233,7 @@
<b-col lg="6" xl="4">
<b-card id="progr-fin" header="Progression of completers">
<div class="chart-wrapper">
<chart :data=progFinLearData :layout=progFinLearLayout id="graph-2"></chart>
<chart :data="progFinLearData" :layout="progFinLearLayout" id="graph-2"></chart>
</div>
</b-card>
</b-col>
......@@ -189,7 +241,7 @@
<b-col lg="6" xl="4">
<b-card id="leav-per-mod" header="Leaving learners per module">
<div class="chart-wrapper">
<chart :data=leavLearModData :layout=leavLearLayout id="graph-3"></chart>
<chart :data="leavLearModData" :layout="leavLearLayout" id="graph-3"></chart>
</div>
</b-card>
</b-col>
......@@ -197,7 +249,7 @@
<b-col lg="6" xl="4">
<b-card id="avg-time-in-mod" header="Average time spent per module by learners (days)">
<div class="chart-wrapper">
<chart :data=avgTimeModData :layout=avgTimeLayout id="graph-4"></chart>
<chart :data="avgTimeModData" :layout="avgTimeLayout" id="graph-4"></chart>
</div>
</b-card>
</b-col>
......@@ -216,18 +268,16 @@
</table>
</b-list-group-item>
<b-list-group-item v-for="(cohort, index) in cohorts" :key="index">
<table>
<tr>
<th id="id-cell">{{ index +1 }}</th>
<th id="from-cell">{{ cohort[0].substring(0,10) }} </th>
<th id="from-cell">{{ cohort[0].substring(0,10) }}</th>
<th id="to-cell">{{ cohort[1].substring(0,10) }}</th>
</tr>
</table>
</b-list-group-item>
</b-list-group>
</b-card-body>
</b-card>
</b-col>
</b-row>
......@@ -316,11 +366,11 @@ export default {
* not yet implemented
*/
//
tendFolCourData: [],
tendFolCourData: []
};
},
components: {
Chart,
Chart
},
beforeMount() {
var otherCourses = this.$store.state.user.courses.filter(
......@@ -360,7 +410,7 @@ export default {
this.courseId = currentCourse.course_id;
Promise.all([
util.getActions("coursera", this.courseId, this.$store.state.filters),
util.getDetailedCourseData(this.courseId, this.$store.state.filters),
util.getDetailedCourseData(this.courseId, this.$store.state.filters)
])
.then(response => {
this.courseData = response[1].data;
......@@ -394,7 +444,7 @@ export default {
this.distEvalRateData[0] = {};
this.distEvalRateData[0].x = [];
this.distEvalRateData[0].y = [];
this.distEvalRateData[0].marker = { color: this.mainColor, };
this.distEvalRateData[0].marker = { color: this.mainColor };
this.distEvalRateData[0].type = "bar";
for (let rating of data.ratings) {
this.distEvalRateData[0].x.push(rating[0]);
......@@ -405,7 +455,7 @@ export default {
this.distEvalLayout.xaxis = {};
this.distEvalLayout.xaxis.nticks = this.distEvalRateData[0].x.length * 2;
this.distEvalLayout.xaxis.title = "Rating";
this.distEvalLayout.yaxis = { title: "Number of ratings", };
this.distEvalLayout.yaxis = { title: "Number of ratings" };
// Progression of finished learners.
this.progFinLearData[0] = {};
......@@ -414,7 +464,7 @@ export default {
this.progFinLearData[0].fill = "tonexty";
this.progFinLearData[0].name = "Progression of completers";
this.progFinLearData[0].fillcolor = colors.lightGrey;
this.progFinLearData[0].marker = { color: this.mainColor, };
this.progFinLearData[0].marker = { color: this.mainColor };
this.progFinLearData[0].type = "scatter";
for (let finished of data.finished_learners_over_time) {
this.progFinLearData[0].x.push(finished[0]);
......@@ -455,14 +505,14 @@ export default {
this.progFinLearLayout = {
xaxis: {
title: "Time",
title: "Time"
// range: [xrangestart, xrangeend,],
},
yaxis: {
title: "Number of learners",
title: "Number of learners"
},
shapes: [],
showlegend: false,
showlegend: false
};
this.progFinLearData[1] = {
x: [],
......@@ -474,8 +524,8 @@ export default {
textposition: "bottom",
marker: {
color: colors.purple,
size: 12,
},
size: 12
}
};
// Add registered actions to the finished learners graph
......@@ -499,7 +549,7 @@ export default {
this.leavLearModData[0] = {};
this.leavLearModData[0].x = [];
this.leavLearModData[0].y = [];
this.leavLearModData[0].marker = { color: this.mainColor, };
this.leavLearModData[0].marker = { color: this.mainColor };
this.leavLearModData[0].type = "bar";
for (let x = 0; x < data.leaving_learners_per_module.length; x++) {
this.leavLearModData[0].x.push(x + 1);
......@@ -511,7 +561,7 @@ export default {
this.leavLearLayout.xaxis.nticks = this.leavLearModData[0].x.length * 2;
this.leavLearLayout.xaxis.title = "Module";
this.leavLearLayout.yaxis = {
title: "Leaving learners",
title: "Leaving learners"
};
// Average time per module.
......@@ -519,7 +569,7 @@ export default {
this.avgTimeModData[0] = {};
this.avgTimeModData[0].x = [];
this.avgTimeModData[0].y = [];
this.avgTimeModData[0].marker = { color: this.mainColor, };
this.avgTimeModData[0].marker = { color: this.mainColor };
this.avgTimeModData[0].type = "bar";
for (let x = 0; x < data.average_time_per_module.length; x++) {
this.avgTimeModData[0].x.push(x + 1);
......@@ -531,10 +581,10 @@ export default {
this.avgTimeLayout = {};
this.avgTimeLayout.xaxis = {
nticks: this.avgTimeModData[0].x.length * 2,
title: "Module",
title: "Module"
};
this.avgTimeLayout.yaxis = {
title: "Average time",
title: "Average time"
};
this.avgTime = (parseFloat(data.average_time) / (3600 * 24)).toFixed(1);
......@@ -545,21 +595,21 @@ export default {
text: util.arrayColumn(data.geo_data, 1),
z: util.arrayColumn(data.geo_data, 2),
colorscale: [
[0, "rgba(0, 169, 212, 0)",],
[0.35, "rgba(0, 169, 212, 50)",],
[0.5, "rgba(0, 169, 212, 100)",],
[0.6, "rgba(0, 169, 212,150)",],
[0.7, "rgba(0, 169, 212, 200)",],
[1, "rgba(0, 169, 212, 255)",],
],
[0, "rgba(0, 169, 212, 0)"],
[0.35, "rgba(0, 169, 212, 50)"],
[0.5, "rgba(0, 169, 212, 100)"],
[0.6, "rgba(0, 169, 212,150)"],
[0.7, "rgba(0, 169, 212, 200)"],
[1, "rgba(0, 169, 212, 255)"]
]
};
this.geoLayout = {