Skip to content

Commit 4e0084f

Browse files
KoberSaschaKoberSascha
committed
[EDIT] - mockup2
1 parent 4f4aba1 commit 4e0084f

File tree

7 files changed

+257
-197
lines changed

7 files changed

+257
-197
lines changed

‎data/flasche_stock.jpg‎

54.2 KB
Loading

‎data/productpassport.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
"productShortName": "Saft",
99
"description": "string",
1010
"category": "Saft",
11-
"imageSrc": "https://smartfarminglab.github.io/data/flasche.jpg",
11+
"imageSrc": "https://smartfarminglab.github.io/data/flasche_stock.jpg",
1212
"certificates": [
1313
{
1414
"id": "068f31bb-feaf-4e64-a013-5774c52d3e74",

‎herkunftcheck/herkunftcheck2/index.html‎

Lines changed: 38 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@
22
<html lang="de">
33

44
<head>
5-
6-
<meta charset="UTF-8" />
7-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
87
<title>HerkunftCheck</title>
8+
<link rel="icon" type="image/x-icon" href="img/logo_2.png">
99
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-grid.min.css">
1010

1111
<link rel="stylesheet" href="style/style_v1.css" />
@@ -19,21 +19,21 @@
1919
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
2020

2121

22-
<!-- Polyline Decorator (if needed) -->
23-
<script
24-
src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-polylinedecorator/1.6.0/leaflet.polylineDecorator.min.js"></script>
22+
<!-- Polyline Decorator (if needed) -->
23+
<script
24+
src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-polylinedecorator/1.6.0/leaflet.polylineDecorator.min.js"></script>
2525

26-
<!-- Working Leaflet.curve plugin -->
27-
<script src="https://rawcdn.githack.com/elfalem/Leaflet.curve/master/src/leaflet.curve.js"></script>
26+
<!-- Working Leaflet.curve plugin -->
27+
<script src="https://rawcdn.githack.com/elfalem/Leaflet.curve/master/src/leaflet.curve.js"></script>
2828

29-
<!-- MarkerCluster CSS & JS -->
30-
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/MarkerCluster.css" />
31-
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/MarkerCluster.Default.css" />
32-
<script src="https://unpkg.com/[email protected]/dist/leaflet.markercluster.js"></script>
33-
<script
34-
src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-polylinedecorator/0.7.3/leaflet.polylineDecorator.min.js"></script>
29+
<!-- MarkerCluster CSS & JS -->
30+
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/MarkerCluster.css" />
31+
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/MarkerCluster.Default.css" />
32+
<script src="https://unpkg.com/[email protected]/dist/leaflet.markercluster.js"></script>
33+
<script
34+
src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-polylinedecorator/0.7.3/leaflet.polylineDecorator.min.js"></script>
3535

36-
<script src="https://unpkg.com/leaflet-providers@latest/leaflet-providers.js"></script>
36+
<script src="https://unpkg.com/leaflet-providers@latest/leaflet-providers.js"></script>
3737

3838

3939
<script src="script/map_1.1.2.js"></script>
@@ -65,32 +65,34 @@
6565
<div class="sheet-content">
6666

6767
<div class="product-header">
68-
<h1 id="product-name" class="product-name text-left">Apfel-Birnen-Saft</h1>
68+
<h1 id="product-name" class="product-name text-left">Produktname</h1>
69+
<div id="product-brand" class="product-brand text-left w-100"></div>
6970
</div>
7071

71-
<div class="row">
72-
<div class="col-4">
73-
<div class="info-card p-0">
74-
<img id="product-image" class="product-image" src="https://source.unsplash.com/400x220/?juice,fruit" alt="Produktbild">
75-
</div>
72+
<div class="row">
73+
<div class="col-4">
74+
<div id="product-image-container" class="info-card p-0 h-100 product-image-container">
75+
76+
7677
</div>
77-
78-
<div class="col-8">
79-
80-
81-
82-
<div class="info-card">
83-
<h3>Produktinformationen</h3>
84-
<p><strong>Hergestellt am:</strong> <span id="production-date">01.04.2025</span></p>
85-
<p><strong>MHD:</strong> <span id="best-before">01.10.2025</span></p>
86-
<p><strong>Kategorie:</strong> <span id="product-category">Fruchtsaft</span></p>
87-
<p><strong>Produzent:</strong> <span id="company-name">Obsthof Müller</span></p>
8878
</div>
8979

90-
80+
<div class="col-8">
81+
82+
83+
84+
<div class="info-card">
85+
<h3>Produktinformationen</h3>
86+
<p>Hergestellt am:<span id="production-date">01.04.2025</span></p>
87+
<p>MHD: <span id="best-before">01.10.2025</span></p>
88+
<p>Kategorie: <span id="product-category">Fruchtsaft</span></p>
89+
<p>Produzent: <span id="company-name">Obsthof Müller</span></p>
9190
</div>
91+
92+
9293
</div>
93-
94+
</div>
95+
9496

9597

9698

@@ -101,7 +103,7 @@ <h3>Produktinformationen</h3>
101103

102104
<div class="info-card">
103105
<h3>Produktionsschritte</h3>
104-
<ul class="steps-list">
106+
<ul class="steps-list" id="steps-list">
105107
<li>1. Ernte der Früchte</li>
106108
<li>2. Reinigung und Sortierung</li>
107109
<li>3. Pressung</li>
@@ -118,7 +120,7 @@ <h3>Zutaten</h3>
118120

119121
<div class="info-card">
120122
<h3>Zertifikate</h3>
121-
<div class="certificate-images" id="certificates">
123+
<div class="certificate-images certificate-images-container" id="certificates">
122124
<img
123125
src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/Organic_Logo_EU.svg/120px-Organic_Logo_EU.svg.png"
124126
alt="Bio" />

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

Lines changed: 29 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -5,24 +5,24 @@ function InitializeMapAndData() {
55

66
var map = L.map('map', { zoomControl: false });
77

8-
/* L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager_nolabels/{z}/{x}/{y}{r}.png', {
9-
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>',
10-
subdomains: 'abcd',
11-
maxZoom: 20
12-
}).addTo(map);
13-
*/
8+
/* L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager_nolabels/{z}/{x}/{y}{r}.png', {
9+
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>',
10+
subdomains: 'abcd',
11+
maxZoom: 20
12+
}).addTo(map);
13+
*/
1414

1515
L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
1616
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OSM</a> & CartoDB',
1717
subdomains: 'abcd',
1818
maxZoom: 19,
19-
}).addTo(map);
19+
}).addTo(map);
2020

