From af5849affc33525ae4ae5ae75cac4e6604bd3c7e Mon Sep 17 00:00:00 2001
From: brausjonas <brausjonas@gmail.com>
Date: Sat, 6 May 2023 00:12:20 +0200
Subject: [PATCH] Calender Resize
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Der Kalender kann mittels eines "+" und "-" buttons vergrößert und verkleinert werden. D.h. Zeilen werden enger zusammengerückt oder auseinander gezogen
---
 anwendung/src/components/Button.jsx       |  11 +-
 anwendung/src/components/CalenderView.jsx | 351 ++++++++++++----------
 anwendung/src/styles/globals.css          |   1 -
 3 files changed, 204 insertions(+), 159 deletions(-)

diff --git a/anwendung/src/components/Button.jsx b/anwendung/src/components/Button.jsx
index d37acb8..81fd7a1 100644
--- a/anwendung/src/components/Button.jsx
+++ b/anwendung/src/components/Button.jsx
@@ -19,15 +19,17 @@ export default function Button(p) {
     let onClick = p.onClick;
     let color = p.color;
     let fontColor = p.fontColor;
+    let font_size = p.fontSize;
 
     //if parameters are not set, they are set to default values
-    if (height == null) height = 50;
-    if (width == null) width = 100;
+    if (height == null) height = 0;
+    if (width == null) width = 0;
     if (iconWidth == null) iconWidth = width-10;
     if (iconHeight == null) iconHeight = height-10;
     if (onClick == null) onClick = () => {};
     if (color == null) color = "#363636";
     if (fontColor == null) fontColor = "white";
+    if (font_size == null) font_size = 16;
 
     //build in the icon width and height to the svg tag (svg tag should not contain any size information by default)
     if (iconHTML != null) {
@@ -48,7 +50,10 @@ export default function Button(p) {
                         alignItems: "center",
                         justifyContent: "center",
                         backgroundColor: color,
-                        color: fontColor
+                        color: fontColor,
+                        fontSize: font_size,
+                        minWidth: width,
+                        minHeight: height
                     }}
                     onClick={onClick}>
                 {text}
diff --git a/anwendung/src/components/CalenderView.jsx b/anwendung/src/components/CalenderView.jsx
index 91048af..8a502dd 100644
--- a/anwendung/src/components/CalenderView.jsx
+++ b/anwendung/src/components/CalenderView.jsx
@@ -1,5 +1,6 @@
 import {useEffect, useState} from "react";
 import {CalenderEntry} from "@/components/CalenderEntry";
+import Button from "@/components/Button";
 
 let entries = {mo: [], tu: [], we: [], th: [], fr: [], sa: []}
 let grabbed = null;
@@ -11,7 +12,7 @@ let selectedOffsetTop = 0;
 let selectedOffsetBottom = 0;
 let selectedListID = "";
 
-const cellHeight = 25;
+let cellHeight = 25;
 
 export default function CalenderView(p) {
     const [t, setT] = useState(false)
@@ -188,162 +189,202 @@ export default function CalenderView(p) {
     }
 
     return (
-        <div id={t} style={{border: "5px solid #363636", borderRadius: 10}}>
-            <div style={{backgroundColor: "#363636"}}>
-                <div className={"wochen-tag-container"}>
-                    <div className={"wochen-tag font-big"}>Montag</div>
-                    <div className={"wochen-tag font-big"}>Dienstag</div>
-                    <div className={"wochen-tag font-big"}>Mittwoch</div>
-                    <div className={"wochen-tag font-big"}>Donnerstag</div>
-                    <div className={"wochen-tag font-big"}>Freitag</div>
-                    <div className={"wochen-tag font-big"}>Samstag</div>
+        <div style={{display: "flex", flexDirection: "row", justifyContent: "center", alignItems: "start"}}>
+            <Button text={"-"} fontSize={25} onClick={() => {if(cellHeight - 5 >= 10) cellHeight -= 5; setT(!t);}} width={50} height={50}/>
+            <div id={t} style={{border: "5px solid #363636", borderRadius: 10}}>
+                <div style={{backgroundColor: "#363636"}}>
+                    <div className={"wochen-tag-container"}>
+                        <div className={"wochen-tag font-big"}>Montag</div>
+                        <div className={"wochen-tag font-big"}>Dienstag</div>
+                        <div className={"wochen-tag font-big"}>Mittwoch</div>
+                        <div className={"wochen-tag font-big"}>Donnerstag</div>
+                        <div className={"wochen-tag font-big"}>Freitag</div>
+                        <div className={"wochen-tag font-big"}>Samstag</div>
+                    </div>
+                </div>
+                <div className={"calender-container"}>
+
+                    <div className={"calender-view content"} style={{height: cellHeight * 96}}>
+
+                        <div className={"spalte"} onMouseDown={mouse_down} onMouseUp={mouse_up} onMouseMove={mouse_move}
+                             id={"mo"} style={{gridTemplateRows: `repeat(96, ${cellHeight}px)`}}>
+
+
+                            {entries["mo"].map(d => (<div className={"entry"} style={{
+                                width: "100%",
+                                gridRowStart: d.start_point,
+                                gridRowEnd: d.end_point,
+                                gridColumnStart: 0,
+                                gridColumnEnd: 0,
+                            }} id={"entry"}>
+                                <div className={"resize-grab"} id={"grab"}></div>
+                                <div style={{maxHeight: "60%"}} className={"no-pointer-events"}>
+                                    <p>{internal_to_time(d.start_point) + " - " + internal_to_time(d.end_point)}</p>
+                                    <p>Moduel etc.</p>
+                                    <p>Mehr Infos</p>
+                                    <p>Raum</p>
+                                </div>
+                                <div className={"resize-grab"} id={"grab"}></div>
+                            </div>))}
+                        </div>
+                        <div className={"spalte"} onMouseDown={mouse_down} onMouseUp={mouse_up} onMouseMove={mouse_move}
+                             id={"tu"} style={{gridTemplateRows: `repeat(96, ${cellHeight}px)`}}>
+
+                            {entries["tu"].map(d => (<div className={"entry"} style={{
+                                width: "100%",
+                                gridRowStart: d.start_point,
+                                gridRowEnd: d.end_point
+                            }} id={"entry"}>
+
+                                <div className={"resize-grab"} id={"grab"}></div>
+                                <div style={{maxHeight: "60%"}} className={"no-pointer-events"}>
+                                    <p>{internal_to_time(d.start_point) + " - " + internal_to_time(d.end_point)}</p>
+                                    <p>Moduel etc.</p>
+                                    <p>Mehr Infos</p>
+                                    <p>Raum</p>
+                                </div>
+                                <div className={"resize-grab"} id={"grab"}></div>
+                            </div>))}
+                        </div>
+                        <div className={"spalte"} onMouseDown={mouse_down} onMouseUp={mouse_up} onMouseMove={mouse_move}
+                             id={"we"} style={{gridTemplateRows: `repeat(96, ${cellHeight}px)`}}>
+
+
+                            {entries["we"].map(d => (<div className={"entry"} style={{
+                                width: "100%",
+                                gridRowStart: d.start_point,
+                                gridRowEnd: d.end_point
+                            }} id={"entry"}>
+
+                                <div className={"resize-grab"} id={"grab"}></div>
+                                <div style={{maxHeight: "60%"}} className={"no-pointer-events"}>
+                                    <p>{internal_to_time(d.start_point) + " - " + internal_to_time(d.end_point)}</p>
+                                    <p>Moduel etc.</p>
+                                    <p>Mehr Infos</p>
+                                    <p>Raum</p>
+                                </div>
+                                <div className={"resize-grab"} id={"grab"}></div>
+                            </div>))}
+                        </div>
+                        <div className={"spalte"} onMouseDown={mouse_down} onMouseUp={mouse_up} onMouseMove={mouse_move}
+                             id={"th"} style={{gridTemplateRows: `repeat(96, ${cellHeight}px)`}}>
+
+                            {entries["th"].map(d => (<div className={"entry"} style={{
+                                width: "100%",
+                                gridRowStart: d.start_point,
+                                gridRowEnd: d.end_point
+                            }} id={"entry"}>
+
+                                <div className={"resize-grab"} id={"grab"}></div>
+                                <div style={{maxHeight: "60%"}} className={"no-pointer-events"}>
+                                    <p>{internal_to_time(d.start_point) + " - " + internal_to_time(d.end_point)}</p>
+                                    <p>Moduel etc.</p>
+                                    <p>Mehr Infos</p>
+                                    <p>Raum</p>
+                                </div>
+                                <div className={"resize-grab"} id={"grab"}></div>
+                            </div>))}
+                        </div>
+                        <div className={"spalte"} onMouseDown={mouse_down} onMouseUp={mouse_up} onMouseMove={mouse_move}
+                             id={"fr"} style={{gridTemplateRows: `repeat(96, ${cellHeight}px)`}}>
+
+
+                            {entries["fr"].map(d => (<div className={"entry"} style={{
+                                width: "100%",
+                                gridRowStart: d.start_point,
+                                gridRowEnd: d.end_point
+                            }} id={"entry"}>
+                                <div className={"resize-grab"} id={"grab"}></div>
+                                <div style={{maxHeight: "60%"}} className={"no-pointer-events"}>
+                                    <p>{internal_to_time(d.start_point) + " - " + internal_to_time(d.end_point)}</p>
+                                    <p>Moduel etc.</p>
+                                    <p>Mehr Infos</p>
+                                    <p>Raum</p>
+                                </div>
+                                <div className={"resize-grab"} id={"grab"}></div>
+                            </div>))}
+                        </div>
+                        <div className={"spalte"} onMouseDown={mouse_down} onMouseUp={mouse_up} onMouseMove={mouse_move}
+                             id={"sa"} style={{gridTemplateRows: `repeat(96, ${cellHeight}px)`}}>
+
+
+                            {entries["sa"].map(d => (<div className={"entry"} style={{
+                                width: "100%",
+                                gridRowStart: d.start_point,
+                                gridRowEnd: d.end_point
+                            }} id={"entry"}>
+                                <div className={"resize-grab"} id={"grab"}></div>
+                                <div style={{maxHeight: "60%"}} className={"no-pointer-events"}>
+                                    <p>{internal_to_time(d.start_point) + " - " + internal_to_time(d.end_point)}</p>
+                                    <p>Moduel etc.</p>
+                                    <p>Mehr Infos</p>
+                                    <p>Raum</p>
+                                </div>
+                                <div className={"resize-grab"} id={"grab"}></div>
+                            </div>))}
+                        </div>
+                    </div>
+
+                    <div className={"overlay"} style={{backgroundColor: "rgba(0, 0, 0, 0)"}}>
+                        {temp.map(i => (<div style={{
+                            width: "100%",
+                            height: cellHeight * 2,
+                            borderBottom: "1px solid #363636",
+                            display: "flex",
+                            flexDirection: "row",
+                            justifyContent: "space-around",
+                            alignItems: "center",
+                        }} className={"no-pointer-events"}>
+
+                            <p style={{
+                                color: "gray",
+                                marginTop: cellHeight -3,
+                                marginRight: 120,
+                                fontSize: 12,
+                                textAlign: "center"
+                            }}>{internal_to_time(i + 1)}</p>
+                            <p style={{
+                                color: "gray",
+                                marginTop: cellHeight -3,
+                                marginRight: 120,
+                                fontSize: 12,
+                                textAlign: "center"
+                            }}>{internal_to_time(i + 1)}</p>
+                            <p style={{
+                                color: "gray",
+                                marginTop: cellHeight -3,
+                                marginRight: 120,
+                                fontSize: 12,
+                                textAlign: "center"
+                            }}>{internal_to_time(i + 1)}</p>
+                            <p style={{
+                                color: "gray",
+                                marginTop: cellHeight -3,
+                                marginRight: 120,
+                                fontSize: 12,
+                                textAlign: "center"
+                            }}>{internal_to_time(i + 1)}</p>
+                            <p style={{
+                                color: "gray",
+                                marginTop: cellHeight -3,
+                                marginRight: 120,
+                                fontSize: 12,
+                                textAlign: "center"
+                            }}>{internal_to_time(i + 1)}</p>
+                            <p style={{
+                                color: "gray",
+                                marginTop: cellHeight -3,
+                                marginRight: 120,
+                                fontSize: 12,
+                                textAlign: "center"
+                            }}>{internal_to_time(i + 1)}</p>
+                        </div>))}
+                    </div>
+
+
                 </div>
             </div>
-            <div className={"calender-container"}>
-
-                <div className={"calender-view content"}>
-
-                    <div className={"spalte"} onMouseDown={mouse_down} onMouseUp={mouse_up} onMouseMove={mouse_move}
-                         id={"mo"}>
-
-
-                        {entries["mo"].map(d => (<div className={"entry"} style={{
-                            width: "100%",
-                            gridRowStart: d.start_point,
-                            gridRowEnd: d.end_point,
-                            gridColumnStart: 0,
-                            gridColumnEnd: 0
-                        }} id={"entry"}>
-                            <div className={"resize-grab"} id={"grab"}></div>
-                            <div style={{maxHeight: "60%"}} className={"no-pointer-events"}>
-                                <p>{internal_to_time(d.start_point) + " - " + internal_to_time(d.end_point)}</p>
-                                <p>Moduel etc.</p>
-                                <p>Mehr Infos</p>
-                                <p>Raum</p>
-                            </div>
-                            <div className={"resize-grab"} id={"grab"}></div>
-                        </div>))}
-                    </div>
-                    <div className={"spalte"} onMouseDown={mouse_down} onMouseUp={mouse_up} onMouseMove={mouse_move}
-                         id={"tu"}>
-
-                        {entries["tu"].map(d => (<div className={"entry"} style={{
-                            width: "100%",
-                            gridRowStart: d.start_point,
-                            gridRowEnd: d.end_point
-                        }} id={"entry"}>
-
-                            <div className={"resize-grab"} id={"grab"}></div>
-                            <div style={{maxHeight: "60%"}} className={"no-pointer-events"}>
-                                <p>{internal_to_time(d.start_point) + " - " + internal_to_time(d.end_point)}</p>
-                                <p>Moduel etc.</p>
-                                <p>Mehr Infos</p>
-                                <p>Raum</p>
-                            </div>
-                            <div className={"resize-grab"} id={"grab"}></div>
-                        </div>))}
-                    </div>
-                    <div className={"spalte"} onMouseDown={mouse_down} onMouseUp={mouse_up} onMouseMove={mouse_move}
-                         id={"we"}>
-
-
-                        {entries["we"].map(d => (<div className={"entry"} style={{
-                            width: "100%",
-                            gridRowStart: d.start_point,
-                            gridRowEnd: d.end_point
-                        }} id={"entry"}>
-
-                            <div className={"resize-grab"} id={"grab"}></div>
-                            <div style={{maxHeight: "60%"}} className={"no-pointer-events"}>
-                                <p>{internal_to_time(d.start_point) + " - " + internal_to_time(d.end_point)}</p>
-                                <p>Moduel etc.</p>
-                                <p>Mehr Infos</p>
-                                <p>Raum</p>
-                            </div>
-                            <div className={"resize-grab"} id={"grab"}></div>
-                        </div>))}
-                    </div>
-                    <div className={"spalte"} onMouseDown={mouse_down} onMouseUp={mouse_up} onMouseMove={mouse_move}
-                         id={"th"}>
-
-                        {entries["th"].map(d => (<div className={"entry"} style={{
-                            width: "100%",
-                            gridRowStart: d.start_point,
-                            gridRowEnd: d.end_point
-                        }} id={"entry"}>
-
-                            <div className={"resize-grab"} id={"grab"}></div>
-                            <div style={{maxHeight: "60%"}} className={"no-pointer-events"}>
-                                <p>{internal_to_time(d.start_point) + " - " + internal_to_time(d.end_point)}</p>
-                                <p>Moduel etc.</p>
-                                <p>Mehr Infos</p>
-                                <p>Raum</p>
-                            </div>
-                            <div className={"resize-grab"} id={"grab"}></div>
-                        </div>))}
-                    </div>
-                    <div className={"spalte"} onMouseDown={mouse_down} onMouseUp={mouse_up} onMouseMove={mouse_move}
-                         id={"fr"}>
-
-
-                        {entries["fr"].map(d => (<div className={"entry"} style={{
-                            width: "100%",
-                            gridRowStart: d.start_point,
-                            gridRowEnd: d.end_point
-                        }} id={"entry"}>
-                            <div className={"resize-grab"} id={"grab"}></div>
-                            <div style={{maxHeight: "60%"}} className={"no-pointer-events"}>
-                                <p>{internal_to_time(d.start_point) + " - " + internal_to_time(d.end_point)}</p>
-                                <p>Moduel etc.</p>
-                                <p>Mehr Infos</p>
-                                <p>Raum</p>
-                            </div>
-                            <div className={"resize-grab"} id={"grab"}></div>
-                        </div>))}
-                    </div>
-                    <div className={"spalte"} onMouseDown={mouse_down} onMouseUp={mouse_up} onMouseMove={mouse_move}
-                         id={"sa"}>
-
-
-                        {entries["sa"].map(d => (<div className={"entry"} style={{
-                            width: "100%",
-                            gridRowStart: d.start_point,
-                            gridRowEnd: d.end_point
-                        }} id={"entry"}>
-                            <div className={"resize-grab"} id={"grab"}></div>
-                            <div style={{maxHeight: "60%"}} className={"no-pointer-events"}>
-                                <p>{internal_to_time(d.start_point) + " - " + internal_to_time(d.end_point)}</p>
-                                <p>Moduel etc.</p>
-                                <p>Mehr Infos</p>
-                                <p>Raum</p>
-                            </div>
-                            <div className={"resize-grab"} id={"grab"}></div>
-                        </div>))}
-                    </div>
-                </div>
-
-                <div className={"overlay"} style={{backgroundColor: "rgba(0, 0, 0, 0)"}}>
-                    {temp.map(i => (<div style={{
-                        width: "100%",
-                        height: cellHeight * 2,
-                        borderBottom: "1px solid #363636",
-                        display: "flex",
-                        flexDirection: "row",
-                        justifyContent: "space-around",
-                        alignItems: "center",
-                    }} className={"no-pointer-events"}>
-
-                        <p style={{color: "gray", marginTop: 30, marginRight: 120,  fontSize: 12, textAlign: "center"}}>{internal_to_time(i+1)}</p>
-                        <p style={{color: "gray", marginTop: 30, marginRight: 120,  fontSize: 12, textAlign: "center"}}>{internal_to_time(i+1)}</p>
-                        <p style={{color: "gray", marginTop: 30, marginRight: 120,  fontSize: 12, textAlign: "center"}}>{internal_to_time(i+1)}</p>
-                        <p style={{color: "gray", marginTop: 30, marginRight: 120,  fontSize: 12, textAlign: "center"}}>{internal_to_time(i+1)}</p>
-                        <p style={{color: "gray", marginTop: 30, marginRight: 120,  fontSize: 12, textAlign: "center"}}>{internal_to_time(i+1)}</p>
-                        <p style={{color: "gray", marginTop: 30, marginRight: 120,  fontSize: 12, textAlign: "center"}}>{internal_to_time(i+1)}</p>
-                    </div>))}
-                </div>
-
-
-            </div>
+            <Button text={"+"} fontSize={25} onClick={() => {cellHeight += 5; setT(!t)}} width={50} height={50}/>
         </div>
     )
 }
\ No newline at end of file
diff --git a/anwendung/src/styles/globals.css b/anwendung/src/styles/globals.css
index a578fa0..dc9e7de 100644
--- a/anwendung/src/styles/globals.css
+++ b/anwendung/src/styles/globals.css
@@ -255,7 +255,6 @@ Calender View
   display: grid;
   padding: 0 3px;
   grid-template-columns: 100%;
-  grid-template-rows: repeat(96, 25px);
 }
 
 .wochen-tag-container .wochen-tag