feat(exam-correct): server date handling in frontend and refactor

This commit is contained in:
Sarah Vaupel 2020-01-21 16:44:35 +01:00
parent daf9eee1d3
commit d8a080d74d
2 changed files with 26 additions and 14 deletions

View File

@ -111,19 +111,18 @@ export class ExamCorrect {
if (this._userInput.getAttribute(EXAM_CORRECT_USER_ATTR) !== null) {
if (this._userInput.value === this._userInput.getAttribute(EXAM_CORRECT_USER_DNAME_ATTR)) {
setStatus(this._userInputStatus, STATUS.NONE);
setStatus(this._userInputStatus, STATUS.SUCCESS);
return;
} else {
this._userInput.removeAttribute(EXAM_CORRECT_USER_ATTR);
this._userInput.removeAttribute(EXAM_CORRECT_USER_DNAME_ATTR);
}
}
setStatus(this._userInputStatus, STATUS.LOADING);
const body = {
name: user,
results: {},
op: false,
user: user,
};
this._app.httpClient.post({
@ -143,10 +142,11 @@ export class ExamCorrect {
// refocus user input element for convenience
this._userInput.focus();
const userId = this._userInput.getAttribute(EXAM_CORRECT_USER_ATTR);
const user = this._userInput.value;
// abort send if the user input is empty
if (!user) {
if (!user && !userId) {
this._userInput.classList.add(INPUT_EMPTY_CLASS);
this._userInput.addEventListener('input', this._removeInputEmptyClassHandler.bind(this), { once: true });
return;
@ -177,6 +177,7 @@ export class ExamCorrect {
const now = moment();
dateTD.appendChild(document.createTextNode(now.format(MOMENT_FORMAT)));
dateTD.setAttribute('date', moment());
dateTD.classList.add('exam-correct--local-time');
const userTD = document.createElement('TD');
userTD.appendChild(document.createTextNode(user));
userTD.setAttribute(EXAM_CORRECT_USER_ATTR, user);
@ -198,15 +199,13 @@ export class ExamCorrect {
const tableBody = this._element.querySelector(`tbody:not(#${EXAM_CORRECT_INPUT_BODY_ID})`);
tableBody.insertBefore(correctionRow, tableBody.firstChild);
// clear input values on validation success
// TODO only clear input on post success
[this._userInput, ...this._partInputs].forEach(clearInput);
setStatus(this._userInputStatus, STATUS.NONE);
// clear inputs on validation success
this._clearUserInput();
this._partInputs.forEach(clearInput);
const body = {
name: user,
user: userId || user,
results: results,
op: true,
};
this._app.httpClient.post({
@ -223,8 +222,6 @@ export class ExamCorrect {
}
_processResponse(response, user) {
console.log('WIP _processResponse', response, user);
if (response) {
if (response.status === 'no-op') {
if (response.users) {
@ -288,6 +285,10 @@ export class ExamCorrect {
if (response.user) {
userElem.setAttribute(EXAM_CORRECT_USER_ATTR, response.user.id);
userElem.innerHTML = userToHTML(response.user);
const timeElem = row.cells.item(0);
timeElem.innerHTML = moment(response.time).format(MOMENT_FORMAT);
timeElem.classList.remove('exam-correct--local-time');
// TODO special style for server time?
}
// TODO replace results with results from response
// TODO set edit button visibility
@ -318,7 +319,6 @@ export class ExamCorrect {
}
_removeInputEmptyClassHandler() {
console.log('removeclass');
if (this._userInput.value) {
this._userInput.classList.remove(INPUT_EMPTY_CLASS);
} else {
@ -349,6 +349,14 @@ export class ExamCorrect {
}
}
_clearUserInput() {
removeAllChildren(this._userInputCandidates);
clearInput(this._userInput);
this._userInput.removeAttribute(EXAM_CORRECT_USER_ATTR);
this._userInput.removeAttribute(EXAM_CORRECT_USER_DNAME_ATTR);
setStatus(this._userInputStatus, STATUS.NONE);
}
}
// TODO move to general util section?

View File

@ -9,6 +9,10 @@ input.input--invalid
i
margin-left: $exam-correct--input-status-margin
.exam-correct--local-time
color: var(--color-fontsec)
font-style: italic
.exam-correct--success
color: var(--color-success)