group editor code display changed

2026-10-18 23:03:12 +02:00
parent 04e05ecfd4
commit a66a795407
10 changed files with 109 additions and 111 deletions
@@ -1652,7 +1652,6 @@ globalThis.Wegwichtel = globalThis.Wegwichtel || {};
      if (shareInProgress) return;
      shareInProgress = true;
      try {
-        if (ns.Groups.confirmShare && !await ns.Groups.confirmShare(routeName(route))) return;
        let sourceId = routeId(route);
        if (routeSource(route) === 'local') {
          if (!globalThis.confirm(ns.I18n.t('groups.upload-confirm'))) return;
@@ -6,10 +6,11 @@ globalThis.Wegwichtel ??= {};
    joinOpen: 'group-join-open', editorJoin: 'editor-group-join', list: 'editor-group-list',
    dialog: 'group-dialog', close: 'group-close', status: 'group-status', wheels: 'group-wheels',
    entry: 'group-entry', invitation: 'group-invitation', code: 'group-code', join: 'group-join',
-    edit: 'group-edit', expiry: 'group-expiry'
+    edit: 'group-edit', expiry: 'group-expiry',
+    entryDialog: 'group-entry-dialog', entryClose: 'group-entry-close', entryStatus: 'group-entry-status'
  };
  const codeLength = 5;
-  const wheelStep = 52;
+  const wheelStep = 96;
  const revisions = new Map();
  let selection = [];
  let currentGroup = null;
@@ -73,12 +74,12 @@ globalThis.Wegwichtel ??= {};
  async function guarded(action) {
    if (pending) return;
    pending = true;
-    element(ids.status).textContent = '';
+    const status = element(element(ids.entryDialog).open ? ids.entryStatus : ids.status);
+    status.textContent = '';
    element(ids.join).disabled = true;
    try { await action(); } catch (error) {
-      element(ids.status).textContent = errorMessage(error);
-      if (!element(ids.dialog).open) {
-        element(ids.entry).hidden = true;
+      element(element(ids.entryDialog).open ? ids.entryStatus : ids.status).textContent = errorMessage(error);
+      if (!element(ids.dialog).open && !element(ids.entryDialog).open) {
        element(ids.invitation).hidden = true;
        element(ids.dialog).showModal();
      }
@@ -146,21 +147,22 @@ globalThis.Wegwichtel ??= {};
  }

  function openEntry() {
+    if (element(ids.dialog).open) element(ids.dialog).close();
    dialogGeneration += 1;
    selection = new Array(codeLength).fill(0);
-    element(ids.status).textContent = '';
-    element(ids.entry).hidden = false;
-    element(ids.invitation).hidden = true;
+    element(ids.entryStatus).textContent = '';
    const wheels = element(ids.wheels);
    wheels.replaceChildren(...selection.map((_, index) => makeWheel(index)));
-    if (!element(ids.dialog).open) element(ids.dialog).showModal();
+    if (!element(ids.entryDialog).open) element(ids.entryDialog).showModal();
  }

  function showInvitation(payload) {
+    if (!Array.isArray(payload.code) || payload.code.length !== codeLength) throw new Error(t('error.connection'));
    currentGroup = payload.group;
    element(ids.status).textContent = '';
-    element(ids.entry).hidden = true;
+    if (element(ids.entryDialog).open) element(ids.entryDialog).close();
    element(ids.invitation).hidden = false;
+    element('group-route').textContent = payload.group.route.name || '';
    const motifs = payload.code.map(value => ns.GroupSymbols.get(value));
    element(ids.code).replaceChildren(...motifs.map(picture));
    const time = new Date(payload.expiresAt * 1000).toLocaleTimeString(ns.I18n.language, { hour: '2-digit', minute: '2-digit' });
@@ -182,7 +184,8 @@ globalThis.Wegwichtel ??= {};
    finally { invitationPolling = false; }
  }
  async function edit(group) {
-    element(ids.dialog).close();
+    if (element(ids.dialog).open) element(ids.dialog).close();
+    if (element(ids.entryDialog).open) element(ids.entryDialog).close();
    await ns.EditorUi.openGroup(group.route);
  }

@@ -258,34 +261,20 @@ globalThis.Wegwichtel ??= {};
  function shareButton(action) {
    const result = document.createElement('button');
    result.type = 'button';
-    result.className = 'editor-icon-button';
+    result.className = 'editor-icon-button group-share-button';
    result.dataset.editorAction = action;
    result.title = t('share');
    result.setAttribute('aria-label', t('share'));
    result.setAttribute('aria-haspopup', 'dialog');
-    result.textContent = '👥';
+    const icon = document.createElement('img');
+    icon.src = '/images/icons/group-edit.svg';
+    icon.alt = '';
+    icon.width = 32;
+    icon.height = 32;
+    result.appendChild(icon);
    return result;
  }

-  let shareDecision = null;
-  function confirmShare(name) {
-    if (shareDecision) return Promise.resolve(false);
-    const dialog = element('group-share-dialog');
-    element('group-share-route').textContent = name;
-    element('group-share-pictures').replaceChildren(...['🐦', '🪨'].map(value => picture(ns.GroupSymbols.get(value))));
-    return new Promise(resolve => {
-      shareDecision = resolve;
-      dialog.showModal();
-    });
-  }
-
-  function finishShare(accepted) {
-    const resolve = shareDecision;
-    shareDecision = null;
-    element('group-share-dialog').close();
-    resolve?.(accepted);
-  }
-
  function headersFor(path) {
    const id = /^\/routes\/(\d+)(?:\/|$)/.exec(path)?.[1];
    return id && revisions.has(id) ? { 'If-Match': String(revisions.get(id)) } : {};
@@ -306,31 +295,27 @@ globalThis.Wegwichtel ??= {};
        code: selection.map(index => motifs[index].unicode), creator_id: ns.LocalRoutes.creatorId()
      });
    } catch (error) {
-      if (!element(ids.dialog).open || generation !== dialogGeneration) return;
+      if (!element(ids.entryDialog).open || generation !== dialogGeneration) return;
      throw error;
    }
-    if (!element(ids.dialog).open || generation !== dialogGeneration) return;
+    if (!element(ids.entryDialog).open || generation !== dialogGeneration) return;
    await edit(payload.group);
    await refresh();
  }

  function init() {
    globalThis.setInterval?.(() => { refreshInvitation(); }, 30_000);
-    activate(element('group-share-start'), () => finishShare(true));
-    activate(element('group-share-close'), () => finishShare(false));
-    element('group-share-dialog').addEventListener('close', () => {
-      const resolve = shareDecision; shareDecision = null; resolve?.(false);
-    });
    document.addEventListener('wegwichtel:point-drafts-changed', () => { renderPending(); ns.StorageUsage?.refresh(); });
-    element(ids.dialog).addEventListener('cancel', () => { dialogGeneration += 1; });
-    element(ids.dialog).addEventListener('close', () => { dialogGeneration += 1; });
+    element(ids.entryDialog).addEventListener('cancel', () => { dialogGeneration += 1; });
+    element(ids.entryDialog).addEventListener('close', () => { dialogGeneration += 1; });
+    activate(element(ids.entryClose), () => element(ids.entryDialog).close());
    for (const id of [ids.joinOpen, ids.editorJoin]) activate(element(id), openEntry);
    activate(element(ids.close), () => element(ids.dialog).close());
    activate(element(ids.join), () => guarded(joinSelectedGroup));
    activate(element(ids.edit), () => guarded(() => edit(currentGroup)));
  }

