Skip to content

Commit

Permalink
Merge branch 'dev' into marius/DIT-223v2
Browse files Browse the repository at this point in the history
  • Loading branch information
@madsenandreas
madsenandreas authored Jul 2, 2024
2 parents d733246 + 4a45e05 commit e4d2a8d
Show file tree
Hide file tree
Showing 4 changed files with 199 additions and 61 deletions.
68 changes: 35 additions & 33 deletions src/js/modules/enroll.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,23 +13,23 @@ export default (function () {

return {

displayRegisterPopup: function(authenticated, selfRegisterCode) {
displayRegisterPopup: function (authenticated, selfRegisterCode) {
let wrapper = document.getElementById("wrapper");
let enrollPopup = document.createElement("div");
enrollPopup.setAttribute("id", "enrollPopup");
let enrollPopupComponent = createApp(EnrollToCourse, {authenticated: authenticated, selfEnrollmentCode: selfRegisterCode});
let enrollPopupComponent = createApp(EnrollToCourse, { authenticated: authenticated, selfEnrollmentCode: selfRegisterCode });
wrapper.appendChild(enrollPopup);
enrollPopupComponent.mount("#enrollPopup");

},
changeEnrollInformationPolicyLink: function () {
var informationPolicy = $('.ic-Self-enrollment-footer__Secondary > a');
if(informationPolicy) {
if (informationPolicy) {
informationPolicy.attr("href", settings.privacyPolicyLink);
}

var termsOfService = $('#create_user_info > div.ic-Checkbox-group > div > label');
if(termsOfService) {
if (termsOfService) {
termsOfService.html("Jeg er enig i personvernspolitikken.");
}
},
Expand All @@ -53,23 +53,23 @@ export default (function () {
const newUserButton = $('#selfEnrollmentAuthRegCreate');
newUserButton.on('click', _ => forgotPasswordButton.hide());
},
updateGotoDashboardButton: function() {
$(".ic-Self-enrollment-footer__Primary > a").each(function() {
updateGotoDashboardButton: function () {
$(".ic-Self-enrollment-footer__Primary > a").each(function () {
var $this = $(this);
if ($this.hasClass('btn-primary')){
if ($this.hasClass('btn-primary')) {
var _href = $this.attr("href");
}else {
} else {
var _href = $this.attr("href");
}

const urlParamsObj = utilRoot.urlParamsToObject();

let forwardTo = urlParamsObj && urlParamsObj['forwardTo'];
if(forwardTo) {
if (forwardTo) {
_href += "&forwardTo=" + encodeURIComponent(forwardTo);
}
$this.attr("href", _href);
});
});
},
changeEnrollPage: function () {
this.changeEnrollInformationPolicyLink();
Expand All @@ -80,9 +80,11 @@ export default (function () {
var allCoursesWithStatus = [];
for (var i = 0; i < allCourses.length; i++) {
allCourses[i].course.enrolled = false;
allCourses[i].course.course_progress = null;
for (var j = 0; j < enrolledCourses.length; j++) {
if (allCourses[i].course.id == enrolledCourses[j].id) {
allCourses[i].course.enrolled = true;
allCourses[i].course.course_progress = enrolledCourses[j].course_progress;
}
}
allCoursesWithStatus.push(allCourses[i].course);
Expand Down Expand Up @@ -117,47 +119,47 @@ export default (function () {
document.getElementById('content').innerHTML = "";
let wrapper = document.getElementById("content");
try {
if(wrapper != null){
const customContent = document.createElement("div");
var mobiletablet = util.isMobileOrTablet();
let props = {
courses : allCoursesWithSettings,
filterData : allFiltersList,
mobiletablet : mobiletablet
};
let page = createApp(LoggedInLandingPage, props);
customContent.setAttribute("id", "loggedInLandingPage");
customContent.setAttribute("style", "width: 100%; justify-content: center; display: flex;");
let footerNode = document.getElementById("wrapper");
footerNode.parentNode.insertBefore(customContent, footerNode)
document.getElementById('wrapper').innerHTML = '';
$('#wrapper').remove();
document.getElementById('loader').remove();
page.mount("#loggedInLandingPage");
if (wrapper != null) {
const customContent = document.createElement("div");
var mobiletablet = util.isMobileOrTablet();
let props = {
courses: allCoursesWithSettings,
filterData: allFiltersList,
mobiletablet: mobiletablet
};
let page = createApp(LoggedInLandingPage, props);
customContent.setAttribute("id", "loggedInLandingPage");
customContent.setAttribute("style", "width: 100%; justify-content: center; display: flex;");
let footerNode = document.getElementById("wrapper");
footerNode.parentNode.insertBefore(customContent, footerNode)
document.getElementById('wrapper').innerHTML = '';
$('#wrapper').remove();
document.getElementById('loader').remove();
page.mount("#loggedInLandingPage");
}
} catch (e) {
console.log(e);
}
}
else {
try {
if(wrapper != null){
if (wrapper != null) {
kpasApi.getHighlightedCourse(function (highlightedCourse) {
var highlightedCourseId = highlightedCourse.result.course_id;
var allFiltersList = allFilters.result;
var allCoursesWithSettings = util.mapCourseSettings(allCoursesWithStatus, allCoursesSettings.result);

const customContent = document.createElement("div");
var highlightedCourse = allCoursesWithSettings.find(course => course.id == highlightedCourseId);
if(highlightedCourse == null || highlightedCourse == undefined) {
if (highlightedCourse == null || highlightedCourse == undefined) {
highlightedCourse = allCoursesWithSettings[0];
}
var mobiletablet = util.isMobileOrTablet();
let props = {
courses : allCoursesWithSettings,
filterData : allFiltersList,
highlightedCourse : highlightedCourse,
mobiletablet : mobiletablet
courses: allCoursesWithSettings,
filterData: allFiltersList,
highlightedCourse: highlightedCourse,
mobiletablet: mobiletablet
};
let page = createApp(NotLoggedInPage, props);
customContent.setAttribute("id", "notLoggedInPage");
Expand Down
86 changes: 58 additions & 28 deletions src/vue/components/Card.vue
View file
Original file line number Diff line number Diff line change
@@ -1,40 +1,34 @@
<template>
<article tabIndex="0" :aria-label="label" class="card-box">
<div class="card-illustration-box" :class="theme">
<slot name="new-flag"></slot>
<img
class="card-illustration-box-image"
:src="courseIllustration"
alt=""
/>
<slot name="new-flag"></slot>
<img class="card-illustration-box-image" :src="courseIllustration" alt="" />
<slot name="closeModalButton"></slot>
</div>
<div class="card-content-container">
<header class="card-box-title">
<h2><slot name="title"></slot></h2>
<h2>
<slot name="title"></slot>
</h2>
<p :class="{ description_text: true }">
<slot name="description"></slot>
<slot name="moduleList"></slot>
</p>

<ul class="card-content-tags">
<template v-for="filterItem in filters" :key="filterItem.filter_id">
<template v-for="filterItem in filters" :key="filterItem.filter_id">
<li>{{ filterItem.filter.filter_name }}</li>
</template>
</ul>
</header>
<section class="card-content-description">
<div class="card-content-enrolled">
<img
v-if="hasGoToCourse"
class="card-content-enrolled-icon"
alt=""
:src="server + 'enrolled-green-circle.svg'"
/>
<p v-if="hasGoToCourse" class="card-content-enrolled-text">
<slot name="enrolled"></slot>
</p>
<div class="card-content-enrolled" v-if="hasGoToCourse">
<CircularProgressBar :percentage="percentageValue" :size="50" />
<div class="card-content-enrolled-text">
<p class="card-content-enrolled-count">{{ requirementsCompleted }} av {{ requirementsTotal }} fullført</p>
<p class="card-content-enrolled-description">{{ allRequirementsCompleted ? "Du har fullført kompetansepakken!" : "Fortsett for å fullføre kompetansepakken!" }}</p>
</div>
</div>

<div class="card-content-button-container">
<slot name="leftButton"></slot>
<slot name="rightButton"></slot>
Expand All @@ -47,24 +41,37 @@

<script lang="js">
import NewCourseFlag from './NewCourseFlag.vue';
import CircularProgressBar from './CircularProgressBar.vue';
export default {
name: 'Card',
components: {
NewCourseFlag,
CircularProgressBar
},
props: {
theme: String,
courseIllustration: String,
label: String,
filters: Array
filters: Array,
requirementsCompleted: Number,
requirementsTotal: Number
},
data() {
return {
server: SERVER,
hasGoToCourse: this.$slots.goToCourse !== undefined,
};
},
computed: {
allRequirementsCompleted() {
return this.requirementsCompleted >= this.requirementsTotal;
},
percentageValue() {
if (this.requirementsTotal == 0) return 100;
return Math.floor((this.requirementsCompleted / this.requirementsTotal) * 100);
}
}
};
</script>

Expand Down Expand Up @@ -92,30 +99,39 @@ export default {
.theme_0 {
background: map-get($theme_0, background);
}
.theme_1 {
background: map-get($theme_1, background);
}
.theme_2 {
background: map-get($theme_2, background);
}
.theme_3 {
background: map-get($theme_3, background);
}
.theme_4 {
background: map-get($theme_4, background);
}
.theme_5 {
background: map-get($theme_5, background);
}
.theme_6 {
background: map-get($theme_6, background);
}
.theme_7 {
background: map-get($theme_7, background);
}
.theme_8 {
background: map-get($theme_8, background);
}
.theme_9 {
background: map-get($theme_9, background);
}
Expand Down Expand Up @@ -167,14 +183,16 @@ export default {
}
.card-content-button-container {
display: flex;
justify-content: space-between;
margin-top: 1.5rem;
margin-bottom: 1rem;
display: inline-grid;
grid-template-columns: auto auto;
gap: 0.5rem;
}
.card-box-title {
margin-bottom: 20px;
h2,
h3 {
font-size: 1.125rem;
Expand All @@ -190,21 +208,27 @@ export default {
flex-direction: row;
align-items: center;
gap: 0.25rem;
height: 2rem;
min-height: 2rem;
width: 100%;
margin-top: 20px;
}
.card-content-enrolled-text {
margin-left: 10px;
}
.card-content-enrolled-text p {
margin: 0;
font-size: 0.875rem;
font-family: 'Roboto';
font-weight: 400;
color: black;
color: black !important;
line-height: 1.4;
}
.card-content-enrolled-icon {
width: 1.25rem;
height: 1.25rem;
flex-shrink: 0;
p.card-content-enrolled-count {
font-weight: 500;
margin-bottom: 2px;
}
.description_text {
Expand All @@ -215,4 +239,10 @@ export default {
text-overflow: ellipsis;
}
}
@media (max-width: 30rem) {
.card-content-enrolled-text {
margin-left: 5px !important;
}
}
</style>
3 changes: 3 additions & 0 deletions src/vue/components/CardList.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@
:courseIllustration="course.course_settings ? course.course_settings.image.path : ''"
:label="course.name"
:filters="course.course_settings ? course.course_settings.course_filter : []"
:requirementsCompleted="course?.course_progress?.requirement_completed_count ?? 0"
:requirementsTotal="course?.course_progress?.requirement_count ?? 0"
>
<template v-slot:new-flag>
<NewCourseFlag v-if="newCoursesIndicator && newCourseFlag(course)"/>
Expand Down Expand Up @@ -81,6 +83,7 @@ export default {
newCoursesIndicator: Boolean,
},
data() {
console.log("COURSES", this.courses);
var url = new URL(window.location.href);
var coursePreviewId = url.searchParams.get("course_preview_id");
this.courses.find((courseItem) => {
Expand Down
Loading

0 comments on commit e4d2a8d

Please sign in to comment.