Compare commits

...

3 Commits

Author SHA1 Message Date
4d690e2a2a feat: use more descriptive width
Some checks failed
ci/woodpecker/push/woodpecker Pipeline failed
2024-07-20 08:18:38 +02:00
143dc31c0e feat: styling cage selector 2024-07-19 23:52:56 +02:00
f2138425b9 refactor: formatting 2024-07-19 23:46:37 +02:00
3 changed files with 79 additions and 70 deletions

View File

@ -19,19 +19,19 @@ const FAIL_CRITERIA = {
}; };
class Dimensions { class Dimensions {
constructor(length, width, height) { constructor(width, depth, height) {
this.length = length;
this.width = width; this.width = width;
this.depth = depth;
this.height = height; this.height = height;
} }
toString() { toString() {
return `${this.length}x${this.width}x${this.height}`; return `${this.width}x${this.depth}x${this.height}`;
} }
static fromDict(data) { static fromDict(data) {
const { length, width, height } = data; const { width, depth, height } = data;
return new Dimensions(length, width, height); return new Dimensions(width, depth, height);
} }
} }

View File

@ -152,6 +152,15 @@ label {
cursor: pointer; cursor: pointer;
} }
.card-photo label {
color: var(--text-one);
padding: 10px;
}
.measurement {
width: 100px;
}
.cage-selector { .cage-selector {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;

View File

@ -46,8 +46,9 @@
<div class="card"> <div class="card">
<div class="card-photo"> <div class="card-photo">
<input type="checkbox" id="tiaki"/>
<form class="form-measurements"> <label for="form-cage-measurements">Käfigmaße</label>
<form id="form-cage-measurements" class="form-measurements">
<div class="input-measurement"> <div class="input-measurement">
<label for="width">Breite</label> <label for="width">Breite</label>
<input class="measurement" type="number" id="width"> <input class="measurement" type="number" id="width">
@ -62,7 +63,6 @@
</div> </div>
</form> </form>
</div> </div>
<label>Käfigmaße</label>
</div> </div>
</div> </div>
@ -86,73 +86,73 @@
<div class="container output-element" id="resultsDiv"> <div class="container output-element" id="resultsDiv">
</div> </div>
</div> </div>
</div>
<script>
<script> var labelNumRats = document.getElementById("labelNumRats");
var labelNumRats = document.getElementById("labelNumRats"); var ratSlider = document.getElementById("numRats");
var ratSlider = document.getElementById("numRats"); labelNumRats.innerHTML = `Anzahl an Ratten: ` + ratSlider.value;
labelNumRats.innerHTML = `Anzahl an Ratten: ` + ratSlider.value;
ratSlider.oninput = function () {
labelNumRats.innerHTML = `Anzahl an Ratten: ` + this.value;
update();
}
// Full floor functions
var fullFloorNum = document.getElementById("numFullFloors");
var savicSuiteRoyaleDim = new Dimensions(1, 0.5, 1);
function getResultFromChecks(checks) {
console.log(checks.length)
if (Object.keys(checks).length > 0) {
const ul = document.createElement('ul');
for (const key in checks) {
const li = document.createElement('li');
li.textContent = `❌` + checks[key];
ul.appendChild(li);
}
return ul;
} else {
const p = document.createElement('p');
p.innerHTML = "✅ Der Käfig erfüllt alle Kriterien!"
return p;
}
}
function update() {
var failed_checks = cageCheck(savicSuiteRoyaleDim, ratSlider.value, fullFloorNum.value);
var resultsDiv = document.getElementById("resultsDiv");
resultsDiv.innerHTML = `<strong>Ergebnis</strong>`;
const result = getResultFromChecks(failed_checks);
resultsDiv.appendChild(result);
}
function decreaseFloorNum() {
var input = document.getElementById('numFullFloors');
var value = parseInt(input.value);
if (value > 0) {
input.value = value - 1;
}
update();
}
function increaseFloorNum() {
var input = document.getElementById('numFullFloors');
var value = parseInt(input.value);
input.value = value + 1;
update();
}
ratSlider.oninput = function () {
labelNumRats.innerHTML = `Anzahl an Ratten: ` + this.value;
update(); update();
</script> }
// Full floor functions
var fullFloorNum = document.getElementById("numFullFloors");
var savicSuiteRoyaleDim = new Dimensions(1, 0.5, 1);
function getResultFromChecks(checks) {
console.log(checks.length)
if (Object.keys(checks).length > 0) {
const ul = document.createElement('ul');
for (const key in checks) {
const li = document.createElement('li');
li.textContent = `❌` + checks[key];
ul.appendChild(li);
}
return ul;
} else {
const p = document.createElement('p');
p.innerHTML = "✅ Der Käfig erfüllt alle Kriterien!"
return p;
}
}
function update() {
var failed_checks = cageCheck(savicSuiteRoyaleDim, ratSlider.value, fullFloorNum.value);
var resultsDiv = document.getElementById("resultsDiv");
resultsDiv.innerHTML = `<strong>Ergebnis</strong>`;
const result = getResultFromChecks(failed_checks);
resultsDiv.appendChild(result);
}
function decreaseFloorNum() {
var input = document.getElementById('numFullFloors');
var value = parseInt(input.value);
if (value > 0) {
input.value = value - 1;
}
update();
}
function increaseFloorNum() {
var input = document.getElementById('numFullFloors');
var value = parseInt(input.value);
input.value = value + 1;
update();
}
update();
</script>
</body> </body>
</html> </html>