Introduced clear all button

javascript/homeworkPage.js

@@ -15,6 +15,9 @@ class HomeworkPage extends HomeworkElement {
           <div id="train" class="button">
             <span id="text036" class="button-text text"></span>
           </div>
+          <div id="clear-all" class="button">
+            <span id="text038" class="button-text text"></span>
+          </div>
         </div>
       </div>
       <div id="sub-headers">
@@ -68,14 +71,12 @@ class HomeworkPage extends HomeworkElement {
       this.saveButton.addEventListener("click", this.saveVocabularies.bind(this))
       this.trainButton = this.querySelector('#train')
       this.trainButton.addEventListener("click", this.trainVocabulary.bind(this))
+      this.clearAllButton = this.querySelector("#clear-all")
+      this.clearAllButton.addEventListener("click", this.clearAllVocabularies.bind(this))
     }
 
     connectedCallback() {
       console.log("Page of type " + this.type + " added to session")
-      if(this.type == HomeworkTypes.VOCABULARY_ENGLISH) {
-        const row = new HomeworkVocabularyTask(crypto.randomUUID())
-        this.content.append(row)
-      }
       this.loadAndPopulateData()
     }
 
@@ -85,6 +86,8 @@ class HomeworkPage extends HomeworkElement {
       const data = await response.json()
       data.items.forEach((item) => {
         const row = new HomeworkVocabularyTask(crypto.randomUUID())
+        row.setSourceText(item.source)
+        row.setTargetText(item.target)
         this.content.append(row)
       })
       console.log(data.items)
@@ -105,6 +108,15 @@ class HomeworkPage extends HomeworkElement {
       console.log("Train!!")
     }
 
+    clearAllVocabularies() {
+      console.log("Clearing all vocabularies")
+      const tasks = this.content.querySelectorAll("homework-vocabulary-task")
+      tasks.forEach((task) => {
+        console.log("Removing task '" + task.getId() + "'")
+        task.remove()
+      })
+    }
+
     deleteTask(event) {
       const tasks = this.content.querySelectorAll("homework-vocabulary-task")
       if(tasks.length > 1) {

javascript/homeworkVocabularyTask.js

@@ -14,6 +14,8 @@ class HomeworkVocabularyTask extends HomeworkElement {
     this.setAttribute("state", "edit")
     this.deleteButton = this.querySelector('img#delete')
     this.deleteButton.addEventListener("click", this.deleteTask.bind(this))
+    this.sourceText = this.querySelector("input#source")
+    this.targetText = this.querySelector("input#target")
   }
 
   connectedCallback() {
@@ -28,5 +30,13 @@ class HomeworkVocabularyTask extends HomeworkElement {
   getId() {
     return this.id
   }
+
+  setSourceText(text) {
+    this.sourceText.value = text
+  }
+
+  setTargetText(text) {
+    this.targetText.value = text
+  }
 }
 customElements.define('homework-vocabulary-task', HomeworkVocabularyTask)