persistent app storage done

src/db.js

@@ -1,85 +1,205 @@
 import * as Storage from "@storage";
 import * as Env from "@env";
 import * as Sciter from "@sciter";
+
+/**
+ * @typedef appState
+ * @type {object}
+ * @property {string} version - number
+ * @property {object} realmListById - sciter storage Index collection, iterable  [key:string]:{realm:string, selected: boolean, id:string}
+ * @property {appSettings} appSettings
+ * @property {account[]} accounts
+ *
+ */
+/**
+ * @typedef realmlist
+ * @type {object}
+ * @property {string} id - string
+ * @property {boolean} selected
+ * @property {string} realm
+ */
+/**
+ * @typedef account
+ * @type {object}
+ * @property {string} name
+ * @property {string} id - string
+ * @property {boolean} selected
+ */
+/**
+ * @typedef appSettings
+ * @type {object}
+ * @property {string} tbcFolderPath
+ * @property {string} wotlkFolderPath
+ * @property {string} appMode
+ */
+
 class DB {
 
   constructor() {
-     const storage = Storage.open(Env.path("documents") + "/wow-launcher.db");
-     this.storage = storage;
-     this.root = storage.root || DB.initDb(storage);
+    const storage = Storage.open(Env.path("documents") + "/wow-launcher.db");
+    this.storage = storage;
+    /** @type {appState} */
+    this.root = storage.root || DB.initDb(storage);
   }
-static initDb(storage) {
-  storage.root = {
-     version: 1,
-     realmListById: storage.createIndex("string", true) // list of notes indexed by their UID
+  static initDb(storage) {
+    storage.root = {
+      version: 1,
+      realmListById: storage.createIndex("string", true), // list of notes indexed by their UID
+      appSettings: {
+        tbcFolderPath: '',
+        wotlkFolderPath: '',
+        appMode: 'tbc'
+      },
+      accounts: []
+    }
+    return storage.root;
+  }
+  destroy() {
+    this.root = undefined;
+    this.storage.close();
+    this.storage = undefined;
+  }
+  /**
+   *
+   * @param {string} realmStr
+   */
+  addRealmList(realmStr) {
+    const id = Sciter.uuid()
+    this.root.realmListById.set(id, {
+      realm: realmStr,
+      id,
+      selected: false
+    })
+    this.storage.commit()
+    this.eventDbUpdate()
+  }
+  deleteRealmList(id) {
+    this.root.realmListById.delete(id)
+    this.eventDbUpdate()
   }
-  return storage.root;
-}
-destroy(){
-  this.root = undefined;
-  this.storage.close();
-  this.storage = undefined;
-}
-addRealmList(realmStr) {
-  const id = Sciter.uuid()
-  this.root.realmListById.set(id, {
-     realm: realmStr,id,
-     selected:false
-  })
-  this.storage.commit()
-  this.eventDbUpdate()
-}
-deleteRealmList(id) {
-  this.root.realmListById.delete(id)
-  this.eventDbUpdate()
-}
 
-/**
- *
- * @returns [ ] array of {id:number,realm:string,selected:boolean}
- */
-getRealmLists() {
-  const index = this.root.realmListById
-  const res = [];
-  for (var obj of index)
-     res.push(obj)
-  return res;
-}
+  /**
+   *
+   * @returns {realmlist[]}
+   */
+  getRealmLists() {
+    const index = this.root.realmListById
+    const res = [];
+    for (var obj of index)
+      res.push(obj)
+    return res;
+  }
 
-getRealmListById(id) {
-  const realmlist = this.root.realmListById.get(id)
- return realmlist
-}
-/**
- * only to update realm string
- * @param {string} id
- * @param {string} value
- */
-editRealmList(id, value) {
-  const obj = this.getRealmListById(id);
-  obj.realm = value;
-  this.root.realmListById.set(id, obj);
-  this.storage.commit();
-  this.eventDbUpdate()
-}
-realmListSelected(id) {
-  const allRealms = this.getRealmLists();
-  const oldSelected = allRealms.find(el=>el.selected === true);
-  if(oldSelected){
-    oldSelected.selected = false;
-    this.root.realmListById.set(oldSelected.id, oldSelected)
-  }
-  const newSelected = this.getRealmListById(id);
-  newSelected.selected = true;
-  this.root.realmListById.set(id, newSelected)
+  /**
+   *
+   * @param {string} id
+   * @returns {realmlist}
+   */
+  getRealmListById(id) {
+    const realmlist = this.root.realmListById.get(id)
+    return realmlist
+  }
+  /**
+   * only to update realm string
+   * @param {string} id
+   * @param {string} value realmname
+   */
+  editRealmList(id, value) {
+    const obj = this.getRealmListById(id);
+    obj.realm = value;
+    this.root.realmListById.set(id, obj);
+    this.storage.commit();
+    this.eventDbUpdate()
+  }
+  /**
+   * update selected state
+   * @param {string} id
+   */
+  realmListSelected(id) {
+    const allRealms = this.getRealmLists();
+    const oldSelected = allRealms.find(el => el.selected === true);
+    if (oldSelected) {
+      oldSelected.selected = false;
+      this.root.realmListById.set(oldSelected.id, oldSelected)
+    }
+    const newSelected = this.getRealmListById(id);
+    newSelected.selected = true;
+    this.root.realmListById.set(id, newSelected)
 
-}
+  }
 
-eventDbUpdate() {
-  document.post(new Event("db-update",{bubbles:true,data:this}));
-}
+  addAccount(accName) {
+    const newAcc = {
+      name: accName,
+      id: Sciter.uuid(),
+      selected: false
+    }
+    this.root.accounts.unshift(newAcc);
+    this.storage.commit();
+    this.eventDbUpdate()
+  }
+  getAccount(id) {
+    return this.root.accounts.find(el => el.id === id)
+  }
+  getAllAccs() {
+    return this.root.accounts
+  }
+  deleteAcc(id) {
+    const oldAccs = this.getAllAccs();
+    this.root.accounts = oldAccs.filter(el => el.id !== id);
+    this.storage.commit();
+    this.eventDbUpdate()
+  }
+  editAccName(id, name) {
+    const accs = this.root.accounts.map(el => {
+      if (el.id === id) el.name = name
+      return el;
+    })
+    this.root.accounts = accs;
+    this.storage.commit();
+    this.eventDbUpdate()
+  }
+  selectAccount(id) {
+    const accs = this.getAllAccs().map(el => {
+      if (el.id == id) el.selected = true;
+      else el.selected = false;
+      return el;
+    })
+    this.root.accounts = accs;
+    this.storage.commit();
+  }
+  setAppMode(label) {
+    this.root.appSettings.appMode = label;
+    this.storage.commit();
+  }
+  getAppMode() {
+    return this.root.appSettings.appMode;
+  }
+  /**
+   * 
+   * @returns {appSettings}
+   */
+  getAppSettings() {
+    return this.root.appSettings
+  }
+  /**
+   *
+   * @param {"wotlkFolderPath" | "tbcFolderPath"} mode tbcFolderPath | wotlkFolderPath
+   * @param {string} path wow folder path
+   */
+  setWoWPath(mode, path) {
+    this.root.appSettings[mode] = path;
+    this.storage.commit();
+    console.log(this.root.appSettings)
+  }
 
-}
+  eventDbUpdate() {
+    document.post(new Event("db-update", {
+      bubbles: true,
+      data: this
+    }));
+  }
 
- export const db = new DB()
+}
 
