-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
130 lines (108 loc) · 4.06 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<html>
<head>
<title>BTA Vaskeliste</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/light.css">
<style>
th,
td {
border: 1px solid black;
}
th{
min-width: 75px;
}
td {
padding: 0;
margin: 0;
}
table {
border-collapse: collapse;
}
thead {
background-color: rgb(198, 253, 205);
}
thead th {
padding: 10px;
}
</style>
</head>
<body style="
max-width: 1200px;
display: flex;
flex-direction: column;
align-items: center;
">
<form style="margin: 10px" id="yearForm">
<label for="year">Årstall</label>
<input type="text" id="year" value="2025">
<label for="startLetter">Start på bokstav</label>
<input type="text" id="startLetter" value="D">
<button type="submit" id="generate">Generér vaskeliste</button>
</form>
<h1 id="title">Vaskeliste 2022</h1>
<table>
<thead>
<tr id="head"></tr>
</thead>
<tbody id="body">
</tbody>
</table>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd.min.js" type="text/javascript"></script>
<script>
document.querySelector("#yearForm").addEventListener("submit", function (e) {
e.preventDefault();
const year = document.querySelector("#year").value;
const letter = document.querySelector("#startLetter").value || "F";
createWashingList(year, letter);
});
</script>
<script>
function createWashingList(year, letter) {
const head = document.querySelector("#head");
const body = document.querySelector("#body");
head.innerHTML = "";
body.innerHTML = "";
document.querySelector("#title").innerHTML = `Vaskeliste ${year}`;
const Holidays = window.Holidays.default;
let hd = new Holidays();
hd.init("NO");
const months = ["Januar", "Februar", "Mars", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Desember"];
const apartments = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L"];
let currentApartmentIndex = letter ? apartments.indexOf(letter.toUpperCase()) : 7;
for (let i = 0; i < months.length; i++) {
const th = document.createElement("th");
th.innerText = months[i];
head.appendChild(th);
}
for (let i = 1; i <= 31; i++) {
const row = document.createElement("tr");
row.id = `row-${i}`;
body.appendChild(row);
}
for (let i = 0; i < months.length; i++) {
const date = new Date(Number(year) || 2022, 1, 1);
date.setDate(1);
date.setMonth(i);
for (let j = 1; j <= 31; j++) {
const td = document.createElement("td");
if (date.getMonth() === i) {
if (date.getDay() === 0 || hd.isHoliday(date)) {
td.style = "background-color:red;"
td.innerText = `${date.getDate()}`;
}
else if (date.getDay() === 6) {
//Lørdag
td.style = "background-color:yellow"
td.innerText = `${date.getDate()}`;
} else {
td.innerText = `${date.getDate()} ${apartments[currentApartmentIndex++ % apartments.length]}`;
}
}
document.querySelector(`#row-${j}`).appendChild(td);
date.setDate(date.getDate() + 1)
}
}
}
createWashingList(document.querySelector("#year").value || new Date().getFullYear(), "F");
</script>
</body>
</html>