jonas/TIF22A_AnwProjekt_B
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CalenderView Tage Always on top

Browse Source 
Tage in der Kalender werden nicht mit gescrolled
This commit is contained in:
brausjonas
2023-05-05 17:47:46 +02:00
parent b96ce074b3
commit 4f981e37a1
3 changed files with 147 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files
anwendung/src/components/CalenderView.jsx
+125 -133
View File
@@ -14,43 +14,30 @@ let selectedListID = "";
export default function CalenderView(p) { export default function CalenderView(p) {
const [t, setT] = useState(false) const [t, setT] = useState(false)
function mouse_move(e) function mouse_move(e) {
{ if (mouseDown) {
if(mouseDown)
{
let y_window = e.clientY; let y_window = e.clientY;
let y_target_offset = e.currentTarget.getBoundingClientRect().top; let y_target_offset = e.currentTarget.getBoundingClientRect().top;
let id = e.currentTarget.id; let id = e.currentTarget.id;
let row = Math.floor((y_window - y_target_offset) / 10) + 1 let row = Math.floor((y_window - y_target_offset) / 10) + 1
if(grabbed != null) if (grabbed != null) {
{ if (grabbedUp) {
if(grabbedUp) if (row < grabbed.end_point - 1) {
{
if (row < grabbed.end_point)
{
grabbed.start_point = row; grabbed.start_point = row;
} }
} } else {
else if (row > grabbed.start_point) {
{
if(row > grabbed.start_point)
{
grabbed.end_point = row + 1; grabbed.end_point = row + 1;
} }
} }
} } else if (selectedElement != null) {
else if(selectedElement != null) if (selectedListID !== id) {
{
if (selectedListID !== id)
{
let index = -1; let index = -1;
let currentList = entries[selectedListID]; let currentList = entries[selectedListID];
let temp = []; let temp = [];
for(let i = 0; i < currentList.length; i++) for (let i = 0; i < currentList.length; i++) {
{ if (selectedElement !== currentList[i]) {
if(selectedElement !== currentList[i])
{
temp.push(currentList[i]); temp.push(currentList[i]);
} }
} }
@@ -67,20 +54,17 @@ export default function CalenderView(p) {
setT(!t); setT(!t);
} }
function mouse_up(e) function mouse_up(e) {
{
mouseDown = false; mouseDown = false;
let y_window = e.clientY; let y_window = e.clientY;
let y_target_offset = e.currentTarget.getBoundingClientRect().top; let y_target_offset = e.currentTarget.getBoundingClientRect().top;
let row = Math.floor((y_window - y_target_offset) / 10) + 1 let row = Math.floor((y_window - y_target_offset) / 10) + 1
let current_list = entries[e.currentTarget.id]; let current_list = entries[e.currentTarget.id];
if (grabbed != null) if (grabbed != null) {
{
grabbed = null; grabbed = null;
} }
if(selectedElement != null) if (selectedElement != null) {
{
selectedElement = null; selectedElement = null;
} }
@@ -95,37 +79,27 @@ export default function CalenderView(p) {
let row = Math.floor((y_window - y_target_offset) / 10) + 1; let row = Math.floor((y_window - y_target_offset) / 10) + 1;
let current_list = entries[e.currentTarget.id]; let current_list = entries[e.currentTarget.id];
if(e.target.id === "grab") if (e.target.id === "grab") {
{
let entry = e.target.parentElement; let entry = e.target.parentElement;
let rowStart= parseInt(window.getComputedStyle(entry).gridRowStart); let rowStart = parseInt(window.getComputedStyle(entry).gridRowStart);
for(let i = 0; i < current_list.length; i++) for (let i = 0; i < current_list.length; i++) {
{
let current = current_list[i]; let current = current_list[i];
if(current.start_point === row || current.end_point === row+1) if (current.start_point === row || current.end_point === row + 1) {
{
grabbed = current; grabbed = current;
break; break;
} }
} }
if(row === rowStart) if (row === rowStart) {
{
grabbedUp = true; grabbedUp = true;
} } else {
else
{
grabbedUp = false; grabbedUp = false;
} }
} } else if (e.target.id === "entry") {
else if(e.target.id === "entry") for (let i = 0; i < current_list.length; i++) {
{
for(let i = 0; i < current_list.length; i++)
{
let current = current_list[i]; let current = current_list[i];
if(current.start_point <= row && current.end_point >= row) if (current.start_point <= row && current.end_point >= row) {
{
selectedElement = current; selectedElement = current;
selectedListID = e.currentTarget.id; selectedListID = e.currentTarget.id;
break; break;
@@ -135,10 +109,8 @@ export default function CalenderView(p) {
selectedOffsetTop = row - parseInt(window.getComputedStyle(e.target).gridRowStart); selectedOffsetTop = row - parseInt(window.getComputedStyle(e.target).gridRowStart);
selectedOffsetBottom = parseInt(window.getComputedStyle(e.target).gridRowEnd) - row; selectedOffsetBottom = parseInt(window.getComputedStyle(e.target).gridRowEnd) - row;
} } else {
else if (row < 96) {
{
if (row <= 98 && row > 3) {
let free = true; let free = true;
for (let i = 0; i < current_list.length; i++) { for (let i = 0; i < current_list.length; i++) {
let current = current_list[i]; let current = current_list[i];
@@ -162,7 +134,7 @@ export default function CalenderView(p) {
} }
function internal_to_time(internal) { function internal_to_time(internal) {
internal -= 4 internal -= 1
internal /= 4 internal /= 4
let integer = Math.floor(internal) let integer = Math.floor(internal)
let decimal = internal.toFixed(2); let decimal = internal.toFixed(2);
@@ -172,88 +144,108 @@ export default function CalenderView(p) {
} }
return ( return (
<div className={"calender-container"} id={t}> <div>
<div className={"calender-view"}> <div className={"wochen-tag-container"}>
<div className={"spalte"} onMouseDown={mouse_down} onMouseUp={mouse_up} onMouseMove={mouse_move} id={"mo"}> <div className={"wochen-tag font-small"}>Montag</div>
<div className={"wochen-tag font-small"}>Montag</div> <div className={"wochen-tag font-small"}>Dienstag</div>
{entries["mo"].map(d => (<div className={"entry"} style={{ <div className={"wochen-tag font-small"}>Mittwoch</div>
width: "100%", <div className={"wochen-tag font-small"}>Donnerstag</div>
gridRowStart: d.start_point, <div className={"wochen-tag font-small"}>Freitag</div>
gridRowEnd: d.end_point <div className={"wochen-tag font-small"}>Samstag</div>
}} id={"entry"}> </div>
<div className={"resize-grab"} id={"grab"}></div> <div className={"calender-container"} id={t}>
<p>{internal_to_time(d.start_point)}</p> <div className={"calender-view"}>
<p>{internal_to_time(d.end_point)}</p> <div className={"spalte"} onMouseDown={mouse_down} onMouseUp={mouse_up} onMouseMove={mouse_move}
<div className={"resize-grab"} id={"grab"}></div> id={"mo"}>
</div>))}
</div>
<div className={"spalte"} onMouseDown={mouse_down} onMouseUp={mouse_up} onMouseMove={mouse_move} id={"tu"}>
<div className={"wochen-tag font-small"}>Dienstag</div>
{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>
<p>{internal_to_time(d.start_point)}</p>
<p>{internal_to_time(d.end_point)}</p>
<div className={"resize-grab"} id={"grab"}></div>
</div>))}
</div>
<div className={"spalte"} onMouseDown={mouse_down} onMouseUp={mouse_up} onMouseMove={mouse_move} id={"we"}>
<div className={"wochen-tag font-small"}>Mittwoch</div>
{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> {entries["mo"].map(d => (<div className={"entry"} style={{
<p>{internal_to_time(d.start_point)}</p> width: "100%",
<p>{internal_to_time(d.end_point)}</p> gridRowStart: d.start_point,
<div className={"resize-grab"} id={"grab"}></div> gridRowEnd: d.end_point
</div>))} }} id={"entry"}>
</div> <div className={"resize-grab"} id={"grab"}></div>
<div className={"spalte"} onMouseDown={mouse_down} onMouseUp={mouse_up} onMouseMove={mouse_move} id={"th"}> <p>{internal_to_time(d.start_point)}</p>
<div className={"wochen-tag font-small"}>Donnerstag</div> <p>{internal_to_time(d.end_point)}</p>
{entries["th"].map(d => (<div className={"entry"} style={{ <div className={"resize-grab"} id={"grab"}></div>
width: "100%", </div>))}
gridRowStart: d.start_point, </div>
gridRowEnd: d.end_point <div className={"spalte"} onMouseDown={mouse_down} onMouseUp={mouse_up} onMouseMove={mouse_move}
}} id={"entry"}> id={"tu"}>
<div className={"resize-grab"} id={"grab"}></div> {entries["tu"].map(d => (<div className={"entry"} style={{
<p>{internal_to_time(d.start_point)}</p> width: "100%",
<p>{internal_to_time(d.end_point)}</p> gridRowStart: d.start_point,
<div className={"resize-grab"} id={"grab"}></div> gridRowEnd: d.end_point
</div>))} }} id={"entry"}>
</div>
<div className={"spalte"} onMouseDown={mouse_down} onMouseUp={mouse_up} onMouseMove={mouse_move} id={"fr"}> <div className={"resize-grab"} id={"grab"}></div>
<div className={"wochen-tag font-small"}>Freitag</div> <p>{internal_to_time(d.start_point)}</p>
{entries["fr"].map(d => (<div className={"entry"} style={{ <p>{internal_to_time(d.end_point)}</p>
width: "100%", <div className={"resize-grab"} id={"grab"}></div>
gridRowStart: d.start_point, </div>))}
gridRowEnd: d.end_point </div>
}} id={"entry"}> <div className={"spalte"} onMouseDown={mouse_down} onMouseUp={mouse_up} onMouseMove={mouse_move}
<div className={"resize-grab"} id={"grab"}></div> id={"we"}>
<p>{internal_to_time(d.start_point)}</p>
<p>{internal_to_time(d.end_point)}</p>
<div className={"resize-grab"} id={"grab"}></div> {entries["we"].map(d => (<div className={"entry"} style={{
</div>))} width: "100%",
</div> gridRowStart: d.start_point,
<div className={"spalte"} onMouseDown={mouse_down} onMouseUp={mouse_up} onMouseMove={mouse_move} id={"sa"}> gridRowEnd: d.end_point
<div className={"wochen-tag font-small"}>Samstag</div> }} id={"entry"}>
{entries["sa"].map(d => (<div className={"entry"} style={{
width: "100%", <div className={"resize-grab"} id={"grab"}></div>
gridRowStart: d.start_point, <p>{internal_to_time(d.start_point)}</p>
gridRowEnd: d.end_point <p>{internal_to_time(d.end_point)}</p>
}} id={"entry"}> <div className={"resize-grab"} id={"grab"}></div>
<div className={"resize-grab"} id={"grab"}></div> </div>))}
<p>{internal_to_time(d.start_point)}</p> </div>
<p>{internal_to_time(d.end_point)}</p> <div className={"spalte"} onMouseDown={mouse_down} onMouseUp={mouse_up} onMouseMove={mouse_move}
<div className={"resize-grab"} id={"grab"}></div> id={"th"}>
</div>))}
{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>
<p>{internal_to_time(d.start_point)}</p>
<p>{internal_to_time(d.end_point)}</p>
<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>
<p>{internal_to_time(d.start_point)}</p>
<p>{internal_to_time(d.end_point)}</p>
<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>
<p>{internal_to_time(d.start_point)}</p>
<p>{internal_to_time(d.end_point)}</p>
<div className={"resize-grab"} id={"grab"}></div>
</div>))}
</div>
</div> </div>
</div> </div>
</div> </div>
anwendung/src/pages/index.js
+1
View File
@@ -17,6 +17,7 @@ export default function Home(p) {
return ( return (
<> <>
<div style={{height: 100}}></div>
<CalenderView/> <CalenderView/>
</> </>
anwendung/src/styles/globals.css
+20 -7
View File
@@ -188,9 +188,21 @@ Calender View
.calender-container .calender-container
{ {
margin-top: 100px;
max-height: 300px; max-height: 300px;
overflow-y: scroll; overflow-y: scroll;
border-bottom: 2px solid #5d606e;
}
.wochen-tag-container
{
display: flex;
flex-direction: row;
justify-content: space-between;
margin-right: 1.5%;
height: 25px;
background-color: #5d606e;
border: 2px solid #5d606e;
border-radius: 5px 5px 0 0;
} }
.calender-view .calender-view
@@ -207,10 +219,9 @@ Calender View
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: stretch; align-items: stretch;
border-radius: 5px;
justify-content: stretch; justify-content: stretch;
gap: 2px; gap: 2px;
padding: 2px; padding: 0 2px 0 2px;
user-select: none; user-select: none;
} }
@@ -221,16 +232,16 @@ Calender View
background-color: white; background-color: white;
display: grid; display: grid;
grid-template-columns: 100%; grid-template-columns: 100%;
grid-template-rows: repeat(100, 10px); grid-template-rows: repeat(96, 10px);
} }
.spalte .wochen-tag .wochen-tag-container .wochen-tag
{ {
text-align: center; text-align: center;
background-color: #f80000; background-color: #f80000;
width: 100%; width: 16%;
color: white; color: white;
border-radius: 5px 5px 0 0; border-radius: 5px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -262,4 +273,6 @@ Calender View
{ {
color: white; color: white;
font-size: 5px; font-size: 5px;
cursor: default;
pointer-events: none;
} }