siadrive/htdocs/js/index.js

// Main
(() => {
  window.uiUpdate = (()=> {
    function setInnerText(id, balance) {
      document.getElementById(id).innerText = balance;
    }

    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);
      },
      setServerVersion: (version) => {
        setInnerText('ID_ServerVersion', version);
      }
    };
  })();


  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;
    }

    return {
      clientVersion: _clientVersion,
      isOnline: _isOnline,
      isWalletConfigured: _isWalletConfigured,
      isWalletLocked: _isWalletLocked
    };
  })();

  const AppActions = (() => {
    function _createWallet(cb) {
      console.log('Create wallet');
      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 {
      createWallet: _createWallet,
      startApp: _startApp,
      stopApp: _stopApp,
      unlockWallet: _unlockWallet
    };
  })();

  function setMainWindow(name) {
    console.log('Setting main window: ' + name);
    const elem = document.getElementById(name);
    const mainWindow = document.getElementById('main_window');
    if (mainWindow.childElementCount === 1) {
      const curElem = mainWindow.firstChild;
      mainWindow.removeChild(curElem);
      curElem.classList.add('hidden-element');
      document.body.appendChild(curElem);
    }

    elem.parentElement.removeChild(elem);
    elem.classList.remove('hidden-element');
    mainWindow.appendChild(elem);
  }

  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 = '...';
    if (UiState.isOnline()) {
      if (UiState.isWalletConfigured()) {
        if (UiState.isWalletLocked()) {
          handleUnlockWallet();
        } else {
          beginMainApplication();
        }
      } else {
        handleCreateWallet();
      }
    } else {
      setMainWindow('offline_window');
    }
  });
})();