Staars · March 16, 2023 16:39
diff --git a/test.html b/test.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;}
    </style>
    <script
      type="module"
      src="https://unpkg.com/[email protected]/dist/web/install-button.js?module"
    ></script>
    <script>

        function makeReleaseSelector(data){
            let sel=document.querySelector("#pick-release-selector");
            let lines = data.split("\n").reverse();
            console.log(data);
            for (opt_group of lines){
                if (opt_group.length < 10) continue;

                var og=document.createElement('option');
                const tag_data = opt_group.split(".");
                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", () => {
               makeSelector(sel.value);
            });
        }

        function useFallback(){
            let sel=document.querySelector("#pick-release-selector");
            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 must turn off CORS in your browser.";
            sel.replaceWith(el);
            fetch('https://raw.githubusercontent.com/Jason2866/Tasmota-specials/firmware/manifests.json')
            .then(response => response.json())
            .then(data => make_select(data));
        }

        function getLatestTags(){
             fetch('https://raw.githubusercontent.com/Jason2866/Tasmota-specials/firmware/tag_latest.txt')
            .then(x => x.text())
            .then(t =>{ 
                if(makeSelector(t) == true){
                    fetch('https://raw.githubusercontent.com/Jason2866/Tasmota-specials/firmware/tag.txt')
                    .then(x => x.text())
                    .then(t => makeReleaseSelector(t))
                }
                else{
                    useFallback();
                }});
        }

        function makeSelector(tag){
            try {
                fetch('https://github.com/Jason2866/Tasmota-specials/releases/download/'+ tag + '/manifests_release.json')
                .then(response => response.json())
                .then(data => make_select(data));
            } catch (error) {
                console.log("Can not access releases because of CORS!");
                useFallback();
            }

        }

        function make_select(data){
            if(data.length == 0){
              return false
            }
            const sel=document.querySelector("#pick-variant-selector");
            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]);
                for (fw of data[opt_group]){
                    // console.log(data[opt_group][fw]);
                    var opt=document.createElement('option');
                    opt.label = fw['name'];
                    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;
        }

        window.addEventListener("load", function(event) {
            getLatestTags();
            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://Jason2866.github.io/Tasmota-specials/manifest_ext/unofficial.tasmota-allsensors.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>
      <select id="pick-variant-selector"></select>
      </br></br>
      <select id="pick-release-selector"></select>
      <p>
        </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 style='text-align:right;font-size:11px;'>
      <hr/>
      <a href="https://esphome.github.io/esp-web-tools/" target='_blank' style='color:#aaa;'>Tasmota Installer powered by ESP Web Tools</a>
    </div>

    </div>
  </body>
 </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;}
	</style>
	<script
	type="module"
	src="https://unpkg.com/[email protected]/dist/web/install-button.js?module"
	></script>
	<script>

	function makeReleaseSelector(data){
	let sel=document.querySelector("#pick-release-selector");
	let lines = data.split("\n").reverse();
	console.log(data);
	for (opt_group of lines){
	if (opt_group.length < 10) continue;

	var og=document.createElement('option');
	const tag_data = opt_group.split(".");
	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", () => {
	makeSelector(sel.value);
	});
	}

	function useFallback(){
	let sel=document.querySelector("#pick-release-selector");
	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 must turn off CORS in your browser.";
	sel.replaceWith(el);
	fetch('https://raw.githubusercontent.com/Jason2866/Tasmota-specials/firmware/manifests.json')
	.then(response => response.json())
	.then(data => make_select(data));
	}

	function getLatestTags(){
	fetch('https://raw.githubusercontent.com/Jason2866/Tasmota-specials/firmware/tag_latest.txt')
	.then(x => x.text())
	.then(t =>{
	if(makeSelector(t) == true){
	fetch('https://raw.githubusercontent.com/Jason2866/Tasmota-specials/firmware/tag.txt')
	.then(x => x.text())
	.then(t => makeReleaseSelector(t))
	}
	else{
	useFallback();
	}});
	}

	function makeSelector(tag){
	try {
	fetch('https://github.com/Jason2866/Tasmota-specials/releases/download/'+ tag + '/manifests_release.json')
	.then(response => response.json())
	.then(data => make_select(data));
	} catch (error) {
	console.log("Can not access releases because of CORS!");
	useFallback();
	}

	}

	function make_select(data){
	if(data.length == 0){
	return false
	}
	const sel=document.querySelector("#pick-variant-selector");
	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]);
	for (fw of data[opt_group]){
	// console.log(data[opt_group][fw]);
	var opt=document.createElement('option');
	opt.label = fw['name'];
	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;
	}

	window.addEventListener("load", function(event) {
	getLatestTags();
	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://Jason2866.github.io/Tasmota-specials/manifest_ext/unofficial.tasmota-allsensors.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>
	<select id="pick-variant-selector"></select>
	</br></br>
	<select id="pick-release-selector"></select>
	<p>
	</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 style='text-align:right;font-size:11px;'>
	<hr/>
	<a href="https://esphome.github.io/esp-web-tools/" target='_blank' style='color:#aaa;'>Tasmota Installer powered by ESP Web Tools</a>
	</div>

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