Screen rotation dialog

src/svelte-components/src/dialogs/ChangeHostnameDialog.svelte

@@ -88,7 +88,7 @@
       <Label>Cancel</Label>
     </Button>
     <Button defaultAction on:click={onConfirm} disabled={hostname.length === 0}>
-      <Label>Confirm</Label>
+      <Label>Confirm & Reboot</Label>
     </Button>
   </Actions>
 </Dialog>

src/svelte-components/src/dialogs/DialogHost.svelte

@@ -1,31 +1,48 @@
 <script lang="ts" context="module">
+  import { writable } from "svelte/store";
   import HomeMachineDialog from "$dialogs/HomeMachineDialog.svelte";
   import ProbeDialog from "$dialogs/ProbeDialog.svelte";
-  import {
-    HomeMachineProps,
-    ProbeProps,
-    type HomeMachinePropsType,
-    type ProbePropsType,
-  } from "$dialogs/DialogProps";
+  import ScreenRotationDialog from "$dialogs/ScreenRotationDialog.svelte";
+
+  const HomeMachineDialogProps = writable<HomeMachineDialogPropsType>();
+  type HomeMachineDialogPropsType = {
+    open: boolean;
+    home: () => void;
+  };
+
+  const ProbeDialogProps = writable<ProbeDialogPropsType>();
+  type ProbeDialogPropsType = {
+    open: boolean;
+    probeType: "xyz" | "z";
+  };
+
+  const ScreenRotationDialogProps = writable<ProbeDialogPropsType>();
+  type ScreenRotationDialogPropsType = {
+    open: boolean;
+  };
 
   export function showDialog(
     dialog: "HomeMachine",
-    props: Omit<HomeMachinePropsType, "open">
+    props: Omit<HomeMachineDialogPropsType, "open">
   );
 
   export function showDialog(
     dialog: "Probe",
-    props: Omit<ProbePropsType, "open">
+    props: Omit<ProbeDialogPropsType, "open">
   );
 
   export function showDialog(dialog: string, props: any) {
     switch (dialog) {
       case "HomeMachine":
-        HomeMachineProps.set({ ...props, open: true });
+        HomeMachineDialogProps.set({ ...props, open: true });
         break;
 
       case "Probe":
-        ProbeProps.set({ ...props, open: true });
+        ProbeDialogProps.set({ ...props, open: true });
+        break;
+
+      case "ScreenRotation":
+        ScreenRotationDialogProps.set({ ...props, open: true });
         break;
 
       default:
@@ -34,5 +51,6 @@
   }
 </script>
 
-<HomeMachineDialog {...$HomeMachineProps} />
-<ProbeDialog {...$ProbeProps} />
+<HomeMachineDialog {...$HomeMachineDialogProps} />
+<ProbeDialog {...$ProbeDialogProps} />
+<ScreenRotationDialog {...$ScreenRotationDialogProps} />

src/svelte-components/src/dialogs/DialogProps.ts

@@ -1,13 +0,0 @@
-import { writable } from "svelte/store";
-
-export const HomeMachineProps = writable<HomeMachinePropsType>();
-export type HomeMachinePropsType = {
-    open: boolean,
-    home: () => void
-}
-
-export const ProbeProps = writable<ProbePropsType>();
-export type ProbePropsType = {
-    open: boolean,
-    probeType: "xyz" | "z"
-};

src/svelte-components/src/dialogs/ScreenRotationDialog.svelte

@@ -0,0 +1,76 @@
+<script type="ts">
+  import Dialog, { Title, Content, Actions } from "@smui/dialog";
+  import Button, { Label } from "@smui/button";
+  import Radio from "@smui/radio";
+  import FormField from "@smui/form-field";
+  import MessageDialog from "$dialogs/MessageDialog.svelte";
+  import * as Api from "$lib/api";
+  import { onMount } from "svelte";
+
+  const options = [
+    { value: 0, label: "Normal" },
+    { value: 1, label: "Upside-down" },
+  ];
+
+  export let open;
+  let currentValue;
+  let value;
+  let rebooting;
+
+  onMount(async () => {
+    const result = await Api.GET("screen-rotation");
+    currentValue = value = result.rotated ? 1 : 0;
+  });
+
+  async function onConfirm() {
+    rebooting = true;
+
+    await Api.PUT("screen-rotation", { rotated: value === 1 });
+  }
+</script>
+
+<MessageDialog open={rebooting} title="Rebooting">
+  Rebooting to apply the new screen rotation...
+</MessageDialog>
+
+<Dialog
+  bind:open
+  scrimClickAction=""
+  aria-labelledby="screen-rotation-title"
+  aria-describedby="screen-rotation-content"
+>
+  <Title id="screen-rotation-title">Screen Rotation</Title>
+
+  <Content id="screen-rotation-content">
+    {#each options as option}
+      <FormField>
+        <Radio bind:group={value} value={option.value} />
+        <span slot="label">
+          {option.label}
+        </span>
+      </FormField>
+    {/each}
+  </Content>
+
+  <Actions>
+    <Button>
+      <Label>Cancel</Label>
+    </Button>
+    <Button
+      defaultAction
+      disabled={value === currentValue}
+      on:click={onConfirm}
+    >
+      <Label>Confirm & Reboot</Label>
+    </Button>
+  </Actions>
+</Dialog>
+
+<style lang="scss">
+  :global {
+    #screen-rotation-content {
+      display: flex;
+      flex-direction: column;
+    }
+  }
+</style>

src/svelte-components/src/dialogs/WifiConnectionDialog.svelte

@@ -92,7 +92,7 @@
       on:click={onConfirm}
       disabled={needPassword && (password.length < 8 || password.length > 128)}
     >
-      <Label>{connectOrDisconnect}</Label>
+      <Label>{connectOrDisconnect} & Reboot</Label>
     </Button>
   </Actions>
 </Dialog>