wip

Signed-off-by: David Edler <david.edler@canonical.com>
canonical · Jan 18, 2024 · 1bbac6a · 1bbac6a
1 parent a3a7dd4
commit 1bbac6a
Show file tree

Hide file tree

Showing 7 changed files with 510 additions and 0 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -0,0 +1,39 @@
+module.exports = {
+  parser: "@typescript-eslint/parser",
+  plugins: ["@typescript-eslint", "react"],
+  globals: {},
+  env: {
+    node: true,
+    browser: true,
+    es6: true,
+    es2020: true,
+    jest: true,
+  },
+  extends: [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:prettier/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:@typescript-eslint/recommended-requiring-type-checking",
+    "plugin:@typescript-eslint/strict",
+  ],
+  settings: {
+    react: {
+      version: "detect",
+    },
+  },
+  parserOptions: {
+    project: "./tsconfig.json",
+    sourceType: "module",
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  root: true,
+  rules: {
+    "linebreak-style": ["error", "unix"],
+    semi: ["error", "always"],
+    "object-curly-spacing": ["error", "always"],
+    "@typescript-eslint/no-unused-vars": ["error", { argsIgnorePattern: "^_" }],
+  },
+};
diff --git a/public/assets/data/canonical-images.json b/public/assets/data/canonical-images.json
diff --git a/public/assets/data/canonical-minimal-images.json b/public/assets/data/canonical-minimal-images.json
diff --git a/scripts/update-images.sh b/scripts/update-images.sh
@@ -0,0 +1,12 @@
+#!/bin/bash
+
+if ! jq --version &> /dev/null
+then
+    echo "jq could not be found, please install it: apt install jq"
+    exit
+fi
+
+
+curl http://cloud-images.ubuntu.com/releases/streams/v1/com.ubuntu.cloud:released:download.json | jq -c . > public/assets/data/canonical-images.json
+
+curl https://cloud-images.ubuntu.com/minimal/releases/streams/v1/com.ubuntu.cloud:released:download.json | jq -c . > public/assets/data/canonical-minimal-images.json
diff --git a/src/lib/spice/spice.html b/src/lib/spice/spice.html
@@ -0,0 +1,207 @@
+<!--
+   Copyright (C) 2012 by Jeremy P. White <jwhite@codeweavers.com>
+
+   This file is part of spice-html5.
+
+   spice-html5 is free software: you can redistribute it and/or modify
+   it under the terms of the GNU Lesser General Public License as published by
+   the Free Software Foundation, either version 3 of the License, or
+   (at your option) any later version.
+
+   spice-html5 is distributed in the hope that it will be useful,
+   but WITHOUT ANY WARRANTY; without even the implied warranty of
+   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+   GNU Lesser General Public License for more details.
+
+   You should have received a copy of the GNU Lesser General Public License
+   along with spice-html5.  If not, see <http://www.gnu.org/licenses/>.
+
+   --------------------------------------------------
+    Spice Javascript client template.
+    Refer to main.js for more detailed information
+   --------------------------------------------------
+
+-->
+
+<!doctype html>
+<html>
+    <head>
+
+        <title>Spice Javascript client</title>
+        <link rel="stylesheet" type="text/css" href="spice.css" />
+
+        <!-- ES2015/ES6 modules polyfill -->
+        <script type="module">
+            window._spice_has_module_support = true;
+        </script>
+        <script>
+            window.addEventListener("load", function() {
+                if (window._spice_has_module_support) return;
+                var loader = document.createElement("script");
+                loader.src = "thirdparty/browser-es-module-loader/dist/" +
+                    "browser-es-module-loader.js";
+                document.head.appendChild(loader);
+            });
+        </script>
+
+        <script type="module" crossorigin="anonymous">
+            import * as SpiceHtml5 from './src/main.js';
+
+            var host = null, port = null;
+            var sc;
+
+            function spice_error(e)
+            {
+                disconnect();
+            }
+
+            function connect()
+            {
+                var host, port, password, scheme = "ws://", uri;
+
+                host = document.getElementById("host").value;
+                port = document.getElementById("port").value;
+                password = document.getElementById("password").value;
+
+
+                if ((!host) || (!port)) {
+                    console.log("must set host and port");
+                    return;
+                }
+
+                if (sc) {
+                    sc.stop();
+                }
+
+                uri = scheme + host + ":" + port;
+
+                document.getElementById('connectButton').innerHTML = "Stop Connection";
+                document.getElementById('connectButton').onclick = disconnect;
+
+                try
+                {
+                    sc = new SpiceHtml5.SpiceMainConn({uri: uri, screen_id: "spice-screen", dump_id: "debug-div",
+                                message_id: "message-div", password: password, onerror: spice_error, onagent: agent_connected });
+                }
+                catch (e)
+                {
+                    alert(e.toString());
+                    disconnect();
+                }
+
+            }
+
+            function disconnect()
+            {
+                console.log(">> disconnect");
+                if (sc) {
+                    sc.stop();
+                }
+                document.getElementById('connectButton').innerHTML = "Start Connection";
+                document.getElementById('connectButton').onclick = connect;
+                if (window.File && window.FileReader && window.FileList && window.Blob)
+                {
+                    var spice_xfer_area = document.getElementById('spice-xfer-area');
+                    if (spice_xfer_area != null) {
+                      document.getElementById('spice-area').removeChild(spice_xfer_area);
+                    }
+                    document.getElementById('spice-area').removeEventListener('dragover', SpiceHtml5.handle_file_dragover, false);
+                    document.getElementById('spice-area').removeEventListener('drop', SpiceHtml5.handle_file_drop, false);
+                }
+                console.log("<< disconnect");
+            }
+
+            function agent_connected(sc)
+            {
+                window.addEventListener('resize', SpiceHtml5.handle_resize);
+                window.spice_connection = this;
+
+                SpiceHtml5.resize_helper(this);
+
+                if (window.File && window.FileReader && window.FileList && window.Blob)
+                {
+                    var spice_xfer_area = document.createElement("div");
+                    spice_xfer_area.setAttribute('id', 'spice-xfer-area');
+                    document.getElementById('spice-area').appendChild(spice_xfer_area);
+                    document.getElementById('spice-area').addEventListener('dragover', SpiceHtml5.handle_file_dragover, false);
+                    document.getElementById('spice-area').addEventListener('drop', SpiceHtml5.handle_file_drop, false);
+                }
+                else
+                {
+                    console.log("File API is not supported");
+                }
+            }
+            /* SPICE port event listeners
+            window.addEventListener('spice-port-data', function(event) {
+                // Here we convert data to text, but really we can obtain binary data also
+                var msg_text = arraybuffer_to_str(new Uint8Array(event.detail.data));
+                DEBUG > 0 && console.log('SPICE port', event.detail.channel.portName, 'message text:', msg_text);
+            });
+
+            window.addEventListener('spice-port-event', function(event) {
+                DEBUG > 0 && console.log('SPICE port', event.detail.channel.portName, 'event data:', event.detail.spiceEvent);
+            });
+            */
+
+            document.getElementById('connectButton').onclick = connect;
+            document.getElementById('sendCtrlAltDel').addEventListener('click', function(){ SpiceHtml5.sendCtrlAltDel(sc); });
+        </script>
+
+    </head>
+
+    <body>
+
+        <div id="login">
+            <button onclick="open_nav()">&#9776; SPICE</button>
+            <p id="hostname">Host Console</p>
+        </div>
+
+        <div id="Sidenav" class="SidenavClosed" style="width: 0;">
+            <p class="closebtn" onclick="close_nav()">&#10006;</p>
+            <label for="host">Host:</label> <input type='text' id='host' value='localhost'> <!-- localhost --><br>
+            <label for="port">Port:</label> <input type='text' id='port' value='5959'><br>
+            <label for="password">Password:</label> <input type='password' id='password' value=''><br>
+            <button id="connectButton">Start Connection</button><br>
+            <button id="sendCtrlAltDel">Send Ctrl-Alt-Delete</button>
+            <button id="debugLogs">Toggle Debug Logs</button>
+            <div id="message-div" class="spice-message" style="display: none;"></div>
+
+            <div id="debug-div">
+            <!-- If DUMPXXX is turned on, dumped images will go here -->
+            </div>
+        </div>
+
+        <div id="spice-area">
+            <div id="spice-screen" class="spice-screen"></div>
+        </div>
+
+        <script>
+            function show_debug_Logs() {
+                var content = document.getElementById('message-div')
+                if (content.style.display === 'block') {
+                    content.style.display = 'none';
+                } else {
+                    content.style.display = 'block';
+                }
+            }
+
+            function display_hostname() {
+                var title = new URLSearchParams(window.location.search);
+                name = title.getAll('title');
+                name = name.split('(')[0];
+                document.getElementById('hostname').innerHTML = (name);
+            }
+
+            function open_nav() {
+                document.getElementById('Sidenav').className = 'SidenavOpen';
+            }
+
+            function close_nav() {
+                document.getElementById('Sidenav').className = 'SidenavClosed';
+            }
+
+            document.getElementById('debugLogs').addEventListener('click', function() { show_debug_Logs(); });
+            display_hostname()
+        </script>
+    </body>
+</html>