add UI to install/remove apps from watch

3 files changed, 179 insertions, 21 deletions

diff --git a/app/qml/pages/AppConfigPage.qml b/app/qml/pages/AppConfigPage.qml
index 7b969a3..10fbe05 100644
--- a/app/qml/pages/AppConfigPage.qml
+++ b/app/qml/pages/AppConfigPage.qml
@@ -7,14 +7,14 @@ Page {
     id: appConfigPage
 
     property alias url: webview.url
-    property string uuid
+    property string name
 
     SilicaWebView {
         id: webview
         anchors.fill: parent
 
         header: PageHeader {
-            title: "Configuring " + uuid
+            title: "Configuring " + name
         }
 
         onNavigationRequested: {
@@ -31,4 +31,9 @@ Page {
             }
         }
     }
+
+    ViewPlaceholder {
+        enabled: url == ""
+        text: qsTr("No configuration settings available")
+    }
 }
diff --git a/app/qml/pages/InstallAppDialog.qml b/app/qml/pages/InstallAppDialog.qml
new file mode 100644
index 0000000..3a3c0b1
--- /dev/null
+++ b/app/qml/pages/InstallAppDialog.qml
@@ -0,0 +1,66 @@
+import QtQuick 2.0
+import QtQml 2.1
+import Sailfish.Silica 1.0
+
+Dialog {
+    id: installAppPage
+
+    property string selectedUuid;
+
+    SilicaListView {
+        id: appList
+        anchors.fill: parent
+
+        header: DialogHeader {
+           title: qsTr("Install app")
+           defaultAcceptText: qsTr("Install")
+        }
+
+        VerticalScrollDecorator { flickable: flickable }
+
+        currentIndex: -1
+
+        delegate: ListItem {
+            id: appDelegate
+            contentHeight: Theme.itemSizeSmall
+
+            property string uuid: modelData.uuid
+            property bool alreadyInstalled: pebbled.isAppInstalled(uuid)
+
+            Image {
+                id: appImage
+                anchors {
+                    top: parent.top
+                    left: parent.left
+                    leftMargin: Theme.paddingLarge
+                }
+                width: Theme.itemSizeSmall
+            }
+
+            Label {
+                id: appName
+                anchors {
+                    left: appImage.right
+                    leftMargin: Theme.paddingMedium
+                    right: parent.right
+                    rightMargin: Theme.paddiumLarge
+                    verticalCenter: parent.verticalCenter
+                }
+                text: modelData.longName
+                color: appDelegate.highlighted ? Theme.highlightColor : Theme.primaryColor
+            }
+
+            onClicked: {
+                appList.currentIndex = index
+                if (!alreadyInstalled) {
+                    selectedUuid = uuid
+                    accept();
+                }
+            }
+        }
+
+        model: pebbled.allApps
+    }
+
+    canAccept: appList.currentIndex >= 0 && !appList.currentItem.alreadyInstalled
+}
diff --git a/app/qml/pages/WatchPage.qml b/app/qml/pages/WatchPage.qml
index 8169507..ce9d636 100644
--- a/app/qml/pages/WatchPage.qml
+++ b/app/qml/pages/WatchPage.qml
@@ -34,7 +34,7 @@ import QtQml 2.1
 import Sailfish.Silica 1.0
 
 Page {
-    id: page
+    id: watchPage
 
     SilicaFlickable {
         id: flickable
@@ -45,9 +45,8 @@ Page {
 
         Column {
             id: column
+            width: watchPage.width
 
-            width: page.width
-            spacing: Theme.paddingLarge
             PageHeader {
                 title: pebbled.name
             }
@@ -77,36 +76,124 @@ Page {
                 }
             }
 
+            Item {
+                height: Theme.paddingMedium
+            }
 
             Label {
-                text: qsTr("App configuration")
+                text: qsTr("Installed applications")
                 font.family: Theme.fontFamilyHeading
                 color: Theme.highlightColor
                 anchors.right: parent.right
                 anchors.rightMargin: Theme.paddingMedium
             }
 
-            Button {
-                text: "Configure current app"
-                anchors {
-                    left: parent.left
-                    right: parent.right
-                    margins: Theme.paddingLarge
-                }
-                onClicked: {
-                    var uuid = pebbled.appUuid;
-                    console.log("going to configureApp " + uuid);
-                    var url = pebbled.configureApp(uuid);
-                    console.log("obtained configure URL " + url);
-                    if (url) {
+            Repeater {
+                id: slotsRepeater
+                model: pebbled.appSlots
+
+                ListItem {
+                    id: slotDelegate
+                    menu: slotMenu
+                    contentHeight: Theme.itemSizeSmall
+
+                    property bool isEmptySlot: modelData === ""
+                    property var appInfo: pebbled.appInfoByUuid(modelData)
+                    property bool isKnownApp: appInfo.hasOwnProperty("uuid")
+                    property bool busy: false
+
+                    function configure() {
+                        var uuid = modelData;
+                        pebbled.launchApp(uuid);
+                        console.log("going to call configure on app with uuid " + uuid);
+                        var url = pebbled.configureApp(uuid);
+                        console.log("received url: " + url);
                         pageStack.push(Qt.resolvedUrl("AppConfigPage.qml"), {
                                            url: url,
-                                           uuid: uuid
+                                           name: appInfo.longName
                                        });
                     }
+
+                    function remove() {
+                        remorseAction(qsTr("Uninstalling"), function() {
+                            busy = true;
+                            pebbled.unloadApp(index);
+                        });
+                    }
+
+                    function install() {
+                        var dialog = pageStack.push(Qt.resolvedUrl("InstallAppDialog.qml"));
+                        dialog.accepted.connect(function() {
+                            var uuid = dialog.selectedUuid;
+
+                            if (pebbled.isAppInstalled(uuid)) {
+                                console.warn("uuid already installed");
+                                return;
+                            }
+
+                            var slot = index;
+                            console.log("installing " + uuid + " into " + slot);
+                            busy = true;
+                            pebbled.uploadApp(uuid, slot);
+                        });
+
+                    }
+
+                    Image {
+                        id: slotImage
+                        anchors {
+                            top: parent.top
+                            left: parent.left
+                            leftMargin: Theme.paddingLarge
+                        }
+                        width: Theme.itemSizeSmall
+                    }
+
+                    BusyIndicator {
+                        id: slotBusy
+                        anchors.centerIn: slotImage
+                        running: slotDelegate.busy
+                    }
+
+                    Label {
+                        id: slotName
+                        anchors {
+                            left: slotImage.right
+                            leftMargin: Theme.paddingMedium
+                            right: parent.right
+                            rightMargin: Theme.paddiumLarge
+                            verticalCenter: parent.verticalCenter
+                        }
+                        text: isEmptySlot ? qsTr("(empty slot)") : (isKnownApp ? appInfo.longName : qsTr("(slot in use by unknown app)"))
+                        color: slotDelegate.highlighted ? Theme.highlightColor : Theme.primaryColor
+                        onTextChanged: slotDelegate.busy = false;
+                    }
+
+                    Component {
+                        id: slotMenu
+                        ContextMenu {
+                            MenuItem {
+                                text: qsTr("Configure...")
+                                visible: !isEmptySlot && isKnownApp
+                                onClicked: configure();
+                            }
+                            MenuItem {
+                                text: qsTr("Uninstall")
+                                visible: !isEmptySlot
+                                onClicked: remove();
+                            }
+                        }
+                    }
+
+                    onClicked: {
+                        if (isEmptySlot) {
+                            install();
+                        } else {
+                            showMenu();
+                        }
+                    }
                 }
             }
-
         }
     }
 }