Updater ui

client/src/modules/updater.js

@@ -43,6 +43,18 @@ export default new class extends Module {
 
         ipc.on('updater-updatesAvailable', (_, updates) => {
             if (this.state.updating) return; // If for some reason we get more updates when we're already updating
+            updates.bd = updates.bd.map(update => {
+                update.text = `${update.id.charAt(0).toUpperCase()}${update.id.slice(1)}`;
+                update.hint = `Current: ${update.currentVersion} | Latest: ${update.version}`;
+                update.status = {
+                    update: true,
+                    updating: false,
+                    updated: false,
+                    error: null
+                };
+
+                return update;
+            });
             this.setState({
                 updates,
                 updatesAvailable: true
@@ -55,4 +67,8 @@ export default new class extends Module {
         if (!oldState.updatesAvailable && newState.updatesAvailable) return Events.emit('updates-available');
     }
 
+    toggleUpdate(update) {
+        update.status.update = !update.status.update;
+    }
+
 }

client/src/ui/components/bd/UpdaterStatus.vue

@@ -0,0 +1,28 @@
+/**
+ * BetterDiscord Updater Status Component
+ * Copyright (c) 2015-present Jiiks/JsSucks - https://github.com/Jiiks / https://github.com/JsSucks
+ * All rights reserved.
+ * https://betterdiscord.net
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+*/
+
+<template>
+    <div class="bd-settingSwitch">
+        <div class="bd-title">
+            <h3>{{item.text}}</h3>
+            <h3 class="bd-updaterStatus" v-if="item.status.error">Update Failed!</h3>
+            <h3 class="bd-updaterStatus" v-else-if="item.status.updated">Done</h3>
+            <div class="bd-spinner7" v-else-if="item.status.updating" />
+            <h3 class="bd-updaterStatus" v-else>Unknown</h3>
+        </div>
+        <div class="bd-hint">{{item.hint}}</div>
+    </div>
+</template>
+
+<script>
+    export default {
+        props: ['item']
+    }
+</script>

client/src/ui/components/bd/UpdaterToggle.vue

@@ -0,0 +1,28 @@
+/**
+ * BetterDiscord Updater Switch Component
+ * Copyright (c) 2015-present Jiiks/JsSucks - https://github.com/Jiiks / https://github.com/JsSucks
+ * All rights reserved.
+ * https://betterdiscord.net
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+*/
+
+<template>
+    <div class="bd-settingSwitch">
+        <div class="bd-title">
+            <h3>{{item.text}}</h3>
+            <div class="bd-switchWrapper" @click="() => toggle(item)">
+                <input type="checkbox" class="bd-switchCheckbox" />
+                <div class="bd-switch" :class="{'bd-checked': item.status.update}" />
+            </div>
+        </div>
+        <div class="bd-hint">{{item.hint}}</div>
+    </div>
+</template>
+
+<script>
+    export default {
+        props: ['item', 'toggle']
+    }
+</script>

client/src/ui/components/bd/UpdaterView.vue

@@ -18,11 +18,15 @@
                     </div>
                     <div class="bd-formDivider"></div>
                     <div v-for="update in bdUpdates">
-                        {{update.id}} - {{update.currentVersion}} - {{update.version}}
+                        <UpdaterStatus :item="update" v-if="update.status.updating" />
+                        <UpdaterToggle :item="update" :toggle="() => updater.toggleUpdate(update)" v-else />
                         <div class="bd-formDivider"></div>
                     </div>
                 </div>
             </div>
+            <div class="bd-formButton bd-button" @click="update">
+                Update
+            </div>
         </div>
     </SettingsWrapper>
 </template>
@@ -31,7 +35,8 @@
     import { Globals, Updater } from 'modules';
     import { ClientLogger as Logger } from 'common';
     import SettingsWrapper from './SettingsWrapper.vue';
-    import { FormButton } from '../common';
+    import UpdaterToggle from './UpdaterToggle.vue';
+    import UpdaterStatus from './UpdaterStatus.vue';
 
     export default {
         data() {
@@ -43,7 +48,8 @@
         },
         components: {
             SettingsWrapper,
-            FormButton
+            UpdaterToggle,
+            UpdaterStatus
         },
         computed: {
             updatesAvailable() {
@@ -63,8 +69,9 @@
             }
         },
         methods: {
-            async install() {
-
+            async update() {
+                // TODO
+                console.log('update');
             }
         }
     }

client/src/ui/components/bd/index.js

@@ -4,5 +4,7 @@ export { default as CssEditorView } from './CssEditor.vue';
 export { default as PluginsView } from './PluginsView.vue';
 export { default as ThemesView } from './ThemesView.vue';
 export { default as UpdaterView } from './UpdaterView.vue';
+export { default as UpdaterStatus } from './UpdaterStatus.vue';
+export { default as UpdaterToggle } from './UpdaterToggle.vue';
 export { default as BdBadge } from './BdBadge.vue';
 export { default as ConnectivityView } from './ConnectivityView.vue';