First commit of homework assistant. Only contains vocabulary base functionality
This commit is contained in:
31
javascript/homeworkElement.js
Normal file
31
javascript/homeworkElement.js
Normal file
@@ -0,0 +1,31 @@
|
||||
class HomeworkElement extends HTMLElement {
|
||||
|
||||
static updateTexts(container) {
|
||||
let textElements = container.querySelectorAll(".text")
|
||||
console.log(textElements)
|
||||
textElements.forEach((item, index) => {
|
||||
let itemId = item.getAttribute("id")
|
||||
let itemText = HomeworkSession.texts[itemId]
|
||||
HomeworkElement.applyText(itemText, item, null)
|
||||
})
|
||||
}
|
||||
|
||||
static applyText(sourceText, targetElement, fallback = '') {
|
||||
if(sourceText.length > 0) {
|
||||
targetElement.innerHTML = sourceText
|
||||
targetElement.innerHTML = targetElement.textContent.trim()
|
||||
} else if(fallback == '') {
|
||||
console.warn('Missing text in: ', sourceText)
|
||||
} else {
|
||||
targetElement.innerHTML = fallback
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const HomeworkTypes = Object.freeze({
|
||||
VOCABULARY_ENGLISH: "'English vocabulary'",
|
||||
VOCABULARY_FRENCH: "'French vocabulary'",
|
||||
VOCABULARY_GERMAN: "'German vocabulary'",
|
||||
VOCABULARY_SPANISH: "'Spanish vocabulary'",
|
||||
MATH: "'Math'"
|
||||
})
|
||||
22
javascript/homeworkLayout.js
Normal file
22
javascript/homeworkLayout.js
Normal file
@@ -0,0 +1,22 @@
|
||||
class HomeworkLayout extends HomeworkElement {
|
||||
constructor () {
|
||||
super()
|
||||
this.innerHTML =
|
||||
`
|
||||
<div id="headings">
|
||||
<h1 id="text001" class="text"></h1>
|
||||
<h3 id="text002" class="text"></h3>
|
||||
</div>
|
||||
<div id="pages">
|
||||
</div>
|
||||
`
|
||||
this.pages = this.querySelector('#pages')
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
console.log("Layout added to session")
|
||||
let page = new HomeworkPage(HomeworkTypes.VOCABULARY_ENGLISH)
|
||||
this.pages.append(page)
|
||||
}
|
||||
}
|
||||
customElements.define('homework-layout', HomeworkLayout)
|
||||
96
javascript/homeworkPage.js
Normal file
96
javascript/homeworkPage.js
Normal file
@@ -0,0 +1,96 @@
|
||||
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>
|
||||
</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.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))
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
console.log("Page of type " + this.type + " added to session")
|
||||
if(this.type == HomeworkTypes.VOCABULARY_ENGLISH) {
|
||||
const row = new HomeworkVocabularyTask()
|
||||
this.content.append(row)
|
||||
}
|
||||
}
|
||||
|
||||
newVocabulary() {
|
||||
if(this.type == HomeworkTypes.VOCABULARY_ENGLISH) {
|
||||
const row = new HomeworkVocabularyTask()
|
||||
this.content.append(row)
|
||||
console.log("New row in page")
|
||||
}
|
||||
}
|
||||
|
||||
saveVocabularies() {
|
||||
console.log("Saving page content")
|
||||
}
|
||||
|
||||
trainVocabulary() {
|
||||
console.log("Train!!")
|
||||
}
|
||||
}
|
||||
customElements.define('homework-page', HomeworkPage)
|
||||
78
javascript/homeworkSession.js
Normal file
78
javascript/homeworkSession.js
Normal file
@@ -0,0 +1,78 @@
|
||||
class HomeworkSession extends HomeworkElement {
|
||||
|
||||
constructor() {
|
||||
super()
|
||||
this.addEventListener('texts-loaded', this.updateTexts.bind(this))
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
let top = new HomeworkLayout()
|
||||
this.append(top)
|
||||
console.log("Session added to DOM")
|
||||
}
|
||||
|
||||
static get observedAttributes () {
|
||||
return [ 'language' ]
|
||||
}
|
||||
|
||||
attributeChangedCallback(name, oldValue, newValue) {
|
||||
if(name == 'language') {
|
||||
if(oldValue === null) {
|
||||
console.log("Language initiated to " + newValue)
|
||||
} else {
|
||||
console.log("Language changed to " + newValue + " from " + oldValue)
|
||||
}
|
||||
this.changeLanguage(newValue)
|
||||
} else {
|
||||
console.log("Unknown property", name)
|
||||
}
|
||||
}
|
||||
|
||||
get language() {
|
||||
let languageCode = this.getAttribute("language")
|
||||
return languageCode
|
||||
}
|
||||
|
||||
set language(languageCode) {
|
||||
this.setAttribute("language", languageCode)
|
||||
}
|
||||
|
||||
async changeLanguage(languageCode) {
|
||||
let languageFile = "/resources/" + languageCode + ".json"
|
||||
let response = await fetch(languageFile)
|
||||
HomeworkSession.texts = await response.json()
|
||||
this.dispatchEvent(new CustomEvent('texts-loaded', { bubbles: true }))
|
||||
}
|
||||
|
||||
updateTexts() {
|
||||
HomeworkElement.updateTexts(this)
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
homeworkTypeChanged(event) {
|
||||
let homeworkType = event.target.value
|
||||
console.log("Changed homework type to " + homeworkType )
|
||||
let pages = this.querySelectorAll('.page')
|
||||
pages.forEach((page) => {
|
||||
page.classList.remove('active')
|
||||
})
|
||||
let page = null
|
||||
switch(homeworkType) {
|
||||
case 'math':
|
||||
page = this.querySelector('homework-page-math')
|
||||
page.classList.add('active')
|
||||
break
|
||||
case 'englishVocabulary':
|
||||
page = this.querySelector('homework-page-english-vocabulary')
|
||||
page.classList.add('active')
|
||||
break
|
||||
default:
|
||||
console.warn("Unknown type " + homeworkType)
|
||||
break
|
||||
}
|
||||
}
|
||||
*/
|
||||
}
|
||||
HomeworkSession.texts = { }
|
||||
customElements.define('homework-session', HomeworkSession)
|
||||
16
javascript/homeworkVocabularyTask.js
Normal file
16
javascript/homeworkVocabularyTask.js
Normal file
@@ -0,0 +1,16 @@
|
||||
class HomeworkVocabularyTask extends HomeworkElement {
|
||||
constructor () {
|
||||
super()
|
||||
this.innerHTML =
|
||||
`
|
||||
<input type="text" class="source-language" id="source">
|
||||
<input type="text" class="target-language" id="target">
|
||||
<div></div>
|
||||
`
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
console.log("New task")
|
||||
}
|
||||
}
|
||||
customElements.define('homework-vocabulary-task', HomeworkVocabularyTask)
|
||||
Reference in New Issue
Block a user