+export const db = new DB()

src/main.htm

@@ -6,7 +6,7 @@
     <link rel="stylesheet" href="styles.css"/>
     <style>
       body {
-        background-image: url("./bg.JPG");
+        background-image: url("./bgtbc.JPG");
       }
     </style>
   </head>
@@ -24,9 +24,9 @@
 <div#middle-section>
 <div#middle-up>
   <button#settings-btn .btn><icon|cog .center  name="path_settings"/></button>
-  <div#middle-up-select>
-    <button|radio(group) checked>TBC</button>
-    <button|radio(group)>WoTLK</button>
+  <div#wow-v-select>
+    <button|radio(group) checked key="tbc">TBC</button>
+    <button|radio(group) key="wotlk">WoTLK</button>
   </div>
 </div>
 <button#launch-btn .btn>Launch WoW</button>
@@ -36,19 +36,14 @@
   <div.column-header>
     <button.edit-select-btn #accounts-btn .btn>edit accounts<icon|edit /></button>
 </div>
+<div#acc-select-wrap>
   <select|list.select>
     <option>First</option>
     <option selected key="1235">Second</option>
-    <option>Third</option>
-    <option>Fourth</option>
-    <option>Fifth</option>
-    <option>Sixth</option>
-    <option>Seventh</option>
-    <option>Eight</option>
-    <option>Nineth</option>
     <option>Tenth</option>
  </select>
 </div>
+</div>
 </div>
   </body>
 </html>

src/main.js

@@ -44,9 +44,35 @@ function renderRealmSelect() {
    root.innerHTML = html;
 }
 
+function renderAccSelect(){
+   const root = document.querySelector('#acc-select-wrap');
+   const data = db.getAllAccs();
+   const isThereSelected = data.some(el=>el.selected);
+   if(!isThereSelected && data.length  > 0) data[0].selected = true;
+   const html = `
+   <select|list.select#acc-select>
+   ${data.reduce((acc,el)=>acc+=`<option ${el.selected ? 'selected=""': ''} key="${el.id}">${el.name}</option>`, '')}
+</select>
+   `;
+   root.innerHTML = html;
+}
+
+function appMode() {
+   const data = db.getAppMode();
+   console.log(data)
+   const btns = document.querySelector('#wow-v-select').querySelectorAll('button');;
+   btns.forEach(el=>{
+      if(el.getAttribute("key") === data)  el.state.checked = true;
+      else (el.state.checked = false)
+   })
+   document.body.style.backgroundImage = `url('bg${data}.jpg')`;
+}
+
 document.on('ready', () => {
 
    renderRealmSelect();
+   renderAccSelect()
+   appMode()
 })
 document.on('beforeunload', () => db.destroy())
 
@@ -62,10 +88,22 @@ accountsBtn.addEventListener('click', () => settingsWin('accounts_settings'))
 document.on("db-update",()=>{
    //re render
    renderRealmSelect();
+   renderAccSelect()
 })
 
 
-document.on("click",  "select#realm-select", function(e){
+document.on("click",  "select#realm-select", (e)=>{
    const key = e.target.getAttribute("key");
    db.realmListSelected(key)
+})
+
+document.on("click",  "select#acc-select", (e)=>{
+   const key = e.target.getAttribute("key");
+   db.selectAccount(key)
+})
+
+document.on("click", "#wow-v-select",(e)=>{
+   const key = e.target.getAttribute("key");
+   db.setAppMode(key);
+   document.body.style.backgroundImage = `url('bg${key}.jpg')`;
 })