Add next open/close day panel + refactor common funcs to util

src/Components/NextOpenCloseMini/Component.css

@@ -0,0 +1,26 @@
+@import "../../Utils/utils.css";
+.NextOpenCloseMini {
+    width: 100%;
+    height: 100%;
+    font-size: 1em;
+    background-color: rgba(0, 0, 0, 0.75);
+    
+    color: rgba(255, 255, 255, 0.60);
+    font-size: 2em;
+    position: relative;
+}
+
+@media screen and (max-width: 600px) {
+    .NextOpenCloseMini {
+        font-size: 3em;
+    }
+}
+
+.NextOpenCloseMini-inner {
+    position: absolute;
+    text-align: center;
+    left: 50%;
+    top: 50%;
+    width: 80%;
+    transform: translate(-50%, -50%);
+}

src/Components/NextOpenCloseMini/Component.tsx

@@ -0,0 +1,75 @@
+import * as React from 'react';
+import * as moment from 'moment-timezone';
+import "./Component.css";
+import { HolidayList } from '../../Data';
+import { Utils, OpenOrClose } from "../../Utils";
+
+export interface NextOpenCloseMiniProps {
+    xDay: moment.Moment;
+    openOrClose: OpenOrClose;
+    allHolidays: HolidayList;
+}
+
+export class NextOpenCloseMini extends React.Component<NextOpenCloseMiniProps, {}> {
+    xDay: moment.Moment;
+    openOrClose: OpenOrClose;
+    allHolidays: HolidayList;
+
+    nextOpenOrCloseDate: moment.Moment | undefined;
+
+    constructor(props: NextOpenCloseMiniProps) {
+        super(props);
+        this.xDay = props.xDay;
+        this.openOrClose = props.openOrClose;
+        this.allHolidays = props.allHolidays;
+
+        this.nextOpenOrCloseDate = Utils.findNextOpenOrCloseFromDate(this.xDay, this.allHolidays, this.openOrClose);
+    }
+
+    getOpeningClosingString() {
+        return this.openOrClose === OpenOrClose.Open ? "opening" : "closing";
+    }
+
+    renderDate(): JSX.Element[] {
+        const tmpNextDate = this.nextOpenOrCloseDate as moment.Moment;
+        var nextDateString = tmpNextDate.format("DD-MM-YYYY");
+        return [
+            (
+                <div className="openCloseDecription" key="title">
+                    Next {this.getOpeningClosingString()} on
+                </div>
+            ),
+            (
+                <div className="dateDescription" key="subTitle">
+                    {nextDateString}
+                </div>
+            )
+        ];
+    }
+
+    renderNotFound(): JSX.Element[] {
+        return [
+            (
+                <div className="openCloseDecription" key="title">
+                    No more {this.getOpeningClosingString()}s
+                </div>
+            ),
+            (
+                <div className="dateDescription" key="subTitle">
+                    this year
+                </div>
+            )
+        ];
+    }
+
+    render() {
+
+        return (
+            <div className="NextOpenCloseMini">
+                <div className="NextOpenCloseMini-inner">
+                    {this.nextOpenOrCloseDate === undefined ? this.renderNotFound() : this.renderDate()}
+                </div>
+            </div>
+        );
+    }
+}

src/Components/NextOpenCloseMini/index.tsx

@@ -0,0 +1 @@
+export { NextOpenCloseMini } from './Component';