Refactor web (#26)

web/data/templates/index.tmpl

@@ -0,0 +1,98 @@
+{{ define "content" }}
+
+{{ template "menu.tmpl" . }}
+
+<div x-data="index()" x-init="fetch_data(); fetch_version()">
+
+    <p x-cloak x-show="version && version.upgrade_available">
+        <a href="https://github.com/tardisx/gropple/releases">Upgrade is available</a> - 
+        you have 
+        <span x-text="version.current_version"></span> and 
+        <span x-text="version.github_version"></span>
+    is available.</p>
+
+    <div>
+        <p>
+            Drag this bookmarklet: <a href="{{ .BookmarkletURL }}">Gropple</a> to your bookmark bar, and click it
+            on any page you want to grab the video from.
+        </p>
+	<p>
+	    Please note that some adblockers may prevent the bookmarklet from opening the popup window.
+	</p>
+    </div>
+
+    <table class="pure-table">
+        <thead>
+            <tr>
+		    <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>
+            <template x-for="item in items">
+                <tr>
+                    <td x-text="item.id"></td>
+                    <td>
+                        <span x-show="item.files && item.files.length > 0">
+                            <ul>
+                                <template x-for="file in item.files">
+                                    <li x-text="file"></li>
+                                </template>
+                            </ul>
+                        </span>
+                        <span x-show="! item.files || item.files.length == 0"
+                              x-text="item.url">
+                        </span>
+                    </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 ? '&#x2714;' : '-'"></td>
+                </tr>
+    
+            </template>
+              
+
+        </tbody>  
+    </table>
+</div>
+{{ end }}
+
+{{ define "js" }}
+<script>
+    function index() {
+        return { 
+            items: [], version: {}, popups: {},
+            fetch_version() {
+                fetch('/rest/version')
+                .then(response => response.json())
+                .then(info => {
+                    this.version = info;
+                    setTimeout(() => { this.fetch_version() }, 1000 * 60 );
+                })
+                .catch(error => {
+                    console.log('failed to fetch version info - will retry');
+                    setTimeout(() => { this.fetch_version() }, 1000 );
+                });
+            },
+            fetch_data() {
+                fetch('/rest/fetch')
+                .then(response => response.json())
+                .then(info => {
+                    // will be null if no downloads yet
+                    if (info) {
+                        this.items = info;
+                    }
+                    setTimeout(() => { this.fetch_data() }, 1000);
+                })
+            },
+            show_popup(item) {
+                // allegedly you can use the reference to pop the window to the front on subsequent
+                // clicks, but I can't seem to find a reliable way to do so.
+                this.popups[item.id] = window.open(item.popup_url, item.id, "width={{ .Config.UI.PopupWidth }},height={{ .Config.UI.PopupHeight }}");
+            },
+	    }
+    }
+</script>
+{{ end }}