From 9f896fe44098c6aea7df3502480bbeff98074a92 Mon Sep 17 00:00:00 2001 From: cv <34649812+cpvalente@users.noreply.github.com> Date: Fri, 11 Jun 2021 11:09:04 +0200 Subject: [PATCH 1/6] mockup info view --- client/src/features/editors/Editor.jsx | 11 ++-- client/src/features/info/Info.jsx | 82 ++++++++++++++++++++++++ client/src/features/info/Info.module.css | 63 ++++++++++++++++++ 3 files changed, 152 insertions(+), 4 deletions(-) create mode 100644 client/src/features/info/Info.jsx create mode 100644 client/src/features/info/Info.module.css diff --git a/client/src/features/editors/Editor.jsx b/client/src/features/editors/Editor.jsx index 5571dd728..99bdf9081 100644 --- a/client/src/features/editors/Editor.jsx +++ b/client/src/features/editors/Editor.jsx @@ -1,10 +1,10 @@ import { lazy, useEffect } from 'react'; import { Heading } from '@chakra-ui/layout'; import { Box } from '@chakra-ui/layout'; -import NumberedText from 'common/components/text/NumberedText'; -import styles from './Editor.module.css'; import { useDisclosure } from '@chakra-ui/hooks'; -import SettingsModal from '../modals/SettingsModal'; +import styles from './Editor.module.css'; +import NumberedText from 'common/components/text/NumberedText'; +import SettingsModal from 'features/modals/SettingsModal'; import MenuBar from 'features/menu/MenuBar'; const EventListWrapper = lazy(() => @@ -12,6 +12,7 @@ const EventListWrapper = lazy(() => ); const PlaybackControl = lazy(() => import('features/control/PlaybackControl')); const MessageControl = lazy(() => import('features/control/MessageControl')); +const Info = lazy(() => import('features/info/Info')); export default function Editor() { const { isOpen, onOpen, onClose } = useDisclosure(); @@ -68,7 +69,9 @@ export default function Editor() { Info -
+
+ +
diff --git a/client/src/features/info/Info.jsx b/client/src/features/info/Info.jsx new file mode 100644 index 000000000..93c0aec96 --- /dev/null +++ b/client/src/features/info/Info.jsx @@ -0,0 +1,82 @@ +import { Icon } from '@chakra-ui/react'; +import { FiChevronUp } from 'react-icons/fi'; +import style from './Info.module.css'; + +export default function Info() { + return ( + <> +
Event 1/31
+ +
+
+ Now + props.setCollapsed(true)} + /> +
+ +
+ Title: Demo title +
+
+ Subtitle: Demo Subtitle +
+
+ Presenter: Demo Presenter Name +
+
+ Notes: Demo Notes +
+
+ +
+
+ Next + props.setCollapsed(true)} + /> +
+
+ Title: Demo title +
+
+ Subtitle: Demo Subtitle +
+
+ Presenter: Demo Presenter Name +
+
+ Notes: Demo Notes +
+
+ +
+
+ Log + props.setCollapsed(true)} + /> +
+ +
+ + ); +} diff --git a/client/src/features/info/Info.module.css b/client/src/features/info/Info.module.css new file mode 100644 index 000000000..1d3e3851c --- /dev/null +++ b/client/src/features/info/Info.module.css @@ -0,0 +1,63 @@ +.container { + margin-top: 1em; + display: flex; + flex-direction: column; + background-color: rgba(0, 0, 0, 0.05); + border: 1px solid rgba(0, 0, 0, 0.05); + border-radius: 4px; + padding: 8px; + overflow-y: scroll; +} + +.main { + font-size: 0.9em; + text-align: right; + color: #ff7597; +} + +.header { + padding: 0; + margin: 0; + font-size: 0.9em; + color: #aaa; + display: flex; + justify-content: space-between; +} + +.label { + padding: 0; + margin: 0; + font-size: 0.9em; + color: #ccc; +} + +ul > li { + font-size: 0.9em; + color: #fff; +} + +.info { + color: #fff; +} + +.error { + color: red; +} + +.client { + color: lightblue; +} + +.moreExpanded, +.moreCollapsed { + cursor: pointer; + color: #fff; +} + +.moreExpanded { + transform: rotate(0deg); +} + +.moreCollapsed { + transform: rotate(180deg); +} From 8221c72629897f1eb4176edb93d9c6f29cfa8d49 Mon Sep 17 00:00:00 2001 From: cv <34649812+cpvalente@users.noreply.github.com> Date: Fri, 11 Jun 2021 11:17:29 +0200 Subject: [PATCH 2/6] make components reusable --- client/src/features/info/Info.jsx | 80 +++---------------------- client/src/features/info/InfoLogger.jsx | 30 ++++++++++ client/src/features/info/InfoTitle.jsx | 33 ++++++++++ 3 files changed, 70 insertions(+), 73 deletions(-) create mode 100644 client/src/features/info/InfoLogger.jsx create mode 100644 client/src/features/info/InfoTitle.jsx diff --git a/client/src/features/info/Info.jsx b/client/src/features/info/Info.jsx index 93c0aec96..ec9780518 100644 --- a/client/src/features/info/Info.jsx +++ b/client/src/features/info/Info.jsx @@ -1,82 +1,16 @@ -import { Icon } from '@chakra-ui/react'; -import { FiChevronUp } from 'react-icons/fi'; import style from './Info.module.css'; +import InfoTitle from './InfoTitle'; +import InfoLogger from './InfoLogger'; export default function Info() { + const data = {}; + const logData = []; return ( <>
Event 1/31
- -
-
- Now - props.setCollapsed(true)} - /> -
- -
- Title: Demo title -
-
- Subtitle: Demo Subtitle -
-
- Presenter: Demo Presenter Name -
-
- Notes: Demo Notes -
-
- -
-
- Next - props.setCollapsed(true)} - /> -
-
- Title: Demo title -
-
- Subtitle: Demo Subtitle -
-
- Presenter: Demo Presenter Name -
-
- Notes: Demo Notes -
-
- -
-
- Log - props.setCollapsed(true)} - /> -
- -
+ + + ); } diff --git a/client/src/features/info/InfoLogger.jsx b/client/src/features/info/InfoLogger.jsx new file mode 100644 index 000000000..677502ce2 --- /dev/null +++ b/client/src/features/info/InfoLogger.jsx @@ -0,0 +1,30 @@ +import { Icon } from '@chakra-ui/react'; +import { FiChevronUp } from 'react-icons/fi'; +import style from './Info.module.css'; + +export default function InfoLogger(props) { + const { logData } = props; + return ( +
+
+ Log + props.setCollapsed(true)} + /> +
+
    +
  • 10:35:23 [PLAYBACK] Next
    • +
  • + 10:32:10 [CLIENT] New Socket client (Total now 3) +
    • +
  • 10:28:23 [PLAYBACK] Next
    • +
  • 10:25:23 [PLAYBACK] Play
    • +
  • 10:23:13 [SERVER] Server Reconnected
    • +
  • 10:23:10 [SERVER] Server Disconnected
    • +
+
+ ); +} diff --git a/client/src/features/info/InfoTitle.jsx b/client/src/features/info/InfoTitle.jsx new file mode 100644 index 000000000..d77cddba6 --- /dev/null +++ b/client/src/features/info/InfoTitle.jsx @@ -0,0 +1,33 @@ +import { Icon } from '@chakra-ui/react'; +import { FiChevronUp } from 'react-icons/fi'; +import style from './Info.module.css'; + +export default function InfoTitle(props) { + const { title, data } = props; + return ( +
+
+ {title} + props.setCollapsed(true)} + /> +
+ +
+ Title: Demo title +
+
+ Subtitle: Demo Subtitle +
+
+ Presenter: Demo Presenter Name +
+
+ Notes: Demo Notes +
+
+ ); +} From df44d3fcbcfad48cfca140f070ecb7de7bcb397b Mon Sep 17 00:00:00 2001 From: cv <34649812+cpvalente@users.noreply.github.com> Date: Fri, 11 Jun 2021 14:40:24 +0200 Subject: [PATCH 3/6] send data to component - title data - added note to title data - add total events info into socket --- client/src/features/info/Info.jsx | 69 ++++++++++++++++++++++++-- client/src/features/info/InfoTitle.jsx | 12 +++-- server/src/classes/EventTimer.js | 13 +++++ 3 files changed, 86 insertions(+), 8 deletions(-) diff --git a/client/src/features/info/Info.jsx b/client/src/features/info/Info.jsx index ec9780518..961602649 100644 --- a/client/src/features/info/Info.jsx +++ b/client/src/features/info/Info.jsx @@ -1,15 +1,76 @@ +import { useEffect } from 'react'; +import { useSocket } from 'app/context/socketContext'; import style from './Info.module.css'; import InfoTitle from './InfoTitle'; import InfoLogger from './InfoLogger'; +import { useState } from 'react'; export default function Info() { - const data = {}; + const socket = useSocket(); + const [titles, setTitles] = useState({ + titleNow: '', + subtitleNow: '', + presenterNow: '', + noteNow: '', + titleNext: '', + subtitleNext: '', + presenterNext: '', + noteNext: '', + }); + const [selected, setSelected] = useState('-/-'); const logData = []; + + // handle incoming messages + useEffect(() => { + if (socket == null) return; + + // Ask for titles + socket.emit('get-titles'); + + // Handle titles + socket.on('titles', (data) => { + setTitles(data); + }); + + // Ask for selection data + socket.emit('get-selected'); + + // Handle selection data + socket.on('selected', (data) => { + const formatedCurrent = `${data.index != null ? data.index + 1 : '-'}/${ + data.total != null ? data.total : '-' + }`; + + setSelected(formatedCurrent); + }); + + // Clear listener + return () => { + socket.off('titles'); + socket.off('selected'); + }; + }, [socket]); + + // prepare data + const titlesNow = { + title: titles.titleNow, + subtitle: titles.subtitleNow, + presenter: titles.presenterNow, + note: titles.noteNow, + }; + + const titlesNext = { + title: titles.titleNext, + subtitle: titles.subtitleNext, + presenter: titles.presenterNext, + note: titles.noteNext, + }; + return ( <> -
Event 1/31
- - +
{`Event ${selected}`}
+ + ); diff --git a/client/src/features/info/InfoTitle.jsx b/client/src/features/info/InfoTitle.jsx index d77cddba6..0ce66ab8f 100644 --- a/client/src/features/info/InfoTitle.jsx +++ b/client/src/features/info/InfoTitle.jsx @@ -17,16 +17,20 @@ export default function InfoTitle(props) {
- Title: Demo title + Title: + {data.title}
- Subtitle: Demo Subtitle + Subtitle: + {data.subtitle}
- Presenter: Demo Presenter Name + Presenter: + {data.presenter}
- Notes: Demo Notes + Notes: + {data.note}
); diff --git a/server/src/classes/EventTimer.js b/server/src/classes/EventTimer.js index e7bc9c0f5..e6520bbba 100644 --- a/server/src/classes/EventTimer.js +++ b/server/src/classes/EventTimer.js @@ -44,9 +44,11 @@ export class EventTimer extends Timer { titleNow: null, subtitleNow: null, presenterNow: null, + noteNow: null, titleNext: null, subtitleNext: null, presenterNext: null, + noteNext: null, }; selectedEventIndex = null; @@ -93,6 +95,7 @@ export class EventTimer extends Timer { this.io.emit('selected', { id: this.selectedEventId, index: this.selectedEventIndex, + total: this.numEvents, }); this.io.emit('selected-id', this.selectedEventId); this.io.emit('next-id', this.nextEventId); @@ -289,6 +292,7 @@ export class EventTimer extends Timer { socket.emit('selected', { id: this.selectedEventId, index: this.selectedEventIndex, + total: this.numEvents, }); }); @@ -588,6 +592,7 @@ export class EventTimer extends Timer { this.titles.titleNow = e.title; this.titles.subtitleNow = e.subtitle; this.titles.presenterNow = e.presenter; + this.titles.noteNow = e.note; this.selectedEventId = e.id; break; @@ -601,6 +606,7 @@ export class EventTimer extends Timer { this.titles.titleNow = e.title; this.titles.subtitleNow = e.subtitle; this.titles.presenterNow = e.presenter; + this.titles.noteNow = e.note; this.selectedEventId = e.id; break; @@ -616,6 +622,7 @@ export class EventTimer extends Timer { this.titles.titleNext = e.title; this.titles.subtitleNext = e.subtitle; this.titles.presenterNext = e.presenter; + this.titles.noteNext = e.note; this.nextEventId = e.id; break; case 'next-public': @@ -628,6 +635,7 @@ export class EventTimer extends Timer { this.titles.titleNext = e.title; this.titles.subtitleNext = e.subtitle; this.titles.presenterNext = e.presenter; + this.titles.noteNext = e.note; this.nextEventId = e.id; break; @@ -644,6 +652,7 @@ export class EventTimer extends Timer { this.titles.titleNext = null; this.titles.subtitleNext = null; this.titles.presenterNext = null; + this.titles.noteNext = null; this.nextEventId = null; this.titlesPublic.titleNext = null; @@ -682,9 +691,11 @@ export class EventTimer extends Timer { titleNow: null, subtitleNow: null, presenterNow: null, + noteNow: null, titleNext: null, subtitleNext: null, presenterNext: null, + noteNext: null, }; this.publicTitles = { @@ -731,9 +742,11 @@ export class EventTimer extends Timer { Title Now = ${this.titles.titleNow} Subtitle Now = ${this.titles.subtitleNow} Presenter Now = ${this.titles.presenterNow} + Note Now = ${this.titles.noteNow} Title Next = ${this.titles.titleNext} Subtitle Next = ${this.titles.subtitleNext} Presenter Next = ${this.titles.presenterNext} + Note Next = ${this.titles.noteNext} Public Titles ------------------------------ From f066e974e6ed5b2cfa51630f3e6df2cad5c35ac0 Mon Sep 17 00:00:00 2001 From: cv <34649812+cpvalente@users.noreply.github.com> Date: Sun, 13 Jun 2021 12:39:24 +0200 Subject: [PATCH 4/6] expand / collapse --- client/src/features/info/Info.jsx | 11 +++--- client/src/features/info/Info.module.css | 12 +++++-- client/src/features/info/InfoLogger.jsx | 31 ++++++++++------- client/src/features/info/InfoTitle.jsx | 44 ++++++++++++++---------- 4 files changed, 58 insertions(+), 40 deletions(-) diff --git a/client/src/features/info/Info.jsx b/client/src/features/info/Info.jsx index 961602649..175c2722c 100644 --- a/client/src/features/info/Info.jsx +++ b/client/src/features/info/Info.jsx @@ -37,9 +37,9 @@ export default function Info() { // Handle selection data socket.on('selected', (data) => { - const formatedCurrent = `${data.index != null ? data.index + 1 : '-'}/${ - data.total != null ? data.total : '-' - }`; + const formatedCurrent = `Event ${ + data.index != null ? data.index + 1 : '-' + }/${data.total != null ? data.total : '-'}`; setSelected(formatedCurrent); }); @@ -51,6 +51,7 @@ export default function Info() { }; }, [socket]); + // TODO: Put this in use effect // prepare data const titlesNow = { title: titles.titleNow, @@ -68,10 +69,10 @@ export default function Info() { return ( <> -
{`Event ${selected}`}
+
{selected}
+ - ); } diff --git a/client/src/features/info/Info.module.css b/client/src/features/info/Info.module.css index 1d3e3851c..6f06843e7 100644 --- a/client/src/features/info/Info.module.css +++ b/client/src/features/info/Info.module.css @@ -6,7 +6,6 @@ border: 1px solid rgba(0, 0, 0, 0.05); border-radius: 4px; padding: 8px; - overflow-y: scroll; } .main { @@ -36,6 +35,11 @@ ul > li { color: #fff; } +.log { + overflow-y: scroll; + height: 40vh; +} + .info { color: #fff; } @@ -55,9 +59,11 @@ ul > li { } .moreExpanded { - transform: rotate(0deg); + transform: scaleY(-1); + transition: transform 0.3s; } .moreCollapsed { - transform: rotate(180deg); + transform: scaleY(1); + transition: transform 0.3s; } diff --git a/client/src/features/info/InfoLogger.jsx b/client/src/features/info/InfoLogger.jsx index 677502ce2..f6307b73e 100644 --- a/client/src/features/info/InfoLogger.jsx +++ b/client/src/features/info/InfoLogger.jsx @@ -1,30 +1,35 @@ import { Icon } from '@chakra-ui/react'; +import { useState } from 'react'; import { FiChevronUp } from 'react-icons/fi'; import style from './Info.module.css'; export default function InfoLogger(props) { + const [collapsed, setCollapsed] = useState(false); + const { logData } = props; + return (
Log props.setCollapsed(true)} + onClick={() => setCollapsed((c) => !c)} />
-
    -
  • 10:35:23 [PLAYBACK] Next
    • -
  • - 10:32:10 [CLIENT] New Socket client (Total now 3) -
    • -
  • 10:28:23 [PLAYBACK] Next
    • -
  • 10:25:23 [PLAYBACK] Play
    • -
  • 10:23:13 [SERVER] Server Reconnected
    • -
  • 10:23:10 [SERVER] Server Disconnected
    • -
+ {!collapsed && ( +
    +
  • 10:35:23 [PLAYBACK] Next
    • +
  • + 10:32:10 [CLIENT] New socket client (total: 3) +
    • +
  • 10:28:23 [PLAYBACK] Next
    • +
  • 10:25:23 [PLAYBACK] Play
    • +
  • 10:23:13 [SERVER] Server Reconnected
    • +
  • 10:23:10 [SERVER] Server Disconnected
    • +
+ )}
); } diff --git a/client/src/features/info/InfoTitle.jsx b/client/src/features/info/InfoTitle.jsx index 0ce66ab8f..4c3ab3db1 100644 --- a/client/src/features/info/InfoTitle.jsx +++ b/client/src/features/info/InfoTitle.jsx @@ -1,37 +1,43 @@ import { Icon } from '@chakra-ui/react'; +import { useState } from 'react'; import { FiChevronUp } from 'react-icons/fi'; import style from './Info.module.css'; export default function InfoTitle(props) { + const [collapsed, setCollapsed] = useState(false); + const { title, data } = props; return (
{title} props.setCollapsed(true)} + onClick={() => setCollapsed((c) => !c)} />
-
- Title: - {data.title} -
-
- Subtitle: - {data.subtitle} -
-
- Presenter: - {data.presenter} -
-
- Notes: - {data.note} -
+ {!collapsed && ( + <> +
+ Title: + {data.title} +
+
+ Presenter: + {data.presenter} +
+
+ Subtitle: + {data.subtitle} +
+
+ Notes: + {data.note} +
+ + )}
); } From 17ddfb535ff74dff5bf0364d69a0839bd2ace78c Mon Sep 17 00:00:00 2001 From: cv <34649812+cpvalente@users.noreply.github.com> Date: Sun, 13 Jun 2021 14:17:55 +0200 Subject: [PATCH 5/6] network info --- client/src/app/api/apiConstants.js | 1 + client/src/app/api/ontimeApi.js | 9 ++++ client/src/features/info/Info.jsx | 2 + client/src/features/info/Info.module.css | 11 ++++- client/src/features/info/InfoNif.jsx | 49 ++++++++++++++++++++++ server/src/controllers/ontimeController.js | 33 +++++++++++++++ server/src/routes/ontimeRouter.js | 9 +++- 7 files changed, 112 insertions(+), 2 deletions(-) create mode 100644 client/src/features/info/InfoNif.jsx diff --git a/client/src/app/api/apiConstants.js b/client/src/app/api/apiConstants.js index ba1a35c67..d6a0f2d2f 100644 --- a/client/src/app/api/apiConstants.js +++ b/client/src/app/api/apiConstants.js @@ -1,6 +1,7 @@ export const NODE_PORT = 4001; export const EVENT_TABLE = 'event'; export const EVENTS_TABLE = 'events'; +export const APP_TABLE = 'appinfo'; const calculateServer = () => { return window.location.origin.replace(window.location.port, `${NODE_PORT}/`); diff --git a/client/src/app/api/ontimeApi.js b/client/src/app/api/ontimeApi.js index 4ebc5f73b..6bd0557ba 100644 --- a/client/src/app/api/ontimeApi.js +++ b/client/src/app/api/ontimeApi.js @@ -1,6 +1,15 @@ import axios from 'axios'; import { ontimeURL } from './apiConstants'; +export const ontimePlaceholderInfo = { + networkInterfaces: [], +}; + +export const getInfo = async () => { + const res = await axios.get(ontimeURL + '/info'); + return res.data; +}; + export const downloadEvents = async () => { await axios({ url: ontimeURL + '/db', diff --git a/client/src/features/info/Info.jsx b/client/src/features/info/Info.jsx index 175c2722c..e741f7c32 100644 --- a/client/src/features/info/Info.jsx +++ b/client/src/features/info/Info.jsx @@ -3,6 +3,7 @@ import { useSocket } from 'app/context/socketContext'; import style from './Info.module.css'; import InfoTitle from './InfoTitle'; import InfoLogger from './InfoLogger'; +import InfoNif from './InfoNif'; import { useState } from 'react'; export default function Info() { @@ -71,6 +72,7 @@ export default function Info() { <>
{selected}
+ diff --git a/client/src/features/info/Info.module.css b/client/src/features/info/Info.module.css index 6f06843e7..bf5ce6831 100644 --- a/client/src/features/info/Info.module.css +++ b/client/src/features/info/Info.module.css @@ -30,6 +30,15 @@ color: #ccc; } +.if { + font-size: 0.8em; + color: #4bffabcc; + background-color: rgba(0, 0, 0, 0.13); + border-radius: 2px; + padding: 0 0.5em; + margin: 0 0.5em; +} + ul > li { font-size: 0.9em; color: #fff; @@ -37,7 +46,7 @@ ul > li { .log { overflow-y: scroll; - height: 40vh; + height: 30vh; } .info { diff --git a/client/src/features/info/InfoNif.jsx b/client/src/features/info/InfoNif.jsx new file mode 100644 index 000000000..cc46f9cf9 --- /dev/null +++ b/client/src/features/info/InfoNif.jsx @@ -0,0 +1,49 @@ +import { Icon } from '@chakra-ui/react'; +import { useState } from 'react'; +import { FiChevronUp } from 'react-icons/fi'; +import { APP_TABLE } from 'app/api/apiConstants'; +import { getInfo, ontimePlaceholderInfo } from 'app/api/ontimeApi'; +import { useFetch } from 'app/hooks/useFetch'; +import style from './Info.module.css'; + +export default function InfoNif() { + const { data, status } = useFetch(APP_TABLE, getInfo, { + placeholderData: ontimePlaceholderInfo, + }); + const [collapsed, setCollapsed] = useState(false); + + const isDev = process.env.NODE_ENV === 'development'; + const baseURL = `http://__IP__:${isDev ? 3000 : 4001}`; + + return ( +
+
+ Network Info + setCollapsed((c) => !c)} + /> +
+ + {!collapsed && ( +
+ {status === 'success' && ( + <> + {data?.networkInterfaces.map((e) => { + return ( + {`${e.name} - ${e.address}`} + ); + })} + + )} +
+ )} +
+ ); +} diff --git a/server/src/controllers/ontimeController.js b/server/src/controllers/ontimeController.js index 2d74bb73f..40eff7af4 100644 --- a/server/src/controllers/ontimeController.js +++ b/server/src/controllers/ontimeController.js @@ -7,6 +7,7 @@ import { block as blockDef, } from '../data/eventsDefinition.js'; import { dbModel } from '../data/dataModel.js'; +import { networkInterfaces } from 'os'; function getEventTitle() { return data.event.title; @@ -126,3 +127,35 @@ export const dbUpload = async (req, res) => { res.status(400).send({ message: error }); } }; + +/** + * @description Gets information on IPV4 non internal interfaces + * @returns {array} - Array of objects {name: ip} + */ +const getNetworkInterfaces = () => { + const nets = networkInterfaces(); + const results = []; + + for (const name of Object.keys(nets)) { + for (const net of nets[name]) { + // Skip over non-IPv4 and internal (i.e. 127.0.0.1) addresses + if (net.family === 'IPv4' && !net.internal) { + results.push({ + name: name, + address: net.address, + }); + } + } + } + return results; +}; + +// Create controller for POST request to '/ontime/info' +// Returns - +// TODO: Add version +export const getInfo = async (req, res) => { + const ni = getNetworkInterfaces(); + res.status(200).send({ + networkInterfaces: ni, + }); +}; diff --git a/server/src/routes/ontimeRouter.js b/server/src/routes/ontimeRouter.js index e5b5e5670..18368fd5e 100644 --- a/server/src/routes/ontimeRouter.js +++ b/server/src/routes/ontimeRouter.js @@ -2,10 +2,17 @@ import express from 'express'; import uploadJson from '../utils/upload.js'; export const router = express.Router(); -import { dbDownload, dbUpload } from '../controllers/ontimeController.js'; +import { + dbDownload, + dbUpload, + getInfo, +} from '../controllers/ontimeController.js'; // create route between controller and '/ontime/db' endpoint router.get('/db', dbDownload); // create route between controller and '/ontime/db' endpoint router.post('/db', uploadJson, dbUpload); + +// create route between controller and '/ontime/info' endpoint +router.get('/info', uploadJson, getInfo); From 68b723d4ecbc77900c10f130cc77cfda6d3c9dad Mon Sep 17 00:00:00 2001 From: cv <34649812+cpvalente@users.noreply.github.com> Date: Sun, 13 Jun 2021 14:29:41 +0200 Subject: [PATCH 6/6] style: notes --- client/src/common/input/EditableText.jsx | 4 ++-- client/src/features/editors/list/EventBlock.jsx | 1 + client/src/features/info/Info.jsx | 2 +- client/src/features/info/Info.module.css | 4 ++++ client/src/features/info/InfoTitle.jsx | 4 ++-- 5 files changed, 10 insertions(+), 5 deletions(-) diff --git a/client/src/common/input/EditableText.jsx b/client/src/common/input/EditableText.jsx index f41d8ad0a..ec8eec120 100644 --- a/client/src/common/input/EditableText.jsx +++ b/client/src/common/input/EditableText.jsx @@ -3,7 +3,7 @@ import { useEffect, useState } from 'react'; import style from './EditableText.module.css'; export default function EditableText(props) { - const { label, defaultValue, placeholder, submitHandler } = props; + const { label, defaultValue, placeholder, submitHandler, ...rest } = props; const [text, setText] = useState(defaultValue || ''); useEffect(() => { @@ -22,7 +22,7 @@ export default function EditableText(props) { }; return ( -
+
{label} handleChange(v)} diff --git a/client/src/features/editors/list/EventBlock.jsx b/client/src/features/editors/list/EventBlock.jsx index 9b26ea583..1da38c68b 100644 --- a/client/src/features/editors/list/EventBlock.jsx +++ b/client/src/features/editors/list/EventBlock.jsx @@ -77,6 +77,7 @@ const ExpandedBlock = (props) => { label='Note' defaultValue={data.note} placeholder='Add Note' + style={{ color: '#d69e2e' }} submitHandler={(v) => actionHandler('update', { field: 'note', value: v }) } diff --git a/client/src/features/info/Info.jsx b/client/src/features/info/Info.jsx index e741f7c32..445dfdf51 100644 --- a/client/src/features/info/Info.jsx +++ b/client/src/features/info/Info.jsx @@ -71,7 +71,7 @@ export default function Info() { return ( <>
{selected}
- + {/* */} diff --git a/client/src/features/info/Info.module.css b/client/src/features/info/Info.module.css index bf5ce6831..314822f08 100644 --- a/client/src/features/info/Info.module.css +++ b/client/src/features/info/Info.module.css @@ -30,6 +30,10 @@ color: #ccc; } +.notes { + color: #d69e2e; +} + .if { font-size: 0.8em; color: #4bffabcc; diff --git a/client/src/features/info/InfoTitle.jsx b/client/src/features/info/InfoTitle.jsx index 4c3ab3db1..a6e8a46cb 100644 --- a/client/src/features/info/InfoTitle.jsx +++ b/client/src/features/info/InfoTitle.jsx @@ -32,8 +32,8 @@ export default function InfoTitle(props) { Subtitle: {data.subtitle}
-
- Notes: +
+ Note: {data.note}