From a5467dadabae7b51c026fd30be7cbf8129e776d6 Mon Sep 17 00:00:00 2001 From: CodeServer Date: Wed, 23 Mar 2022 06:03:50 +0000 Subject: [PATCH 1/3] home update --- src/components/home/MeetingsPanel.tsx | 26 +++++++++++++++++++++++--- src/style/App.css | 12 +++--------- src/style/App.css.map | 2 +- src/style/modules/_mainHome.sass | 19 ++++++++++++------- src/utils.tsx | 16 +++++++++++++++- 5 files changed, 54 insertions(+), 21 deletions(-) diff --git a/src/components/home/MeetingsPanel.tsx b/src/components/home/MeetingsPanel.tsx index 1f168be..4a9f599 100644 --- a/src/components/home/MeetingsPanel.tsx +++ b/src/components/home/MeetingsPanel.tsx @@ -1,18 +1,38 @@ import Meeting from "./Meeting"; import Typography from "@mui/material/Typography"; +import { useAppSelector } from "../../redux/hooks"; +import { selectMeetings } from "../../redux/slices/meetingsAndUserStatusSlice"; +import { selectUsers } from "../../redux/slices/usersSlice"; +import { formatTimeFromDate } from "../../utils"; const MeetingsPanel: React.FC = () => { + + const meetings = useAppSelector(selectMeetings); + return (
-
+ {/*
10:34 AM
Sunday, 03 Feb 2022 +
*/} +
+ Meetings in Progress
- - + {meetings.map((meeting) => { + const meetingMembers = useAppSelector((state) => + selectUsers(state, meeting.liveParticipantIds) + ); + return ( + (" " + userLite.name + " ")).toString()} + /> + ); + })}
); }; diff --git a/src/style/App.css b/src/style/App.css index 0acf714..f242ae5 100644 --- a/src/style/App.css +++ b/src/style/App.css @@ -26,17 +26,11 @@ a { width: 100%; } -.main-home .meetings-panel .current-time { +.main-home .meetings-panel .panel-label { text-align: center; background-color: grey; - padding-top: 1%; - padding-bottom: 1%; -} - -.main-home .meetings-panel .current-date { - text-align: center; - background-color: grey; - padding-bottom: 1%; + padding-top: 2%; + padding-bottom: 2%; } .main-home .meetings-panel .meeting { diff --git a/src/style/App.css.map b/src/style/App.css.map index 14bba81..a38ae1c 100644 --- a/src/style/App.css.map +++ b/src/style/App.css.map @@ -1,6 +1,6 @@ { "version": 3, - "mappings": "AG8CA,AAAA,WAAW,CAAC;EACR,KAAK,EAAE,IAAI;CAAG;;AAElB,AAAA,CAAC,CAAC;EACE,eAAe,EAAE,IAAI;CAAG;;AKlD5B,AAAA,UAAU,CAAC;EAGP,SAAS,EAAE,cAAc;CA8CO;;AAjDpC,AAII,UAJM,CAIN,eAAe,CAAC;EACZ,MAAM,EAAE,IAAI;EACZ,UAAU,EAAE,IAAI;EAChB,YAAY,EAAE,KAAK;EACnB,YAAY,EPRS,OAAO;EOS5B,YAAY,EAAE,GAAG;EACjB,aAAa,EAAE,IAAI;EACnB,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,IAAI;EACZ,QAAQ,EAAE,MAAM;CAgBO;;AA7B/B,AAcQ,UAdE,CAIN,eAAe,CAUX,IAAI,CAAC;EACD,KAAK,EAAE,IAAI;CAAG;;AAf1B,AAgBQ,UAhBE,CAIN,eAAe,CAYX,aAAa,CAAC;EACV,UAAU,EAAE,MAAM;EAClB,gBAAgB,EAAE,IAAI;EACtB,WAAW,EAAE,EAAE;EACf,cAAc,EAAE,EAAE;CAAG;;AApBjC,AAqBQ,UArBE,CAIN,eAAe,CAiBX,aAAa,CAAC;EACV,UAAU,EAAE,MAAM;EAClB,gBAAgB,EAAE,IAAI;EACtB,cAAc,EAAE,EAAE;CAAG;;AAxBjC,AAyBQ,UAzBE,CAIN,eAAe,CAqBX,QAAQ,CAAC;EACL,gBAAgB,EP1BC,OAAO;EO2BxB,UAAU,EAAE,MAAM;EAClB,UAAU,EAAE,IAAI;EAChB,WAAW,EAAE,CAAC;CAAG;;AA7B7B,AA+BQ,UA/BE,CA8BN,WAAW,CACP,MAAM,CAAC;EACH,UAAU,EAAE,IAAI;CAAG;;AAhC/B,AAiCQ,UAjCE,CA8BN,WAAW,CAGP,MAAM,CAAC;EACH,UAAU,EAAE,GAAG;CAAG;;AAlC9B,AAmCQ,UAnCE,CA8BN,WAAW,CAKP,QAAQ,CAAC;EACL,OAAO,EAAE,YAAY;EACrB,MAAM,EAAE,CAAC;EACT,KAAK,EAAE,KAAK;EACZ,UAAU,EAAE,MAAM;CAAG;;AAvCjC,AAwCQ,UAxCE,CA8BN,WAAW,CAUP,KAAK,CAAC;EACF,YAAY,EAAE,IAAI;EAClB,gBAAgB,EP1CC,OAAO;EO2CxB,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,KAAK;EACb,aAAa,EAAE,IAAI;CAIC;;AAjDhC,AA8CY,UA9CF,CA8BN,WAAW,CAUP,KAAK,CAMD,KAAK,CAAC;EACF,KAAK,EAAE,KAAK;EACZ,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,GAAG;CAAG;;ACjD9B,AACI,MADE,CACF,eAAe,CAAC;EACZ,WAAW,EAAE,MAAM;EACnB,MAAM,EAAE,IAAI;EACZ,UAAU,EAAE,GAAG;EACf,SAAS,EAAE,cAAc;CAqBC;;AA1BlC,AAMQ,MANF,CACF,eAAe,GAKT,CAAC,CAAC;EACA,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,MAAM;CAAG;;AAR7B,AASQ,MATF,CACF,eAAe,CAQX,WAAW,CAAC;EACR,OAAO,EAAE,YAAY;EACrB,UAAU,EAAE,MAAM;EAClB,MAAM,EAAE,IAAI;CAAG;;AAZ3B,AAaQ,MAbF,CACF,eAAe,CAYX,UAAU,CAAE;EACR,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,GAAG;EACV,gBAAgB,EAAE,OAAO;CAAG;;AAhBxC,AAiBQ,MAjBF,CACF,eAAe,CAgBX,aAAa,CAAC;EACV,OAAO,EAAE,YAAY;EACrB,UAAU,EAAE,IAAI;EAChB,MAAM,EAAE,IAAI;EACZ,WAAW,EAAE,IAAI;CAAG;;AArBhC,AAsBQ,MAtBF,CACF,eAAe,CAqBX,UAAU,CAAC;EACP,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;CAEQ;;AA1BhC,AAyBY,MAzBN,CACF,eAAe,CAqBX,UAAU,CAGN,CAAC,CAAC;EACE,KAAK,EAAE,IAAI;CAAG", + "mappings": "AG8CA,AAAA,WAAW,CAAC;EACR,KAAK,EAAE,IAAI;CAAG;;AAElB,AAAA,CAAC,CAAC;EACE,eAAe,EAAE,IAAI;CAAG;;AKlD5B,AAAA,UAAU,CAAC;EAGP,SAAS,EAAE,cAAc;CAmDO;;AAtDpC,AAII,UAJM,CAIN,eAAe,CAAC;EACZ,MAAM,EAAE,IAAI;EACZ,UAAU,EAAE,IAAI;EAChB,YAAY,EAAE,KAAK;EACnB,YAAY,EPRS,OAAO;EOS5B,YAAY,EAAE,GAAG;EACjB,aAAa,EAAE,IAAI;EACnB,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,IAAI;EACZ,QAAQ,EAAE,MAAM;CAqBO;;AAlC/B,AAcQ,UAdE,CAIN,eAAe,CAUX,IAAI,CAAC;EACD,KAAK,EAAE,IAAI;CAAG;;AAf1B,AAgBQ,UAhBE,CAIN,eAAe,CAYX,YAAY,CAAC;EACT,UAAU,EAAE,MAAM;EAClB,gBAAgB,EAAE,IAAI;EACtB,WAAW,EAAE,EAAE;EACf,cAAc,EAAE,EAAE;CAAG;;AApBjC,AA8BQ,UA9BE,CAIN,eAAe,CA0BX,QAAQ,CAAC;EACL,gBAAgB,EP/BC,OAAO;EOgCxB,UAAU,EAAE,MAAM;EAClB,UAAU,EAAE,IAAI;EAChB,WAAW,EAAE,CAAC;CAAG;;AAlC7B,AAoCQ,UApCE,CAmCN,WAAW,CACP,MAAM,CAAC;EACH,UAAU,EAAE,IAAI;CAAG;;AArC/B,AAsCQ,UAtCE,CAmCN,WAAW,CAGP,MAAM,CAAC;EACH,UAAU,EAAE,GAAG;CAAG;;AAvC9B,AAwCQ,UAxCE,CAmCN,WAAW,CAKP,QAAQ,CAAC;EACL,OAAO,EAAE,YAAY;EACrB,MAAM,EAAE,CAAC;EACT,KAAK,EAAE,KAAK;EACZ,UAAU,EAAE,MAAM;CAAG;;AA5CjC,AA6CQ,UA7CE,CAmCN,WAAW,CAUP,KAAK,CAAC;EACF,YAAY,EAAE,IAAI;EAClB,gBAAgB,EP/CC,OAAO;EOgDxB,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,KAAK;EACb,aAAa,EAAE,IAAI;CAIC;;AAtDhC,AAmDY,UAnDF,CAmCN,WAAW,CAUP,KAAK,CAMD,KAAK,CAAC;EACF,KAAK,EAAE,KAAK;EACZ,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,GAAG;CAAG;;ACtD9B,AACI,MADE,CACF,eAAe,CAAC;EACZ,WAAW,EAAE,MAAM;EACnB,MAAM,EAAE,IAAI;EACZ,UAAU,EAAE,GAAG;EACf,SAAS,EAAE,cAAc;CAqBC;;AA1BlC,AAMQ,MANF,CACF,eAAe,GAKT,CAAC,CAAC;EACA,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,MAAM;CAAG;;AAR7B,AASQ,MATF,CACF,eAAe,CAQX,WAAW,CAAC;EACR,OAAO,EAAE,YAAY;EACrB,UAAU,EAAE,MAAM;EAClB,MAAM,EAAE,IAAI;CAAG;;AAZ3B,AAaQ,MAbF,CACF,eAAe,CAYX,UAAU,CAAE;EACR,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,GAAG;EACV,gBAAgB,EAAE,OAAO;CAAG;;AAhBxC,AAiBQ,MAjBF,CACF,eAAe,CAgBX,aAAa,CAAC;EACV,OAAO,EAAE,YAAY;EACrB,UAAU,EAAE,IAAI;EAChB,MAAM,EAAE,IAAI;EACZ,WAAW,EAAE,IAAI;CAAG;;AArBhC,AAsBQ,MAtBF,CACF,eAAe,CAqBX,UAAU,CAAC;EACP,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;CAEQ;;AA1BhC,AAyBY,MAzBN,CACF,eAAe,CAqBX,UAAU,CAGN,CAAC,CAAC;EACE,KAAK,EAAE,IAAI;CAAG", "sources": [ "App.sass", "_variables.sass", diff --git a/src/style/modules/_mainHome.sass b/src/style/modules/_mainHome.sass index 8330321..e4b6c64 100644 --- a/src/style/modules/_mainHome.sass +++ b/src/style/modules/_mainHome.sass @@ -14,15 +14,20 @@ overflow: hidden .row width: 100% - .current-time + .panel-label text-align: center background-color: grey - padding-top: 1% - padding-bottom: 1% - .current-date - text-align: center - background-color: grey - padding-bottom: 1% + padding-top: 2% + padding-bottom: 2% + // .current-time + // text-align: center + // background-color: grey + // padding-top: 1% + // padding-bottom: 1% + // .current-date + // text-align: center + // background-color: grey + // padding-bottom: 1% .meeting background-color: $main-home-background-color text-align: center diff --git a/src/utils.tsx b/src/utils.tsx index 452a892..6c5d141 100644 --- a/src/utils.tsx +++ b/src/utils.tsx @@ -14,4 +14,18 @@ const getStatusColor = (ms: MeetingStatus): string => { } }; -export { MeetingStatus, getStatusColor }; +const formatTimeFromDate = (date: Date, offsetMinutes: number): string => { + const newDate = new Date(date.getTime() + offsetMinutes*60000); + let hour = newDate.getHours(); + let ampm = ""; + let minutes = newDate.getMinutes() < 10 ? "0" + newDate.getMinutes() : "" + newDate.getMinutes(); + if (hour < 12) { + ampm = "am"; + } else { + hour = hour === 12 ? 12 : hour - 12; + ampm = "pm"; + } + return hour + ":" + minutes + ampm; +}; + +export { MeetingStatus, getStatusColor, formatTimeFromDate }; From 9c7102dccd0b3e0449cc16ac6695479096b7f8d7 Mon Sep 17 00:00:00 2001 From: CodeServer Date: Wed, 23 Mar 2022 06:37:53 +0000 Subject: [PATCH 2/3] home fix --- src/components/home/MeetingsPanel.tsx | 22 +++++++++++++++------- src/utils.tsx | 7 +++---- 2 files changed, 18 insertions(+), 11 deletions(-) diff --git a/src/components/home/MeetingsPanel.tsx b/src/components/home/MeetingsPanel.tsx index 4a9f599..2767101 100644 --- a/src/components/home/MeetingsPanel.tsx +++ b/src/components/home/MeetingsPanel.tsx @@ -25,13 +25,21 @@ const MeetingsPanel: React.FC = () => { const meetingMembers = useAppSelector((state) => selectUsers(state, meeting.liveParticipantIds) ); - return ( - (" " + userLite.name + " ")).toString()} - /> - ); + const startDate = new Date(meeting.start); + const startDatemil = startDate.getTime(); + const endDatemil = startDatemil + meeting.duration*60000; + const endDate = new Date(endDatemil); + const currentDatemil = Date.now(); + + if (currentDatemil >= startDatemil && currentDatemil <= endDatemil) { + return ( + (" " + userLite.name + " ")).toString()} + /> + ); + } })}
); diff --git a/src/utils.tsx b/src/utils.tsx index 6c5d141..6dbb3d5 100644 --- a/src/utils.tsx +++ b/src/utils.tsx @@ -14,11 +14,10 @@ const getStatusColor = (ms: MeetingStatus): string => { } }; -const formatTimeFromDate = (date: Date, offsetMinutes: number): string => { - const newDate = new Date(date.getTime() + offsetMinutes*60000); - let hour = newDate.getHours(); +const formatTimeFromDate = (date: Date): string => { + let hour = date.getHours(); let ampm = ""; - let minutes = newDate.getMinutes() < 10 ? "0" + newDate.getMinutes() : "" + newDate.getMinutes(); + let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : "" + date.getMinutes(); if (hour < 12) { ampm = "am"; } else { From 24875f914bebfaf8ecc23f010e36ffab8ade3f38 Mon Sep 17 00:00:00 2001 From: CodeServer Date: Wed, 23 Mar 2022 06:52:55 +0000 Subject: [PATCH 3/3] home real time update --- src/components/home/MeetingsPanel.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/components/home/MeetingsPanel.tsx b/src/components/home/MeetingsPanel.tsx index 2767101..96c7dca 100644 --- a/src/components/home/MeetingsPanel.tsx +++ b/src/components/home/MeetingsPanel.tsx @@ -1,5 +1,6 @@ import Meeting from "./Meeting"; import Typography from "@mui/material/Typography"; +import { useState, useEffect } from "react"; import { useAppSelector } from "../../redux/hooks"; import { selectMeetings } from "../../redux/slices/meetingsAndUserStatusSlice"; import { selectUsers } from "../../redux/slices/usersSlice"; @@ -29,7 +30,12 @@ const MeetingsPanel: React.FC = () => { const startDatemil = startDate.getTime(); const endDatemil = startDatemil + meeting.duration*60000; const endDate = new Date(endDatemil); - const currentDatemil = Date.now(); + const [currentDate, setCurrentDate] = useState(new Date()); + useEffect(() => { + setInterval(() => setCurrentDate(new Date()), 1000); + }, []); + + const currentDatemil = currentDate.getTime(); if (currentDatemil >= startDatemil && currentDatemil <= endDatemil) { return (