Add basic management options

NanoPlay · Nov 8, 2021 · 1af85af · 1af85af
1 parent 2e662b6
commit 1af85af
Show file tree

Hide file tree

Showing 8 changed files with 353 additions and 94 deletions.
diff --git a/dashboard/dashboard.js b/dashboard/dashboard.js
@@ -11,10 +11,12 @@ namespace("com.subnodal.nanoplay.website.dashboard", function(exports) {
     var subElements = require("com.subnodal.subelements");
 
     var resources = require("com.subnodal.nanoplay.website.resources");
+    var dialogs = require("com.subnodal.nanoplay.website.dialogs");
 
     var darkThemeEnabled = false;
 
     window.dashboard = exports;
+    window.dialogs = dialogs;
 
     exports.toggleTheme = function() {
         darkThemeEnabled = !darkThemeEnabled;

diff --git a/dashboard/editor.html b/dashboard/editor.html
@@ -57,10 +57,10 @@ <h2 id="editorAppName">
                 <span onclick="editor.loadAppSettingsDialog();" class="editable">{{ editor.getAppName() }}</span>
                 <a href="javascript:editor.loadAppSettingsDialog();" title="{{ _('editor_appSettings') }}" class="hidden" aria-label="{{ _('editor_appSettings') }}"><icon>settings</icon></a>
                 <s-if condition="{{ editor.getStatus() == editor.statuses.CONNECTING }}">
-                    <button disabled class="green" translate>editor_connecting</button>
+                    <button disabled class="green" translate>connecting</button>
                 </s-if>
                 <s-if condition="{{ editor.getStatus() == editor.statuses.UPLOADING }}">
-                    <button disabled class="green" translate>editor_uploading</button>
+                    <button disabled class="green" translate>uploading</button>
                 </s-if>
                 <s-if condition="{{ editor.allowedToCommunicate() }}">
                     <span class="desktop">

diff --git a/dashboard/editor.js b/dashboard/editor.js
@@ -19,11 +19,9 @@ namespace("com.subnodal.nanoplay.website.editor", function(exports) {
     var resources = require("com.subnodal.nanoplay.website.resources");
     var dialogs = require("com.subnodal.nanoplay.website.dialogs");
     var communications = require("com.subnodal.nanoplay.website.communications");
-    var dashboard = require("com.subnodal.nanoplay.website.dashboard");
     var simulator = require("com.subnodal.nanoplay.website.simulator");
 
     window.editor = exports;
-    window.dialogs = dialogs;
 
     const SUPPORTED_LANGUAGES = ["en_GB", "fr_FR"];
     const DEFAULT_APP_ICON = "AAAAAAAAA////AAAf///YAAH///+AABAAAAgAAX/vgIAAEAAACAABe79wgAAQAAAIAAF+94CAABAAAAgAAW+/4IAAEAAACAABfvv4gAAQAAAIAAD///8AAAAAAAAAA==";

diff --git a/dashboard/manager.html b/dashboard/manager.html
@@ -52,8 +52,60 @@
                 </div>
                 <div id="managerOptions">
                     <div>
-                        <h2>Manager coming soon!</h2>
-                        <p>Our NanoPlay manager is still in development! Come back later when we have something to show.</p>
+                        <s-if condition="{{ manager.getCurrentNanoplay().isConnected }}" class="menu">
+                            <s-if condition="{{ manager.getCurrentPage() == manager.pages.GENERAL }}">
+                                <h1>{{ manager.getCurrentNanoplay().name }}</h1>
+                                <progress value="{{ (manager.MAXIMUM_FREE_STORAGE - manager.getLoadedFreeStorage()) / manager.MAXIMUM_FREE_STORAGE }}"></progress>
+                                <p>{{ _("manager_storageInfo", {percentage: Math.max(Math.round(((manager.MAXIMUM_FREE_STORAGE - manager.getLoadedFreeStorage()) / manager.MAXIMUM_FREE_STORAGE) * 100), 0), bytesFree: manager.getLoadedFreeStorage()}) }}</p>
+                                <button onclick="manager.getAppsList();">Manage apps</button>
+                                <h2>System update</h2>
+                                <p>Your NanoPlay is up-to-date on version 0.2.6!</p>
+                                <button data-preview="version">Apply update again</button>
+                                <h2>General settings</h2>
+                                <button data-preview="syncTime">Sync current time</button>
+                                <button data-preview="backlightOn">Turn backlight off</button>
+                                <label data-preview="language">
+                                    <span>Language</span>
+                                    <select>
+                                        <option value="en_GB">English (United Kingdom)</option>
+                                        <option value="fr_FR">Français (France)</option>
+                                    </select>
+                                </label>
+                            </s-if>
+                            <s-if condition="{{ manager.getCurrentPage() == manager.pages.APPS }}">
+                                <button onclick="manager.setCurrentPage(manager.pages.GENERAL);" class="back">Back</button>
+                                <h2>Installed apps</h2>
+                                <s-each in="manager.getLoadedAppsList()" keyvar="appId" valuevar="appManifest">
+                                    <div class="app">
+                                        <strong>{{ appManifest.name[l10n.getLocaleCode()] || _("untitled") }}</strong>
+                                        <div class="options">
+                                            <button onclick="window.location.href = '/dashboard/editor.html?id=' + encodeURIComponent(event.target.getAttribute('data-appid'));" data-appid="{{ appId }}" translate>edit</button>
+                                            <button onclick="manager.deleteApp(event.target.getAttribute('data-appid'));" data-appid="{{ appId }}" class="red" translate>delete</button>
+                                        </div>
+                                    </div>
+                                </s-each>
+                                <s-if condition="{{ Object.keys(manager.getLoadedAppsList()).length == 0 }}">
+                                    <p translate>manager_noApps</p>
+                                </s-if>
+                            </s-if>
+                        </s-if>
+                        <s-else>
+                            <h2 translate>manager_connect</h2>
+                            <p translate>manager_connectDescription</p>
+                            <s-if condition="{{ !!navigator.bluetooth }}">
+                                <button onclick="manager.connect();" id="connectButton" translate>connect</button>
+                                <p id="connectError"></p>
+                            </s-if>
+                            <s-else>
+                                <p translate>manager_noBluetooth</p>
+                            </s-else>
+                        </s-else>
+                    </div>
+                    <div hidden id="loading">
+                        <div>
+                            <loader></loader>
+                            <p id="loadingMessage"></p>
+                        </div>
                     </div>
                 </div>
             </div>

diff --git a/dashboard/manager.js b/dashboard/manager.js
@@ -8,5 +8,125 @@
 */
 
 namespace("com.subnodal.nanoplay.website.manager", function(exports) {
+    var subElements = require("com.subnodal.subelements");
+    var nanoplay = require("com.subnodal.nanoplay.webapi");
 
+    window.manager = exports;
+
+    exports.MAXIMUM_FREE_STORAGE = 8_712; // Bytes
+
+    exports.pages = {
+        GENERAL: 0,
+        APPS: 1
+    };
+
+    var currentPage = exports.pages.GENERAL;
+    var currentNanoplay = new nanoplay.NanoPlay();
+    var loadedAppsList = {};
+    var loadedFreeStorage = 0;
+
+    exports.getCurrentPage = function() {
+        return currentPage;
+    }
+
+    exports.setCurrentPage = function(page) {
+        currentPage = page;
+
+        subElements.render();
+    };
+
+    exports.getCurrentNanoplay = function() {
+        return currentNanoplay;
+    };
+
+    exports.showLoading = function(loadingMessage = _("manager_applyingSetting")) {
+        document.querySelector("#loadingMessage").textContent = loadingMessage;
+
+        document.querySelector("#loading").removeAttribute("hidden");
+    };
+
+    exports.hideLoading = function() {
+        document.querySelector("#loading").setAttribute("hidden", "");
+    };
+
+    exports.getAppsList = function() {
+        exports.showLoading(_("manager_gettingApps"));
+
+        return currentNanoplay.getApps().then(function(apps) {
+            loadedAppsList = apps;
+
+            manager.setCurrentPage(manager.pages.APPS);            
+
+            exports.hideLoading();
+
+            return Promise.resolve();
+        });
+    };
+
+    exports.getLoadedAppsList = function() {
+        return loadedAppsList;
+    };
+
+    exports.getFreeStorage = function() {
+        return currentNanoplay.getFreeStorage().then(function(data) {
+            loadedFreeStorage = data;
+
+            subElements.render();
+
+            return Promise.resolve();
+        });
+    };
+
+    exports.getLoadedFreeStorage = function() {
+        return loadedFreeStorage;
+    };
+
+    exports.deleteApp = function(appId) {
+        exports.showLoading(_("manager_gettingApps"));
+
+        return currentNanoplay.removeApp(appId).then(function() {
+            delete loadedAppsList[appId];
+
+            return exports.getFreeStorage().then(function() {
+                exports.hideLoading();
+
+                return Promise.resolve();
+            });
+        });
+    };
+
+    exports.connect = function() {
+        document.querySelector("#connectButton").textContent = _("connecting");
+        document.querySelector("#connectButton").disabled = true;
+
+        return currentNanoplay.connect().then(function() {
+            document.querySelector("#connectButton").textContent = _("connect");
+            document.querySelector("#connectButton").disabled = false;
+
+            document.querySelector("#connectError").textContent = "";
+
+            return exports.getFreeStorage();
+        }).catch(function(error) {
+            document.querySelector("#connectButton").textContent = _("connect");
+            document.querySelector("#connectButton").disabled = false;
+
+            document.querySelector("#connectError").textContent = _("manager_connectionError");
+
+            console.error(error);
+
+            return Promise.resolve();
+        });
+    };
+
+    subElements.ready(function() {
+        document.querySelectorAll("#managerOptions, #managerOptions div button, #managerOptions div label").forEach(function(element) {
+            element.addEventListener("mouseover", function(event) {
+                var previewScreen = element.getAttribute("data-preview") || "home";
+
+                document.querySelector("#managerPreview .device .screen").style.backgroundImage = `url("/media/manager/${previewScreen}.png")`;
+
+                event.stopPropagation();
+            });
+        });
+    });
 });
diff --git a/dialogs.js b/dialogs.js
@@ -13,7 +13,7 @@ namespace("com.subnodal.nanoplay.website.dialogs", function(exports) {
     exports.open = function(dialogId) {
         document.getElementById(dialogId).setAttribute("open", "");
 
-        document.querySelector("dialog[open] a, dialog[open] input, dialog[open] button").focus();
+        document.querySelector("dialog[open] a, dialog[open] input, dialog[open] button")?.focus();
     };
 
     exports.close = function(dialogId) {

diff --git a/locale/en_GB.json b/locale/en_GB.json
@@ -10,6 +10,18 @@
         "shop": "Shop",
         "dashboard": "Dashboard",
 
+        "ok": "OK",
+        "cancel": "Cancel",
+        "done": "Done",
+        "open": "Open",
+        "edit": "Edit",
+        "delete": "Delete",
+        "connect": "Connect",
+        "connecting": "Connecting...",
+        "upload": "Upload",
+        "uploading": "Uploading...",
+        "untitled": "Untitled",
+
         "signIn_title": "Let's go!",
         "signIn_description": "Sign in with your Subnodal Account to get coding! Your code, apps, settings and more will all be stored with your Subnodal Account for you to access from anywhere.",
         "signIn_signUpHint": "Don't have a Subnodal Account yet? Signing up is free and easy!",
@@ -32,8 +44,6 @@
         "editor_noAppsYet": "No apps yet!",
         "editor_noAppsYetMessage": "Once you've coded some apps, they'll appear here for you to open later.",
         "editor_sendToNanoplay": "Send to NanoPlay",
-        "editor_connecting": "Connecting...",
-        "editor_uploading": "Uploading...",
         "editor_noErrorsYet": "No errors yet!",
         "editor_noBluetooth": "No Bluetooth? Don't worry! Visit the NanoPlay editor on your mobile phone to connect to your NanoPlay.",
         "editor_noBluetoothQrCode": "Point your phone's camera at this QR code to quickly visit the NanoPlay editor",
@@ -62,13 +72,17 @@
         "editor_logSource_simulator": "Simulator",
 
         "manager": "Manager",
+        "manager_connect": "Connect to your NanoPlay",
+        "manager_connectDescription": "To access your NanoPlay's settings, you'll need to connect to your NanoPlay using Bluetooth.",
+        "manager_connectionError": "Looks like we couldsn't connect to your NanoPlay! Try connecting again.",
+        "manager_noBluetooth": "Unfortunately, this device doesn't have Bluetooth. Try using another device (such as a smartphone) instead.",
+        "manager_storageInfo": "Storage {percentage}% full · {bytesFree} bytes free",
+        "manager_noApps": "You have no apps on this NanoPlay.",
+        "manager_applyingSetting": "Applying setting...",
+        "manager_gettingApps": "Getting apps...",
+        "manager_deletingApp": "Deleting app...",
 
         "toggleDarkMode": "Toggle dark mode",
-        "backToDashboard": "Back to dashboard",
-
-        "ok": "OK",
-        "cancel": "Cancel",
-        "done": "Done",
-        "open": "Open"
+        "backToDashboard": "Back to dashboard"
     }
 }