2121

2222
L.tileLayer('https://{s}.basemaps.cartocdn.com/light_only_labels/{z}/{x}/{y}{r}.png', {
2323
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/">CARTO</a>',
2424
subdomains: 'abcd',
25-
maxZoom: 20,
25+
maxZoom: 20,
2626
}).addTo(map);
2727

2828

@@ -40,7 +40,7 @@ function InitializeMapAndData() {
4040
.then(data => {
4141

4242
// Display Product Card Info
43-
// document.getElementById("product-card").style.display = "grid";
43+
// document.getElementById("product-card").style.display = "grid";
4444
document.getElementById("product-name").textContent = data.productName;
4545
document.getElementById("product-category").textContent = data.category;
4646
const options = { day: '2-digit', month: '2-digit', year: 'numeric' };
@@ -49,9 +49,14 @@ function InitializeMapAndData() {
4949

5050
document.getElementById("best-before").textContent = new Date(data.bestBefore).toLocaleDateString();
5151
document.getElementById("company-name").textContent = data.productOwner.companyName;
52+
document.getElementById("product-brand").textContent = data.productOwner.companyName;
5253
//document.getElementById("product-image").src = data.imageSrc;
53-
document.getElementById("product-image").src = data.imageSrc !== "string" ? data.imageSrc : "https://via.placeholder.com/100";
54-
54+
//document.getElementById("product-image").src = data.imageSrc !== "string" ? data.imageSrc : "https://via.placeholder.com/100";
55+
const container = document.getElementById("product-image-container");
56+
container.style.backgroundImage =
57+
typeof data.imageSrc === "string"
58+
? `url('${data.imageSrc}')`
59+
: "url('https://via.placeholder.com/100')";
5560

5661

5762
// Load Certificates
@@ -72,6 +77,19 @@ function InitializeMapAndData() {
7277
}
7378

7479

80+
const stepsList = document.getElementById("steps-list");
81+
82+
// Clear existing list items (optional)
83+
stepsList.innerHTML = "";
84+
85+
// Fill with new steps
86+
data.productBatchSteps.forEach((step, index) => {
87+
const li = document.createElement("li");
88+
li.textContent = `${index + 1}. ${step.name}`;
89+
stepsList.appendChild(li);
90+
});
91+
92+
7593
// Clustergruppe initialisieren
7694
const markerClusterGroup = L.markerClusterGroup();
7795

‎herkunftcheck/herkunftcheck2/style/card_v2.1.1.css‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -222,6 +222,13 @@ img {
222222
font-size: 14px;
223223
}
224224

225+
.product-image-container{
226+
height:100%;
227+
width:100%;
228+
}
229+
230+
231+
225232
@media (max-width: 768px) {
226233

227234

‎herkunftcheck/herkunftcheck2/style/map.css‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
#map {
2-
height: 75vh;
2+
height: 100vh;
33
width: 100%;
44
border-radius: 0px;
55
z-index: 110;
@@ -96,4 +96,11 @@
9696
text-align: center;
9797
border-radius: 50% !important;
9898
font: 12px "Helvetica Neue", Arial, Helvetica, sans-serif;
99+
}
100+
101+
102+
@media only screen and (max-width: 700px) {
103+
#map {
104+
height: 80vh;
105+
}
99106
}

0 commit comments

Comments
 (0)