ui: use Buefy components to...

... beautify the UI

ui/mock-server.js

@@ -17,31 +17,7 @@ function progressSimulation (res) {
   }, 1500)
 }
 
-app.get('/api/attrs', (req, res) => {
-  res.send(
-    `var base_attributes = {"name":"yuzu","target_url":"https://raw.githubusercontent.com/j-selby/test-installer/master/config.linux.v2.toml"};`
-  )
-})
-
-app.get('/api/dark-mode', (req, res) => {
-  res.json(false)
-})
-
-app.get('/api/installation-status', (req, res) => {
-  res.json({
-    database: { packages: [], shortcuts: [] },
-    install_path: null,
-    preexisting_install: false,
-    is_launcher: false,
-    launcher_path: null
-  })
-})
-
-app.get('/api/default-path', (req, res) => {
-  res.json({ path: '/tmp/test/' })
-})
-
-app.get('/api/config', (req, res) => {
+function returnConfig (res) {
   res.json({
     installing_message:
       'Test Banner <strong>Bold</strong>&nbsp;<pre>Code block</pre>&nbsp;<i>Italic</i>&nbsp;<del>Strike</del>',
@@ -73,6 +49,36 @@ app.get('/api/config', (req, res) => {
     ],
     hide_advanced: false
   })
+}
+
+app.get('/api/attrs', (req, res) => {
+  res.send(
+    `var base_attributes = {"name":"yuzu","target_url":"https://raw.githubusercontent.com/j-selby/test-installer/master/config.linux.v2.toml"};`
+  )
+})
+
+app.get('/api/dark-mode', (req, res) => {
+  res.json(false)
+})
+
+app.get('/api/installation-status', (req, res) => {
+  res.json({
+    database: { packages: [], shortcuts: [] },
+    install_path: null,
+    preexisting_install: false,
+    is_launcher: false,
+    launcher_path: null
+  })
+})
+
+app.get('/api/default-path', (req, res) => {
+  res.json({ path: '/tmp/test/' })
+})
+
+app.get('/api/config', (req, res) => {
+  setTimeout(() => {
+    returnConfig(res)
+  }, 3000)
 })
 
 app.post('/api/start-install', (req, res) => {

ui/src/main.js

@@ -2,9 +2,11 @@ import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 import { ajax, stream_ajax } from './helpers'
+import Buefy from 'buefy'
 import 'buefy/dist/buefy.css'
 
 Vue.config.productionTip = false
+Vue.use(Buefy)
 
 // Borrowed from http://tobyho.com/2012/07/27/taking-over-console-log/
 function intercept (method) {

ui/src/views/DownloadConfig.vue

@@ -3,7 +3,7 @@
             <h4 class="subtitle">Downloading config...</h4>
 
             <br />
-            <progress class="progress is-info is-medium" value="0" max="100">
+            <progress class="progress is-info is-medium" max="100">
                 0%
             </progress>
     </div>

ui/src/views/ErrorView.vue

@@ -1,9 +1,6 @@
 <template>
   <div class="column has-padding">
-            <h4 class="subtitle">An error occurred:</h4>
-
-            <pre class="pre-wrap">{{ msg }}</pre>
-
+    <b-message title="An error occurred" type="is-danger" :closable="false">{{ msg }}</b-message>
     <div class="field is-grouped is-right-floating is-bottom-floating">
       <p class="control">
         <a class="button is-primary is-medium" v-if="remaining" v-on:click="go_back">Back</a>

ui/src/views/SelectPackages.vue

@@ -8,8 +8,9 @@
                     <div class="tile is-child">
                         <div class="box clickable-box" v-on:click.capture.stop="Lpackage.default = !Lpackage.default">
                             <label class="checkbox">
-                                <input type="checkbox" v-model="Lpackage.default" />
+                                <b-checkbox v-model="Lpackage.default">
                                   {{ Lpackage.name }}
+                                </b-checkbox>
                                 <span v-if="Lpackage.installed"><i>(installed)</i></span>
                             </label>
                             <p>