Skip to content

Commit 56da560

Browse files
KoberSaschaKoberSascha
committed
[EDIT] - mockup2
1 parent eb33c89 commit 56da560

3 files changed

Lines changed: 301 additions & 59 deletions

File tree

‎herkunftcheck/herkunftcheck2/index.html‎

Lines changed: 249 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<link rel="icon" type="image/x-icon" href="img/logo_2.png">
99
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
1010

11-
<link rel="stylesheet" href="style/style_v1.1.9.css" />
11+
<link rel="stylesheet" href="style/style_v1.2.1.css" />
1212
<link rel="stylesheet" href="style/map.css" />
1313

1414

@@ -44,7 +44,7 @@
4444
document.addEventListener("DOMContentLoaded", function () {
4545
InitializeMapAndData();
4646
// toggleSheet();
47-
// toggleStepSheet();
47+
//toggleStepSheet();
4848
});
4949
</script>
5050

@@ -64,8 +64,23 @@
6464
<div class="sheet-content">
6565

6666
<div class="product-header">
67-
<h1 id="product-name" class="product-name text-left">Produktname</h1>
68-
<div id="product-brand" class="product-brand text-left w-100"></div>
67+
<div class="row">
68+
69+
70+
<div class="col">
71+
<h1 id="product-name" class="product-name text-left">Produktname</h1>
72+
<div id="product-brand" class="product-brand text-left w-100"></div>
73+
74+
75+
</div>
76+
</div>
77+
78+
79+
80+
81+
82+
83+
6984
<button id="toggle-button" class="toggle-arrow">
7085
<span class="arrow"><svg xmlns="http://www.w3.org/2000/svg"
7186
viewBox="0 0 384 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
@@ -135,7 +150,14 @@ <h3>Produkt</h3>
135150
</div>
136151
<span>Produzent</span>
137152
</div>
138-
<span id="company-name">SonntagsSAFT GmbH</span></p>
153+
<span id="company-name">SonntagsSAFT GmbH</span>
154+
155+
<div class="col company-logo-col mt-2">
156+
<img src="" id="company-logo" class="company-logo" />
157+
158+
</div>
159+
160+
139161
</div>
140162

141163

@@ -236,77 +258,250 @@ <h5 class="section-footer ">
236258
</section>
237259
</div>
238260
</div>
239-
</div>
261+
</div>
240262

241263

242264

243-
<div class="bottom-sheet" id="step-card">
244-
<div class="sheet-content">
245-
<div class="product-header">
246-
<h1 id="product-name" class="product-name text-left">Produktionsschritt</h1>
247-
<div id="product-brand" class="product-brand text-left w-100"></div>
248-
<button onclick="toggleStepSheet();" class="toggle-arrow">
249-
<span class="arrow"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg></span> <!-- ▲ -->
250-
</button>
251-
</div>
265+
<div class="bottom-sheet" id="step-card">
266+
<div class="sheet-content">
267+
<div class="product-header">
268+
<h1 class="product-name text-left" id="product-step-name">Produktionsschritt</h1>
269+
<div id="product-brand" class="product-brand text-left w-100"></div>
270+
<button onclick="toggleStepSheet();" class="toggle-arrow">
271+
<span class="arrow"><svg xmlns="http://www.w3.org/2000/svg"
272+
viewBox="0 0 384 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
273+
<path
274+
d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z" />
275+
</svg></span> <!-- ▲ -->
276+
</button>
252277
</div>
278+
279+
280+
<section class="projects">
281+
<div class="card-grid mt-2">
282+
<div class="project-card light info">
283+
<div class="row d-flex align-items-stretch">
284+
<div class="col-6">
285+
286+
<h4>Info</h4>
287+
<div class="content">
288+
289+
<div>
290+
<div class="label">
291+
<div class="logo-icon">
292+
<svg xmlns="http://www.w3.org/2000/svg"
293+
viewBox="0 0 192 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
294+
<path
295+
d="M48 80a48 48 0 1 1 96 0A48 48 0 1 1 48 80zM0 224c0-17.7 14.3-32 32-32l64 0c17.7 0 32 14.3 32 32l0 224 32 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 512c-17.7 0-32-14.3-32-32s14.3-32 32-32l32 0 0-192-32 0c-17.7 0-32-14.3-32-32z" />
296+
</svg>
297+
</div>
298+
<span>Name</span>
299+
</div>
300+
<span id="step-location"></span></p>
301+
</div>
302+
303+
304+
<div>
305+
<div class="label">
306+
<div class="logo-icon">
307+
<svg xmlns="http://www.w3.org/2000/svg"
308+
viewBox="0 0 384 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
309+
<path
310+
d="M215.7 499.2C267 435 384 279.4 384 192C384 86 298 0 192 0S0 86 0 192c0 87.4 117 243 168.3 307.2c12.3 15.3 35.1 15.3 47.4 0zM192 128a64 64 0 1 1 0 128 64 64 0 1 1 0-128z" />
311+
</svg>
312+
</div>
313+
<span>Adresse</span>
314+
</div>
315+
<span id="step-street"></span><br />
316+
<span id="step-zipcity"></span><br />
317+
<span id="step-country"></span>
318+
</p>
319+
</div>
320+
</div>
321+
</div>
322+
323+
<div class="col-6">
324+
<div id="product-step-image-container"
325+
class="info-card p-0 m-0 w-100 product-image-container shadow-none"
326+
style="background-image: url('https://smartfarminglab.github.io/data/flasche_stock.jpg');">
327+
</div>
328+
</div>
329+
</div>
330+
</div>
331+
332+
333+
334+
335+
336+
<h2 class="section-heading" id="step-description">
337+
</h2>
338+
</div>
339+
340+
<div class="card-grid mt-2" id="step-entries">
341+
342+
</div>
343+
344+
</section>
345+
346+
253347
</div>
254348

