1 files changed, 152 insertions, 5 deletions

diff --git a/app/qml/pages/WatchPage.qml b/app/qml/pages/WatchPage.qml
index 90e5ec9..43c2b99 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
             }
@@ -61,7 +60,7 @@ Page {
 
 
                 Button {
-                    text: "Ping"
+                    text: qsTr("Ping")
                     width: parent.width / 2
                     onClicked: {
                         pebbled.ping(66)
@@ -69,7 +68,7 @@ Page {
                 }
 
                 Button {
-                    text: "Sync Time"
+                    text: qsTr("Sync Time")
                     width: parent.width / 2
                     onClicked: {
                         pebbled.time()
@@ -77,6 +76,154 @@ Page {
                 }
             }
 
+            Item {
+                width: parent.width
+                height: Theme.paddingLarge
+            }
+
+            Label {
+                text: qsTr("Installed applications")
+                font.family: Theme.fontFamilyHeading
+                color: Theme.highlightColor
+                anchors.right: parent.right
+                anchors.rightMargin: Theme.paddingMedium
+            }
+
+            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("AppConfigDialog.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);
+                        });
+
+                    }
+
+                    Item {
+                        id: slotIcon
+                        width: Theme.itemSizeSmall
+                        height: Theme.itemSizeSmall
+
+                        anchors {
+                            top: parent.top
+                            left: parent.left
+                            leftMargin: Theme.paddingLarge
+                        }
+
+                        Image {
+                            id: slotImage
+                            anchors.centerIn: parent
+                            source: isKnownApp ? "image://pebble-app-icon/" + modelData : ""
+                            scale: 2
+                            visible: !isEmptySlot && isKnownApp && !slotBusy.running
+                        }
+
+                        Rectangle {
+                            width: 30
+                            height: 30
+                            anchors.centerIn: parent
+                            scale: 2
+                            border {
+                                width: 2
+                                color: slotDelegate.highlighted ? Theme.highlightColor : Theme.primaryColor
+                            }
+                            color: "transparent"
+                            visible: isEmptySlot && !slotBusy.running
+                        }
+
+                        BusyIndicator {
+                            id: slotBusy
+                            anchors.centerIn: parent
+                            running: slotDelegate.busy
+                        }
+                    }
+
+                    Label {
+                        id: slotName
+                        anchors {
+                            left: slotIcon.right
+                            leftMargin: Theme.paddingMedium
+                            right: parent.right
+                            rightMargin: Theme.paddingLarge
+                            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("Install app...")
+                                visible: isEmptySlot
+                                onClicked: install();
+                            }
+                            MenuItem {
+                                text: qsTr("Configure...")
+                                visible: !isEmptySlot && isKnownApp
+                                onClicked: configure();
+                            }
+                            MenuItem {
+                                text: qsTr("Uninstall")
+                                visible: !isEmptySlot
+                                onClicked: remove();
+                            }
+                        }
+                    }
+
+                    onClicked: {
+                        if (isEmptySlot) {
+                            install();
+                        } else {
+                            showMenu();
+                        }
+                    }
+                }
+            }
         }
     }
 }