diff --git a/frontend/javascript/modules/majorProjectForm.js b/frontend/javascript/modules/majorProjectForm.js
index 36250529..a46f102d 100644
--- a/frontend/javascript/modules/majorProjectForm.js
+++ b/frontend/javascript/modules/majorProjectForm.js
@@ -1,13 +1,20 @@
import FetchUtil from "../utils/fetchUtil";
-export default class MajorProjectForm {
+const CACHE_KEY = "majorProjectCache"
+export default class MajorProjectForm {
constructor(form) {
this.form = form;
this.endpoint = '/major_project/submit';
this.tags_written = false;
this.tag_keys = ["Enter", "Comma", "Tab"];
+ try {
+ this.saveState = JSON.parse(localStorage.getItem(CACHE_KEY));
+ } catch (e) {
+ console.error(e);
+ this.saveState = {};
+ }
this.render();
}
@@ -18,8 +25,27 @@ export default class MajorProjectForm {
.addEventListener('focusout', e => this.onWriteSkill(e));
this.form.querySelector('input[id=skill-input]')
.addEventListener('keypress', e => this.onKeyPress(e));
+ this.form.addEventListener('input', e => this.onInput());
+ if (this.saveState) {
+ for (const [key, value] of Object.entries(this.saveState)) {
+ if (key === 'skill-list') {
+ value.forEach((skill) => this.addSkill(skill));
+ this.tags_written = true;
+ continue;
+ }
+ this.form.querySelector(`*[name=${key}]`).value = value;
+ }
+ }
}
+ onInput() {
+ const formData = new FormData(this.form);
+ const formDataObject = Object.fromEntries(formData.entries());
+ formDataObject['skill-list'] = this.getSkills();
+ localStorage.setItem(CACHE_KEY, JSON.stringify(formDataObject));
+ }
+
+
onKeyPress(e) {
if (this.tag_keys.includes(e.code)) {
e.preventDefault();
@@ -28,6 +54,24 @@ export default class MajorProjectForm {
return false;
}
+ getSkills() {
+ let skills = [];
+
+ for (const tag of this.form.getElementsByClassName('skill-tag')) {
+ skills.push(tag.textContent);
+ }
+
+ return skills;
+ }
+
+ addSkill(skill) {
+ let input = document.getElementById("skill-input")
+ let txt = skill.replaceAll(/[^a-zA-Z0-9\+\-\.\# ]/g, ''); // allowed characters Skillslist
+ if (txt) input.insertAdjacentHTML("beforebegin", '' + txt + '');
+ let skills = this.form.getElementsByClassName("skill-tag")
+ skills.item(skills.length - 1).addEventListener('click', e => this.onRemoveTag(e));
+ }
+
onWriteSkill(e) {
let input = document.getElementById("skill-input")
if (!this.tags_written) {
@@ -36,27 +80,38 @@ export default class MajorProjectForm {
const firstTag = document.getElementsByClassName("skill-tag").item(0);
if (firstTag) firstTag.remove();
}
-
- let txt = input.value.replaceAll(/[^a-zA-Z0-9\+\-\.\# ]/g, ''); // allowed characters list
- if (txt) input.insertAdjacentHTML("beforebegin", '' + txt + '');
- let skills = this.form.getElementsByClassName("skill-tag")
- skills.item(skills.length - 1).addEventListener('click', e => this.onRemoveTag(e));
+ this.addSkill(input.value);
input.value = "";
+ this.onInput()
+
}
onRemoveTag(e) {
e.target.remove();
+ this.onInput();
}
+ clearForm() {
+ const skills = this.form.getElementsByClassName("skill-tag");
+ Array.from(skills).forEach(tag => tag.remove());
+ for (const [key, value] of Object.entries(this.saveState)) {
+ if (key === 'skill-list') {
+ // We already cleaned the skills ^^
+ continue;
+ }
+ this.form.querySelector(`*[name=${key}]`).value = "";
+ }
+ this.tags_written = false;
+ localStorage.removeItem(CACHE_KEY);
+ }
+
+
_submitForm(e) {
e.preventDefault();
- let skills = [];
+ const skills = this.getSkills();
+
- for (const tag of this.form.getElementsByClassName('skill-tag')) {
- skills.push(tag.textContent);
- }
-
let projectName = this.form.querySelector('input[name=name]').value;
let projectTldr = this.form.querySelector('input[name=tldr]').value;
let projectTimeSpent = this.form.querySelector('textarea[name=time-commitment]').value;
@@ -90,6 +145,6 @@ export default class MajorProjectForm {
warningText: "You will not be able to edit your " +
"project once it has been submitted.",
successText: "Your project has been submitted."
- });
+ }, () => this.clearForm());
}
-}
\ No newline at end of file
+}