Skip to content
Snippets Groups Projects
Commit ffa71250 authored by Andris Borbás's avatar Andris Borbás
Browse files

Implement event adding

parent 781e9b3e
Branches
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
css/dark.css
+ 37
− 42
View file @ ffa71250
main {
position: relative;
}
body {
background: none;
}
body::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("../img/rough_bg.jpg");
@media (prefers-color-scheme: dark) {
:root {
color-scheme: dark light;
}
body.dark {
......@@ -41,3 +28,11 @@ body.dark::before {
.dark .day {
border-left-color: #111;
}
.dialogBox {
background-color: #222;
}
.dialogBox::before {
background-color: #333;
}
}
css/overrides.css 0 → 100644
+ 52
− 0
View file @ ffa71250
:root {
color-scheme: light dark;
}
main {
position: relative;
max-height: 90vh;
overflow-y: scroll;
}
body {
background: none;
}
body::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("../img/rough_bg.jpg");
}
.day {
height: 100%;
}
.dayEvents {
max-width: 95%;
grid-template-rows: repeat(24, 60px);
}
.dayName {
position: sticky;
top: 0;
}
.dayTimes {
grid-template-rows: repeat(24, 60px);
}
.event {
cursor: pointer;
}
.eventTitle {
text-overflow: ellipsis;
-webkit-box-orient: vertical;
display: -webkit-box;
overflow: hidden;
}
css/portal.css 0 → 100644
+ 66
− 0
View file @ ffa71250
#portal {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
#portal > div {
background-color: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(5px);
width: 100%;
height: 100%;
padding: 0.5rem;
padding-top: 2rem;
display: flex;
align-items: center;
}
.dialogBox {
position: relative;
max-width: 400px;
width: 100%;
margin-right: auto;
margin-left: auto;
padding: 1rem;
padding-top: 44px;
background-color: #ddd;
border-radius: 1rem;
}
.dialogBox::before {
position: absolute;
top: 0;
left: 0;
border-radius: 1rem 1rem 0 0;
content: "";
height: 38px;
width: 100%;
background-color: #aaa;
}
.dialogBox > button {
position: absolute;
top: 8px;
right: 1rem;
font-size: 1.25rem;
line-height: 1;
}
.dialogBox h3 {
text-align: center;
font-size: 1.25rem;
margin-bottom: 1rem;
}
.dialogBox > form {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.5rem;
align-items: center;
}
.dialogBox input {
padding: 0.25rem;
}
index.html
+ 77
− 10
View file @ ffa71250
......@@ -4,9 +4,12 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Naptár</title>
<link rel="stylesheet" href="css/layout.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/responsive.css" />
<link rel="stylesheet" href="css/portal.css" />
<link rel="stylesheet" href="css/overrides.css" />
<link rel="stylesheet" href="css/dark.css" />
</head>
<body class="dark">
......@@ -14,6 +17,13 @@
<div class="time">
<div class="dayName"></div>
<div class="dayTimes">
<div class="dayTime">00:00</div>
<div class="dayTime">01:00</div>
<div class="dayTime">02:00</div>
<div class="dayTime">03:00</div>
<div class="dayTime">04:00</div>
<div class="dayTime">05:00</div>
<div class="dayTime">06:00</div>
<div class="dayTime">07:00</div>
<div class="dayTime">08:00</div>
<div class="dayTime">09:00</div>
......@@ -28,25 +38,34 @@
<div class="dayTime">18:00</div>
<div class="dayTime">19:00</div>
<div class="dayTime">20:00</div>
<div class="dayTime">21:00</div>
<div class="dayTime">22:00</div>
<div class="dayTime">23:00</div>
</div>
</div>
<div class="day">
<div class="dayName">Hétfő</div>
<div class="dayEvents">
<div class="event length--4" style="grid-row-start: 4">
<div class="dayEvents" id="hétfő">
<div class="event length--4" style="grid-row-start: 4; display: none">
<div class="eventTitle">Kommunikációs hálózatok 2</div>
<div class="eventDetails">
<div class="eventTime">10:00-14:00</div>
</div>
</div>
<div class="eventSubdivide length--2" style="grid-row-start: 8">
<div
class="eventSubdivide length--2"
style="grid-row-start: 8; display: none"
>
<div class="event length--2" style="grid-row-start: 1">
<div class="eventTitle">Algoritmus elmélet</div>
<div class="eventDetails">
<div class="eventTime">12:00-14:00</div>
</div>
</div>
<div class="event length--2" style="grid-row-start: 1">
<div
class="event length--2"
style="grid-row-start: 1; display: none"
>
<div class="eventTitle">Kotlin alapú szoftverfejlesztés</div>
<div class="eventDetails">
<div class="eventTime">12:00-14:00</div>
......@@ -57,29 +76,77 @@
</div>
<div class="day">
<div class="dayName">Kedd</div>
<div class="dayEvents"></div>
<div class="dayEvents" id="kedd"></div>
</div>
<div class="day">
<div class="dayName">Szerda</div>
<div class="dayEvents"></div>
<div class="dayEvents" id="szerda"></div>
</div>
<div class="day">
<div class="dayName">Csütörtök</div>
<div class="dayEvents"></div>
<div class="dayEvents" id="csütörtök"></div>
</div>
<div class="day">
<div class="dayName">Péntek</div>
<div class="dayEvents"></div>
<div class="dayEvents" id="péntek"></div>
</div>
<div class="day">
<div class="dayName">Szombat</div>
<div class="dayEvents"></div>
<div class="dayEvents" id="szombat"></div>
</div>
<div class="day">
<div class="dayName">Vasárnap</div>
<div class="dayEvents"></div>
<div class="dayEvents" id="vasárnap"></div>
</div>
</main>
<div id="portal" style="display: none">
<div>
<div class="dialogBox" id="addEventDialogBox" style="display: none">
<button id="addEventDialogBoxCloseButton" onclick="closePortal()">
&nbsp;X&nbsp;
</button>
<h3>Esemény hozzáadása</h3>
<form id="addEventForm">
<label for="addEventName">Esemény:</label>
<input
type="text"
name="addEventName"
id="addEventName"
placeholder="Esemény neve"
/>
<label for="addEventDay">Napja:</label>
<input
type="day"
name="addEventDay"
id="addEventDay"
placeholder="nap"
/>
<label for="addEventStartTime">Kezdete:</label>
<input
type="time"
name="addEventStartTime"
id="addEventStartTime"
/>
<label for="addEventLength">Hossza:</label>
<input
type="number"
name="addEventLength"
id="addEventLength"
min="1"
max="12"
placeholder="óra"
/>
<input type="submit" value="Hozzáad" />
</form>
</div>
<div class="dialogBox" id="editEventDialogBox" style="display: none">
<button id="editEventDialogBoxCloseButton" onclick="closePortal()">
&nbsp;X&nbsp;
</button>
<h3>Esemény szerkesztése</h3>
</div>
</div>
</div>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
js/index.js
+ 98
− 0
View file @ ffa71250
const events = JSON.parse(window.localStorage.getItem("events")) ?? [];
console.log(events);
events.forEach((event) => addEventToDom(event));
const portal = document.getElementById("portal");
const addEventDialogBox = document.getElementById("addEventDialogBox");
const editEventDialogBox = document.getElementById("editEventDialogBox");
const addEventForm = document.getElementById("addEventForm");
function openPortal(type, id) {
portal.style.display = "block";
if (type == "add") {
addEventDialogBox.style.display = "block";
document.getElementById("addEventDay").value =
id.charAt(0).toUpperCase() + id.slice(1);
}
if (type == "edit") {
editEventDialogBox.style.display = "block";
}
}
function closePortal() {
portal.style.display = "none";
addEventDialogBox.style.display = "none";
editEventDialogBox.style.display = "none";
}
function dayEventListener(e) {
console.log(e);
openPortal("add", e.target.id);
}
function addEventToDom(event) {
const container = document.createElement("div");
container.classList.add("event");
container.style.gridRowEnd = `span ${event.length}`;
container.style.gridRowStart = `${event.startTime - 6}`;
const title = document.createElement("h4");
title.innerHTML = event.name;
title.classList.add("eventTitle");
title.style.webkitLineClamp = `${event.length == 1 ? 1 : 4}`;
container.appendChild(title);
const time = document.createElement("p");
time.innerHTML = `${event.startTime}:00-${event.startTime + event.length}:00`;
time.classList.add("eventTime");
container.appendChild(time);
document.getElementById(event.day).appendChild(container);
container.addEventListener("click", (e) => {
e.stopPropagation();
});
}
function submitAddEventForm(e) {
e.preventDefault();
console.log(e);
console.log(addEventForm.elements.addEventStartTime.value);
const event = {
name: addEventForm.elements.addEventName.value,
day: addEventForm.elements.addEventDay.value.toLowerCase(),
startTime: parseInt(
addEventForm.elements.addEventStartTime.value.split(":")[0]
),
length: parseInt(addEventForm.elements.addEventLength.value),
};
events.push(event);
window.localStorage.setItem("events", JSON.stringify(events));
addEventToDom(event);
closePortal();
}
function addClickListeners() {
const days = document.getElementsByClassName("dayEvents");
console.log(days);
Array.from(days).forEach((day) => {
day.addEventListener("click", dayEventListener);
});
portal.addEventListener("click", () => {
closePortal();
});
addEventDialogBox.addEventListener("click", (e) => {
e.stopPropagation();
});
editEventDialogBox.addEventListener("click", (e) => {
e.stopPropagation();
});
addEventForm.addEventListener("submit", submitAddEventForm);
}
addClickListeners();
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment

Hosted with :heart: by KSZK