intermediate: prepare custom install in webinstaller

wellenvogel · Sep 6, 2023 · a939679 · a939679
1 parent 0e0be14
commit a939679
Show file tree

Hide file tree

Showing 7 changed files with 283 additions and 47 deletions.
diff --git a/webinstall/cibuild.css b/webinstall/cibuild.css
@@ -1,3 +1,96 @@
 .hidden{
     display: none;
+}
+
+/* reused stuff from configui */
+.configui.container{
+    max-width: 35em;
+    margin-left: auto;
+    margin-right: auto;
+    position: relative;
+}
+.configui .info{
+    margin-bottom: 1em;
+    opacity: 0.6;
+    white-space: pre-line;
+}
+.configui .parameters {
+    border-bottom: 1px solid grey;
+    margin-bottom: 1em;
+}
+.configui .row input[type="checkbox"] {
+    flex-grow: 1;
+    appearance: auto;
+}
+
+.configui .row {
+    display: flex;
+    flex-direction: row;
+    margin: 0.5em;
+    flex-wrap: unset;
+    padding:   0;
+}
+
+.configui .row .label {
+    width: 10em;
+    opacity: 0.6;
+    padding: 0;
+}
+.configui .since {
+    display: block;
+    font-size: 0.8em;
+}
+.configui input[type=checkbox] {
+    width: 1.5em;
+    height: 1.5em;
+    opacity: 1;
+    z-index: unset;
+}
+
+.configui .buttons {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+}
+.configui button {
+    padding: 0.5em;
+}
+.configui .footer {
+    text-align: right;
+    margin-top: 1em;
+    font-size: 0.8em;
+}
+.configui .visually-hidden {
+    position: absolute !important;
+    height: 1px;
+    width: 1px;
+    overflow: hidden;
+    clip: rect(1px, 1px, 1px, 1px);
+  }
+
+.configui .dialogBack {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 10;
+    background-color: #8a8c8ec7;
+    display: flex;
+}
+.configui .hidden{
+    display: none;
+}
+.configui .dialog{
+    max-width: 35em;
+    margin: auto;
+    background-color: white;
+    padding: 2em;
+}
+.configui #warn{
+    display: none;
+    color: red;
+}
+.configui #warn.warn{
+    display: block;
 }
diff --git a/webinstall/cibuild.html b/webinstall/cibuild.html
@@ -7,32 +7,40 @@
 </head>
 
 <body>
+    <div class="configui container">
     <h1>Build your own ESP32-NMEA2000</h1>
-    <div class="xrow">
-        <label>Board type</label>
+    <div class="row">
+        <span class="label">Board type</span>
         <input type="text" id="environment" value="m5stack-atom-generic">
     </div>
-    <div class="xrow">
-        <label>Build Flags</label>
+    <div class="row">
+        <span class="label">Build Flags</span>
         <input type="text" id="buildflags" value="">
     </div>
-    <div class="xrow">
+    <div class="row">
         <button id="start">Start</button>
     </div>
-    <div class="xrow">
-        <label>Pipeline Id</label>
+    <div class="row">
+        <span class="label">Job Id</span>
         <div id="pipeline">---</div>
     </div>
-    <div class="xrow">
-        <label>Status</label>
+    <div class="row">
+        <span class="label">Status</span>
         <div id="status">---</div>
     </div>
-    <div class="xrow hidden">
-        <a target="_" id="link">WebStatus</a>
+    <div class="row hidden error">
+        <span class="label">Error</span>
+        <div class="value" id="error"></div>
     </div>
-    <div class="xrow hidden">
+    <div class="row hidden">
+        <span class="label">Web Status</span>
+        <a target="_" id="status_url">Link</a>
+    </div>
+    <div class="row hidden">
         <button id="download">Download</button>
+        <button id="webinstall">Install</button>
     </div>
     <iframe id="dlframe" width="1" height="1"></iframe>
+</div>
 </body>
 </html>
