Commit 50c66b03 authored by Traas, J.J.'s avatar Traas, J.J.
Browse files

Merge branch 'feature/platform-api' into 'master'

Convert frontend to use platform based api

Closes #71

See merge request !21
parents 98b41267 6750375b
Pipeline #2545 passed with stages
in 3 minutes and 4 seconds
......@@ -30,7 +30,7 @@
<b-button id="filterButton" @click="showFilterModal=true">
<i class="fa fa-filter mr-1"/>Filters
</b-button>
<b-button :disabled="level<2" id="actions-button" @click="showActionsModal=true">
<b-button :disabled="level<3" id="actions-button" @click="showActionsModal=true">
<i class="fa fa-exchange mr-1"/>Changes
</b-button>
<b-navbar-nav class="custom-nav ml-auto">
......@@ -220,12 +220,13 @@ import {
Breadcrumb
} from "@coreui/vue";
import DefaultHeaderDropdownAccnt from "./DefaultHeaderDropdownAccnt";
import BottombarNav from "../views/sidebars/BottombarNav";
import TopbarNav from "../views/sidebars/TopbarNav";
import BackButton from "../views/sidebars/sidebaritems/BackButton";
import BottombarNav from "@/views/sidebars/BottombarNav";
import TopbarNav from "@/views/sidebars/TopbarNav";
import BackButton from "@/views/sidebars/sidebaritems/BackButton";
import MultiSelect from "@/components/MultiSelect";
import Datepicker from "vuejs-datepicker";
import { EventBus } from "@/event-bus";
import store from "@/store";
import util from "@/util";
......@@ -258,7 +259,7 @@ export default {
level: 0,
top_nav: [],
level_0: ["/home", "/settings",],
platforms: settings.platforms,
platforms: store.state.platforms,
bottom_nav: nav.bottom_items,
testCount: 5,
platformOptions: [],
......@@ -357,8 +358,11 @@ export default {
var routes = [];
var path = "";
for (var subroute of this.$route.path.split("/")) {
if (subroute !== strings.home && subroute !== "compare") {
path += subroute + "/";
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),
......@@ -383,7 +387,7 @@ export default {
util.saveAction(this.action).then(response => {
util
.getActions(
"coursera",
this.$store.state.selectedPlatform,
this.currentCourse.course_id,
this.$store.state.filters
)
......@@ -415,7 +419,7 @@ export default {
util.deleteAction(this.actionToDelete.pk).then(response => {
util
.getActions(
"coursera",
this.$store.state.selectedPlatform,
this.currentCourse.course_id,
this.$store.state.filters
)
......@@ -436,7 +440,7 @@ export default {
if (this.currentCourse) {
util
.getActions(
"coursera",
this.$store.state.selectedPlatform,
this.currentCourse.course_id,
this.$store.state.filters
)
......@@ -485,8 +489,8 @@ export default {
goUp: function() {
// If course page route to home
if (
settings.platforms.filter(el => {
return el.slug === this.$route.path.replace("/", "");
this.$store.state.platforms.filter(el => {
return el.id === this.$route.path.replace("/", "");
}).length > 0
) {
this.$router.push("home");
......@@ -516,13 +520,13 @@ export default {
var split = path.split("/");
//Set dropdown menus to the correct value
if (this.level >= 1) {
this.selectedPlatform = split[1];
if (this.level >= 2) {
this.selectedPlatform = split[2];
this.setCourses(this.courses.coursera, this.selectedPlatform);
this.selectedCourse = split[2];
this.selectedCourse = split[3];
this.$store.commit("setSelectedPlatform", this.selectedPlatform);
}
if (this.level >= 2) {
if (this.level >= 3) {
this.currentCourse = this.$store.state.user.courses.find(
x => x.course_slug === this.selectedCourse
);
......@@ -534,16 +538,16 @@ export default {
if (this.level === 0) {
// Home level
this.selectedPlatform = settings.platform_default;
} else if (this.level === 1) {
} else if (this.level === 2) {
// Course overview level.
this.selectedCourse = settings.course_default;
this.$store.commit("setCourses", this.courses.coursera);
} else if (this.level === 2) {
} else if (this.level === 3) {
// Course level
this.setCoursePages(path);
} else if (this.level === 3) {
} else if (this.level === 4) {
// Set subitem
this.selectedSubitem = split[3];
this.selectedSubitem = split[this.level];
if (this.selectedSubitem === "videos") {
this.getVideos();
} else if (this.selectedSubitem === "quizzes") {
......@@ -558,12 +562,12 @@ export default {
// Dropdown listeners
platformChange(evt) {
if (evt !== settings.platform_default) {
this.$router.push("/" + evt);
this.$router.push("/p/" + evt);
}
},
courseChange(evt) {
if (evt !== settings.course_default) {
this.$router.push("/" + this.selectedPlatform + "/" + evt);
this.$router.push("/p/" + this.selectedPlatform + "/" + evt);
}
},
sideButtonClick(event) {
......@@ -599,12 +603,12 @@ export default {
for (var platform of this.platforms) {
this.top_nav[0].push({
name: platform.name,
url: platform.url || "/" + platform.slug,
icon: "fa fa-line-chart"
url: "/p/" + platform.id,
icon: "fa fa-line-chart",
});
this.platformOptions.push({
value: platform.slug,
text: platform.name
value: platform.id,
text: platform.name,
});
}
},
......@@ -615,7 +619,7 @@ export default {
text: strings.select_course,
},
];
this.top_nav[1] = [];
this.top_nav[2] = [];
for (var course of c) {
// Push to dropdown
this.courseOptions.push({
......@@ -623,26 +627,26 @@ export default {
text: course.name,
});
// Push to navbar
this.top_nav[1].push({
this.top_nav[2].push({
name: course.name,
url: "/" + this.selectedPlatform + "/" + course.slug,
icon: "fa fa-line-chart"
url: "/p/" + this.selectedPlatform + "/" + course.slug,
icon: "fa fa-line-chart",
});
}
},
setCoursePages() {
this.top_nav[2] = [];
for (var coursepPage of settings.course_pages) {
this.top_nav[2].push({
name: coursepPage.name,
icon: coursepPage.icon,
this.top_nav[3] = [];
for (var coursePage of settings.course_pages) {
this.top_nav[3].push({
name: coursePage.name,
icon: coursePage.icon,
url:
"/" +
"/p/" +
this.selectedPlatform +
"/" +
this.selectedCourse +
"/" +
coursepPage.slug,
coursePage.slug,
});
}
},
......@@ -650,13 +654,13 @@ export default {
util
.getVideos(this.currentCourse.course_id, this.$store.state.filters)
.then(response => {
this.top_nav[3] = [];
this.top_nav[4] = [];
for (var video of response.data) {
this.top_nav[3].push({
this.top_nav[4].push({
name: video.name,
url:
"/" +
"/p/" +
this.selectedPlatform +
"/" +
this.selectedCourse +
......@@ -668,7 +672,7 @@ export default {
}
})
.catch(err => {
this.top_nav[3] = [];
this.top_nav[4] = [];
console.log(err);
});
},
......@@ -676,12 +680,12 @@ export default {
util
.getQuizzes(this.currentCourse.course_id, this.$store.state.filters)
.then(response => {
this.top_nav[3] = [];
this.top_nav[4] = [];
for (var quiz of response.data) {
this.top_nav[3].push({
this.top_nav[4].push({
name: quiz.name,
url:
"/" +
"/p/" +
this.selectedPlatform +
"/" +
this.selectedCourse +
......@@ -695,7 +699,7 @@ export default {
}
})
.catch(err => {
this.top_nav[3] = [];
this.top_nav[4] = [];
console.log(err);
});
},
......@@ -703,15 +707,15 @@ export default {
util
.getAssignments(this.currentCourse.course_id, this.$store.state.filters)
.then(response => {
this.top_nav[3] = [];
this.top_nav[4] = [];
if (response.data.length == 0) {
this.$forceUpdate();
} else
for (var assignment of response.data) {
this.top_nav[3].push({
this.top_nav[4].push({
name: assignment.name,
url:
"/" +
"/p/" +
this.selectedPlatform +
"/" +
this.selectedCourse +
......@@ -723,7 +727,7 @@ export default {
}
})
.catch(err => {
this.top_nav[3] = [];
this.top_nav[4] = [];
console.log(err);
});
},
......
......@@ -37,145 +37,148 @@ const router = new VueRouter({
y: 0,
}),
routes: [{
path: '/',
name: 'Home',
redirect: '/home',
component: DefaultContainer,
props: {
level: level,
},
children: [{
path: '/home',
component: Home,
path: '/',
name: 'Home',
redirect: '/home',
component: DefaultContainer,
props: {
level: level,
},
children: [{
path: '/home',
component: Home,
},
{
path: '/p',
redirect: '/home',
},
{
path: '/p/:platform',
redirect: '/p/:platform',
name: 'Coursera',
component: Platform,
children: [{
path: '/p/:platform',
name: '',
component: coursera.Courses,
}, {
path: '/p/:platform/:courseid',
name: 'CourseDetail',
component: coursera.CourseDetail,
meta: {
label: "Course Details",
},
},
{
path: '/p/:platform/:courseid/compare/:course2id',
name: 'CourseComparison',
component: coursera.CourseComparison,
meta: {
label: "Course Compare",
},
},
{
path: '/p/:platform/:courseid/videos',
name: 'Videos',
component: coursera.Videos,
},
{
path: '/p/:platform/:courseid/videos/:videoid',
name: 'VideoDetail',
component: coursera.VideoDetail,
meta: {
label: "Video Details",
},
},
{
path: '/p/:platform/:courseid/quizzes',
name: 'Quizzes',
component: coursera.Quizzes,
},
{
path: '/p/:platform/:courseid/quizzes/:quizid',
name: 'QuizDetail',
component: coursera.QuizDetail,
meta: {
label: "Quiz Details",
},
},
{
path: '/p/:platform/:courseid/assignments',
name: 'Assignments',
component: coursera.Assignments,
},
{
path: '/p/:platform/:courseid/assignments/:assignmentid',
name: 'Assignment Details',
component: coursera.AssignmentDetail,
},
],
}, {
path: '/settings',
name: 'Settings',
component: Settings,
},
],
},
{
path: '/coursera',
redirect: '/coursera',
name: 'Coursera',
component: Platform,
children: [{
path: '/coursera',
name: '',
component: coursera.Courses,
}, {
path: '/coursera/:courseid',
name: 'CourseDetail',
component: coursera.CourseDetail,
meta: {
label: "Course Details",
path: '/pages',
redirect: '/pages/404',
name: 'Pages',
component: {
render(c) {
return c('router-view')
},
},
{
path: '/coursera/:courseid/compare/:course2id',
name: 'CourseComparison',
component: coursera.CourseComparison,
meta: {
label: "Course Compare",
children: [{
path: '404',
name: 'Page404',
component: Page404,
},
},
{
path: '/coursera/:courseid/videos',
name: 'Videos',
component: coursera.Videos,
},
{
path: '/coursera/:courseid/videos/:videoid',
name: 'VideoDetail',
component: coursera.VideoDetail,
meta: {
label: "Video Details",
{
path: '500',
name: 'Page500',
component: Page500,
},
},
{
path: '/coursera/:courseid/quizzes',
name: 'Quizzes',
component: coursera.Quizzes,
},
{
path: '/coursera/:courseid/quizzes/:quizid',
name: 'QuizDetail',
component: coursera.QuizDetail,
meta: {
label: "Quiz Details",
{
path: 'login',
name: 'Login',
component: Login,
},
{
path: 'resetpassword/:token/:id',
name: 'ResetPasswordReferrer',
component: ResetReferrer,
},
{
path: 'resetpassword',
name: 'ResetPassword',
component: ResetPassword,
},
{
path: 'forgotpassword',
name: 'ForgotPassword',
component: ForgotPassword,
},
},
{
path: '/coursera/:courseid/assignments',
name: 'Assignments',
component: coursera.Assignments,
},
{
path: '/coursera/:courseid/assignments/:assignmentid',
name: 'Assignment Details',
component: coursera.AssignmentDetail,
},
],
}, {
path: '/settings',
name: 'Settings',
component: Settings,
},
],
},
{
path: '/pages',
redirect: '/pages/404',
name: 'Pages',
component: {
render(c) {
return c('router-view')
},
},
children: [{
path: '404',
name: 'Page404',
component: Page404,
},
{
path: '500',
name: 'Page500',
component: Page500,
},
{
path: 'login',
name: 'Login',
component: Login,
},
{
path: 'resetpassword/:token/:id',
name: 'ResetPasswordReferrer',
component: ResetReferrer,
},
{
path: 'resetpassword',
name: 'ResetPassword',
component: ResetPassword,
},
{
path: 'forgotpassword',
name: 'ForgotPassword',
component: ForgotPassword,
},
],
},
{
path: '/admin',
name: 'Admin',
component: AdminPanel,
redirect: 'admin/home',
children: [{
path: 'home',
name: 'AdminHome',
component: AdminHome,
},
{
path: 'register',
name: 'Register',
component: Register,
path: '/admin',
name: 'Admin',
component: AdminPanel,
redirect: 'admin/home',
children: [{
path: 'home',
name: 'AdminHome',
component: AdminHome,
},
{
path: 'register',
name: 'Register',
component: Register,
},
],
},
],
},
],
})
......
export default {
//Platform settings
platforms: [{
name: "Coursera",
slug: "coursera",
},],
course_pages: [{
name: "Videos",
slug: "videos",
icon: "fa fa-video-camera",
},
{
name: "Quizzes",
slug: "quizzes",
icon: "fa fa-check",
},
{
name: "Assignments",
slug: "assignments",
icon: "cui-calendar",
},
],
resources: [
name: "Videos",
slug: "videos",
icon: "fa fa-video-camera",
},
{
name: "Quizzes",
slug: "quizzes",
icon: "fa fa-check",
},
{
name: "Coursera for Educators",
link: "https://blog.coursera.org/for-educators/",
name: "Assignments",
slug: "assignments",
icon: "cui-calendar",
},
],
resources: [{
name: "Coursera for Educators",
link: "https://blog.coursera.org/for-educators/",
}, ],
// Subroutes excluded the breadcrumb
excludeFromBreadcrumb: [
"compare",
"p",
],
<