finish chat so far

2024-07-09 17:23:29 +02:00
parent dae32fa6e7
commit 1f482dd35d
12 changed files with 657 additions and 548 deletions
@@ -0,0 +1,119 @@
+import * as React from "bloatless-react";
+
+import { Chat } from "../Model/chatModel";
+import { translation } from "../translations";
+
+export function ChatOptionModal(chat: Chat, isPresented: React.State<boolean>) {
+  function closeModal() {
+    isPresented.value = false;
+  }
+
+  const secondaryChannelConverter: React.ListItemConverter<string> = (
+    secondaryChannel
+  ) => {
+    function remove() {
+      chat.removeSecondaryChannel(secondaryChannel);
+    }
+
+    return (
+      <div class="tile width-input padding-0">
+        <div class="flex-row justify-apart align-center">
+          <b class="padding-h">{secondaryChannel}</b>
+          <button
+            class="danger"
+            aria-label={translation.removeSecondaryChannel}
+            on:click={remove}
+          >
+            <span class="icon">delete</span>
+          </button>
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <div class="modal" toggle:open={isPresented}>
+      <div>
+        <main>
+          <h2>{translation.configureChatTitle}</h2>
+
+          <div>
+            <label class="tile">
+              <span class="icon">forum</span>
+              <div>
+                <span>{translation.primaryChannel}</span>
+                <input
+                  bind:value={chat.primaryChannelInput}
+                  placeholder={translation.primaryChannelPlaceholder}
+                  on:enter={chat.setChannel}
+                ></input>
+              </div>
+            </label>
+            <div class="flex-row width-input">
+              <button
+                aria-label={translation.undoChanges}
+                class="flex justify-center"
+                on:click={chat.undoChannelChange}
+                toggle:disabled={chat.cannotUndoChannel}
+              >
+                <span class="icon">undo</span>
+              </button>
+              <button
+                aria-label={translation.set}
+                class="flex justify-center primary"
+                on:click={chat.setChannel}
+                toggle:disabled={chat.cannotSetChannel}
+              >
+                <span class="icon">check</span>
+              </button>
+            </div>
+          </div>
+
+          <hr></hr>
+
+          <div class="flex-row margin-bottom width-input">
+            <input
+              aria-label={translation.secondaryChannel}
+              placeholder={translation.secondaryChannelPlaceholder}
+              bind:value={chat.newSecondaryChannelName}
+              on:enter={chat.addSecondaryChannel}
+            ></input>
+            <button
+              class="primary"
+              toggle:disabled={chat.cannotAddSecondaryChannel}
+              aria-label={translation.addSecondaryChannel}
+              on:click={chat.addSecondaryChannel}
+            >
+              <span class="icon">add</span>
+            </button>
+          </div>
+
+          <div
+            class="flex-column gap"
+            children:prepend={[
+              chat.secondaryChannels,
+              secondaryChannelConverter,
+            ]}
+          ></div>
+
+          <hr></hr>
+
+          <label class="tile">
+            <span class="icon">key</span>
+            <div>
+              <span>{translation.encryptionKey}</span>
+              <input
+                placeholder={translation.encryptionKeyPlaceholder}
+                bind:value={chat.encryptionKey}
+              ></input>
+            </div>
+          </label>
+        </main>
+        <button class="danger" on:click={closeModal}>
+          {translation.close}
+          <span class="icon">close</span>
+        </button>
+      </div>
+    </div>
+  );
+}