134 lines
4.6 KiB
JavaScript
134 lines
4.6 KiB
JavaScript
class HomeworkPage extends HomeworkElement {
|
|
constructor (type) {
|
|
super()
|
|
this.innerHTML =
|
|
`
|
|
<div id="page-header">
|
|
<h2 id="text005" class="text"></h2>
|
|
<div id="buttons">
|
|
<div id="new" class="button">
|
|
<span id="text035" class="button-text text"></span>
|
|
</div>
|
|
<div id="save" class="button">
|
|
<span id="text037" class="button-text text"></span>
|
|
</div>
|
|
<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">
|
|
<p class="text source-language"></p>
|
|
<p class="text target-language"></p>
|
|
</div>
|
|
<div id="content">
|
|
</div>
|
|
`
|
|
let languageTextId = ""
|
|
let sourceLanguageTextId = "text030"
|
|
let targetLanguageTextId = ""
|
|
switch(type) {
|
|
case HomeworkTypes.VOCABULARY_ENGLISH:
|
|
console.log("English vocabulary")
|
|
languageTextId = "text005"
|
|
targetLanguageTextId = "text031"
|
|
break
|
|
case HomeworkTypes.VOCABULARY_FRENCH:
|
|
console.log("French vocabulary")
|
|
languageTextId = "text025"
|
|
targetLanguageTextId = "text032"
|
|
break
|
|
case HomeworkTypes.VOCABULARY_GERMAN:
|
|
console.log("German vocabulary")
|
|
languageTextId = "text024"
|
|
targetLanguageTextId = "text034"
|
|
break
|
|
case HomeworkTypes.VOCABULARY_SPANISH:
|
|
console.log("Spanish vocabulary")
|
|
languageTextId = "text026"
|
|
targetLanguageTextId = "text033"
|
|
break
|
|
default:
|
|
console.log("Math")
|
|
languageTextId = "text004"
|
|
}
|
|
this.type = type
|
|
this.headingText = this.querySelector('h2')
|
|
this.headingText.setAttribute("id", languageTextId)
|
|
this.languageHeaders = this.querySelectorAll('#sub-headers > p')
|
|
this.sourceLanguage = this.languageHeaders[0]
|
|
this.targetLanguage = this.languageHeaders[1]
|
|
this.sourceLanguage.setAttribute("id", sourceLanguageTextId)
|
|
this.targetLanguage.setAttribute("id", targetLanguageTextId)
|
|
this.content = this.querySelector('#content')
|
|
this.content.addEventListener("delete", this.deleteTask.bind(this))
|
|
this.newButton = this.querySelector('#new')
|
|
this.newButton.addEventListener("click", this.newVocabulary.bind(this))
|
|
this.saveButton = this.querySelector('#save')
|
|
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")
|
|
this.loadAndPopulateData()
|
|
}
|
|
|
|
async loadAndPopulateData() {
|
|
const dataFile = "/resources/homework.json"
|
|
const response = await fetch(dataFile)
|
|
const data = await response.json()
|
|
data.items.forEach((item) => {
|
|
const row = new HomeworkVocabularyTask(crypto.randomUUID(), item.source, item.target)
|
|
this.content.append(row)
|
|
})
|
|
console.log(data.items)
|
|
}
|
|
|
|
newVocabulary() {
|
|
if(this.type == HomeworkTypes.VOCABULARY_ENGLISH) {
|
|
const row = new HomeworkVocabularyTask(crypto.randomUUID())
|
|
this.content.append(row)
|
|
}
|
|
}
|
|
|
|
saveVocabularies() {
|
|
console.log("Saving page content")
|
|
}
|
|
|
|
trainVocabulary() {
|
|
console.log("Train!!")
|
|
const tasks = this.content.querySelectorAll("homework-vocabulary-task")
|
|
tasks.forEach((task) => {
|
|
task.state = "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) {
|
|
tasks.forEach((task) => {
|
|
if(event.detail.id == task.getId()) {
|
|
console.log("Removing task '" + task.getId() + "'")
|
|
task.remove()
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
customElements.define('homework-page', HomeworkPage) |