updateicons.htm

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Update Icon</title>
</head>

<body style="width:300px">
  <h1>Update Icon</h1>
  <table style="width: 300px;">
    <tr>
      <td style="width:60px"><img id="icon" /></td>
      <td>
        <select id="sel" style="width:10em">
          <option selected disabled>select...</option>
        </select>
        <progress value=0 max=1 style="width:12em"></progress>
        <div id='info'>&nbsp;</div>
      </td>
    </tr>
    <tr>
      <td colspan=2 style="text-align:right">
        <button>Start</button>
      </td>
    </tr>
  </table>
  <hr>
  <p style="text-align: right;"><a href="/microide.htm" style="float: right;text-decoration: none;">&gt;&gt;&gt;</a></p>
  <script>
    var repo = 'https://raw.githubusercontent.com/HomeDing/WebIcons/master/favicons/'; // /socket/favicon.svg';
    var eStart = document.querySelector('button');
    var eBar = document.querySelector('progress');
    var eInfo = document.querySelector('#info');
    var eImg = document.querySelector('#icon');
    var work = { status: '0', list: null, files: 0, done: 0 };
    var timer = 0;
    var seed = "?" + new Date().valueOf();
    var iname = '';

    function log(t) {
      eInfo.innerText = t;
    } // log

    function next() {
      work.status = 'r';
    } // next

    var selObj = document.querySelector('#sel');
    var list = 'and,bme680,bulb,button,config,default,dht,digitalin,digitalout,door,home,minus,ntptime,ota,plus,pms,power,radio,remote,rfsend,rotary,schedule,socket,ssdp,switch,time,timer,tool,value,water,wifi'.split(',');


    list.forEach(function (e) {
      var opt = document.createElement('option');
      opt.value = opt.textContent = e;
      selObj.appendChild(opt);
    });

    selObj.addEventListener('input', function (evt) {
      iname = evt.srcElement.value;
      eImg.src = repo + evt.srcElement.value + '/favicon.svg';
    });

    // list of files
    function doStart() {
      if (!iname) {
        log('select an icon name...');
      } else {
        log('loading ' + iname + ' icons');
        work.list = ['favicon.svg', 'favicon48.png', // 'favicon144.png', 'favicon180.png', 
          'favicon192.png', 'favicon270.png', 'favicon512.png'];
        work.files = work.list.length;
        work.status = 'r';
        timer = window.setInterval(step, 200);
      }
    } // doStart()

    // grab next file
    function doFile() {
      work.status = 'w'; // wait
      var theItem = work.list.shift();

      // set progress
      work.done++;
      eBar.max = work.files;
      eBar.value = work.done;
      eInfo.innerText = theItem; // log

      if (theItem[0] == '-') {
        // delete the file
        fetch('/' + theItem.substring(1), { method: 'DELETE' })
          .then(next).catch(next);

      } else {
        fetch(repo + iname + '/' + theItem + seed)
          .catch(next)
          .then(function (result) {
            return result.arrayBuffer();
          })
          .then(function (buf) {
            var formData = new FormData();
            formData.append('file', new Blob([buf]), '/' + theItem);
            fetch('/', { method: 'POST', body: formData }).then(next);
          });
      };
    } // doFile()


    function step() {
      if (work.status == '0') {
      } else if (work.status == 'r') { // run
        if (work.list.length == 0)
          work.status = 'e';
        else
          doFile();
      } else if (work.status == 'e') { // end
        if (timer) {
          window.clearInterval(timer);
          log('done');
        }
        timer = 0;
      }
    }

    eStart.addEventListener('click', doStart);
  </script>
</body>

</html>