From c07fe897f09162f79776d21017cbacb23facf234 Mon Sep 17 00:00:00 2001
From: Ximi1970 <ximi.github@gmail.com>
Date: Wed, 8 Jan 2020 23:36:19 +0100
Subject: [PATCH] Create tree basics

---
 webext/js/options_accounts.js | 79 +++++++++++++++++++++++++++++++++++
 webext/js/options_treeview.js |  2 +-
 webext/options.html           | 11 ++++-
 3 files changed, 89 insertions(+), 3 deletions(-)
 create mode 100644 webext/js/options_accounts.js

diff --git a/webext/js/options_accounts.js b/webext/js/options_accounts.js
new file mode 100644
index 0000000..a496a73
--- /dev/null
+++ b/webext/js/options_accounts.js
@@ -0,0 +1,79 @@
+var SysTrayX = {};
+
+SysTrayX.Accounts = {
+  
+  initialized: false,
+  
+  init: function() {
+    if (this.initialized) {
+      console.log("Accounts already initialized");
+      return;
+    }
+    console.log("Enabling Accounts");
+
+    this.getAccounts().then(this.getAccountsCb);
+
+    this.initialized = true;
+  },
+
+  /*
+   * Use the messages API to get the unread messages (Promise)
+   * Be aware that the data is only avaiable inside the callback
+   */
+  getAccounts: async function() {
+    return await browser.accounts.list();
+  },
+  
+  /*
+   * Callback for getAccounts
+   */
+  getAccountsCb: function(mailAccount) {
+    let accounts = new Object();
+    let i;
+    
+    for (i=0 ; i < mailAccount.length; i++) {
+      console.debug("SysTrayX accounts id: "+mailAccount[i].id);
+      console.debug("SysTrayX accounts name: "+mailAccount[i].name);
+      console.debug("SysTrayX accounts type: "+mailAccount[i].type);
+      
+      accounts[mailAccount[i].type] = [];
+      accounts[mailAccount[i].type].push({id: mailAccount[i].id, name: mailAccount[i].name});
+    };
+    
+    console.debug("SysTrayX Storage: "+accounts.imap[0].name);
+
+    for (let prop in accounts ) {
+      console.debug( prop + ": " + accounts[prop][0].name );
+    }
+    
+    let p = document.getElementsByClassName("account");
+    p[0].innerHTML = accounts.imap[0].name;
+
+    
+      
+    // Get base
+    let treeBase = document.getElementsByClassName("accountstree");
+
+    for (let prop in accounts ) {
+
+      console.debug( "Tree: " + prop + ": " + accounts[prop][0].name );
+      
+      let typeLi = document.createElement('li');
+      
+      let typeSpan = document.createElement('span');
+      typeSpan.setAttribute("class","caret");
+      let typeText = document.createTextNode(prop);
+      typeSpan.appendChild(typeText);
+      
+      typeLi.appendChild(typeSpan);
+      
+      
+      treeBase[0].appendChild(typeLi);
+
+    };
+
+  },
+
+};
+
+SysTrayX.Accounts.init();
diff --git a/webext/js/options_treeview.js b/webext/js/options_treeview.js
index c918819..baa44c3 100644
--- a/webext/js/options_treeview.js
+++ b/webext/js/options_treeview.js
@@ -10,7 +10,7 @@ for (i = 0; i < toggler.length; i++) {
 
 var togglerBox = document.getElementsByClassName("box");
 
-for (i = 0; i < toggler.length; i++) {
+for (i = 0; i < togglerBox.length; i++) {
   togglerBox[i].addEventListener("click", function() {
     this.classList.toggle("check-box");
   });
diff --git a/webext/options.html b/webext/options.html
index 29a3cff..0525644 100644
--- a/webext/options.html
+++ b/webext/options.html
@@ -41,8 +41,8 @@
     <ul id="myUL">
       <li><span class="caret">Beverages</span>
         <ul class="nested">
-          <li><span class="box">Water</li>
-          <li><span class="box">Coffee</li>
+          <li><span class="box">Water</span></li>
+          <li><span class="box">Coffee</span></li>
           <li><span class="caret">Tea</span>
             <ul class="nested">
               <li>
@@ -73,6 +73,11 @@
     <h3>Mail</h3>
     <p>Mail options here.</p>
     
+    <p class="account">Account</p>
+    
+    <ul class="accountstree">
+    </ul>
+
     <ul class="tree">
       <li><a href="#">Part 1</a>
         <ul>
@@ -207,6 +212,8 @@
 <script src='js/options_treetable.js'></script>
 <script src='js/options_treeview.js'></script>
 
+<script src="js/options_accounts.js"></script>
+
 <script src="options.js"></script>
 
 </body>