1175 course import dont ask to leave page all the time (#1198)

* Reasons for the BeforeUnload events:

- The import body was a form without a submit, making the webbrowser think that changes have been made without saving. this has been fixed by making the body a <div> instead of a <form>
- The EventListener in course-import.ts hasn't been removed even after import has been finished, making the browser ask even when import has been finished. to fix this, I wrote the function separately to first add it during the first step in "notify1" and then remove it in "notify2" when the process is finished.

* Reasons for the BeforeUnload events:

- The import body was a form without a submit, making the webbrowser think that changes have been made without saving. this has been fixed by making the body a <div> instead of a <form>
- The EventListener in course-import.ts hasn't been removed even after import has been finished, making the browser ask even when import has been finished. to fix this, I wrote the function separately to first add it during the first step in "notify1" and then remove it in "notify2" when the process is finished.

* executed "npm run lint-fix" to fix ESLint fails

* added comments to newly added function. Will plan on adding more comments to the other functions for better readability later on.

* ESLint fix

api/courseimport.go

@@ -6,11 +6,11 @@ import (
 	"errors"
 	"fmt"
 	campusonline "github.com/RBG-TUM/CAMPUSOnline"
-	"github.com/getsentry/sentry-go"
-	"github.com/gin-gonic/gin"
 	"github.com/TUM-Dev/gocast/model"
 	"github.com/TUM-Dev/gocast/tools"
 	"github.com/TUM-Dev/gocast/tools/tum"
+	"github.com/getsentry/sentry-go"
+	"github.com/gin-gonic/gin"
 	uuid "github.com/satori/go.uuid"
 	log "github.com/sirupsen/logrus"
 	"html/template"

web/template/admin/admin_tabs/course-import.gohtml

@@ -12,7 +12,7 @@
 
     <h2 class="form-container-title">Semester</h2>
 
-    <form x-show="step===0 || step===1" class="form-container-body grid grid-cols-2 gap-4">
+    <div x-show="step===0 || step===1" class="form-container-body grid grid-cols-2 gap-4">
         <label>
             <h2>Year</h2>
             <select x-model="year" class="tl-select">
@@ -57,7 +57,7 @@
         <button class="btn primary col-span-full" @click="step++; $dispatch(`notify${step}`)" :disabled="loading"
             x-text="step==0?'Start Import':(step==1?'Import':'Return to homepage')">
         </button>
-    </form>
+    </div>
 
     <div x-show="!loading && step===1">
         <div>

web/ts/course-import.ts

@@ -14,15 +14,26 @@ export function pageData() {
     return d;
 }
 
+/**
+ * onBeforeUnloadHandle is a function that will create a prompt asking the user if they want to leave
+ *
+ * The reason this has been made a separate Function and not in the "addEventListener" is because
+ * the function has to be taken out in the EventListener so that after the import has been done, the
+ * user does not need to be asked if they wanted to leave
+ * @param e is just the event that it will accept from the BeforeUnload event
+ */
+
+function onBeforeUnloadHandle(e) {
+    e.preventDefault(); // If you prevent default behavior in Mozilla Firefox, prompt will always be shown
+    e.returnValue = ""; //Chrome requires returnValue to be set
+}
+
 // lecture hall selected -> api call
 export function addNotifyEventListeners() {
     window.addEventListener("notify1", () => {
-        // warn users when leaving site:
-        window.addEventListener("beforeunload", function (e) {
-            e.preventDefault(); // If you prevent default behavior in Mozilla Firefox prompt will always be shown
-            // Chrome requires returnValue to be set
-            e.returnValue = "";
-        });
+        // warn users when leaving site using the given function:
+        window.addEventListener("beforeunload", onBeforeUnloadHandle);
+
         window.dispatchEvent(new CustomEvent("loading-start"));
         fetch(`/api/course-schedule?range=${d.range}&department=${d.department}&departmentID=${d.departmentID}`).then(
             (res) => {
@@ -33,11 +44,15 @@ export function addNotifyEventListeners() {
             },
         );
     });
+
     window.addEventListener("notify2", () => {
         fetch(`/api/course-schedule/${d.year}/${d.semester}`, {
             method: "POST",
             body: JSON.stringify({ courses: d.courses, optIn: d.optInOut === "Opt In" }),
         }).then((r) => window.dispatchEvent(new CustomEvent("imported", { detail: r.status })));
+
+        //Removes the eventListener after import has been done since user won't change anything no longer
+        window.removeEventListener("beforeunload", onBeforeUnloadHandle);
     });
 
     window.addEventListener("notify3", () => {