Add link to re-show the popup, and add some colour and other visual improvements

CHANGELOG.md

@@ -4,6 +4,11 @@ All notable changes to this project will be documented in this file.
 
 ## [Unreleased]
 
+## [v0.5.2] - 2021-10-26
+
+- Provide link to re-display the popup window from the index
+- Visual improvements
+
 ## [v0.5.1] - 2021-10-25
 
 - Add note about adblockers potentially blocking the popup

download/download.go

@@ -15,6 +15,7 @@ import (
 type Download struct {
 	Id              int                    `json:"id"`
 	Url             string                 `json:"url"`
+	PopupUrl        string                 `json:"popup_url"`
 	Pid             int                    `json:"pid"`
 	ExitCode        int                    `json:"exit_code"`
 	State           string                 `json:"state"`

main.go

@@ -23,7 +23,7 @@ var downloads []*download.Download
 var downloadId = 0
 var conf *config.Config
 
-var versionInfo = version.Info{CurrentVersion: "v0.5.1"}
+var versionInfo = version.Info{CurrentVersion: "v0.5.2"}
 
 //go:embed web
 var webFS embed.FS
@@ -111,11 +111,13 @@ func homeHandler(w http.ResponseWriter, r *http.Request) {
 	type Info struct {
 		Downloads      []*download.Download
 		BookmarkletURL template.URL
+		Config         *config.Config
 	}
 
 	info := Info{
 		Downloads:      downloads,
 		BookmarkletURL: template.URL(bookmarkletURL),
+		Config:         conf,
 	}
 
 	err = t.ExecuteTemplate(w, "layout", info)
@@ -292,6 +294,7 @@ func fetchHandler(w http.ResponseWriter, r *http.Request) {
 
 			Id:       downloadId,
 			Url:      url[0],
+			PopupUrl: fmt.Sprintf("/fetch/%d", downloadId),
 			State:    "choose profile",
 			Finished: false,
 			Eta:      "?",

web/index.html

@@ -2,7 +2,6 @@
 
 {{ template "menu.tmpl" . }}
 
-
 <div x-data="index()" x-init="fetch_data(); fetch_version()">
 
     <p x-cloak x-show="version && version.upgrade_available">
@@ -25,7 +24,7 @@
     <table class="pure-table">
         <thead>
             <tr>
-                <th>id</th><th>filename</th><th>url</th><th>state</th><th>percent</th><th>eta</th><th>finished</th>
+		    <th>id</th><th>filename</th><th>url</th><th>show</th><th>state</th><th>percent</th><th>eta</th><th>finished</th>
             </tr>
         </thead>
         <tbody>
@@ -33,11 +32,12 @@
                 <tr>
                     <td x-text="item.id"></td>
                     <td x-text="item.files"></td>
-                    <td><a x-bind:href="item.url">link</a></td>
-                    <td x-text="item.state"></td>
+                    <td><a class="int-link" x-bind:href="item.url">&#x2197;</a></td>
+                    <td><a class="int-link" @click="show_popup(item)" href="#">&#x1F4C4;</a></td>
+                    <td :class="'state-'+item.state" x-text="item.state"></td>
                     <td x-text="item.percent"></td>
                     <td x-text="item.eta"></td>
-                    <td x-text="item.finished"></td>
+                    <td x-text="item.finished ? '&#x2714;' : '-'"></td>
                 </tr>
     
             </template>
@@ -78,6 +78,9 @@
                     setTimeout(() => { this.fetch_data() }, 1000);
                 })
             },
+            show_popup(item) {
+			    window.open(item.popup_url, item.id, "width={{ .Config.UI.PopupWidth }},height={{ .Config.UI.PopupHeight }}");
+	    },
         }
     }
 </script>

web/layout.tmpl

@@ -14,36 +14,48 @@
           overflow:auto;
         }
         footer {
-            padding-top: 50px;
-            font-size: 30%;
+          padding-top: 50px;
+          font-size: 30%;
+        }
+        .int-link {
+          text-decoration: none;
+          hover { color: red; }
+        }
+        .state-failed {
+          color: red;
+        }
+        .state-downloading {
+          color: blue;
+        }
+        .state-complete {
+          color: green;
         }
         .gropple-config {
-            font-size: 80%;
+          font-size: 80%;
         }
         .gropple-config input.input-long {
-            width: 27em;
+          width: 27em;
         }
         .gropple-config button {
-                    border-radius: 12px;
+          border-radius: 12px;
         }
         .gropple-config button.button-del {
-            background: rgb(202, 60, 60);
+          background: rgb(202, 60, 60);
         }
         .gropple-config button.button-add {
-            background: rgb(60, 200, 60);
+          background: rgb(60, 200, 60);
         }
         .gropple-config .pure-form-message {
-            padding-top: .5em;
-            padding-bottom: 1.5em;
+          padding-top: .5em;
+          padding-bottom: 1.5em;
         }
         .error {
-            color: red;
+          color: red;
         }
         .success {
-            color: green;
+          color: green;
         }
 
-
         [x-cloak] { display: none !important; }
 
     </style>
@@ -57,4 +69,4 @@
 </body>
     {{ template "js" . }}
 </html>
-{{ end }}
+{{ end }}