🧹 Dashboard - drop header bar

drop entire js logic - css only

CHANGELOG.md

@@ -2,14 +2,40 @@
 
 All notable changes to this project will be documented in this file. Dates are displayed in UTC.
 
+#### [0.3.0](https://git.odit.services/lfk/frontend/compare/0.2.1...0.3.0)
+
+- Merge pull request 'feature/16-org-management' (#32) from feature/16-org-management into dev [`#16`](https://git.odit.services/lfk/frontend/issues/16)
+- Merge commit 'fcd657c10ea14290455cfb0bf2de89375a664143' into dev [`#31`](https://git.odit.services/lfk/frontend/issues/31)
+- ✨ added Org base components [`bdc0de6`](https://git.odit.services/lfk/frontend/commit/bdc0de6adab2db95e6075a993bd50317e9e36eb5)
+- 🏬 OrgDetail ui [`7a09869`](https://git.odit.services/lfk/frontend/commit/7a09869b0ca9d5dd38cf0c0010b71ab9ce6c6f40)
+- 🏁 finish basic functionality of AddOrgModal + OrgDetail [`9324925`](https://git.odit.services/lfk/frontend/commit/93249258c6b0f34da22f0ed5d290b437d221a8fd)
+- ✨ basic functionality in OrgDetail [`0e2a10f`](https://git.odit.services/lfk/frontend/commit/0e2a10fe94075b3cda8ef3ebae6a6159a2e6bbf9)
+- 🐞 fix sidebar mobile-md scaling [`fcd657c`](https://git.odit.services/lfk/frontend/commit/fcd657c10ea14290455cfb0bf2de89375a664143)
+- 🔨 reorder CI build order for correct license exporting [`7d58657`](https://git.odit.services/lfk/frontend/commit/7d58657c800e9e494c1d1f098ad0dc34d1f0cd8d)
+- 💬 AddOrgModal bindings [`bc239ee`](https://git.odit.services/lfk/frontend/commit/bc239eead1d1a29c9662d94db797c6bf23e43166)
+- ✨ improvements in OrgOverview [`0b9f3de`](https://git.odit.services/lfk/frontend/commit/0b9f3de47c0c8b750c38da07e53927ba55ef3499)
+- 🔨 config compatibility for new Snowpack V3 bundler [`32ffa34`](https://git.odit.services/lfk/frontend/commit/32ffa345cde67b1affe2750add620522c0a24577)
+- 🧹 general component cleanup [`157c7c6`](https://git.odit.services/lfk/frontend/commit/157c7c66b57c3a5053c780682402d3615fbc046a)
+- ⏫ basic dependency bump [`6fc3c16`](https://git.odit.services/lfk/frontend/commit/6fc3c16073555fffd55773218c5c2eed361f076b)
+- 🌎 i18n [`01c01a4`](https://git.odit.services/lfk/frontend/commit/01c01a46faa9332a2e437861fdb42afe962da833)
+- ⏫ bump gridjs to 3.2.2 [`6ff9069`](https://git.odit.services/lfk/frontend/commit/6ff90694e288356e16f5226a6e0a054e6fec8b3f)
+- [tmp] - disable serviceworker [`0fa107a`](https://git.odit.services/lfk/frontend/commit/0fa107a75bc33046758bc42523262a566da9f60f)
+- new license file version [CI SKIP] [`ad34e45`](https://git.odit.services/lfk/frontend/commit/ad34e455ceedc0e0ccca5ccd86f7f011a7667873)
+- ⏫ Bump Dockerfile builder to 15.5.1-alpine3.12 [`01fdd0b`](https://git.odit.services/lfk/frontend/commit/01fdd0bee2199bb58373aecc9942591a2d45011a)
+- new license file version [CI SKIP] [`87926e6`](https://git.odit.services/lfk/frontend/commit/87926e69dbd5b93b2c98cd68fb31913259e3cc00)
+- 🐳 Dockerfile - drop js sourcemaps [`4b80f30`](https://git.odit.services/lfk/frontend/commit/4b80f30afbfb8c16b9395fb310f309c516c48a17)
+
 #### [0.2.1](https://git.odit.services/lfk/frontend/compare/0.2.0...0.2.1)
 
+> 13 January 2021
+
 - 🔒 UserDetail - WIP on Permissions [`36a084e`](https://git.odit.services/lfk/frontend/commit/36a084eab6bd0c922da29ebb2d260ba803bf9675)
 - 👪 UserDetail - group edit support [`a9e319e`](https://git.odit.services/lfk/frontend/commit/a9e319e0c0f2bfaba42bc3af875462e394489dc2)
 - 🙋‍♂️ UserDetails - group updating [`041c24a`](https://git.odit.services/lfk/frontend/commit/041c24a837d58ff46362699b54e8088f22ba2daa)
 - ⚡ shared state reactivity - AddUserModal-Users-UsersOverview [`f7acbb1`](https://git.odit.services/lfk/frontend/commit/f7acbb1eaa14ddf41e29ff1db631520123218289)
 - ✨ AddUserModal + UserDetail - optional username field [`7df76f9`](https://git.odit.services/lfk/frontend/commit/7df76f9642b528586fd654f27148b5502400ffdf)
 - UserDetail - fixed group updating [`e6fbf7a`](https://git.odit.services/lfk/frontend/commit/e6fbf7aa5b230733ffd92fdfe851b9f86001c859)
+- 🚀RELEASE v0.2.1 [`2bbaa50`](https://git.odit.services/lfk/frontend/commit/2bbaa500f4ca56e41613cac12228f4e3327180ab)
 - 💬 UserDetail - info Toasts [`ea23b97`](https://git.odit.services/lfk/frontend/commit/ea23b972315db39e1f800366d52e3bacf9eaf58b)
 - 🔨 optimized release script [`23c3cd6`](https://git.odit.services/lfk/frontend/commit/23c3cd605db950a5620ea709748216f7ea034385)
 - 🐞 fix package release script: locales directory [`722a20e`](https://git.odit.services/lfk/frontend/commit/722a20e141079302da8876be1ccc55026c588048)

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@odit/lfk-frontend",
-	"version": "0.2.1",
+	"version": "0.3.0",
 	"scripts": {
 		"i18n-order": "node order.js",
 		"dev": "snowpack dev",
@@ -12,7 +12,7 @@
 	"dependencies": {
 		"@odit/lfk-client-js": "0.0.12",
 		"filepond": "4.25.1",
-		"gridjs": "3.2.1",
+		"gridjs": "3.2.2",
 		"localforage": "1.9.0",
 		"lodash.isequal": "^4.5.0",
 		"svelte-filepond": "0.0.1",

public/index.html

@@ -13,7 +13,7 @@
 </head>
 
 <body>
-  <span style="display: none;visibility: hidden;" id="buildinfo">RELEASE_INFO-0.2.1-RELEASE_INFO</span>
+  <span style="display: none;visibility: hidden;" id="buildinfo">RELEASE_INFO-0.3.0-RELEASE_INFO</span>
   <noscript>You need to enable JavaScript to run this app.</noscript>
   <script src="/env.js"></script>
   <script defer type="module" src="/_dist_/index.js"></script>

src/App.svelte

@@ -1,6 +1,7 @@
 <script>
   import "./TailwindStyles.svelte";
   import "toastify-js/src/toastify.css";
+  import "gridjs/dist/theme/mermaid.css";
   import { Route, router } from "tinro";
   router.subscribe((routeInfo) => {
     window.scrollTo(0, 0);

src/components/Dashboard.svelte

@@ -1,53 +1,11 @@
 <script>
   import { _ } from "svelte-i18n";
-  import { active } from "tinro";
   import localForage from "localforage";
   import { router } from "tinro";
-
-  import store from "../store";
   import NoComponentLoaded from "./NoComponentLoaded.svelte";
-  import { AuthService, OpenAPI } from "@odit/lfk-client-js";
+  import { AuthService } from "@odit/lfk-client-js";
-
-  let activePage = "dashboard";
   let dropdown1 = false;
-  let navOpen = false;
+  $: navOpen = false;
-  function ismobile() {
-    let check = false;
-    (function (a) {
-      if (
-        /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(
-          a
-        ) ||
-        /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(
-          a.substr(0, 4)
-        )
-      )
-        check = true;
-    })(navigator.userAgent || navigator.vendor || window.opera);
-    const aspectratio=window.innerWidth/window.innerHeight;
-    if(aspectratio<=0.765){
-      check=true;
-    }
-    return check;
-  }
-  $: mobile = ismobile();
-  window.addEventListener('resize', function(){
-    const aspectratio=window.innerWidth/window.innerHeight;
-    if(aspectratio<=0.765){
-      navOpen=false;
-      mobile=true;
-    }else{
-      navOpen=true;
-      mobile=false;
-
-    }
-  });
-//   $: if (mobile===true) {
-//     console.log("changed to mobile");
-// }
-//   $: if (mobile===false) {
-//     console.log("changed to md");
-// }
   function logout() {
     localForage.clear();
     location.replace("/");
@@ -56,18 +14,15 @@
 
 <section class="min-h-screen bg-gray-50">
   <nav
-    class:hidden={!navOpen && mobile}
+    class:-translate-x-full={!navOpen}
+    class:translate-x-0={navOpen}
     class="select-none fixed top-0 left-0 z-20 h-full pb-10 overflow-x-hidden overflow-y-auto transition origin-left transform border-r w-60 md:translate-x-0 bg-gray-50">
     <a href="/" class="flex items-center px-4 py-5">
-      <img
+      <img src="/lfk-logo.png" alt="Logo" class="h-10" />
-        src="/lfk-logo.png"
-        alt="Logo"
-        class="h-10" />
       <h3 class="text-lg">Lauf für Kaya! Admin</h3>
     </a>
     <nav class="text-sm font-medium text-gray-600" aria-label="Main Navigation">
       <a
-        class:dark:bg-gray-900={$router.path === '/'}
         class:bg-gray-100={$router.path === '/'}
         class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
         href="/">
@@ -82,7 +37,6 @@
         <span>{$_('dashboard-title')}</span>
       </a>
       <a
-        class:dark:bg-gray-900={$router.path.includes('/orgs/')}
         class:bg-gray-100={$router.path.includes('/orgs/')}
         class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
         href="/orgs/">
@@ -98,7 +52,6 @@
         <span>{$_('orgs')}</span>
       </a>
       <a
-        class:dark:bg-gray-900={$router.path === '/users/'}
         class:bg-gray-100={$router.path === '/users/'}
         class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
         href="/users/">
@@ -114,7 +67,6 @@
         <span>{$_('users')}</span>
       </a>
       <a
-        class:dark:bg-gray-900={$router.path === '/runners/'}
         class:bg-gray-100={$router.path === '/runners/'}
         class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
         href="/runners/">
@@ -130,7 +82,6 @@
         <span>{$_('runners')}</span>
       </a>
       <a
-        class:dark:bg-gray-900={$router.path === '/teams/'}
         class:bg-gray-100={$router.path === '/teams/'}
         class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
         href="/teams/">
@@ -146,7 +97,6 @@
         <span>{$_('teams')}</span>
       </a>
       <a
-        class:dark:bg-gray-900={$router.path === '/tracks/'}
         class:bg-gray-100={$router.path === '/tracks/'}
         class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
         href="/tracks/">
@@ -162,8 +112,7 @@
         <span>{$_('tracks')}</span>
       </a>
       <a
-        class:dark:bg-gray-900={activePage === 'blub'}
+        class:bg-gray-100={false}
-        class:bg-gray-100={activePage === 'blub'}
         class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
         href="#">
         <svg
@@ -182,8 +131,7 @@
       <div>
         <div
           tabindex="0"
-          class:dark:bg-gray-900={activePage === 'blub'}
+          class:bg-gray-100={false}
-          class:bg-gray-100={activePage === 'blub'}
           class="flex items-center justify-between px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
           role="button"
           on:click={() => {
@@ -258,7 +206,6 @@
         <span>{$_('changelog')}</span>
       </a>
       <a
-        class:dark:bg-gray-900={$router.path === '/settings/'}
         class:bg-gray-100={$router.path === '/settings/'}
         class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
         href="/settings/">
@@ -275,7 +222,6 @@
         <span>{$_('settings')}</span>
       </a>
       <a
-        class:dark:bg-gray-900={$router.path === '/about/'}
         class:bg-gray-100={$router.path === '/about/'}
         class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
         href="/about/">
@@ -312,65 +258,10 @@
     </nav>
   </nav>
   <div class="ml-0 transition md:ml-60">
-    <header
-      class="flex items-center justify-between w-full px-4 border-b h-14">
-      <button
-        on:click={() => {
-          navOpen = !navOpen;
-        }}
-        class="block btn btn-light md:hidden">
-        <span class="sr-only">Menu</span>
-        <svg
-          class="w-4 h-4"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 20 20"
-          fill="currentColor">
-          <path
-            fill-rule="evenodd"
-            d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
-            clip-rule="evenodd" />
-        </svg>
-      </button>
-      <!-- <div class="hidden -ml-3 form-icon md:block w-96">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor">
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-        </svg>
-        <input
-          class="border-0 form-input"
-          placeholder="Search for articles..." />
-      </div> -->
-      <div class="flex items-end">
-        <a href="#" class="flex text-gray-500">
-          <svg
-            class="flex-shrink-0 w-5 h-5"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 20 20"
-            fill="currentColor">
-            <path
-              d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z" />
-          </svg>
-        </a>
-        <a href="/profile/" class="ml-4">
-          <img
-            class="h-8 w-8 rounded-full"
-            src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
-            alt="Profile Picture" />
-        </a>
-      </div>
-    </header>
     <slot>
       <NoComponentLoaded />
     </slot>
   </div>
-  <!-- Sidebar Backdrop -->
   <div
     on:click={() => {
       navOpen = false;

src/components/DataTable.svelte

@@ -2,7 +2,6 @@
   import { _, json } from "svelte-i18n";
   import { getlang } from "./datatable_i18n";
   import { Grid } from "gridjs";
-  import "gridjs/dist/theme/mermaid.css";
   //
   let table;
   const datatable = new Grid({

src/components/Tracks.svelte

@@ -6,7 +6,6 @@
   const tracks_promise = TrackService.trackControllerGetAll();
   import { getlang } from "./datatable_i18n";
   import { Grid, html } from "gridjs";
-  import "gridjs/dist/theme/mermaid.css";
   import { tracks as tracksstore } from "../store.js";
   $: trackscache = [];
   $: blocked = [];

src/components/UserDetail.svelte

@@ -7,7 +7,6 @@
     UserGroupService,
     PermissionService,
   } from "@odit/lfk-client-js";
-  import "gridjs/dist/theme/mermaid.css";
   import Toastify from "toastify-js";
   import PromiseError from "./PromiseError.svelte";
   export let params;

src/components/UsersOverview.svelte

@@ -1,16 +1,13 @@
 <script>
   import { _ } from "svelte-i18n";
-  import Toastify from "toastify-js";
   import { UserService } from "@odit/lfk-client-js";
   const users_promise = UserService.userControllerGetAll();
-  import "gridjs/dist/theme/mermaid.css";
   import { users as usersstore } from "../store.js";
   import store from "../store";
   import UsersEmptyState from "./UsersEmptyState.svelte";
   $: searchvalue = "";
   $: active_deletes = [];
   export let current_users=[];
-  $: userscache = [];
   $: advanced_search = false;
   usersstore.subscribe((val) => {
     userscache = val;

src/locales/en.json

@@ -4,6 +4,7 @@
     "about": "About",
     "action": "Action",
     "add-your-first-track": "Add your first track",
+    "address": "Address",
     "application_name": "Lauf für Kaya! - Admin",
     "author": "Author",
     "browse": "Browse",
@@ -13,10 +14,12 @@
     "changelog": "Changelog",
     "close": "Close",
     "confirm-delete": "Confirm Delete",
+    "contact": "Contact",
     "count_organizations": "# Organizations",
     "count_teams": "# Teams",
     "create": "Create",
     "create-a-new-track": "Create a new Track",
+    "create-organization": "Create Organization",
     "create-user": "Create User",
     "credits": "Credits",
     "dashboard-greeting": "hello there",
@@ -36,6 +39,7 @@
         "no_matching_records_found": "No matching records found",
         "an_error_happened_while_fetching_the_data": "An error happened while fetching the data"
     },
+    "delete-organization": "Delete Organization",
     "delete-user": "Delete User",
     "dependency_name": "Name",
     "dont-have-your-email-connected": "Don't have your email connected?",
@@ -90,6 +94,7 @@
     "minimum-lap-time-in-s": "minimum lap time in s",
     "no-license-text-could-be-found": "No license text could be found 😢",
     "no-tracks-added-yet": "there are no tracks added yet.",
+    "organizations": "Organizations",
     "orgs": "Orgs",
     "oss_credit_description": "We use a lot of open source software on these projects, and would like to thank the following projects and contributors who help make open source great!",
     "password": "Password",
@@ -123,10 +128,5 @@
     "users": "Users",
     "valid-email-is-required": "valid email is required",
     "welcome_wavinghand": "Welcome 👋",
-  "your_profile": "Your Profile",
+    "your_profile": "Your Profile"
-  "organizations": "Organizations",
-  "create-organization": "Create Organization",
-  "contact": "Contact",
-  "address": "Address",
-  "delete-organization": "Delete Organization"
 }