255-
<script>
256-
const sheet = document.getElementById("product-card");
257-
const sheetStep = document.getElementById("step-card");
258-
let startY, currentY, isDragging = false;
259349

260-
function toggleSheet() {
261-
sheet.classList.toggle("open");
262-
}
263350

264-
function toggleStepSheet() {
265-
sheetStep.classList.toggle("open");
351+
352+
353+
354+
355+
356+
357+
358+
359+
360+
</div>
361+
</div>
362+
363+
<script>
364+
const sheet = document.getElementById("product-card");
365+
const sheetStep = document.getElementById("step-card");
366+
let startY, currentY, isDragging = false;
367+
368+
function toggleSheet() {
369+
sheet.classList.toggle("open");
370+
}
371+
372+
function toggleStepSheet() {
373+
sheetStep.classList.toggle("open");
374+
}
375+
376+
/* sheet.addEventListener("touchstart", e => {
377+
startY = e.touches[0].clientY;
378+
isDragging = true;
379+
});
380+
381+
sheet.addEventListener("touchmove", e => {
382+
if (!isDragging) return;
383+
currentY = e.touches[0].clientY;
384+
let deltaY = currentY - startY;
385+
if (deltaY > 0) {
386+
sheet.style.transform = `translateY(${deltaY}px)`;
387+
}
388+
});
389+
390+
sheet.addEventListener("touchend", () => {
391+
isDragging = false;
392+
if (currentY - startY > 100) {
393+
sheet.classList.remove("open");
394+
} else {
395+
sheet.classList.add("open");
396+
}
397+
sheet.style.transform = "";
398+
});
399+
*/
400+
401+
402+
const toggleButton = document.getElementById("toggle-button");
403+
404+
toggleButton.addEventListener("click", () => {
405+
toggleButton.classList.toggle("active");
406+
toggleSheet();
407+
});
408+
409+
410+
411+
function showSidebarWithStep(step) {
412+
413+
sheetStep.classList.add("open");
414+
415+
416+
if (step.imageSrc && step.imageSrc !== "string") {
417+
418+
419+
const container = document.getElementById("product-step-image-container");
420+
container.style.backgroundImage =
421+
typeof step.imageSrc === "string"
422+
? `url('${step.imageSrc}')`
423+
: "url('https://via.placeholder.com/100')";
424+
266425
}
267426

268-
/* sheet.addEventListener("touchstart", e => {
269-
startY = e.touches[0].clientY;
270-
isDragging = true;
271-
});
427+
document.getElementById('product-step-name').textContent = step.name || "-";
428+
document.getElementById('step-location').textContent = step.address?.name || "-";
429+
document.getElementById('step-street').textContent = step.address?.street || "-";
430+
document.getElementById('step-zipcity').textContent = `${step.address?.zip || ""} ${step.address?.city || ""}`;
431+
document.getElementById('step-country').textContent = step.address?.country || "-";
432+
document.getElementById('step-description').textContent = step.description || "-";
433+
434+
435+
436+
const entriesContainer = document.getElementById("step-entries");
437+
entriesContainer.innerHTML = "";
438+
439+
if (Array.isArray(step.stepEntries) && step.stepEntries.length > 0) {
440+
step.stepEntries.forEach((entry, index) => {
441+
442+
const entryHtml = `
443+
444+
<div class="project-card green info" onclick="toogleStepEntry(${index + 1})" id="step-entry-${index + 1}-container">
445+
<div class="project-title">Eintrag ${index + 1}</div>
446+
<div class="content">
272447
273-
sheet.addEventListener("touchmove", e => {
274-
if (!isDragging) return;
275-
currentY = e.touches[0].clientY;
276-
let deltaY = currentY - startY;
277-
if (deltaY > 0) {
278-
sheet.style.transform = `translateY(${deltaY}px)`;
279-
}
280-
});
448+
<div class="toggle-button" style="cursor:pointer;">Hier klicken für mehr Informationen</div>
281449
282-
sheet.addEventListener("touchend", () => {
283-
isDragging = false;
284-
if (currentY - startY > 100) {
285-
sheet.classList.remove("open");
286-
} else {
287-
sheet.classList.add("open");
288-
}
289-
sheet.style.transform = "";
290-
});
291-
*/
450+
<div class="extra-info hidden" id="step-entry-${index + 1}">
451+
292452
453+
<div>
454+
<div class="label">
455+
<div class="logo-icon">
456+
<svg xmlns="http://www.w3.org/2000/svg"
457+
viewBox="0 0 192 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
458+
<path
459+
d="M48 80a48 48 0 1 1 96 0A48 48 0 1 1 48 80zM0 224c0-17.7 14.3-32 32-32l64 0c17.7 0 32 14.3 32 32l0 224 32 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 512c-17.7 0-32-14.3-32-32s14.3-32 32-32l32 0 0-192-32 0c-17.7 0-32-14.3-32-32z" />
460+
</svg>
461+
</div>
462+
<span></span>
293463
294-
const toggleButton = document.getElementById("toggle-button");
464+
<span>Beschreibung</span>
465+
</div>
466+
<span>${entry.description || "-"}</span>
295467
296-
toggleButton.addEventListener("click", () => {
297-
toggleButton.classList.toggle("active");
298-
toggleSheet();
299-
});
468+
469+
470+
</div>
300471
301472
302473
303-
function showSidebarWithStep(){
474+
<div class="mt-2"><span class="label">Datum</span> <span class="value">${entry.date ? new Date(entry.date).toLocaleDateString("de-DE") : "-"}</span></div>
475+
476+
<div class="mt-2"><span class="label">Menge</span> <span class="value">${entry.amount && entry.amountUnit ? `${entry.amount} ${entry.amountUnit}` : "-"}</span></div>
477+
<div class="mt-2"><span class="label">Energieverbrauch</span> <span class="value">${entry.energyConsumption || "-"}</span></div>
478+
<div class="mt-2"><span class="label">CO₂-Ausstoß</span> <span class="value">${entry.co2Emission || "-"}</span></div>
479+
</div>
480+
481+
</div>
482+
</div>
304483
305-
sheetStep.classList.add("open");
306484
485+
486+
`;
487+
488+
entriesContainer.insertAdjacentHTML("beforeend", entryHtml);
489+
});
490+
} else {
491+
entriesContainer.innerHTML = "<p>Keine Einträge vorhanden.</p>";
307492
}
308493

309-
</script>
494+
}
495+
496+
function toogleStepEntry(id) {
497+
document.getElementById("step-entry-" + id).classList.toggle("expanded");
498+
document.getElementById("step-entry-" + id + "-container").classList.toggle("expanded-container");
499+
}
500+
501+
502+
503+
504+
</script>
310505

311506
</body>
312507

‎herkunftcheck/herkunftcheck2/script/map_1.1.4.js‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -52,8 +52,19 @@ function InitializeMapAndData() {
5252
document.getElementById("company-name").textContent = data.productOwner.companyName;
5353
document.getElementById("product-brand").textContent = data.productOwner.companyName;
5454
document.getElementById("product-description").textContent = data.description;
55+
5556
//document.getElementById("product-image").src = data.imageSrc;
5657
//document.getElementById("product-image").src = data.imageSrc !== "string" ? data.imageSrc : "https://via.placeholder.com/100";
58+
59+
if(data.productOwner.imageSrc!="undefined"){
60+
61+
document.getElementById("company-logo").src = data.productOwner.imageSrc;
62+
63+
64+
}
65+
66+
67+
5768
const container = document.getElementById("product-image-container");
5869
container.style.backgroundImage =
5970
typeof data.imageSrc === "string"
@@ -117,7 +128,7 @@ function InitializeMapAndData() {
117128
icon: L.divIcon({
118129
className: 'custom-marker',
119130
html: `<div></div>`,
120-
iconSize: [25, 25],
131+
iconSize: [35, 35],
121132
popupAnchor: [0, -10]
122133
})
123134
}).on('click', function (e) {
@@ -228,7 +239,7 @@ function InitializeMapAndData() {
228239
if (bounds.isValid()) {
229240
//map.fitBounds(bounds);
230241
const zoom = map.getBoundsZoom(bounds);
231-
map.setView(bounds.getCenter(), zoom - 1); // Zoom um 1 verringert
242+
map.setView(bounds.getCenter(), zoom - 0.5); // Zoom um 1 verringert
232243

233244
} else {
234245
console.warn("No valid coordinates found.");

0 commit comments

Comments
 (0)