webui: Update RoomDetail

webui/public/locales/de/panel.json

@@ -1,4 +1,41 @@
 {
+  "rooms": {
+    "detail": {
+      "activate": {
+        "label": "Raum Aktivieren"
+      },
+      "debug": {
+        "label": "Debug-Modus"
+      },
+      "adminPowerLevel": {
+        "label": "Admin-Powerlevel"
+      },
+      "set": {
+        "label": "Ok"
+      },
+      "hashChecker": {
+        "label": "Hash-Prüfer",
+        "notice": {
+          "label": "Nachricht in den Chat senden"
+        },
+        "hashCheckMode": {
+          "label": "Verhalten bei Übereinstimmung",
+          "NOTICE": {
+            "label": "Nur Nachricht senden"
+          },
+          "DELETE": {
+            "label": "Nachricht löschen"
+          },
+          "MUTE": {
+            "label": "Stummschalten & Löschen"
+          },
+          "BAN": {
+            "label": "Verbannen & Löschen"
+          }
+        }
+      }
+    }
+  },
   "jump_to_content": "Zum Inhalt springen",
   "jump_to_navigation": "Zur Navigation springen",
   "documentation": "Dokumentation",

webui/public/locales/de/translation.json

@@ -1,4 +1,7 @@
 {
+  "common": {
+    "loading": "Lädt..."
+  },
   "list": {
     "none": "Keine Einträge",
     "loading": "Lade weitere Einträge...",
@@ -18,8 +21,8 @@
     "debug": "Debug",
     "inactive": "Inaktiv",
     "active": "Aktiv",
-    "title": "Meine Räume",
     "details": "Details",
+    "title": "Meine Räume",
     "name": "Name",
     "id": "ID"
   }

webui/public/locales/en/panel.json

@@ -1,4 +1,41 @@
 {
+  "rooms": {
+    "detail": {
+      "activate": {
+        "label": "Activate Room"
+      },
+      "debug": {
+        "label": "Debug-Mode"
+      },
+      "adminPowerLevel": {
+        "label": "Admin-Power Level"
+      },
+      "set": {
+        "label": "Set"
+      },
+      "hashChecker": {
+        "label": "Hash-Checker",
+        "notice": {
+          "label": "Send Notice to Chat"
+        },
+        "hashCheckMode": {
+          "label": "Behaviour on Match",
+          "NOTICE": {
+            "label": "Only send a Notice"
+          },
+          "DELETE": {
+            "label": "Delete the Message"
+          },
+          "MUTE": {
+            "label": "Mute User & Delete"
+          },
+          "BAN": {
+            "label": "Ban User & Delete"
+          }
+        }
+      }
+    }
+  },
   "jump_to_content": "Jump to Content",
   "jump_to_navigation": "Jump to Navigation",
   "documentation": "Documentation",

webui/public/locales/en/translation.json

@@ -1,4 +1,7 @@
 {
+  "common": {
+    "loading": "Loading..."
+  },
   "list": {
     "none": "No entries",
     "loading": "Loading more entries...",
@@ -18,8 +21,8 @@
     "debug": "Debug",
     "inactive": "Inactive",
     "active": "Active",
-    "title": "My Rooms",
     "details": "Details",
+    "title": "My Rooms",
     "name": "Name",
     "id": "Room ID"
   }

webui/src/_globals.scss

@@ -83,3 +83,89 @@
     }
   }
 }
+
+@mixin inputGroup {
+  display: flex;
+
+  input, button {
+    @include input;
+  }
+
+  > input, > button {
+    border-radius: 0;
+
+    &:first-child {
+      border-radius: var(--veles-layout-border-radius) 0 0 var(--veles-layout-border-radius);
+    }
+    &:last-child {
+      border-radius: 0 var(--veles-layout-border-radius) var(--veles-layout-border-radius) 0;
+    }
+
+    &:not(:first-child) {
+      border-left: none;
+    }
+    &:not(:first-child) {
+      border-left: none;
+    }
+  }
+}
+
+@mixin tableWrapper {
+  width: 100%;
+  overflow-y: scroll;
+
+  table {
+    width: 100%;
+
+    text-align: left;
+
+    white-space: nowrap;
+    border-spacing: 0;
+    border-collapse: collapse;
+
+    th, td {
+      padding: 10px 5px;
+    }
+
+    thead tr {
+      border-bottom: thin solid var(--veles-color-border-highlight);
+    }
+
+    tbody tr {
+      cursor:pointer;
+      border-bottom: thin solid var(--veles-color-border);
+
+      @include badges;
+
+      &:hover {
+        background: var(--veles-color-surface);
+      }
+    }
+  }
+}
+
+@mixin input {
+  padding: var(--veles-layout-padding-slim) var(--veles-layout-padding);
+  border: thin solid var(--veles-color-border);
+  border-radius: var(--veles-layout-border-radius);
+  background-color: var(--veles-color-background);
+  color: var(--veles-color-foreground);
+  transition: 250ms;
+  font: inherit;
+  display: block;
+
+  &:focus {
+    outline: 2px solid var(--veles-color-accent);
+    outline: 2px auto -webkit-focus-ring-color;
+    outline-offset: 2px;
+  }
+
+  &:disabled {
+    opacity: .75;
+    cursor: not-allowed;
+  }
+}
+
+@mixin settingsGroup {
+
+}

webui/src/components/form_components/ToggleButton.module.scss

@@ -1,7 +1,7 @@
 @import "../../globals";
 
 .toggle {
-  display: inline-flex;
+  display: flex;
   flex-wrap: wrap;
   align-items: center;
   position: relative;

webui/src/components/panel/rooms/RoomDetail.module.scss

@@ -4,3 +4,44 @@
   display: flex;
   gap: var(--veles-layout-padding)
 }
+
+.label {
+  display: block;
+  padding: var(--veles-layout-padding-slim);
+}
+
+.powerLevelInput {
+  @include inputGroup;
+
+  input {
+    flex-grow: 1;
+  }
+}
+
+.hashCheckModeChooser {
+  @include input;
+  width: 100%;
+}
+
+.listTable {
+  @include tableWrapper;
+  padding: var(--veles-layout-padding);
+}
+
+.settingsGroup {
+  display: block;
+  margin: var(--veles-layout-padding) var(--veles-layout-padding-inverse);
+
+  border-top: thin solid var(--veles-color-border);
+  border-bottom: thin solid var(--veles-color-border);
+
+  .settingsGroupTitle {
+    display: block;
+    border-bottom: thin solid var(--veles-color-border);
+    padding: var(--veles-layout-padding-slim) var(--veles-layout-padding);
+  }
+
+  .settingsGroupContent {
+    padding: var(--veles-layout-padding);
+  }
+}

webui/src/components/panel/rooms/RoomDetail.tsx

@@ -1,4 +1,4 @@
-import React, {useContext, useEffect} from "react";
+import React, {useContext, useEffect, useState} from "react";
 import {PreloadedQuery, usePreloadedQuery} from "react-relay/hooks";
 import {graphql} from "babel-plugin-relay/macro";
 import {RoomDetailQuery, RoomDetailQuery$variables} from "./__generated__/RoomDetailQuery.graphql";
@@ -7,8 +7,10 @@ import {useParams} from "react-router-dom";
 import {RoomsSlideOverTitleContext} from "./Rooms";
 import ToggleButton from "../../form_components/ToggleButton";
 
-//import styles from "./RoomDetail.module.scss";
+import styles from "./RoomDetail.module.scss";
 import {useReconfigureRoomMutation} from "../../../mutations/ReconfigureRoomMutation";
+import {HashCheckerMode} from "../../../mutations/__generated__/ReconfigureRoomMutation.graphql";
+import {Trans, useTranslation} from "react-i18next";
 
 type Props = {
     initialQueryRef: PreloadedQuery<RoomDetailQuery> | null | undefined,
@@ -22,7 +24,8 @@ type PropsFinal = {
 
 const RoomDetailInner = ({initialQueryRef}: PropsFinal) => {
     const [reconfigureRoom, reconfiguringRoom] = useReconfigureRoomMutation();
-
+    const [newAdminPowerLevel, setNewAdminPowerLevel] = useState<number|null>(null)
+    const {t} = useTranslation()
 
 
     const data = usePreloadedQuery(
@@ -52,7 +55,7 @@ const RoomDetailInner = ({initialQueryRef}: PropsFinal) => {
     titleSetContext && data.room?.name && titleSetContext(data.room.name);
 
     return <>
-        <ToggleButton name={"activeSwitch"} label={"Activate Room"} labelSrOnly={false} onChange={(ev) => {
+        <ToggleButton name={"activeSwitch"} label={t("panel:rooms.detail.activate.label", {defaultValue: "Activate Room"})} labelSrOnly={false} onChange={(ev) => {
             reconfigureRoom({
                 variables: {
                     reconfigureInput: {
@@ -61,9 +64,9 @@ const RoomDetailInner = ({initialQueryRef}: PropsFinal) => {
                     }
                 }
             })
-        }} disabled={reconfiguringRoom || ((data.room || false) && !data.room.active && !data.room.deactivated)} checked={data.room?.active}/><br/>
+        }} disabled={reconfiguringRoom || ((data.room || false) && !data.room.active && !data.room.deactivated)} checked={data.room?.active}/>
 
-        <ToggleButton name={"debugSwitch"} label={"Debug-Mode"} labelSrOnly={false} onChange={(ev) => {
+        <ToggleButton name={"debugSwitch"} label={t("panel:rooms.detail.debug.label", {defaultValue: "Debug-Mode"})} labelSrOnly={false} onChange={(ev) => {
             reconfigureRoom({
                 variables: {
                     reconfigureInput: {
@@ -74,8 +77,99 @@ const RoomDetailInner = ({initialQueryRef}: PropsFinal) => {
             })
         }} disabled={reconfiguringRoom || (!data.room)} checked={data.room?.debug}/>
 
+        <label htmlFor={"adminPowerLevelInput"} className={styles.label}><Trans i18nKey={"panel:rooms.detail.adminPowerLevel.label"}>Admin-Power Level</Trans></label>
+        <div className={styles.powerLevelInput}>
+            <input type={"number"} min={"50"} max={"100"} step={"1"} value={newAdminPowerLevel || data.room?.adminPowerLevel} onChange={(ev) => {
+                if(Number.parseInt(ev.currentTarget.value) === data.room?.adminPowerLevel) {
+                    setNewAdminPowerLevel(null)
+                    return
+                }
 
-        <pre>{JSON.stringify(data, null, 2)}</pre>
+                setNewAdminPowerLevel(Number.parseInt(ev.currentTarget.value))
+            }} id={"adminPowerLevelInput"} />
+            <button disabled={reconfiguringRoom || (!newAdminPowerLevel)} onClick={() => {
+                if(!newAdminPowerLevel) {
+                    return
+                }
+
+                reconfigureRoom({
+                    variables: {
+                        reconfigureInput: {
+                            id: data.room?.id!,
+                            adminPowerLevel: newAdminPowerLevel
+                        }
+                    }
+                })
+
+                setNewAdminPowerLevel(null)
+            }}><Trans i18nKey={"panel:rooms.detail.set.label"}>Set</Trans></button>
+        </div>
+
+        <div className={styles.settingsGroup}>
+            <span className={styles.settingsGroupTitle}><Trans i18nKey={"panel:rooms.detail.hashChecker.label"}>Hash-Checker</Trans></span>
+            <div className={styles.settingsGroupContent}>
+                <ToggleButton name={"chatNoticeSwitch"} label={t("panel:rooms.detail.hashChecker.notice.label", {defaultValue: "Send Notice to Chat"})} labelSrOnly={false} onChange={(ev) => {
+                    reconfigureRoom({
+                        variables: {
+                            reconfigureInput: {
+                                id: data.room?.id!,
+                                hashChecker: {
+                                    chatNotice: ev.currentTarget.checked
+                                }
+                            }
+                        }
+                    })
+                }} disabled={reconfiguringRoom || (!data.room)} checked={data.room?.hashCheckerConfig.chatNotice}/>
+
+                <label htmlFor={"hashCheckModeChooser"} className={styles.label}><Trans i18nKey={"panel:rooms.detail.hashChecker.hashCheckMode.label"}>Behaviour on Match</Trans></label>
+                <select value={data.room?.hashCheckerConfig.hashCheckMode} disabled={reconfiguringRoom || (!data.room)} onChange={(ev) => {
+                    reconfigureRoom({
+                        variables: {
+                            reconfigureInput: {
+                                id: data.room?.id!,
+                                hashChecker: {
+                                    hashCheckMode: ev.currentTarget.value as HashCheckerMode
+                                }
+                            }
+                        }
+                    })
+                }} className={styles.hashCheckModeChooser} id={"hashCheckModeChooser"}>
+                    <option value="NOTICE"><Trans i18nKey={"panel:rooms.detail.hashChecker.hashCheckMode.NOTICE.label"}>Only send a Notice</Trans></option>
+                    <option value="DELETE"><Trans i18nKey={"panel:rooms.detail.hashChecker.hashCheckMode.DELETE.label"}>Delete the Message</Trans></option>
+                    <option value="MUTE"><Trans i18nKey={"panel:rooms.detail.hashChecker.hashCheckMode.MUTE.label"}>Mute User & Delete</Trans></option>
+                    <option value="BAN"><Trans i18nKey={"panel:rooms.detail.hashChecker.hashCheckMode.BAN.label"}>Ban User & Delete</Trans></option>
+                </select>
+            </div>
+
+            <div className={styles.listTable}>
+                <table>
+                    <thead>
+                    <tr>
+                        <th><Trans i18nKey={"lists.name"}>Name</Trans></th>
+                        <th><Trans i18nKey={"lists.id"}>List ID</Trans></th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    {/*
+                        data.rooms?.edges.map((edge) => {
+                            return <tr onClick={() => {navigate("/rooms/"+edge.node.id)}} key={edge.node.id}>
+                                <td>
+                                    {edge.node.debug && <span className={styles.badge + " " + styles.blue}><Trans i18nKey={"rooms.debug"}>Debug</Trans></span>}
+                                    {!edge.node.active && <span className={styles.badge + " " + styles.red}><Trans i18nKey={"rooms.inactive"}>Inactive</Trans></span>}
+                                    {edge.node.active && <span className={styles.badge + " " + styles.green}><Trans i18nKey={"rooms.active"}>Active</Trans></span>}
+                                </td>
+                                <td>{edge.node.name}</td>
+                                <td>{edge.node.roomId}</td>
+                            </tr>;
+                        })
+                    */}
+                    </tbody>
+                </table>
+            </div>
+        </div>
+
+
+        <pre style={{opacity: .25}}>{JSON.stringify(data, null, 2)}</pre>
     </>
 }
 

webui/src/components/panel/rooms/RoomsTable.module.scss

@@ -1,35 +1,5 @@
 @import "../../../globals";
 
 .roomsTableWrapper {
-  width: 100%;
+  @include tableWrapper;
-  overflow-y: scroll;
-
-  .roomsTable {
-    width: 100%;
-
-    text-align: left;
-
-    white-space: nowrap;
-    border-spacing: 0;
-    border-collapse: collapse;
-
-    th, td {
-      padding: 10px 5px;
-    }
-
-    thead tr {
-      border-bottom: thin solid var(--veles-color-border-highlight);
-    }
-
-    tbody tr {
-      cursor:pointer;
-      border-bottom: thin solid var(--veles-color-border);
-
-      @include badges;
-
-      &:hover {
-        background: var(--veles-color-surface);
-      }
-    }
-  }
 }