Skip to content

TD-6515: New error messages for time out #1820

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
swapnamol-abraham wants to merge 1 commit into
base: RC
Choose a base branch
from
Open

TD-6515: New error messages for time out #1820

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
112 changes: 96 additions & 16 deletions LearningHub.Nhs.WebUI/Scripts/vuesrc/learningsessions/ScormViewer.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,54 @@
<template>
<div class="">
<div>

<div class="">
<div class="object-container">
<h3>SCORM Object View</h3>
<pre>{{scormDisplay}}</pre>
<div class="">
<div class="object-container">
<h3>SCORM Object View</h3>
<pre>{{scormDisplay}}</pre>
</div>
</div>
</div>
<div>
<div class="trace-container">
<h3>Trace</h3> <button @click="showTextLog">Text log</button>
<div class="trace-row" v-for="logItem in traceDisplay">
<div class="statement">{{logItem.statement}}</div>
<div class="col-result">{{logItem.result}}</div>

<div>
<div class="trace-container">
<h3>Trace</h3>
<button @click="showTextLog">Text log</button>

<div class="trace-row" v-for="logItem in traceDisplay" :key="logItem.statement">
<div class="statement">{{logItem.statement}}</div>
<div class="col-result">{{logItem.result}}</div>
</div>
</div>
</div>

<div class="text-popup" v-show="textLogVisible">
<button @click="textLogVisible=false">close</button>
<textarea v-model="textLog" id="log"></textarea>
</div>
</div>
<div class="text-popup" v-show="textLogVisible">
<button @click="textLogVisible=false">close</button>
<textarea v-model="textLog" id="log"></textarea>

<!-- LMS Error Modal -->
<div id="lmsErrorModal" class="error-modal" v-show="showLmsErrorModal">
<div class="modal-content">
<h2>We’re having trouble connecting to the learning system</h2>

<p>We couldn’t save your learning details.</p>

<ul>
<li>Refresh your browser and try again</li>
<li>
If the error continues, email
<a href="mailto:support@learninghub.nhs.uk">
support@learninghub.nhs.uk
</a>
for help
</li>
</ul>

<button @click="closeLmsError">Close</button>
</div>
</div>

</div>
</template>

Expand All @@ -34,7 +64,8 @@
return {
scormApi: null as ScormApiModel,
textLog: '',
textLogVisible: false
textLogVisible: false,
showLmsErrorModal: false
};
},
computed: {
Expand All @@ -55,8 +86,16 @@
this.textLog += value.statement + '\n';
})
this.textLogVisible = true;
},
closeLmsError() {
this.showLmsErrorModal = false;
}
}
},
mounted() {
window.addEventListener('show-lms-error', () => {
this.showLmsErrorModal = true;
});
},
})
</script>
<style scoped>
Expand All @@ -79,26 +118,67 @@
bottom: 0;
padding: 10px;
}

.trace-container .trace-row {
display: flex;
}

.trace-container .statement {
flex: 50%;
min-width: 350px;
}

.trace-container .result {
flex: 50%;
min-width: 100px;
}

.text-popup {
position: fixed;
height: 75%;
width: 75%;
top: 12.5%;
left: 12.5%;
}

.text-popup textarea {
height: 100%;
width: 100%;
}

.error-modal {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
}

.modal-content {
background: #fff;
padding: 24px;
border-radius: 8px;
width: 500px;
max-width: 90%;
font-family: Arial, sans-serif;
}

.modal-content h2 {
font-size: 28px;
font-weight: bold;
margin-bottom: 20px;
}

.modal-content p,
.modal-content li {
font-size: 18px;
line-height: 1.6;
}

.modal-content button {
margin-top: 20px;
padding: 10px 18px;
}
</style>
10 changes: 6 additions & 4 deletions LearningHub.Nhs.WebUI/Scripts/vuesrc/models/learningsessions/scormApiModel.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -152,7 +152,8 @@ export class ScormApiModel {
this.LMSLastErrorCode = 301;
this.LMSLastErrorMsg = "Unable to disconnect cleanly from the e-LfH LMS";

alert("Error communicating with the LMS server. Your learning details may not have been saved.");
//alert("Error communicating with the LMS server. Your learning details may not have been saved.");
window.dispatchEvent(new CustomEvent('show-lms-error'));
}

result = false;
Expand Down Expand Up @@ -821,8 +822,9 @@ export class ScormApiModel {
this.LMSLastErrorCode = 101;
this.LMSLastErrorMsg = "LMSCommit failed. Unable to communicate with the LMS.";

alert("Error communicating with the LMS server. Your learning details may not have been saved.\n\n" +
"If the error persists please email support@learninghub.nhs.uk for further assistance.");
window.dispatchEvent(new CustomEvent('show-lms-error'));
//alert("Error communicating with the LMS server. Your learning details may not have been saved.\n\n" +
// "If the error persists please email support@learninghub.nhs.uk for further assistance.");
}