-  ns.Groups = Object.freeze({ share, shareButton, confirmShare, refresh, refreshInvitation, headersFor, observe });
+  ns.Groups = Object.freeze({ share, shareButton, refresh, refreshInvitation, headersFor, observe });
  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init, { once: true });
  else init();
 }(globalThis.Wegwichtel));
@@ -135,8 +135,6 @@ globalThis.Wegwichtel ??= {};
      },
      "groups": {
        "code-wait": "In der Gruppe wird gerade eine Station bearbeitet. Ein neuer Code erscheint, sobald die Stationen wieder frei sind. Ein abgelaufener Code erlaubt keinen neuen Beitritt.",
-        "share-help": "Mit diesen beiden Wichteln öffnest du einen gemeinsamen Entwurf. Andere können mit einem Wichtelcode mitmachen. Das Original bleibt erhalten.",
-        "share-start": "Gemeinsamen Entwurf öffnen",
        "title": "Gemeinsame Entwürfe",
        "upload-confirm": "Dein Entwurf mit Bildern und Ton wird dafür an die Website gesendet und als gemeinsamer Entwurf kopiert. Fortfahren?",
        "share": "Gemeinsam bearbeiten",
@@ -135,8 +135,6 @@ globalThis.Wegwichtel ??= {};
      },
      "groups": {
        "code-wait": "Someone in the group is editing a stop. A new code will appear once the stops are free. An expired code cannot be used to join.",
-        "share-help": "These two gnomes open a shared draft. Others can join using a gnome code. The original stays unchanged.",
-        "share-start": "Open a shared draft",
        "title": "Shared drafts",
        "upload-confirm": "Your draft, including pictures and recordings, will be sent to the website and copied into a shared draft. Continue?",
        "share": "Edit together",