RezHackXYZ/classroomstuff
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Higlight curent day of week, option to show/disble seconds, import timetable from csv, wrap/roleover of 0 to be after 9. wow did a lot!

Browse source
This commit is contained in:
RezHackXYZ 2025-05-09 19:54:00 +05:30
parent 7b4996a689
commit c14481f3d9
5 changed files with 399 additions and 196 deletions
Download patch file Download diff file Expand all files Collapse all files

3
.vscode/settings.json vendored
View file

@ -2,5 +2,6 @@
"editor.defaultFormatter": "esbenp.prettier-vscode", "editor.defaultFormatter": "esbenp.prettier-vscode",
"[svelte]": { "[svelte]": {
"editor.defaultFormatter": "svelte.svelte-vscode" "editor.defaultFormatter": "svelte.svelte-vscode"
} },
"cSpell.words": ["kokoro"]
} }

5
jsconfig.json
View file

@ -23,6 +23,7 @@
* Disable this if you'd like to use dynamic types. * Disable this if you'd like to use dynamic types.
*/ */
"checkJs": true, "checkJs": true,
"types": ["svelte", "estree"] "types": ["svelte", "estree"],
}, "exclude": ["node_modules", "package.json", "package-lock.json"]
}
} }

391
src/IdleScreen/EditTimetable.svelte
View file

