Calender Resize
Der Kalender kann mittels eines "+" und "-" buttons vergrößert und verkleinert werden. D.h. Zeilen werden enger zusammengerückt oder auseinander gezogen
This commit is contained in:
brausjonas
@@ -19,15 +19,17 @@ export default function Button(p) {
|
|||||||
let onClick = p.onClick;
|
let onClick = p.onClick;
|
||||||
let color = p.color;
|
let color = p.color;
|
||||||
let fontColor = p.fontColor;
|
let fontColor = p.fontColor;
|
||||||
|
let font_size = p.fontSize;
|
||||||
|
|
||||||
//if parameters are not set, they are set to default values
|
//if parameters are not set, they are set to default values
|
||||||
if (height == null) height = 50;
|
if (height == null) height = 0;
|
||||||
if (width == null) width = 100;
|
if (width == null) width = 0;
|
||||||
if (iconWidth == null) iconWidth = width-10;
|
if (iconWidth == null) iconWidth = width-10;
|
||||||
if (iconHeight == null) iconHeight = height-10;
|
if (iconHeight == null) iconHeight = height-10;
|
||||||
if (onClick == null) onClick = () => {};
|
if (onClick == null) onClick = () => {};
|
||||||
if (color == null) color = "#363636";
|
if (color == null) color = "#363636";
|
||||||
if (fontColor == null) fontColor = "white";
|
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)
|
//build in the icon width and height to the svg tag (svg tag should not contain any size information by default)
|
||||||
if (iconHTML != null) {
|
if (iconHTML != null) {
|
||||||
@@ -48,7 +50,10 @@ export default function Button(p) {
|
|||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
justifyContent: "center",
|
justifyContent: "center",
|
||||||
backgroundColor: color,
|
backgroundColor: color,
|
||||||
color: fontColor
|
color: fontColor,
|
||||||
|
fontSize: font_size,
|
||||||
|
minWidth: width,
|
||||||
|
minHeight: height
|
||||||
}}
|
}}
|
||||||
onClick={onClick}>
|
onClick={onClick}>
|
||||||
{text}
|
{text}
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
import {useEffect, useState} from "react";
|
import {useEffect, useState} from "react";
|
||||||
import {CalenderEntry} from "@/components/CalenderEntry";
|
import {CalenderEntry} from "@/components/CalenderEntry";
|
||||||
|
import Button from "@/components/Button";
|
||||||
|
|
||||||
let entries = {mo: [], tu: [], we: [], th: [], fr: [], sa: []}
|
let entries = {mo: [], tu: [], we: [], th: [], fr: [], sa: []}
|
||||||
let grabbed = null;
|
let grabbed = null;
|
||||||
@@ -11,7 +12,7 @@ let selectedOffsetTop = 0;
|
|||||||
let selectedOffsetBottom = 0;
|
let selectedOffsetBottom = 0;
|
||||||
let selectedListID = "";
|
let selectedListID = "";
|
||||||
|
|
||||||
const cellHeight = 25;
|
let cellHeight = 25;
|
||||||
|
|
||||||
export default function CalenderView(p) {
|
export default function CalenderView(p) {
|
||||||
const [t, setT] = useState(false)
|
const [t, setT] = useState(false)
|
||||||
@@ -188,162 +189,202 @@ export default function CalenderView(p) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div id={t} style={{border: "5px solid #363636", borderRadius: 10}}>
|
<div style={{display: "flex", flexDirection: "row", justifyContent: "center", alignItems: "start"}}>
|
||||||
<div style={{backgroundColor: "#363636"}}>
|
<Button text={"-"} fontSize={25} onClick={() => {if(cellHeight - 5 >= 10) cellHeight -= 5; setT(!t);}} width={50} height={50}/>
|
||||||
<div className={"wochen-tag-container"}>
|
<div id={t} style={{border: "5px solid #363636", borderRadius: 10}}>
|
||||||
<div className={"wochen-tag font-big"}>Montag</div>
|
<div style={{backgroundColor: "#363636"}}>
|
||||||
<div className={"wochen-tag font-big"}>Dienstag</div>
|
<div className={"wochen-tag-container"}>
|
||||||
<div className={"wochen-tag font-big"}>Mittwoch</div>
|
<div className={"wochen-tag font-big"}>Montag</div>
|
||||||
<div className={"wochen-tag font-big"}>Donnerstag</div>
|
<div className={"wochen-tag font-big"}>Dienstag</div>
|
||||||
<div className={"wochen-tag font-big"}>Freitag</div>
|
<div className={"wochen-tag font-big"}>Mittwoch</div>
|
||||||
<div className={"wochen-tag font-big"}>Samstag</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>
|
</div>
|
||||||
<div className={"calender-container"}>
|
<Button text={"+"} fontSize={25} onClick={() => {cellHeight += 5; setT(!t)}} width={50} height={50}/>
|
||||||
|
|
||||||
<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>
|
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
@@ -255,7 +255,6 @@ Calender View
|
|||||||
display: grid;
|
display: grid;
|
||||||
padding: 0 3px;
|
padding: 0 3px;
|
||||||
grid-template-columns: 100%;
|
grid-template-columns: 100%;
|
||||||
grid-template-rows: repeat(96, 25px);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.wochen-tag-container .wochen-tag
|
.wochen-tag-container .wochen-tag
|
||||||
|
|||||||
Reference in New Issue
Block a user