vara commit

src/tjts5901/frontend/mainfront.js

@@ -5,6 +5,7 @@
 //
 
 let currencyTable = {}
+let categoryTable = {}
 
 
 //Initialize page
@@ -14,6 +15,10 @@ window.addEventListener("load", async () => {
 
         //Fetch Currency information and add data to forms
         initCurrencies()
+
+
+        //Fetch categories, parse and add data to forms
+        initCats()
         
         
 
@@ -37,7 +42,22 @@ window.addEventListener("load", async () => {
 
 const initCurrencies =  () => {
         currencyTable = getExchangeRates() //TODO: make async when connection added
-        addCurrencyOptions() 
+
+        //Add currency options
+        //First nonseelctable option
+
+
+        let op =document.createElement('option')
+        op.setAttribute('value', '')
+        op.textContent = "Choose currency"
+        op.setAttribute('disabled', "")
+        op.setAttribute('selected', "")
+        op.setAttribute('hidden', "")
+        
+        //get parent tag
+        let currSel = document.getElementById("aafCurr")
+console.log(Object.values(currencyTable))
+        addOptions(currSel, Object.values(currencyTable), 'cur', 'cur', op )
 
 
 
@@ -47,42 +67,95 @@ const initCurrencies =  () => {
 //TODO: Get exchangerates from the bank
 const getExchangeRates = () => {
         console.error("METHOD getExchangeRates NOT IMPLEMENTED")
-        return {'USD': 1.23, "Monopoly money": 2}
+        return {'USD': {'cur': "USD", "rate": 1.23}, "Monopoly money": {'cur': 'Monopoly money', 'rate': 2}} 
+}
+
+
+//Category related functions
+
+//TODO: Get category, subcategory object
+
+const getCategories = () => {
+        console.error("METHOD getCategories not implemented yet.")
+        return {"Animals":{'cat': 'Animals',  'subcats':[{'name ':"Wild animals"},{'name': {'name': "Dogs"}},{'name': "Cats"}, {'name': "Other domestic animals" }]}, "Electronics":{'cat': "Electronics", 'subcats': [{'name': "Phones"},{'name': "Laptops"},{'name': "Desktop"},{'name': "Game consoles"}, {'name': "TVs" },{'name': "Electric toothbrushes"}]} }
 }
 
-//Add currency options to bidding and add new auction forms
 
-const addCurrencyOptions =  ()=>{
+const initCats = ()=>{
+
+        categoryTable = getCategories() //TODO: make async when connection added
+
+        //Add category options
+        //First nonselectable option
+
+
+        let op =document.createElement('option')
+        op.setAttribute('value', '')
+        op.textContent = "Choose main category"
+        op.setAttribute('disabled', "")
+        op.setAttribute('selected', "")
+        op.setAttribute('hidden', "")
         
-        //List of html option elements
+        //get parent tag
+        let catSel = document.getElementById("aafCat")
+        addOptions(catSel, Object.values(categoryTable), 'cat', 'cat', op )
+
 
-        let options = []
+}
+
+const addSubCats = (cat) =>{
         
         let op =document.createElement('option')
         op.setAttribute('value', '')
-        op.textContent = "Choose currency"
+        op.textContent = "Choose subcategory (optional)"
         op.setAttribute('disabled', "")
         op.setAttribute('selected', "")
         op.setAttribute('hidden', "")
-        options.push(op)
-        for (let curr in currencyTable){
-                op = document.createElement('option')
-                op.setAttribute('value', curr)
-                op.textContent = curr
-                options.push(op)
-        }
 
-        //Add options to correct html elements
-        document.getElementById("aafCurr").append(...options)
-        //TODO: Add bidding currency selection here
+        let subCatSel = document.getElementById("aafSubCat")
+        addOptions(subCatSel, categoryTable[cat]['subcats'], 'name', "name", op)
+        
+}
+
+
 
 
+//Reusablle function to add options to select fields
+//parent = parent node
+//list = list of objects that are made to options
+//textTag :string = object key for option field textContent
+//valueTag :string = object key for option field value field
+//headerOption :option tag = option tag used as first option for giving input which is not automatically generated 
+const addOptions = (parent, list, textTag, valueTag, headerOption = null  ) => {
+        parent.appendChild(headerOption)
+        console.log(list)
+        for (let ob of list){
+                console.log(ob)
+                let op = document.createElement("option")
+                op.setAttribute('value', ob[valueTag])
+                op.textContent=ob[textTag]
+                parent.appendChild(op)
+        }
+
 }
 
+
+//Add event listener for form submit button click and category and currency change 
 const aaFormEventListenersInitializers = ()=>{
+
+        //Submit button click
         const aadButton = document.getElementById("aadButton")
         aadButton.addEventListener('click', (e) => {
                 e.preventDefault()
                 console.log("Button clicked. TODO: rest...")
+                let form = e.target.form
+                console.log(form)
+
+        })
+
+        //Category select change
+        const aadCatSelect = document.getElementById("aafCat")
+        aadCatSelect.addEventListener('change', () => {
+                addSubCats(aadCatSelect.value)
         })
 };

src/tjts5901/templates/index.html.j2

@@ -48,7 +48,7 @@
          
        </select>
        <label for="aafSubCat"> Choose subcategory: </label>
-       <select name="aaSubfCat" id="aafSubCat"  size="1">
+       <select name="aafSubCat" id="aafSubCat"  size="1">
          
        </select>