neues ui

hmt · Feb 13, 2021 · edd80d6 · edd80d6
1 parent f6cf73c
commit edd80d6
Show file tree

Hide file tree

Showing 12 changed files with 243 additions and 236 deletions.
diff --git a/rollup.config.js b/rollup.config.js
@@ -62,7 +62,9 @@ export default {
 		commonjs(),
 		typescript({
 			sourceMap: true, //!production,
-			inlineSources: !production
+			inlineSources: !production,
+			target: "es6",
+			lib: [ "es2019", "dom" ]
 		}),
 
 		// In dev mode, call `npm run start` once

diff --git a/src/App.svelte b/src/App.svelte
@@ -1,46 +1,24 @@
 <script lang="ts">
   import "bulma/css/bulma.css";
-  import Server from "./Server.svelte";
+  import Widget from "./Widget.svelte";
+  import RoomList from "./RoomList.svelte";
+  import Settings from './Settings.svelte'
   import { server_list, selected } from "./store";
-
-  let status: Array<string> = []
-
-  function get_status_icon (key: string): string {
-    switch (key) {
-      case 'ok':
-        return 'check_circle'
-      case 'laden':
-        return 'loop'
-      default:
-        return 'offline_bolt'
-    }
-  }
-  </script>
+</script>
 
 <div class="container">
-  <div class="tabs">
-    <ul>
-      {#each $server_list as s,i}
-        <li class:is-active={$selected === s}>
-          <!-- svelte-ignore a11y-missing-attribute -->
-          <a on:click={(_) => ($selected = s)}
-            >{s.name || "Namenloser Server"}
-              <i class="material-icons">&nbsp;{get_status_icon(status[i])}</i>
-          </a>
-        </li>
-      {/each}
-      <li>
-        <!-- svelte-ignore a11y-missing-attribute -->
-        <a>
-          <i
-            class="material-icons is-clickable"
-            on:click={server_list.add}>add</i
-          >
-        </a>
-      </li>
-    </ul>
+  <div class="section">
+    <div class="columns">
+      <div class="column is-one-third">
+        {#each $server_list as server}
+          <Widget {server} on:click={_=>$selected = server} active={$selected === server}></Widget>
+        {/each}
+        <button class="button is-fullwidth" on:click={server_list.add}>
+          <i class="material-icons">add</i>
+        </button>
+      </div>
+      <div class="column"><RoomList server={$selected} /></div>
+    </div>
   </div>
-  {#each $server_list as s,i}
-    <Server server={s} bind:status={status[i]}/>
-  {/each}
 </div>
+<Settings />
diff --git a/src/Banner.svelte b/src/Banner.svelte
diff --git a/src/Meeting.svelte b/src/Meeting.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
-  import type { meeting } from "./types";
-
+  import type { meeting } from './types'
   export let meeting: meeting;
 </script>
 

diff --git a/src/RoomList.svelte b/src/RoomList.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+  import Meeting from './Meeting.svelte'
+  import type { Server } from './server'
+  import type {meeting} from './types'
+  export let server: Server
+
+  let meetings: meeting[] 
+  $: meetings = $server?.meetings
+</script>
+
+  {#if meetings}
+    {#each meetings.filter((m) => !m.isBreakout) as meeting}
+      <Meeting {meeting}>
+        {#each meetings.filter((b) =>
+          [meeting.breakoutRooms?.breakout].flat().includes(b.meetingID)
+        ) as breakout}
+          <Meeting meeting={breakout} />
+        {/each}
+      </Meeting>
+    {:else} Zur Zeit keine Räume geöffnet auf diesem Server. Mach doch mal wieder eine Videokonferenz!
+    {/each}
+  {/if}
diff --git a/src/Server.svelte b/src/Server.svelte
diff --git a/src/Settings.svelte b/src/Settings.svelte
@@ -1,6 +1,9 @@
 <script lang="ts">
   import { selected, settings, server_list } from "./store";
-  export let status: string | undefined;
+  const update_server = () => $selected.update()
+  $: host = $selected.host
+  $: secret = $selected.secret
+  $: (secret || host) && update_server()
 </script>
 
 <div class="modal" class:is-active={$settings}>
@@ -74,19 +77,6 @@
         class="is-extended button is-primary"
         on:click={(_) => ($settings = false)}>Schließen</button
       >
-      {#if status}
-        <span class="ml-4 mr-4">
-          Verbindung:
-          <span
-            class="tag"
-            class:is-success={status === "ok"}
-            class:is-danger={status.startsWith("Fehler")}
-            class:is-warning={status === "laden"}
-          >
-            {status}
-          </span>
-        </span>
-      {/if}
       <button class="is-extended button is-danger" on:click={server_list.remove}>Löschen</button>
     </footer>
   </div>

diff --git a/src/Widget.svelte b/src/Widget.svelte
@@ -0,0 +1,71 @@
+<script lang="ts">
+  import type {Server} from './server'
+  import {settings} from './store'
+  export let server: Server;
+  export let active: boolean
+</script>
+
+<div class="block" on:click >
+  <div class="card">
+    <header class="card-header" class:has-background-primary-light={active}>
+      <p class="card-header-title">
+        <span class="has-text-{$server.status}">●</span>&nbsp;{$server.name}
+      </p>
+        <div class="card-header-icon" aria-label="more options">
+          <span class="icon">
+            <i class="material-icons is-clickable has-text-grey" on:click={_=>$settings = true}>settings</i>
+          </span>
+        </div>
+    </header>
+    <div class="card-content">
+      <div class="content">
+        <nav class="level is-mobile">
+          {#if $server.meetings}
+            <div class="level-item has-text-centered">
+              <div>
+                <p class="heading">Räume</p>
+                <p class="title">{$server.meetings.length}</p>
+              </div>
+            </div>
+            <div class="level-item has-text-centered">
+              <div>
+                <p class="heading">Teilnehmer</p>
+                <p class="title">
+                  {$server.teilnehmer}
+                </p>
+              </div>
+            </div>
+            <div class="level-item has-text-centered">
+              <div>
+                <p class="heading">Audio</p>
+                <p class="title">
+                  {$server.audio}
+                </p>
+              </div>
+            </div>
+            <div class="level-item has-text-centered">
+              <div>
+                <p class="heading">Video</p>
+                <p class="title">
+                  {$server.video}
+                </p>
+              </div>
+            </div>
+          {:else if $server.status === 'success' && !$server.meetings}
+            <div class="level-item has-text-centered">
+              <div>
+                <p class="heading">Es sind momentan keine Räume offen</p>
+              </div>
+            </div>
+          {:else}
+            <div class="level-item has-text-centered">
+              <div>
+                <p class="heading">Keine Verbindung zum Server</p>
+              </div>
+            </div>
+          {/if}
+        </nav>
+      </div>
+    </div>
+  </div>
+</div>