prepare UI

2024-07-09 14:11:20 +02:00
parent ff0f3d9499
commit 48633ce534
19 changed files with 640 additions and 901 deletions
@@ -1,16 +1,86 @@
 import * as React from "bloatless-react";

-import { ConnectionInputView } from "./connectionSettingsView";
-import { ConnectionStatusView } from "./connectionStatusView";
+import {
+  cannotConnect,
+  cannotDeleteMailbox,
+  cannotDisonnect,
+  cannotRequestMailbox,
+  connect,
+  deleteMailbox,
+  disconnect,
+  requestMailbox,
+  serverAddressInput,
+} from "../Model/model";
+
 import { translation } from "../translations";

 export function ConnectionSection() {
  return (
-    <div>
-        <h2>{translation.connection}</h2>
-        {ConnectionStatusView()}
-        <hr></hr>
-        {ConnectionInputView()}
+    <div class="flex-column">
+      <label class="tile">
+        <span class="icon">cell_tower</span>
+        <div>
+          <span>{translation.serverAddress}</span>
+          <input
+            bind:value={serverAddressInput}
+            on:enter={connect}
+            placeholder={translation.serverAddressPlaceholder}
+          ></input>
+        </div>
+      </label>
+      <div class="flex-row width-input justify-end">
+        <button
+          class="danger width-100 flex-1"
+          aria-label={translation.disconnect}
+          on:click={disconnect}
+          toggle:disabled={cannotDisonnect}
+        >
+          <span class="icon">close</span>
+        </button>
+        <button
+          class="width-100 flex-1"
+          aria-label={translation.resetAddress}
+          on:click={disconnect}
+          toggle:disabled={cannotDisonnect}
+        >
+          <span class="icon">undo</span>
+        </button>
+        <button
+          class="primary width-100 flex-1"
+          aria-label={translation.connectToServer}
+          on:click={connect}
+          toggle:disabled={cannotConnect}
+        >
+          <span class="icon">arrow_forward</span>
+        </button>
+      </div>
+
+      <hr></hr>
+
+      <div class="tile">
+        <span class="icon">inbox</span>
+        <div>
+          <b>{translation.mailbox}</b>
+          <span class="secondary">{translation.mailboxExplanation}</span>
+        </div>
+      </div>
+      <div class="flex-row width-input justify-end">
+        <button
+          class="danger width-100 flex-1"
+          on:click={deleteMailbox}
+          toggle:disabled={cannotDeleteMailbox}
+        >
+          {translation.deleteMailbox}
+        </button>
+        <button
+          class="primary width-100 flex-1"
+          on:click={requestMailbox}
+          toggle:disabled={cannotRequestMailbox}
+        >
+          {translation.requestMailbox}
+          <span class="icon">arrow_forward</span>
+        </button>
+      </div>
    </div>
  );
 }