Merge pull request #92 from os2display/feature/AR-871-update-screen-l…

…ayout-to-be-more-fine-grained

AR-871: make touch and six area layout more fine grained

package.json

@@ -42,6 +42,7 @@
     "css-loader": "^5.2.6",
     "dayjs": "^1.10.7",
     "dompurify": "^2.3.3",
+    "os2display-grid-generator": "^1.0.8",
     "enzyme": "^3.11.0",
     "file-loader": "^6.2.0",
     "html-react-parser": "^1.3.0",

src/index.css

@@ -0,0 +1,10 @@
+.grid-index {
+  display: grid;
+  background-color: black;
+  grid-gap: 1px;
+  height: 100vh;
+}
+.grid-element {
+  background-color: #add8e6;
+  font-size: 30px;
+}

src/index.js

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { createRoot } from "react-dom/client";
+import { createGridArea, createGrid } from "os2display-grid-generator";
 import {
   BrowserRouter,
   Link,
@@ -9,6 +10,7 @@ import {
 } from "react-router-dom";
 import ImageText from "./image-text/image-text";
 import slides from "./slides";
+import screens from "./screens";
 import BookReview from "./book-review/book-review";
 import Calendar from "./calendar/calendar";
 import Contacts from "./contacts/contacts";
@@ -20,8 +22,37 @@ import IFrame from "./iframe/iframe";
 import Table from "./table/table";
 import Video from "./video/video";
 import Travel from "./travel/travel";
+import "./index.css";
 
-const renderSlide = (slide) => {
+export const renderScreen = (screen) => {
+  const gridTemplateAreas = {
+    gridTemplateAreas: createGrid(
+      screen.screenLayout.grid.columns,
+      screen.screenLayout.grid.rows
+    ),
+  };
+
+  return (
+    <div style={gridTemplateAreas} className="grid-index">
+      {screen.screenLayout.regions.map((region) => (
+        <div
+          key={region.id}
+          className="grid-element"
+          style={{ gridArea: createGridArea(region.gridArea) }}
+        >
+          gridarea:{" "}
+          <div>
+            {region.gridArea.map((area) => (
+              <div>{area}</div>
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export const renderSlide = (slide) => {
   switch (slide.type) {
     case "book-review":
       return (
@@ -148,29 +179,24 @@ const renderSlide = (slide) => {
   }
 };
 
-const Slide = () => {
-  const { slideId } = useParams();
-  const [selectedSlide, setSelectedSlide] = useState(null);
-
-  const getTheme = (slide) => {
-    fetch(slide.themeFile)
+export const Slide = ({ slide: inputSlide }) => {
+  const [slide, setSlide] = useState(inputSlide);
+  const getTheme = (s) => {
+    fetch(s.themeFile)
       .then((resp) => resp.text())
       .then((data) => {
-        const newSelectedSlide = { ...slide };
+        const newSelectedSlide = { ...s };
         newSelectedSlide.themeData = {
           css: data,
           logo: newSelectedSlide?.themeData?.logo,
         };
-        setSelectedSlide(newSelectedSlide);
+        setSlide(newSelectedSlide);
       });
   };
 
   useEffect(() => {
-    const foundSlide = slides.find((slide) => slide.id === slideId);
-    setSelectedSlide(foundSlide);
-
-    if (foundSlide?.themeFile) {
-      getTheme(foundSlide);
+    if (slide?.themeFile) {
+      getTheme(slide);
     }
 
     // Apply color scheme.
@@ -179,29 +205,54 @@ const Slide = () => {
     } else {
       document.documentElement.classList.add("color-scheme-light");
     }
-  }, []);
+  }, [slide]);
 
   return (
     <div className="app">
       <div className="slide" id="SLIDE_ID">
-        {selectedSlide && renderSlide(selectedSlide)}
+        {slide && renderSlide(slide)}
       </div>
     </div>
   );
 };
+export const DisplayElement = () => {
+  const { id } = useParams();
 
-const Overview = () => {
+  const foundSlide = slides.find((slide) => slide.id === id);
+  const foundScreen = screens.find((screen) => screen.id === id);
+  if (foundSlide) {
+    return <Slide slide={foundSlide} />;
+  }
+  if (foundScreen) {
+    return <Screen screen={foundScreen} />;
+  }
+};
+
+export const Screen = ({ screen }) => {
+  return <div className="app">{screen && renderScreen(screen)}</div>;
+};
+
+export const Overview = () => {
   return (
     <>
       <h1>Examples</h1>
 
+      <h2>Slidetemplates</h2>
       <ul>
         {slides.map((slide) => (
           <li key={slide.id} id={slide.id}>
             <Link to={`/${slide.id}`}>{slide.id}</Link>
           </li>
         ))}
       </ul>
+      <h2>Skærmtemplates</h2>
+      <ul>
+        {screens.map((screen) => (
+          <li key={screen.id} id={screen.id}>
+            <Link to={`/${screen.id}`}>{screen.id}</Link>
+          </li>
+        ))}
+      </ul>
     </>
   );
 };
@@ -212,7 +263,7 @@ const root = createRoot(container);
 root.render(
   <BrowserRouter>
     <Routes>
-      <Route path="/:slideId" element={<Slide />} />
+      <Route path=":id" element={<DisplayElement />} />
       <Route index element={<Overview />} />
     </Routes>
   </BrowserRouter>

src/screen-layouts/six-areas.json

@@ -3,56 +3,38 @@
   "id": "01G2MDB2P53W4EZ9627FX07JWV",
   "grid": {
     "rows": 4,
-    "columns": 12
+    "columns": 44
   },
   "regions": [
     {
       "id": "01G2MDB9R3894FYCRZJ2A3FV8G",
       "title": "En - 1920x90",
-      "gridArea": [
-        "a",
-        "d"
-      ]
+      "gridArea": ["a", "p", "c", "p"]
     },
     {
       "id": "01G2MDBCSZ156DPSWS9XED1PTN",
       "title": "To",
-      "gridArea": [
-        "e",
-        "m"
-      ]
+      "gridArea": ["q", "aaa"]
     },
     {
       "id": "01G2MDBFZ6F7CW66SWCNRHSKGR",
       "title": "Tre",
-      "gridArea": [
-        "q",
-        "y"
-      ]
+      "gridArea": ["eee", "oooo"]
     },
     {
       "id": "01G2MDBKJH4R4EKNRCRE0PPJEJ",
       "title": "Fire - 4x3",
-      "gridArea": [
-        "cc",
-        "oo"
-      ]
+      "gridArea": ["ssss", "ssssss"]
     },
     {
       "id": "01G2MDBPWE56ES863YCY48PCKW",
       "title": "Fem",
-      "gridArea": [
-        "ss",
-        "vv"
-      ]
+      "gridArea": ["wwwwww", "ttttttt"]
     },
     {
       "id": "01G2MDBV28R3SRC5VTCC2P20C9",
       "title": "Seks",
-      "gridArea": [
-        "f",
-        "rr"
-      ]
+      "gridArea": ["r", "vvvvvv"]
     }
   ]
-}
+}

src/screen-layouts/touch-template.json

@@ -3,57 +3,39 @@
   "id": "01FMYMB5PEKZRX63H98YPMB280",
   "grid": {
     "rows": 4,
-    "columns": 12
+    "columns": 44
   },
   "regions": [
     {
       "id": "01G10FDN9H4NWM7NTZHZ1VCM33",
       "title": "En - 1920x90",
-      "gridArea": [
-        "a",
-        "d"
-      ]
+      "gridArea": ["a", "p", "c", "p"]
     },
     {
       "id": "01G10FDWNEDASCX4FDVHQREDZS",
       "title": "To",
-      "gridArea": [
-        "e",
-        "m"
-      ]
+      "gridArea": ["q", "aaa"]
     },
     {
       "id": "01G10FE3HHF40RXWFTR7GXESJA",
       "title": "Tre",
-      "gridArea": [
-        "q",
-        "y"
-      ]
+      "gridArea": ["eee", "oooo"]
     },
     {
       "id": "01G10FEA5X7AZB0P2415C6NZR2",
       "title": "Fire - 4x3",
-      "gridArea": [
-        "cc",
-        "oo"
-      ]
+      "gridArea": ["ssss", "ssssss"]
     },
     {
       "id": "01G10FEMMDM0RE2NVG9DBMJ8TW",
       "title": "Touch knapper",
       "type": "touch-buttons",
-      "gridArea": [
-        "ss",
-        "vv"
-      ]
+      "gridArea": ["wwwwww", "ttttttt"]
     },
     {
       "id": "01G10FEXKZ73Q9A8MJ45T7EH5S",
       "title": "Fem",
-      "gridArea": [
-        "f",
-        "rr"
-      ]
+      "gridArea": ["r", "vvvvvv"]
     }
   ]
-}
+}

src/screens.js

@@ -0,0 +1,40 @@
+import twoBoxes from "./screen-layouts/two-boxes.json";
+import threeBoxes from "./screen-layouts/three-boxes.json";
+import threeBoxesHorizontal from "./screen-layouts/three-boxes-horizontal.json";
+import twoBoxesVertical from "./screen-layouts/two-boxes-vertical.json";
+import touchTemplate from "./screen-layouts/touch-template.json";
+import sixAreas from "./screen-layouts/six-areas.json";
+import fullScreen from "./screen-layouts/full-screen.json";
+
+const screens = [
+  {
+    id: "2-delt",
+    screenLayout: twoBoxes,
+  },
+  {
+    id: "2-delt-vertikalt",
+    screenLayout: twoBoxesVertical,
+  },
+  {
+    id: "touch-template",
+    screenLayout: touchTemplate,
+  },
+  {
+    id: "3-delt",
+    screenLayout: threeBoxes,
+  },
+  {
+    id: "3-delt-horisontalt",
+    screenLayout: threeBoxesHorizontal,
+  },
+  {
+    id: "seks-områder",
+    screenLayout: sixAreas,
+  },
+  {
+    id: "fuld-skærm",
+    screenLayout: fullScreen,
+  },
+];
+
+export default screens;

yarn.lock

@@ -3952,7 +3952,7 @@ eslint-plugin-import@^2.24.0:
     resolve "^1.22.0"
     tsconfig-paths "^3.14.1"
 
-eslint-plugin-jsdoc@^36.0.7:
+eslint-plugin-jsdoc@^36.0.6, eslint-plugin-jsdoc@^36.0.7:
   version "36.1.1"
   resolved "https://registry.yarnpkg.com/eslint-plugin-jsdoc/-/eslint-plugin-jsdoc-36.1.1.tgz#124cd0e53a5d07f01ebde916a96dd1a6009625d6"
   integrity sha512-nuLDvH1EJaKx0PCa9oeQIxH6pACIhZd1gkalTUxZbaxxwokjs7TplqY0Q8Ew3CoZaf5aowm0g/Z3JGHCatt+gQ==
@@ -7051,6 +7051,13 @@ optionator@^0.9.1:
     type-check "^0.4.0"
     word-wrap "^1.2.3"
 
+os2display-grid-generator@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/os2display-grid-generator/-/os2display-grid-generator-1.0.8.tgz#ad0a52ff8d7982ebc317ae103dd9cceea6f9b8f1"
+  integrity sha512-3IaJpkVGk8oNlevR3H5WUFTJ1wug9AyQf8dkE6x722T1qlcXSoIt3CTYM0W/v9KaeZxiHPucux1pL5SSWwHT6Q==
+  dependencies:
+    eslint-plugin-jsdoc "^36.0.6"
+
 p-finally@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/p-finally/-/p-finally-1.0.0.tgz#3fbcfb15b899a44123b34b6dcc18b724336a2cae"