diff --git a/package.json b/package.json index 7d584fda..84030553 100644 --- a/package.json +++ b/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", diff --git a/src/index.css b/src/index.css new file mode 100644 index 00000000..5d518f89 --- /dev/null +++ b/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; +} diff --git a/src/index.js b/src/index.js index fc875438..adce7261 100644 --- a/src/index.js +++ b/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 ( +
+ {screen.screenLayout.regions.map((region) => ( +
+ gridarea:{" "} +
+ {region.gridArea.map((area) => ( +
{area}
+ ))} +
+
+ ))} +
+ ); +}; + +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,22 +205,39 @@ const Slide = () => { } else { document.documentElement.classList.add("color-scheme-light"); } - }, []); + }, [slide]); return (
- {selectedSlide && renderSlide(selectedSlide)} + {slide && renderSlide(slide)}
); }; +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 ; + } + if (foundScreen) { + return ; + } +}; + +export const Screen = ({ screen }) => { + return
{screen && renderScreen(screen)}
; +}; + +export const Overview = () => { return ( <>

Examples

+

Slidetemplates

+

Skærmtemplates

+ ); }; @@ -212,7 +263,7 @@ const root = createRoot(container); root.render( - } /> + } /> } /> diff --git a/src/screen-layouts/six-areas.json b/src/screen-layouts/six-areas.json index 33b202de..3c5ef979 100644 --- a/src/screen-layouts/six-areas.json +++ b/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"] } ] -} \ No newline at end of file +} diff --git a/src/screen-layouts/touch-template.json b/src/screen-layouts/touch-template.json index 2eec0745..6fce07c4 100644 --- a/src/screen-layouts/touch-template.json +++ b/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"] } ] -} \ No newline at end of file +} diff --git a/src/screens.js b/src/screens.js new file mode 100644 index 00000000..2ed2f86e --- /dev/null +++ b/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; diff --git a/yarn.lock b/yarn.lock index 7abf6a87..a214a29a 100644 --- a/yarn.lock +++ b/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"