From ffa71250c5a09c45f6d16074e3f38256453f5b7b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andris=20Borb=C3=A1s?= <andris.borbas@gmail.com>
Date: Tue, 2 Mar 2021 05:24:56 +0100
Subject: [PATCH] Implement event adding
---
css/dark.css | 79 ++++++++++++++++++--------------------
css/overrides.css | 52 +++++++++++++++++++++++++
css/portal.css | 66 +++++++++++++++++++++++++++++++
index.html | 87 ++++++++++++++++++++++++++++++++++++-----
js/index.js | 98 +++++++++++++++++++++++++++++++++++++++++++++++
5 files changed, 330 insertions(+), 52 deletions(-)
create mode 100644 css/overrides.css
create mode 100644 css/portal.css
diff --git a/css/dark.css b/css/dark.css
index a6fc552..7ddb6ce 100644
--- a/css/dark.css
+++ b/css/dark.css
@@ -1,43 +1,38 @@
-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");
-}
-
-body.dark {
- color: #fff;
-}
-
-body.dark::before {
- filter: invert(1);
-}
-
-.dark main {
- background: #222227;
-}
-
-.dark .dayName {
- color: #ddd;
- background-color: #444;
-}
-
-.dark .dayTime {
- color: #ccc;
- background-color: #333;
-}
-
-.dark .day {
- border-left-color: #111;
+@media (prefers-color-scheme: dark) {
+ :root {
+ color-scheme: dark light;
+ }
+
+ body.dark {
+ color: #fff;
+ }
+
+ body.dark::before {
+ filter: invert(1);
+ }
+
+ .dark main {
+ background: #222227;
+ }
+
+ .dark .dayName {
+ color: #ddd;
+ background-color: #444;
+ }
+
+ .dark .dayTime {
+ color: #ccc;
+ background-color: #333;
+ }
+
+ .dark .day {
+ border-left-color: #111;
+ }
+
+ .dialogBox {
+ background-color: #222;
+ }
+ .dialogBox::before {
+ background-color: #333;
+ }
}
diff --git a/css/overrides.css b/css/overrides.css
new file mode 100644
index 0000000..68a8fa8
--- /dev/null
+++ b/css/overrides.css
@@ -0,0 +1,52 @@
+: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;
+}
diff --git a/css/portal.css b/css/portal.css
new file mode 100644
index 0000000..2740a92
--- /dev/null
+++ b/css/portal.css
@@ -0,0 +1,66 @@
+#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;
+}
diff --git a/index.html b/index.html
index dcfd26e..cde107b 100644
--- a/index.html
+++ b/index.html
@@ -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()">
+ X
+ </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()">
+ X
+ </button>
+ <h3>Esemény szerkesztése</h3>
+ </div>
+ </div>
+ </div>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
diff --git a/js/index.js b/js/index.js
index e69de29..6965dd5 100644
--- a/js/index.js
+++ b/js/index.js
@@ -0,0 +1,98 @@
+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();
--
GitLab