index.html

<!DOCTYPE html>
<html lang="en" class="">
  <head>
    <meta charset='utf-8'>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
    <title>Install Tasmota</title>
    <style>
      div,fieldset,input,select{padding:5px;font-size:1em;}
      fieldset{background:#4f4f4f;}
      p{margin:0.5em 0;}
      input{width:100%;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;background:#dddddd;color:#000000;}
      input[type=checkbox],input[type=radio]{width:1em;margin-right:6px;vertical-align:-1px;}
      input[type=range]{width:99%;}
      select{width:100%;background:#dddddd;color:#000000;}
      textarea{resize:vertical;width:98%;height:318px;padding:5px;overflow:auto;background:#1f1f1f;color:#65c115;}
      body{text-align:center;font-family:verdana,sans-serif;background:#252525;}
      td{padding:0px;}
      button{border:0;border-radius:0.3rem;background:#1fa3ec;color:#faffff;line-height:2.4rem;font-size:1.2rem;width:100%;-webkit-transition-duration:0.4s;transition-duration:0.4s;cursor:pointer;}
      button:hover{background:#0e70a4;}
      .bred{background:#d43535;}
      .bred:hover{background:#931f1f;}
      .bgrn{background:#47c266;}
      .bgrn:hover{background:#5aaf6f;}
      a{color:#1fa3ec;text-decoration:none;}
      .p{float:left;text-align:left;}
      .q{float:right;text-align:right;}
      .r{border-radius:0.3em;padding:2px;margin:6px 2px;}
      .pick-variant{margin-bottom:16px;}
      .date_pick{display:inline-block;width: 33%;}
      #drop-area {
        border: 2px dashed #ccc;
        border-radius: 20px;
        width: 480px;
        margin: auto;
        padding: 20px;
      }
      #drop-area.highlight {
        border-color: #1fa3ec;
      }
    </style>
    <script
      type="module"
      src="https://unpkg.com/tasmota-esp-web-tools@8.1.8/dist/web/install-button.js?module"
    ></script>
    <!-- <script type="module">import * as Module from "./js/tasmota_gh_helper.js"</script> -->
    <script>

        var releases = null;
        var date_filter = null;
        var build_filter = ["d","r"];
        var local_file = null
        var virtual_manifest = {"name": "","version": "","new_install_prompt_erase": true,"builds": [
          { "chipFamily": "ESP32","parts": [{ "path": "", "offset": 0 }]},
          { "chipFamily": "ESP32-C2","parts": [{ "path": "", "offset": 0 }]},
          { "chipFamily": "ESP32-C3","parts": [{ "path": "", "offset": 0 }]},
          { "chipFamily": "ESP32-C6","parts": [{ "path": "", "offset": 0 }]},
          { "chipFamily": "ESP32-S2","parts": [{ "path": "", "offset": 0 }]},
          { "chipFamily": "ESP32-S3","parts": [{ "path": "", "offset": 0 }]},
          { "chipFamily": "ESP8266","parts": [{ "path": "", "offset": 0 }]}
        ]};


        function DateIsNotSelected(date){
            let year = document.querySelector("#pick-year-selector").value;
            let month = document.querySelector("#pick-month-selector").value;
            let day = document.querySelector("#pick-day-selector").value;
            let data = date.split("-");
            if(year != "all" && year != data[0])
            {
                return true;
            }
            if(month != "all" && month != data[1])
            {
                return true;
            }
            if(day != "all" && day != data[2])
            {
                return true;
            }
            return false;
        }

        function BuildTypeNotSelected(type){
          if(build_filter.includes(type)){
            return false;
          }
          return true;
        }

        function makeReleaseSelector(data){
            let sel=document.querySelector("#pick-release-selector");
            while(sel.childElementCount!=0){
              sel.removeChild(sel.childNodes[0]);
            }
            let lines = data.split("\n").reverse();
            console.log(data);
            var duplicates = [];
            for (opt_group of lines){
                if (opt_group.length < 10) continue;
                if(duplicates.includes(opt_group)){
                  continue;
                }
                duplicates.push(opt_group);
                var og=document.createElement('option');
                const tag_data = opt_group.split(".");
                if(DateIsNotSelected(tag_data[0])){
                  continue;
                }
                if(BuildTypeNotSelected(tag_data[1])){
                  continue;
                }
                og.label = tag_data[0] + "  (commit:" + tag_data[2].substring(0,8) + "...)";
                og.value = opt_group;

                var build = "Pre-release:\n"
                if(tag_data=="r"){
                  build = "Release:\n"
                }
                og.title = build;
                og.title += "Build date: " + tag_data[0] + "\n";
                og.title += "Commit: " + tag_data[2] + "\n";

                sel.appendChild(og);
                // console.log(opt_group,opt_group.length,data[opt_group]);
            }
            sel.addEventListener("change", () => {
               initVariantSelector(sel.value);
            });
        }

        function makeDateFilter(data){
            let lines = data.split("\n");
            date_filter = {};
            for(line of lines){
                let date = (line.split(".")[0]).split("-");
                let year = date[0];
                let month = date[1];
                let day = date[2];

                if(year in date_filter == false){
                    date_filter[year] = {};
                }
                if(month in date_filter[year] == false){
                    date_filter[year][month] = [];
                }
                if(date_filter[year][month].includes(day) == false){
                    date_filter[year][month].push(day);
                }
            }
        }

        function makeYearSelector(){
            let first=document.createElement('option');
            first.label = "all";
            first.value = "all";
            let sel=document.querySelector("#pick-year-selector");
            while(sel.childElementCount!=0){
                sel.removeChild(sel.childNodes[0]);
            }
            sel.appendChild(first);
            for(const [year,v] of Object.entries(date_filter)){
                if(year == ""){
                        continue;
                    }
                var o=document.createElement('option');
                o.label = year;
                o.value = year;
                sel.appendChild(o);
            }
            sel.addEventListener("change", () => {
                makeMonthSelector(sel.value);
                let month = document.querySelector("#pick-month-selector");
                makeDaySelector(sel.value,month.value);
                makeReleaseSelector(releases);
            });
        }

        function makeMonthSelector(year){
            let first=document.createElement('option');
            first.label = "all";
            first.value = "all";
            let sel=document.querySelector("#pick-month-selector");
            while(sel.childElementCount!=0){
                sel.removeChild(sel.childNodes[0]);
            }
            sel.appendChild(first);
            if(year == null || year == "all" ){
                return;
            }
            for(const [month,v] of Object.entries(date_filter[year])){
                var o=document.createElement('option');
                o.label = month;
                o.value = month;
                sel.appendChild(o);
            }
            sel.addEventListener("change", () => {
                let year = document.querySelector("#pick-year-selector");
                makeDaySelector(year.value,sel.value);
                makeReleaseSelector(releases);
            });
        }

        function makeDaySelector(year,month){
            let first=document.createElement('option');
            first.label = "all";
            first.value = "all";
            let sel=document.querySelector("#pick-day-selector");
            while(sel.childElementCount!=0){
                sel.removeChild(sel.childNodes[0]);
            }
            sel.appendChild(first);
            if(year == null || month == null || year == "all" || month == "all"){
                return;
            }
            for(day of date_filter[year][month]){
                var o=document.createElement('option');
                o.label = day;
                o.value = day;
                sel.appendChild(o);
            }
            sel.addEventListener("change", () => {
                makeReleaseSelector(releases);
            });
        }

        function makeDateSelector(data){
          if(releases == null){
            releases = data;
          }
          if(date_filter == null){
            makeDateFilter(data);
          }
          makeYearSelector();
          makeMonthSelector();
          makeDaySelector();
          let radio = document.getElementsByClassName("build_type_select");
          console.log(radio);
          for(el of radio){
            console.log(el);
            el.addEventListener("click", () => {
              let btn = document.querySelector('input[name="build_type"]:checked')
              build_filter = [btn.value];
              if(btn.value == "a"){
                build_filter = ["r","d"];
              }
              makeReleaseSelector(releases);
            });
          }

          makeReleaseSelector(data);
        }

        function filterByYear(year){
            makeDateSelector(releases);
        }

        function useFallback(){
            let els = document.getElementsByClassName("needs_cors");
            for(el of els){
              console.log(el);
              el.setAttribute("style","visibility: collapse;");
            }
            let sel=document.querySelector("#pick-release-selector");
            console.log(sel)
            var el = document.createElement('p');
            el.innerHTML = "To access our GitHub releases page and directly flash firmware binaries<br>from there including older versions<br>you have to turn off CORS in your browser.<br>(i.e. with browser extension: CORS unblock)";
            sel.replaceWith(el);
            fetch('https://raw.githubusercontent.com/tasmota/install/firmware/manifests.json')
            .then(response => response.json())
            .then(data => makeVariantSelector(data));
        }

        function getLatestTag(){
             fetch('https://raw.githubusercontent.com/tasmota/install/firmware/tag_latest.txt')
            .then(x => x.text())
            .then(t =>testCORS(t));
        }

        async function testCORS(t){
          try{
            const resp = await fetch('https://github.com/tasmota/install/releases/download/'+ t + '/manifests_release.json', {mode:"cors"
            });
            console.log(resp);
          }
          catch(error){
            console.log("CORS is blocking");
            useFallback();
            return;
          }
          console.log("CORS is not blocking");
          initVariantSelector(t);
          fetch('https://raw.githubusercontent.com/tasmota/install/firmware/tag.txt')
          .then(x => x.text())
          .then(t => {makeReleaseSelector(t,"all"); makeDateSelector(t);})
        }

        function initVariantSelector(tag){
            fetch('https://github.com/tasmota/install/releases/download/'+ tag + '/manifests_release.json')
            .then(response => response.json())
            .then(data => makeVariantSelector(data));
            getFirmwareVersion(tag);
        }

        function makeVariantSelector(data){
            if(data.length == 0){
              console.log(data);
              return false;
            }
            const sel=document.querySelector("#pick-variant-selector");
            while (sel.firstChild) {
              sel.removeChild(sel.firstChild);
            }

            console.log(data);
            for (opt_group in data){
                var og=document.createElement('optgroup');
                og.label = opt_group;
                sel.appendChild(og);
                console.log(opt_group,data[opt_group]);
                let firmware_label = document.querySelector("#firmware-version");
                for (fw of data[opt_group]){
                    // console.log(data[opt_group][fw]);
                    var opt=document.createElement('option');
                    opt.label = fw['name'];
                    let version = fw['version'];
                    if(version == undefined){
                      //firmware_label.innerHTML = "&nbsp;";
                    }
                    else{
                      firmware_label.innerText = version;
                    }
                    opt.value = fw['path'];
                    opt.title = "Supported chipfamilies:\n"
                    for (chipFamily of fw['chipFamilies']){
                        opt.title += chipFamily + "\n";
                    }
                    console.log( opt.value);
                    og.appendChild(opt);
                }
            }
            return true;
        }

        function getFirmwareVersion(tag){
            let commit = tag.split(".")[2];
            console.log("Commit:____________",commit);
            fetch("https://raw.githubusercontent.com/arendst/Tasmota/"+commit+"/tasmota/include/tasmota_version.h").then(x=>x.text()).then(t=>printFirmwareVersion(t))
        }

        function printFirmwareVersion(text_data){
            for(line of text_data.split("\n")){
                if(line.includes("const uint32_t VERSION =")){
                    console.log("Line:____________",line);
                    let fw_name = line.split("//")[1];
                    let firmware_label = document.querySelector("#firmware-version");
                    firmware_label.innerHTML = fw_name.trim();
                }
            }
        }

        function openFileDialog(){
          let input = document.createElement('input');
          input.type = 'file';
          input.onchange = _ => {
                    handleFiles(input.files);
                };
          input.click();
        }

        function preventDefaults (e) {
          e.preventDefault();
          e.stopPropagation();
        }

        function highlight(e) {
          dropArea.classList.add('highlight');
        }

        function unhighlight(e) {
          dropArea.classList.remove('active');
        }

        function handleDrop(e) {
          var dt = e.dataTransfer;
          var files = dt.files;
          handleFiles(files);
        }

        function handleFiles(files) {
          files = [...files];
          console.log(files);
          document.getElementById("URL_based_input").style.display = "none";
          document.getElementById("file_upload_infotext").innerHTML = "You can flash your provided factory firmware at offset 0 by clicking the CONNECT button above.";
          document.getElementById("dropped_firmware").innerText = files[0].name;
          const button = document.querySelector("esp-web-install-button");
          virtual_manifest.name = files[0].name;
          button.manifest = JSON.stringify(virtual_manifest);
          button.firmwareFile = files[0];
        }

        function prepareDropZone(){
          ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
                          dropArea.addEventListener(eventName, preventDefaults, false);
                          document.body.addEventListener(eventName, preventDefaults, false);
                        });
          ['dragenter', 'dragover'].forEach(eventName => {
                          dropArea.addEventListener(eventName, highlight, false);
                        });
          ['dragleave', 'drop'].forEach(eventName => {
                          dropArea.addEventListener(eventName, unhighlight, false);
                        });
          dropArea.addEventListener('drop', handleDrop, false);
        }

        window.addEventListener("load", function(event) {
            window.dropArea = document.getElementById("drop-area");
            prepareDropZone();
            getLatestTag();
            try{
                const button = document.querySelector("esp-web-install-button");
                button.overrides = {
                  checkSameFirmware(manifest, improvInfo) {
                    const manifestFirmware = manifest.name.toLowerCase();
                    const deviceFirmware = improvInfo.firmware.toLowerCase();
                    return manifestFirmware.includes(deviceFirmware);
                  }
                };
                console.log(button.shadowRoot.firstChild.name);
                if(button.shadowRoot.firstChild.name == 'activate'){
                    //success: add the select picker and some info
                    const selectEl = document.querySelector("#pick-variant-selector");
                    button.manifest = "https://tasmota.github.io/install/manifest_ext/release.tasmota.manifest.json";
                    selectEl.addEventListener("change", () => {
                        button.manifest = selectEl.value;
                        console.log(button.manifest);
                    });
                }
            }
            catch(e){
                console.log(e);
            }
        },{ once: true });

  </script>
  </head>
  <body>
    <div style='display:inline-block;color:#eaeaea;min-width:340px;'>

    <h1>Install Tasmota</h1>

    <div class='pick-variant'>
    <ol style='text-align:left'>
        <li>Connect the ESP device to your computer</br>using USB or serial-to-USB adapter</li></br>
        <li>Select the firmware variant suitable for</br>your device</li></br>
        <li>Hit "Install" and select the correct port</br>or find help if <a href="https://tasmota.github.io/docs/Getting-Started/" target='_blank' style='color:#aaa;'>no device found</a></li>
        </ol>
        </br>
      </br>
      <div id="URL_based_input" class="collapsible">
        <select id="pick-variant-selector"></select>
        <p id="firmware-version"></p>
        <select id="pick-release-selector"></select>
        </br></br>
        <p class = "needs_cors">Filter by date:</p>
        <span><select class = "date_pick needs_cors" id="pick-year-selector"></select><select class = "date_pick needs_cors" id="pick-month-selector"></select><select class = "date_pick needs_cors" id="pick-day-selector"></select></span>
        <p>
        <p class = "needs_cors"><br>Filter by type:<br>
        <input type="radio" name="build_type" value="r" id="check1" class="build_type_select">
        <label for="check1">Release</label>
        <input type="radio" name="build_type" value="d" id="check2" class="build_type_select">
        <label for="check2">Development</label>
        <input type="radio" name="build_type" value="a" id="check3" class="build_type_select" checked>
        <label for="check3">All</label></p>
      </div>
      </br>
      <esp-web-install-button id="inst" style='text-align:center'>
        <i slot="unsupported">
          Your browser does not support Web Serial.</br>Open this page in Google Chrome or</br>Microsoft Edge instead
          <span class="not-supported-i hidden">(but not on your iOS device)</span>.
        </i>
      </esp-web-install-button>
     </p>
    </div>
    <div id="drop-area">
      <form class="my-form">
      <p id="file_upload_infotext">Upload factory firmware with the file dialog or by dragging and dropping onto the dashed region</p>
      <!-- <input type="file" id="fileElem" accept=".bin" onchange="handleFiles(this.files)" class="button"> -->
      <p id="dropped_firmware"></p>
      </form>
    </div>
    <h1>&#8593;</h1>
    <button id="fileElem" accept=".bin" onclick="openFileDialog()">Upload factory.bin</button>
    <div style='text-align:right;font-size:11px;'>
      <hr/>
      <a href="https://esphome.github.io/esp-web-tools/" target='_blank' style='color:#aaa;'>Tasmota Installer inspired by ESP Web Tools</a>
    </div>

    </div>
  </body>
</html>