Merge pull request #12 from tworkool/develop

Release v0.4.0

webapp/package.json

@@ -1,7 +1,7 @@
 {
   "name": "sensebox-data-dashboard",
   "private": true,
-  "version": "0.3.3",
+  "version": "0.4.0",
   "description": "sensebox-data-dashboard",
   "browserslist": "> 0.5%, last 2 versions, not dead",
   "authors": [],

webapp/src/components/dashboard_header/index.jsx

@@ -1,17 +1,20 @@
-import React, { useContext, useState } from "react";
+import React, { useContext, useMemo, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { getSenseboxesData } from "../../redux/selectors/appState";
 import { requestSenseboxesDataFetch } from "../../redux/actions/app_state";
 import {
+  ActionIcon,
   Box,
   Button,
   Center,
+  CloseButton,
   Divider,
   Group,
   Highlight,
   Indicator,
   Kbd,
   LoadingOverlay,
+  Menu,
   Modal,
   Stack,
   Text,
@@ -20,7 +23,7 @@ import {
   UnstyledButton,
 } from "@mantine/core";
 import posthog from "posthog-js";
-import { Bookmark, Search } from "tabler-icons-react";
+import { Bookmark, Search, Settings as IconSettings, Home as IconHome, InfoCircle as IconInfoCircle, GridDots } from "tabler-icons-react";
 import "./style.scss";
 import { useSearchParams } from "react-router-dom";
 import { useEffect } from "react";
@@ -40,7 +43,7 @@ const DashboardHeader = () => {
   const [isLoading, setIsLoading] = useState(false);
   const [searchContent, setSearchContent] = useState("");
   const [searchHighlightContent, setSearchHighlightContent] = useState("");
-  const [bookmarkedBoxes] = useLocalStorage({
+  const [bookmarkedBoxes, setBookmarkedBoxes] = useLocalStorage({
     key: "bookmarked-senseboxes",
     defaultValue: [],
   });
@@ -77,45 +80,118 @@ const DashboardHeader = () => {
     [setSearch]
   );
 
+  const sortedBookmarkedBoxes = useCallback((activeId) => {
+    const _arr = [...bookmarkedBoxes];
+    const index = _arr.findIndex(e => e._id === activeId);
+    if (index == -1) return bookmarkedBoxes;
+    const element = _arr[index];
+    _arr.splice(index, 1);
+    _arr.push(element);
+    return _arr;
+  }, [bookmarkedBoxes]);
+
   return (
     <div className="sbd-dashboard-header">
       <div className="sbd-dashboard-header__content">
-        <div className="sbd-dashboard-header__favorites">
+        <Group spacing="xl">
           <Indicator size={16} position="middle-end" color="green" withBorder>
             <IdenticonAvatar id={dashboardContext.selectedSenseboxId} />
           </Indicator>
-        </div>
-        <Button
-          className="sbd-hide--phone"
-          variant="light"
-          color="gray"
-          onClick={() => setOpened(true)}
-          leftIcon={<Search size={16} />}
-          rightIcon={
-            <div
-              style={{
-                display: "flex",
-                alignItems: "center",
-                marginLeft: "10px",
-              }}
-            >
-              <Kbd>Ctrl</Kbd>
-              <span style={{ margin: "0 5px" }}>+</span>
-              <Kbd>K</Kbd>
+          {!(bookmarkedBoxes.length === 0 || (bookmarkedBoxes.length === 1 && bookmarkedBoxes[0]._id === dashboardContext.selectedSenseboxId)) && 
+          <div className="sbd-dashboard-header__bookmarks">
+            <div className="sbd-dashboard-header__bookmarks__header">
+              <Bookmark size={22}/>
             </div>
+            <div className="sbd-dashboard-header__bookmarks__content">
+              {bookmarkedBoxes.map((e,i) => {
+                const boxSelected = e._id === dashboardContext.selectedSenseboxId;
+                return <Tooltip
+                  key={i}
+                  label={e.name}
+                  color="dark"
+                  position="bottom"
+                  withArrow
+                >
+                  <UnstyledButton
+                    onClick={(_) => {
+                      if (boxSelected) return;
+                      handleSenseboxSelect(e._id);
+                    }}
+                  >
+                    <IdenticonAvatar 
+                      size="md" 
+                      className={`sbd-dashboard-header__bookmarks__item ${boxSelected ? "sbd-dashboard-header__bookmarks__item--active" : ""}`} 
+                      id={e._id} 
+                    />
+                  </UnstyledButton>
+                </Tooltip>;
+              })}
+            </div>
+          </div>
           }
-        >
+        </Group>
+        <Group>
+          <Menu shadow="md" width={200}>
+            <Menu.Target>
+              <Button variant="light" color="gray" compact>
+                <span>Menu</span>
+                <GridDots size={18} />
+              </Button>
+            </Menu.Target>
+
+            <Menu.Dropdown>
+              <Menu.Label>General</Menu.Label>
+              <Menu.Item 
+                icon={<IconHome size={18} strokeWidth={1.5}/>} 
+                component="a"
+                href="/">
+                  Home
+              </Menu.Item>
+              <Menu.Item 
+                icon={<IconInfoCircle size={18} strokeWidth={1.5}/>}
+                component="a"
+                href="/info">
+                Info/Help
+              </Menu.Item>
+
+              <Menu.Divider />
+
+              <Menu.Label>Dashboard</Menu.Label>
+              <Menu.Item disabled icon={<IconSettings size={18} strokeWidth={1.5}/>}>Settings</Menu.Item>
+            </Menu.Dropdown>
+          </Menu>
+          <Button
+            className="sbd-hide--phone"
+            variant="light"
+            color="gray"
+            onClick={() => setOpened(true)}
+            leftIcon={<Search size={16} />}
+            rightIcon={
+              <div
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  marginLeft: "10px",
+                }}
+              >
+                <Kbd>Ctrl</Kbd>
+                <span style={{ margin: "0 5px" }}>+</span>
+                <Kbd>K</Kbd>
+              </div>
+            }
+          >
           Find a SenseBox
-        </Button>
-        <Button
-          leftIcon={<Search size={18} />}
-          variant="light"
-          color="gray"
-          onClick={() => setOpened(true)}
-          className="sbd-hide--tablet-and-desktop"
-        >
+          </Button>
+          <Button
+            leftIcon={<Search size={18} />}
+            variant="light"
+            color="gray"
+            onClick={() => setOpened(true)}
+            className="sbd-hide--tablet-and-desktop"
+          >
           Find Sensebox
-        </Button>
+          </Button>
+        </Group>
         <Modal
           size={"lg"}
           opened={opened}
@@ -247,6 +323,7 @@ const DashboardHeader = () => {
                 </Tooltip>
               );
             })}
+            {bookmarkedBoxes.length !== 0 && <CloseButton onClick={() => {setBookmarkedBoxes([]);}} title="Clear Bookmarks" size="md" iconSize={14} />}
           </Group>
         </Modal>
       </div>

webapp/src/components/dashboard_header/style.scss

@@ -1,50 +1,109 @@
 @import "./dimensions";
 @import "../../utils/colors";
 @import "../../utils/mixins";
+@import "../../utils/animations";
 
 .sbd-search-grid {
-    grid-template-columns: auto min-content;
-    display: grid;
-    gap: 8px;
+  grid-template-columns: auto min-content;
+  display: grid;
+  gap: 8px;
 }
 
 .sbd-dashboard-header {
-    height: $dashboard-header-height;
-    padding: 0 20px;
+  height: $dashboard-header-height;
+  padding: 0 20px;
+  @include responsive(desktop-down) {
+    padding: 0 8px;
+  }
+  background-color: white;
+  border-bottom: 1px solid $gray-dark;
+  z-index: 5;
+
+  &__content {
+    max-width: 2000px;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin: 0 auto;
+  }
+
+  &__bookmarks {
     @include responsive(desktop-down) {
-        padding: 0 8px;
+      display: none;
+    }
+    position: relative;
+    // pop in animation
+    animation: scale-up-center 1s ease-in-out 0.2s;
+
+    height: 36px;
+    width: max-content;
+    display: flex;
+    align-items: center;
+
+    &__header {
+      border-radius: 100%;
+      width: 30px;
+      height: 30px;
+      background-color: white;
+      color: #757575;
+      //border: 1px solid #bebebe;
+      margin-right: 5px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
     }
-    background-color: white;
-    border-bottom: 1px solid $gray-dark;
-    z-index: 5;
 
     &__content {
-        max-width: 2000px;
-        height: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        margin: 0 auto;
+      height: 100%;
+      display: flex;
+      gap: 5px;
+      transition: filter 0.6s;
+      filter: blur(0px);
+
+      /*       &__item:hover .sbd-dashboard-header__bookmarks__content {
+        filter: blur(1px);
+      } */
     }
 
-    &__favorites {
+    &__item {
+      margin-right: -18px;
+      z-index: 5;
+      transition: margin 0.35s;
+      margin-top: auto;
+      border: 2px solid white;
+
+      &:hover {
+        transform: scale(1.2);
+        margin-right: 0;
+      }
+
+      &:not(:first-child):hover {
+        margin-left: 15px;
+      }
+
+      &--active {
+        border: 2px solid #40c05785;
+        box-shadow: rgb(64 192 87 / 56%) 0px 0 2px;
+      }
     }
+  }
 }
 
 .sbd-dashboard-header-search-result {
-    background-color: white;
-    padding: 0.5rem;
-    width: 100%;
-    border-radius: 4px;
-    //border: 1px solid #339af0;
-    transition: background-color 0.2s;
-
-    &__info {
-        gap: 0;
-    }
+  background-color: white;
+  padding: 0.5rem;
+  width: 100%;
+  border-radius: 4px;
+  //border: 1px solid #339af0;
+  transition: background-color 0.2s;
 
-    &:hover {
-        background-color: #e0f2ff;
-        //border-color: #339af0;
-    }
+  &__info {
+    gap: 0;
+  }
+
+  &:hover {
+    background-color: #e0f2ff;
+    //border-color: #339af0;
+  }
 }

webapp/src/components/footer/_dimensions.scss

@@ -0,0 +1 @@
+$footer-height: 90px;

webapp/src/components/footer/index.tsx

@@ -0,0 +1,48 @@
+import * as React from "react";
+import { NavLink } from "react-router-dom";
+import "./style.scss";
+import { ActionIcon, Button, Container, Group, Popover, Stack, Text } from "@mantine/core";
+import { BrandGithub, ChevronDown, Help } from "tabler-icons-react";
+import { useMemo } from "react";
+
+type headerProps = {
+  links: Array<{ to: string, label: string }>
+}
+
+const Footer = (props: headerProps) => {
+  const {
+    links = [
+      { to: "/", label: "Start" },
+      { to: "/datenschutz", label: "Datenschutz" },
+      { to: "/dashboard", label: "Dashboard" },
+      { to: "/impressum", label: "Impressum" },
+      { to: "/info", label: "Info" }
+    ]
+  } = props;
+
+  const navLinkElements = useMemo(() =>
+    links.map((link, index) => {
+      return (
+        <NavLink
+          key={index}
+          className={({ isActive }) => `wbs-footer__nav__item ${isActive ? "wbs-footer__nav__item--selected" : ""}`}
+          to={link.to}
+        >
+          {link.label}
+        </NavLink>
+      );
+    }), [links]);
+
+  return (
+    <div className="wbs-footer">
+      <div className="wbs-footer__nav">
+        {navLinkElements}
+      </div>
+      <Text className="wbs-footer__copyright" align="center">
+        {`Sensebox Data Dashboard | Copyright © Oliver Tworkowski ${new Date().getFullYear()}`}
+      </Text>
+    </div>
+  );
+};
+
+export default Footer;