Get this puppy started

htdocs/js/index.js

@@ -1,40 +1,122 @@
 // Main
 (() => {
-
-  const UiState = (()=> {
-    function _isWalletLocked() {
-      return window.uiState.isWalletLocked;
+  window.uiUpdate = (()=> {
+    function setInnerText(id, balance) {
+      document.getElementById(id).innerText = balance;
     }
 
-    function _isWalletConfigured() {
-      return window.uiState.isWalletConfigured;
+    const _renter = (()=> {
+      return {
+        setAllocatedFunds: (currency)=> {
+          setInnerText('ID_Renter_AllocatedFunds', currency);
+        },
+        setUsedFunds: (currency)=> {
+          setInnerText('ID_Renter_UsedFunds', currency);
+        },
+        setAvailableFunds: (currency)=> {
+          setInnerText('ID_Renter_AvailableFunds', currency);
+        },
+        setHostCount: (count)=> {
+          setInnerText('ID_Renter_HostCount', count);
+        },
+        setEstimatedSpace: (space)=> {
+          setInnerText('ID_Renter_EstimatedSpace', space);
+        },
+        setEstimatedCost: (currency)=> {
+          setInnerText('ID_Renter_EstimatedCost', currency);
+        },
+        setAvailableSpace: (space)=> {
+          setInnerText('ID_Renter_AvailablSpace', space);
+        },
+        setDownloadCost: (currency)=> {
+          setInnerText('ID_Renter_EstimatedDownloadCost', currency);
+        },
+        setUploadCost: (currency)=> {
+          setInnerText('ID_Renter_EstimatedUploadCost', currency);
+        }
+      };
+    })();
+
+    const _wallet = (()=> {
+      return {
+        setConfirmedBalance: (balance)=> {
+          setInnerText('ID_WalletConfirmedBalance', balance);
+        },
+        setUnconfirmedBalance: (balance)=> {
+          setInnerText('ID_WalletBalanceUnconfirmed', balance);
+        },
+        setTotalBalance: (balance)=> {
+          setInnerText('ID_WalletTotalBalance', balance);
+        },
+        setReceiveAddress: (address)=> {
+          setInnerText('ID_WalletReceiveAddress', address);
+        }
+      };
+    });
+
+    return {
+      Renter: _renter,
+      Wallet: _wallet,
+      setBlockHeight: (height) => {
+        setInnerText('ID_BlockHeight', height);
+      }
+    };
+  })();
+
+  const UiState = (()=> {
+    function _clientVersion() {
+      return window.uiState.clientVersion;
     }
 
     function _isOnline() {
       return window.uiState.isOnline;
     }
 
+    function _isWalletConfigured() {
+      return window.uiState.isWalletConfigured;
+    }
+
+    function _isWalletLocked() {
+      return window.uiState.isWalletLocked;
+    }
+
+    function _serverVersion() {
+      return window.uiState.serverVersion;
+    }
+
     return {
-      isWalletLocked: _isWalletLocked,
+      clientVersion: _clientVersion,
+      isOnline: _isOnline,
       isWalletConfigured: _isWalletConfigured,
-      isOnline: _isOnline
+      isWalletLocked: _isWalletLocked,
+      serverVersion: _serverVersion
     };
   })();
 
-  const UiActions = (() => {
-    function _unlockWallet(pwd, cb) {
-      console.log('Unlock wallet');
-      return window.uiActions.unlockWallet(pwd, cb);
-    }
-
+  const AppActions = (() => {
     function _createWallet(cb) {
       console.log('Create wallet');
-      return window.uiActions.createWallet(cb);
+      return window.appActions.createWallet(cb);
+    }
+
+    function _startApp() {
+      window.appActions.startApp();
+    }
+
+    function _stopApp() {
+      window.appActions.stopApp();
+    }
+
+    function _unlockWallet(pwd, cb) {
+      console.log('Unlock wallet');
+      return window.appActions.unlockWallet(pwd, cb);
     }
 
     return {
-      unlockWallet: _unlockWallet,
-      createWallet: _createWallet
+      createWallet: _createWallet,
+      startApp: _startApp,
+      stopApp: _stopApp,
+      unlockWallet: _unlockWallet
     };
   })();
 
@@ -55,54 +137,83 @@
   }
 
   function displayErrorPopup(title, msg, cb) {
+    alert(msg);
     if (cb) {
       cb();
     }
   }
 
+  function beginMainApplication() {
+    AppActions.startApp();
+    setMainWindow('app_window');
+  }
+
+  function handleUnlockWallet() {
+    setMainWindow('unlock_window');
+
+    const unlockButton = document.getElementById('ID_UnlockWalletButton');
+    unlockButton.onclick = () => {
+      unlockButton.onclick = null;
+      const password = document.getElementById('ID_WalletUnlockPwd');
+      if (AppActions.unlockWallet(password.value, (success, reason) => {
+          password.value = '';
+          if (success) {
+            beginMainApplication();
+          } else {
+            displayErrorPopup('Error', reason, () => {
+              handleUnlockWallet();
+            });
+          }
+        })) {
+        setMainWindow('unlocking_window');
+      }
+    };
+  }
+
+  function handleWalletCreated(seed) {
+    setMainWindow('wallet_created_window');
+    document.getElementById('ID_WalletSeed').innerText = seed;
+    const button = document.getElementById('ID_WalletCreatedButton');
+    button.onclick = ()=> {
+      button.onclick = null;
+      handleUnlockWallet();
+    };
+  }
+
+  function handleCreateWallet() {
+    setMainWindow('create_window');
+    const createButton = document.getElementById('ID_CreateWalletButton');
+    createButton.onclick = () => {
+      createButton.onclick = null;
+      AppActions.createWallet((success, reasonOrSeed) => {
+        if (success) {
+          handleWalletCreated(reasonOrSeed);
+        } else {
+          displayErrorPopup('Error', reasonOrSeed, () => {
+            handleCreateWallet();
+          });
+        }
+      });
+    };
+  }
+
   window.addEventListener('load', ()=> {
     console.log('Main window load');
+    AppActions.stopApp();
+    document.getElementById('ID_SiaDrive').innerText = 'SiaDrive ' + UiState.clientVersion();
+    document.getElementById('ID_ServerVersion').innerText = UiState.serverVersion();
     if (UiState.isOnline()) {
       if (UiState.isWalletConfigured()) {
         if (UiState.isWalletLocked()) {
-          setMainWindow('unlock_window');
-          const unlockButton = document.getElementById('ID_UnlockWalletButton');
-          unlockButton.onclick = ()=> {
-            const password = document.getElementById('ID_WalletUnlockPwd');
-            if (UiActions.unlockWallet(password.value, (success, reason) => {
-                password.value = '';
-                if (success) {
-                  setMainWindow('app_window');
-                } else {
-                  displayErrorPopup('Error', reason, ()=> {
-                    location.reload();
-                  });
-                }
-              })) {
-              setMainWindow('unlocking_window');
-            }
-          };
+          handleUnlockWallet();
         } else {
-          setMainWindow('app_window');
+          beginMainApplication();
         }
       } else {
-        setMainWindow('create_window');
-        const createButton = document.getElementById('ID_CreateWalletButton');
-        createButton.onclick = () => {
-          UiActions.createWallet((success, reasonOrSeed) => {
-            if (success) {
-              setMainWindow('display_seed_window');
-            } else {
-              displayErrorPopup('Error', reasonOrSeed, ()=> {
-                location.reload();
-              });
-            }
-          });
-        };
+        handleCreateWallet();
       }
     } else {
       setMainWindow('offline_window');
     }
   });
-
 })();