Add section to set the primary backup target for updates

dashboard/src/views/SystemUpdateView.vue

@@ -1,11 +1,53 @@
 <script setup>
 
+import { ref, onMounted } from 'vue';
+import { SingleSelect } from '@cloudron/pankow';
 import SystemUpdate from '../components/SystemUpdate.vue';
+import Section from '../components/Section.vue';
+import SettingsItem from '../components/SettingsItem.vue';
+import BackupTargetsModel from '../models/BackupTargetsModel.js';
+
+const backupTargetsModel = BackupTargetsModel.create();
+
+const targets = ref([]);
+const primaryTargetId = ref('');
+const primaryTargetChangeBusy = ref(false);
+
+async function onPrimaryTargetChanged(value) {
+  primaryTargetChangeBusy.value = true;
+
+  const [error] = await backupTargetsModel.setPrimary(value);
+  if (error) return console.error(error);
+
+  primaryTargetId.value = value;
+  primaryTargetChangeBusy.value = false;
+}
+
+onMounted(async () => {
+  const [error, result] = await backupTargetsModel.list();
+  if (error) return console.error(error);
+
+  primaryTargetId.value = result.find(t => t.primary)?.id;
+
+  targets.value = result;
+});
 
 </script>
 
 <template>
   <div class="content">
     <SystemUpdate />
+
+    <Section title="Backups for Updates">
+      <SettingsItem>
+        <div>
+          <label>Storage</label>
+          <div>For backups created for automatic or manual updates</div>
+        </div>
+        <div style="display: flex; align-items: center">
+          <SingleSelect style="min-width: 160px" :disabled="primaryTargetChangeBusy" v-model="primaryTargetId" :searchThreshold="10" :options="targets" option-key="id" option-label="name" @select="onPrimaryTargetChanged" />
+        </div>
+      </SettingsItem>
+    </Section>
   </div>
 </template>