@ -1,151 +1,207 @@
<script module> <script>
import { newTable } from "./timeTable.svelte"; import { newTable } from "./timeTable.svelte";
let table = JSON.parse(localStorage.getItem("TimeTable")); let table = JSON.parse(localStorage.getItem("TimeTable"));
let TabOpen = false;
let csv = "";
</script> </script>
<div id="root"> <div class="root">
<div id="root"> <div id="wrap">
<div id="wrap"> <div id="left">
<div id="left"> <div class="Header Row">
<div class="Header Row"> <span class="DayOfWeek" style="Opacity: 0;"></span>
<span class="DayOfWeek" style="Opacity: 0;"></span> {#each table.Times as time}
{#each table.Times as time} <input
<input type="text"
type="text" onchange={() => {
onchange={() => {
newTable(table);
}}
bind:value={time}
/>
{/each}
</div>
<div class="Row">
<span class="DayOfWeek">Monday</span>
{#each table.Monday as time}
<input
type="text"
onchange={() => {
newTable(table);
}}
bind:value={time}
/>
{/each}
</div>
<div class="Row">
<span class="DayOfWeek">Tuesday</span>
{#each table.Tuesday as time}
<input
type="text"
onchange={() => {
newTable(table);
}}
bind:value={time}
/>
{/each}
</div>
<div class="Row">
<span class="DayOfWeek">Wednesday</span>
{#each table.Wednesday as time}
<input
type="text"
onchange={() => {
newTable(table);
}}
bind:value={time}
/>
{/each}
</div>
<div class="Row">
<span class="DayOfWeek">Thursday</span>
{#each table.Thursday as time}
<input
type="text"
onchange={() => {
newTable(table);
}}
bind:value={time}
/>
{/each}
</div>
<div class="Row">
<span class="DayOfWeek">Friday</span>
{#each table.Friday as time}
<input
type="text"
onchange={() => {
newTable(table);
}}
bind:value={time}
/>
{/each}
</div>
</div>
<div id="right">
<button
onclick={() => {
table.Times.push("");
table.Monday.push("");
table.Tuesday.push("");
table.Wednesday.push("");
table.Thursday.push("");
table.Friday.push("");
newTable(table); newTable(table);
table = JSON.parse( }}
localStorage.getItem("TimeTable"), bind:value={time}
); />
{/each}
}}
><svg
xmlns="http://www.w3.org/2000/svg"
height="24px"
viewBox="0 -960 960 960"
width="24px"
fill="#FFFFFF"
><path
d="M440-440H200v-80h240v-240h80v240h240v80H520v240h-80v-240Z"
/></svg
> <br />Add<br />new<br />Period
</button>
<button
onclick={() => {
if (
confirm(
"This will remove the last period, it is not reversable! are you sure?",
)
) {
table.Times.pop();
table.Monday.pop();
table.Tuesday.pop();
table.Wednesday.pop();
table.Thursday.pop();
table.Friday.pop();
newTable(table);
table = JSON.parse(
localStorage.getItem("TimeTable"),
);
}
}}
><svg
xmlns="http://www.w3.org/2000/svg"
height="24px"
viewBox="0 -960 960 960"
width="24px"
fill="#FFFFFF"
><path
d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520ZM360-280h80v-360h-80v360Zm160 0h80v-360h-80v360ZM280-720v520-520Z"
/></svg
><br />
Delete<br />last<br />Period
</button>
</div> </div>
<div class="Row">
<span class="DayOfWeek">Monday</span>
{#each table.Monday as time}
<input
type="text"
onchange={() => {
newTable(table);
}}
bind:value={time}
/>
{/each}
</div>
<div class="Row">
<span class="DayOfWeek">Tuesday</span>
{#each table.Tuesday as time}
<input
type="text"
onchange={() => {
newTable(table);
}}
bind:value={time}
/>
{/each}
</div>
<div class="Row">
<span class="DayOfWeek">Wednesday</span>
{#each table.Wednesday as time}
<input
type="text"
onchange={() => {
newTable(table);
}}
bind:value={time}
/>
{/each}
</div>
<div class="Row">
<span class="DayOfWeek">Thursday</span>
{#each table.Thursday as time}
<input
type="text"
onchange={() => {
newTable(table);
}}
bind:value={time}
/>
{/each}
</div>
<div class="Row">
<span class="DayOfWeek">Friday</span>
{#each table.Friday as time}
<input
type="text"
onchange={() => {
newTable(table);
}}
bind:value={time}
/>
{/each}
</div>
</div>
<div id="right">
<button
onclick={() => {
table.Times.push("");
table.Monday.push("");
table.Tuesday.push("");
table.Wednesday.push("");
table.Thursday.push("");
table.Friday.push("");
newTable(table);
table = JSON.parse(localStorage.getItem("TimeTable"));
}}
><svg
xmlns="http://www.w3.org/2000/svg"
height="24px"
viewBox="0 -960 960 960"
width="24px"
fill="#FFFFFF"
><path
d="M440-440H200v-80h240v-240h80v240h240v80H520v240h-80v-240Z"
/></svg
>Add new Period
</button>
<button
onclick={() => {
if (
confirm(
"This will remove the last period, it is not reversible! are you sure?"
)
) {
table.Times.pop();
table.Monday.pop();
table.Tuesday.pop();
table.Wednesday.pop();
table.Thursday.pop();
table.Friday.pop();
newTable(table);
table = JSON.parse(localStorage.getItem("TimeTable"));
}
}}
><svg
xmlns="http://www.w3.org/2000/svg"
height="24px"
viewBox="0 -960 960 960"
width="24px"
fill="#FFFFFF"
><path
d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520ZM360-280h80v-360h-80v360Zm160 0h80v-360h-80v360ZM280-720v520-520Z"
/></svg
>
Delete last Period
</button>
<button
onclick={() => {
TabOpen = true;
}}
><svg
xmlns="http://www.w3.org/2000/svg"
height="24px"
viewBox="0 -960 960 960"
width="24px"
fill="#FFFFFF"
><path
d="M230-360h120v-60H250v-120h100v-60H230q-17 0-28.5 11.5T190-560v160q0 17 11.5 28.5T230-360Zm156 0h120q17 0 28.5-11.5T546-400v-60q0-17-11.5-31.5T506-506h-60v-34h100v-60H426q-17 0-28.5 11.5T386-560v60q0 17 11.5 30.5T426-456h60v36H386v60Zm264 0h60l70-240h-60l-40 138-40-138h-60l70 240ZM160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm0-80h640v-480H160v480Zm0 0v-480 480Z"
/></svg
>
Import From CSV
</button>
</div> </div>
</div> </div>
</div> </div>
{#if TabOpen !== false}
<div id="UpperLayer">
<div id="wrapClose">
<div class="root">
<h1>Paste CSV here:</h1>
<p></p>
<textarea
bind:value={csv}
id="box"
placeholder="Duration 1, Duration 2, Duration 3, Duration 4
Subject 01, Subject 02, Subject 03, Subject 04
Subject 08, Subject 09, Subject 10, Subject 12
Subject 13, Subject 13, Subject 14, Subject 15"
></textarea>
</div>
<div id="options">
<button
class="close"
id="cancel"
onclick={() => (TabOpen = false)}
aria-label="close">CANCEL</button
>
<button
class="close"
id="save"
onclick={() => {
TabOpen = false;
let lines = csv.split("\n");
table.Times = lines[0].split(",");
table.Monday = lines[1].split(",");
table.Tuesday = lines[2].split(",");
table.Wednesday = lines[3].split(",");
table.Thursday = lines[4].split(",");
table.Friday = lines[5].split(",");
newTable(table);
table = JSON.parse(localStorage.getItem("TimeTable"));
}}
aria-label="close">SAVE</button
>
</div>
</div>
</div>
{/if}
<style> <style>
#root { .root {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 5px; gap: 5px;
@ -220,10 +276,73 @@
border-radius: 10px; border-radius: 10px;
cursor: pointer; cursor: pointer;
transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out;
display: flex;
flex-direction: column;
align-items: center;
max-width: 100px;
} }
#right > button:hover { #right > button:hover {
transform: scale(1.2); transform: scale(1.2);
background-color: rgb(50, 50, 50); background-color: rgb(50, 50, 50);
} }
#UpperLayer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
backdrop-filter: blur(10px);
background-color: rgba(0, 0, 0, 0.5);
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
}
#wrapClose {
display: flex;
flex-direction: column;
}
.close {
background-color: #2b2b2b;
color: #888;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
align-self: center;
}
#box {
width: 700px;
height: 300px;
background-color: #121212;
color: white;
border-radius: 10px;
resize: vertical;
font-size: 20px;
}
h1,
p {
margin: 0;
}
#options {
display: flex;
gap: 10px;
justify-content: center;
}
#cancel {
background-color: #580000;
color: #ffffff;
}
#save {
background-color: #004611;
color: #ffffff;
}
</style> </style>

19
src/IdleScreen/main.svelte
View file

@ -1,4 +1,4 @@
<script> <script module>
import Time from "./time.svelte"; import Time from "./time.svelte";
import TimeTable from "./timeTable.svelte"; import TimeTable from "./timeTable.svelte";
import EditTimetableDiv from "./EditTimetable.svelte"; import EditTimetableDiv from "./EditTimetable.svelte";
@ -8,7 +8,9 @@
TabOpen.v = true; TabOpen.v = true;
} }
let TabOpen = { v: false }; let TabOpen = $state({ v: false });
export let ShowSeconds = $state({ v: true });
</script> </script>
<div id="wrap"> <div id="wrap">
@ -32,6 +34,15 @@
<h1>Idle Screen</h1> <h1>Idle Screen</h1>
<div> <div>
<button <button
aria-label="Back to main menu"
onclick={() => {
ShowSeconds.v = !ShowSeconds.v;
localStorage.setItem("ShowSeconds", String(ShowSeconds.v));
}}
><span class="front"
>{#if ShowSeconds.v}Disable Seconds{:else}Enable Seconds{/if}</span
></button
><button
aria-label="Back to main menu" aria-label="Back to main menu"
onclick={() => EditTimetable()} onclick={() => EditTimetable()}
><span class="front" ><span class="front"
@ -56,7 +67,7 @@
</div> </div>
{#if TabOpen.v !== false} {#if TabOpen.v !== false}
<div id="UperLayer"> <div id="UpperLayer">
<div id="wrapClose"> <div id="wrapClose">
<EditTimetableDiv /> <EditTimetableDiv />
<button <button
@ -138,7 +149,7 @@
color: #444; color: #444;
} }
#UperLayer { #UpperLayer {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;

177
src/IdleScreen/time.svelte
View file

@ -1,4 +1,5 @@
<script> <script>
import { ShowSeconds } from "./main.svelte";
import { onMount } from "svelte"; import { onMount } from "svelte";
let hour1; let hour1;
@ -7,36 +8,115 @@
let min2; let min2;
let sec1; let sec1;
let sec2; let sec2;
let AmOrPm;
let AMorPM = "AM";
function updateTime() { function updateTime() {
const now = new Date(); const now = new Date();
let hours = now.getHours().toString().padStart(2, "0"); let hours = now.getHours().toString().padStart(2, "0");
if (now.getHours() > 12) { if (now.getHours() >= 12) {
hours = (now.getHours() - 12).toString().padStart(2, "0"); hours = (now.getHours() - 12).toString().padStart(2, "0");
AMorPM = "PM"; AmOrPm = "PM";
} else { } else {
AMorPM = "AM"; AmOrPm = "AM";
} }
const minutes = now.getMinutes().toString().padStart(2, "0"); const minutes = now.getMinutes().toString().padStart(2, "0");
const seconds = now.getSeconds().toString().padStart(2, "0"); const seconds = now.getSeconds().toString().padStart(2, "0");
hour1.scrollTop = parseInt(hours[0]) * 200; // Hour1
hour2.scrollTop = parseInt(hours[1]) * 200; if (parseInt(hours[0]) == 0) {
min1.scrollTop = parseInt(minutes[0]) * 200; hour1.scrollTop = 2 * 200;
min2.scrollTop = parseInt(minutes[1]) * 200; } else if (parseInt(hours[0]) == 1) {
sec1.scrollTop = parseInt(seconds[0]) * 75; hour1.scroll({
sec2.scrollTop = parseInt(seconds[1]) * 75; top: 0,
behavior: "instant",
});
hour1.scrollTop = parseInt(hours[0]) * 200;
} else {
hour1.scrollTop = parseInt(hours[0]) * 200;
}
// Hour2
if (parseInt(hours[1]) == 0) {
hour2.scrollTop = 10 * 200;
} else if (parseInt(hours[1]) == 1) {
hour2.scroll({
top: 0,
behavior: "instant",
});
hour2.scrollTop = parseInt(hours[1]) * 200;
} else {
hour2.scrollTop = parseInt(hours[1]) * 200;
}
// Minute1
if (parseInt(minutes[0]) == 0) {
min1.scrollTop = 6 * 200;
} else if (parseInt(minutes[0]) == 1) {
min1.scroll({
top: 0,
behavior: "instant",
});
min1.scrollTop = parseInt(minutes[0]) * 200;
} else {
min1.scrollTop = parseInt(minutes[0]) * 200;
}
// Minute2
if (parseInt(minutes[1]) == 0) {
min2.scrollTop = 10 * 200;
} else if (parseInt(minutes[1]) == 1) {
min2.scroll({
top: 0,
behavior: "instant",
});
min2.scrollTop = parseInt(minutes[1]) * 200;
} else {
min2.scrollTop = parseInt(minutes[1]) * 200;
}
// Seconds
if (ShowSeconds.v) {
// Second1
if (parseInt(seconds[0]) == 0) {
sec1.scrollTop = 6 * 75;
} else if (parseInt(seconds[0]) == 1) {
sec1.scroll({
top: 0,
behavior: "instant",
});
sec1.scrollTop = parseInt(seconds[0]) * 75;
} else {
sec1.scrollTop = parseInt(seconds[0]) * 75;
}
// Second2
if (parseInt(seconds[1]) == 0) {
sec2.scrollTop = 10 * 75;
} else if (parseInt(seconds[1]) == 1) {
sec2.scroll({
top: 0,
behavior: "instant",
});
sec2.scrollTop = parseInt(seconds[1]) * 75;
} else {
sec2.scrollTop = parseInt(seconds[1]) * 75;
}
}
} }
onMount(() => { onMount(() => {
updateTime(); updateTime();
setInterval(updateTime, 1000); setInterval(updateTime, 1000);
}); });
let TempLocalStorage = localStorage.getItem("ShowSeconds") || "";
if (TempLocalStorage == "false") {
ShowSeconds.v = false;
}
</script> </script>
<div id="root"> <div id="root">
@ -45,14 +125,7 @@
<div class="rowOfNumbers" bind:this={hour1}> <div class="rowOfNumbers" bind:this={hour1}>
<h1>0</h1> <h1>0</h1>
<h1>1</h1> <h1>1</h1>
<h1>2</h1> <h1>0</h1>
<h1>3</h1>
<h1>4</h1>
<h1>5</h1>
<h1>6</h1>
<h1>7</h1>
<h1>8</h1>
<h1>9</h1>
</div> </div>
<div class="rowOfNumbers" bind:this={hour2}> <div class="rowOfNumbers" bind:this={hour2}>
<h1>0</h1> <h1>0</h1>
@ -65,8 +138,9 @@
<h1>7</h1> <h1>7</h1>
<h1>8</h1> <h1>8</h1>
<h1>9</h1> <h1>9</h1>
<h1>0</h1>
</div> </div>
<h1 id="colen">:</h1> <h1 id="HourMinDivider">:</h1>
<div class="rowOfNumbers" bind:this={min1}> <div class="rowOfNumbers" bind:this={min1}>
<h1>0</h1> <h1>0</h1>
<h1>1</h1> <h1>1</h1>
@ -74,10 +148,7 @@
<h1>3</h1> <h1>3</h1>
<h1>4</h1> <h1>4</h1>
<h1>5</h1> <h1>5</h1>
<h1>6</h1> <h1>0</h1>
<h1>7</h1>
<h1>8</h1>
<h1>9</h1>
</div> </div>
<div class="rowOfNumbers" bind:this={min2}> <div class="rowOfNumbers" bind:this={min2}>
<h1>0</h1> <h1>0</h1>
@ -90,33 +161,33 @@
<h1>7</h1> <h1>7</h1>
<h1>8</h1> <h1>8</h1>
<h1>9</h1> <h1>9</h1>
</div>
<h1 id="thedot">.</h1>
<div class="rowOfNumbersSec" bind:this={sec1}>
<h1>0</h1> <h1>0</h1>
<h1>1</h1>
<h1>2</h1>
<h1>3</h1>
<h1>4</h1>
<h1>5</h1>
<h1>6</h1>
<h1>7</h1>
<h1>8</h1>
<h1>9</h1>
</div> </div>
<div class="rowOfNumbersSec" bind:this={sec2}> {#if ShowSeconds.v}
<h1>0</h1> <h1 id="MinSecDivider">.</h1>
<h1>1</h1> <div class="rowOfNumbersSec" bind:this={sec1}>
<h1>2</h1> <h1>0</h1>
<h1>3</h1> <h1>1</h1>
<h1>4</h1> <h1>2</h1>
<h1>5</h1> <h1>3</h1>
<h1>6</h1> <h1>4</h1>
<h1>7</h1> <h1>5</h1>
<h1>8</h1> <h1>0</h1>
<h1>9</h1> </div>
</div> <div class="rowOfNumbersSec" bind:this={sec2}>
<h1 id="amorpm">{AMorPM}</h1> <h1>0</h1>
<h1>1</h1>
<h1>2</h1>
<h1>3</h1>
<h1>4</h1>
<h1>5</h1>
<h1>6</h1>
<h1>7</h1>
<h1>8</h1>
<h1>9</h1>
<h1>0</h1>
</div>{/if}
<h1 id="AmOrPm">{AmOrPm}</h1>
</div> </div>
<div id="date"> <div id="date">
<h2> <h2>
@ -148,12 +219,12 @@
margin: -30px; margin: -30px;
} }
#colen { #HourMinDivider {
font-size: 200px; font-size: 200px;
margin: 0; margin: 0;
} }
#thedot { #MinSecDivider {
font-size: 75px; font-size: 75px;
margin: 0; margin: 0;
color: #585858; color: #585858;
@ -187,7 +258,7 @@
scroll-behavior: smooth; scroll-behavior: smooth;
} }
.rowOfNumbersSec h1 { .rowOfNumbersSec > h1 {
height: 75px; height: 75px;
display: flex; display: flex;
align-items: center; align-items: center;
@ -200,7 +271,7 @@
color: #585858; color: #585858;
} }
#amorpm { #AmOrPm {
font-size: 75px; font-size: 75px;
margin: 0; margin: 0;
margin-left: 30px; margin-left: 30px;