Implement calendar for csv viewing

2023-05-17 20:41:53 +03:00
parent ff3efdfb58
commit db3e2d4e0f
5 changed files with 156 additions and 17 deletions
@@ -0,0 +1,55 @@
+.calendar {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    gap: 5px;
+  }
+
+  .calendar-top {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 10px;
+  }
+
+  .calendar-nav {
+    display: flex;
+    align-items: center;
+  }
+
+  .calendar-nav button {
+    margin-right: 5px;
+    background-color: #fff;
+    border: none;
+    padding: 5px;
+    cursor: pointer;
+  }
+
+  .calendar-year-month {
+    text-align: center;
+  }
+
+  .calendar-cell {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 40px;
+    background-color: #fff;
+  }
+
+  .prev-month,
+  .next-month {
+    opacity: 0.3;
+  }
+
+  .data-date {
+    background-color: #99ccff;
+  }
+
+  .current-date {
+    background-color: #ffcc66;
+  }
+
+  .calendar-cell:hover {
+    background-color: #f2f2f2;
+    cursor: pointer;
+  }
@@ -0,0 +1,77 @@
+import moment from "moment";
+import { Accessor, Component, createSignal, Setter } from "solid-js";
+
+import "../css/calendar.css";
+
+export const Calendar: Component<{
+    getSelectedDate: Accessor<Date>,
+    setSelectedDate: Setter<Date>,
+    datesWithData: Date[],
+}> = ({getSelectedDate, setSelectedDate, datesWithData}) => {
+    const dateStrArr = () => datesWithData.map(d => d.toDateString());
+
+    return (
+        <div>
+            <h3>Calendar</h3>
+            <div class="calendar-top">
+                <button onClick={() => setSelectedDate(moment(getSelectedDate()).subtract(1, "months").toDate()) }>&lt;&lt;</button>
+                <div class="calendar-year-month">
+                    {moment(getSelectedDate()).format("YYYY, MMM")}
+                </div>
+                <button onclick={() => setSelectedDate(moment(getSelectedDate()).add(1, "months").toDate())}>&gt;&gt;</button>
+            </div>
+            <div class="calendar">
+                { getPaddedMonth(getSelectedDate()).map(d => {
+                    const classArr = ["calendar-cell"];
+                    if (d.getMonth() !== getSelectedDate().getMonth()) classArr.push("prev-month");
+                    if (dateStrArr().includes(d.toDateString())) classArr.push("data-date");
+                    if (d.toDateString() === getSelectedDate().toDateString()) classArr.push("current-date");
+                    return (
+                        <div
+                            class={classArr.join(" ")}
+                            onClick={() => setSelectedDate(d)}
+                        >
+                                {d.getDate()}
+                        </div>
+                )})}
+            </div>
+        </div>
+    )
+}
+
+function getPaddedMonth(date: Date): Date[] {
+    const firstDayOfMonth = new Date(new Date(date).setDate(1));
+    const datesArr = getMonthDates(firstDayOfMonth);
+
+    // padd start of the month
+    const dateIterator = new Date(firstDayOfMonth);
+    while (toEuropeanDay(dateIterator.getDay()) > 0) {
+        dateIterator.setDate(dateIterator.getDate() - 1);
+        datesArr.unshift(new Date(dateIterator));
+    }
+
+    // padd end of the month
+    dateIterator.setMonth(firstDayOfMonth.getMonth())
+    dateIterator.setDate(datesArr[datesArr.length - 1].getDate())
+    while (toEuropeanDay(dateIterator.getDay()) < 6) {
+        dateIterator.setDate(dateIterator.getDate() + 1);
+        datesArr.push(new Date(dateIterator));
+    }
+
+    return datesArr;
+}
+
+function getMonthDates(firstDayOfMonth: Date): Date[] {
+    const date = new Date(firstDayOfMonth);
+    const month = date.getMonth();
+    const arr: Date[] = [];
+    while (date.getMonth() === month) {
+        arr.push(new Date(date));
+        date.setDate(date.getDate() + 1);
+    }
+    return arr;
+}
+
+function toEuropeanDay(usaDay: number): number {
+    return --usaDay === -1 ? 6 : usaDay;
+}
@@ -1,9 +1,10 @@
-import { Component, createResource, Setter } from "solid-js";
+import { Accessor, Component, createResource, Setter } from "solid-js";
 import { apiHost } from "../consts";

 import "../css/spinner.css";