diff --git a/webinstall/cibuild.js b/webinstall/cibuild.js
@@ -1,42 +1,61 @@
-import { setButtons,fillValues, setValue, buildUrl, fetchJson, setVisible, enableEl } from "./helper";
+import { setButtons,fillValues, setValue, buildUrl, fetchJson, setVisible, enableEl, setValues } from "./helper";
 (function(){
     const STATUS_INTERVAL=2000;
     const CURRENT_PIPELINE='pipeline';
     let API="cibuild.php";
     let currentPipeline=undefined;
     let downloadUrl=undefined;
     let timer=undefined;
-    const fetchStatus=()=>{
+    const showError=(text)=>{
+        if (text === undefined){
+            setVisible('buildError',false,true);
+            return;
+        }
+        setValue('buildError',text);
+        setVisible('buildError',true,true);
+    }
+    const setRunning=(active)=>{
+        if (active){
+            downloadUrl=undefined;
+            showError();
+            setVisible('download',false,true);
+            setVisible('status_url',false,true);
+        }
+        enableEl('start',!active);
+    }
+    const fetchStatus=(initial)=>{
         if (currentPipeline === undefined) return;
         fetchJson(API,{api:'status',pipeline:currentPipeline})
                 .then((st)=>{
-                    setValue('status',st.status);
-                    let l=document.getElementById('link');
-                    if (l){
-                        if (st.status_url){
-                            l.setAttribute('href',st.status_url);
-                            setVisible(l.parentElement,true);
-                        }
-                        else{
-                            setVisible(l.parentElement,false);
-                        }
+                    setValues(st);
+                    setVisible('status_url',st.status_url !== undefined,true);
+                    setVisible('error',st.error !== undefined,true);
+                    if (st.status === 'error'){
+                        setRunning(false);
+                        setVisible('download',false,true);
+                        return;
                     }
                     if (st.status === 'success'){
-                        enableEl('start',true);
+                        setRunning(false);
                         fetchJson(API,{api:'artifacts',pipeline:currentPipeline})
                         .then((ar)=>{
                             if (! ar.items || ar.items.length < 1){
                                 throw new Error("no download link");
                             }
-                            downloadUrl=ar.items[0].url;
-                            setVisible(document.getElementById('download'),true,true);
+                            downloadUrl=buildUrl(API,{
+                                download: currentPipeline
+                            });
+                            setVisible('download',true,true);
 
                         })
-                        .catch((err)=>alert("Unable to get build result: "+err));
+                        .catch((err)=>{
+                            showError("Unable to get build result: "+err);
+                            setVisible('download',false,true);
+                        });
                         return;
                     }
                     else{
-                        setVisible(document.getElementById('download'),false,true);
+                        setVisible('download',false,true);
                     }
                     timer=window.setTimeout(fetchStatus,STATUS_INTERVAL)
                 })
@@ -55,6 +74,7 @@ import { setButtons,fillValues, setValue, buildUrl, fetchJson, setVisible, enabl
         timer=undefined;
         fillValues(param,['environment','buildflags']);
         setValue('status','requested');
+        setRunning(true);
         fetchJson(API,Object.assign({
             api:'start'},param))
         .then((json)=>{
@@ -65,13 +85,12 @@ import { setButtons,fillValues, setValue, buildUrl, fetchJson, setVisible, enabl
             setCurrentPipeline(json.id);
             setValue('pipeline',currentPipeline);
             setValue('status',json.status);
-            enableEl('start',false);
             timer=window.setTimeout(fetchStatus,STATUS_INTERVAL);
         })
         .catch((err)=>{
+            setRunning(false);
             setValue('status','error');
-            enableEl('start',true);
-            alert(err);
+            showError(err);
         });
     }
     const runDownload=()=>{
@@ -82,17 +101,23 @@ import { setButtons,fillValues, setValue, buildUrl, fetchJson, setVisible, enabl
             df.setAttribute('src',downloadUrl);
         }
     }
+    const webInstall=()=>{
+        if (! downloadUrl) return;
+        let url=buildUrl("install.html",{custom:downloadUrl});
+        window.location.href=url;
+    }
     const btConfig={
         start:startBuild,
-        download:runDownload
+        download:runDownload,
+        webinstall:webInstall
     };
     window.onload=()=>{ 
         setButtons(btConfig);
         currentPipeline=window.localStorage.getItem(CURRENT_PIPELINE);
         if (currentPipeline){
             setValue('pipeline',currentPipeline);
-            enableEl('start',false);
-            fetchStatus();
+            setRunning(true);
+            fetchStatus(true);
         }
     }
 })();
diff --git a/webinstall/cibuild.php b/webinstall/cibuild.php
@@ -192,6 +192,7 @@ function getArtifactsForPipeline($pipeline,$wf=workflowName,$job=jobName){
         }
         $dlurl = $astat['items'][0]['url'];
         #echo("DL: $dlurl\n");
+        header('Content-Disposition: attachment; filename="'.$astat['items'][0]['path'].'"');
         proxy($dlurl);
         exit(0);
     }

diff --git a/webinstall/helper.js b/webinstall/helper.js
@@ -62,6 +62,21 @@ const setValue=(id,value)=>{
     }
     if (el.tagName == 'INPUT'){
         el.value=value;
+        return;
+    }
+    if (el.tagName == 'A'){
+        el.setAttribute('href',value);
+        return;
+    }
+}
+const setValues=(data,translations)=>{
+    for (let k in data){
+        let id=k;
+        if (translations){
+            let t=translations[k];
+            if (t !== undefined) id=t;
+        }
+        setValue(id,data[k]);
     }
 }
 const buildUrl=(url,pars)=>{
@@ -80,6 +95,7 @@ const fetchJson=(url,pars)=>{
     return fetch(furl).then((rs)=>rs.json());
 }
 const setVisible=(el,vis,useParent)=>{
+    if (typeof(el) !== 'object') el=document.getElementById(el);
     if (! el) return;
     if (useParent) el=el.parentElement;
     if (! el) return;
@@ -93,4 +109,4 @@ const enableEl=(id,en)=>{
     else el.disabled=true;
 }
 
-export { getParam, addEl, forEachEl,setButtons,fillValues, setValue,buildUrl,fetchJson,setVisible, enableEl }
+export { getParam, addEl, forEachEl,setButtons,fillValues, setValue,setValues,buildUrl,fetchJson,setVisible, enableEl }