result = false;
Expand Down Expand Up @@ -1113,4 +1115,4 @@ export class ScormApiModel {

return response;
}
}
}
31 changes: 31 additions & 0 deletions LearningHub.Nhs.WebUI/Styles/layout/_layout.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -374,3 +374,34 @@ input:required:invalid, input:focus:invalid {
i {
color: #4C6272;
}
.session-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
}

.session-modal {
background: #fff;
padding: 30px;
border-radius: 8px;
width: 500px;
max-width: 90%;
text-align: center;
}

.session-modal h2 {
margin-top: 0;
}

.session-modal button {
margin-top: 20px;
padding: 10px 20px;
cursor: pointer;
}
6 changes: 3 additions & 3 deletions LearningHub.Nhs.WebUI/Views/Home/SessionTimeout.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

<div class="m-35 p-35 text-center bg-white">
<i class="fa-solid fa-triangle-exclamation text-warning display-4 mt-4 mb-1"></i>
<h1 class="nhsuk-heading-xl">You have been signed out</h1>
<p>You have been signed out as there has been no activity for at least @ViewBag.AuthTimeout minutes.</p>
<p><a asp-controller="Account" asp-action="AuthorisationRequired" asp-route-originalurl="@ViewBag.ReturnUrl">Sign in</a> to the Learning Hub</p>
<h1 class="nhsuk-heading-xl">Your session has timed out</h1>
<p>There’s been no activity for @ViewBag.AuthTimeout minutes. You will need to log in again to continue.</p>
<p><a asp-controller="Account" asp-action="AuthorisationRequired" asp-route-originalurl="@ViewBag.ReturnUrl">Log in</a> to the Learning Hub</p>
</div>
127 changes: 113 additions & 14 deletions LearningHub.Nhs.WebUI/wwwroot/js/site.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,39 +20,138 @@ $(function () {
});

LHGlobal.sessionManager = new function () {

var sm = this;

var _idleTime = 0;
var _warningTime = 2 * 60 * 1000; // 15 minutes
var _sessionTimeout = 3 * 60 * 1000; // 20 minutes

var _on = false;
var _sessionTimeout = 0;
var _warningShown = false;
var _interval = null;

var _run = function () {

_idleTime += 1000;
if (_idleTime > _sessionTimeout) {

// Show warning after 15 mins
if (_idleTime >= _warningTime && !_warningShown) {
_warningShown = true;
sm.showWarning();
}

// Timeout after 20 mins
if (_idleTime >= _sessionTimeout) {
sm.showMessage();
}
}
};

var _start = function () {
if (_on) {
setInterval(_run, 1000);
//console.log(new Date().toLocaleTimeString(), 'session started..');

if (_on && !_interval) {
_interval = setInterval(_run, 1000);
}
}
};

sm.init = function () {

sm.init = function (timeoutInMin) {
_sessionTimeout = timeoutInMin * 60000;
_on = true;
}

// Reset inactivity timer on user activity
[
'click',
'mousemove',
'keypress',
'scroll',
'touchstart'
].forEach(function (event) {

window.addEventListener(event, sm.reset);
});
};

sm.reset = function () {

_idleTime = 0;
//console.log(new Date().toLocaleTimeString(), 'session reset..');
}
_warningShown = false;

// Remove warning popup if exists
var warning = document.getElementById('session-warning');

if (warning) {
warning.remove();
}
};

sm.showWarning = function () {

// Prevent duplicate popup
if (document.getElementById('session-warning')) {
return;
}

var modal = document.createElement('div');

modal.id = 'session-warning';

modal.innerHTML = `
<div class="session-overlay">
<div class="session-modal">

<h2 class="nhsuk-heading-l">You’re about to be logged out</h2>

<p>
You’ve been inactive for <b>15<b> minutes.
If you don’t take action, your session will end in 5 minutes.
</p>

<p>
<strong>Your progress will not be saved.</strong>
</p>

<button id="stay-logged-in">
Select anywhere to stay logged in
</button>

</div>
</div>
`;

document.body.appendChild(modal);

// Stay logged in button
document
.getElementById('stay-logged-in')
.addEventListener('click', function () {

sm.reset();
});

// Click anywhere in overlay
modal.addEventListener('click', function () {

sm.reset();
});
};

sm.showMessage = function () {
window.location.href = '/session-timeout?returnUrl=' + encodeURIComponent(window.location.href);
}
// Stop interval
if (_interval) {
clearInterval(_interval);
_interval = null;
}

// Remove warning popup
var warning = document.getElementById('session-warning');

if (warning) {
warning.remove();
}
window.location.href =
'/session-timeout?returnUrl=' +
encodeURIComponent(window.location.href);
};

window.addEventListener('load', _start);

Expand Down
Loading