+import { Calendar } from "./Calendar";

-export const DateList: Component<{setDate: Setter<string>;}> = (props) => {
+export const DateList: Component<{getDate: Accessor<Date>, setDate: Setter<Date>;}> = (props) => {
    const fetchDates = async () => {
        await new Promise(resolve => setTimeout(resolve, 500))
        const response = await fetch(`${apiHost}/api/show/all_dates`);
@@ -13,11 +14,6 @@ export const DateList: Component<{setDate: Setter<string>;}> = (props) => {

    const [datesResource] = createResource(fetchDates);

-    const clickDate = (date: string) => {
-        console.log("setDate", date);
-        props.setDate(date);
-    }
-
    return (
        <div>
            { datesResource.loading && (
@@ -29,11 +25,18 @@ export const DateList: Component<{setDate: Setter<string>;}> = (props) => {
            { datesResource.error && (
                <div>Error while loading dates: ${datesResource.error}</div>
            )}
+            { datesResource() && <Calendar
+                getSelectedDate={props.getDate}
+                setSelectedDate={props.setDate}
+                datesWithData={datesResource().map((str: string) => new Date(str))}
+            /> }
+            
+            {/* Backup date view */}
            { datesResource() && (
                <ul>
-                    { (datesResource() as any).map((date: any) =>
+                    {/* { (datesResource() as any).map((date: any) =>
                        <li onClick={() => clickDate(date)}>{date}</li>
-                    )}
+                    )} */}
                </ul>
            )}
        </div>
@@ -1,4 +1,6 @@
+import moment from "moment";
 import { createSignal } from "solid-js";
+
 import "../css/FileManager.css"
 import { DateList } from "./DateList";
 import { FetchFiles } from "./FetchFiles";
@@ -6,19 +8,21 @@ import { FileContent } from "./FileContent";
 import { FileNameList } from "./FileNameList";

 export function FileManager() {
-    const [getDate, setDate] = createSignal("");
+    const [getDate, setDate] = createSignal(new Date());
    const [getFileName, setFileName] = createSignal("");

+    const stringDate = () => moment(getDate()).format("YYYYMMDD");
+
    return (
        <div class="fileManager">
            <h2>File manager</h2>
            <div class="container">
                <div class="column">
+                    <DateList getDate={getDate} setDate={setDate} />
                    <FetchFiles />
-                    <DateList setDate={setDate} />
                </div>
                <div class="column">
-                    <h3>{getDate()}</h3>
+                    <h3>{stringDate()}</h3>
                    <FileNameList getDate={getDate} setFileName={setFileName} />
                </div>
                <div class="column">
@@ -1,16 +1,16 @@
+import moment from "moment";
 import { Accessor, Component, createResource, Setter } from "solid-js";
 import { apiHost } from "../consts";

 import "../css/spinner.css";

 export const FileNameList: Component<{
-    getDate: Accessor<string>,
+    getDate: Accessor<Date>,
    setFileName: Setter<string>,
 }> = (props) => {
-    const fetchFileNames = async (date: string) => {
-        if (props.getDate() === "") return;
+    const fetchFileNames = async (fetchDate: Date) => {
        await new Promise(resolve => setTimeout(resolve, 500))
-        const response = await fetch(`${apiHost}/api/show/date/${date.replace(/-/g, "")}`);
+        const response = await fetch(`${apiHost}/api/show/date/${moment(fetchDate).format("YYYYMMDD")}`);
        const json = await response.json();
        return json;
    }
@@ -27,7 +27,7 @@ export const FileNameList: Component<{
            { fileNameResource.loading && (
                <div>
                    <span class="spinner"></span>
-                    <span style={{ "padding-left": "16px" }}>loading {props.getDate()}</span>
+                    <span style={{ "padding-left": "16px" }}>loading {moment(props.getDate()).format("YYYYMMDD")}</span>
                </div>
            )}
            { fileNameResource.error && (