laradb

script pour établir une bdd Ãà partir d'un tsv avec différent format - retour accueil

git clone git://bebou.netlib.re/laradb
Log | Files | Refs | 

commit 0ccf2fdc468ff012d988907717152b02bf9c2dab
parent 91bbad3654be66616895ad66bceb5db627032393
Auteurice: martlem <contact@martinlemaire.fr>
Date:   Fri,  8 Nov 2024 22:06:40 +0100

style table liste au click

Diffstat:

Mmain.sh | 8++------


Msrc/index.sh | 1+


Msrc/map.sh | 51+++++++++++++++++++++++++++++++++++++++++++--------


Msrc/static/style.css | 10++++++++--


Msrc/table.sh | 25+++++++++++++------------


Msrc/timeline.sh | 1+


6 files changed, 68 insertions(+), 28 deletions(-)

diff --git a/main.sh b/main.sh
@@ -11,16 +11,12 @@ echo Curling GPS coordinates...
 echo Converting dates...
 #./src/utils/date_epoch.sh
 
-echo Building index.html
-./src/index.sh
+#./src/index.sh
 
-echo Building timeline.html
-./src/timeline.sh
+#./src/timeline.sh
 
-echo Building table.html
 ./src/table.sh
 
-echo Building map.html
 ./src/map.sh
 
 cp src/static/* dist/
diff --git a/src/index.sh b/src/index.sh
@@ -1,5 +1,6 @@
 #!/bin/sh
 
+echo Building index.html
 
 DIST="dist/"
 
diff --git a/src/map.sh b/src/map.sh
@@ -1,10 +1,14 @@
 #!/bin/sh
 
+echo Building map.html
 
 DIST="dist"
-DB="src/cities.tsv"
 
-LIGNE=1
+DB="src/db.tsv"
+DB_CITIES="src/cities.tsv"
+
+LINE_DB=1
+LINE_CITIES=1
 
 OUT=$(basename "$0" | sed "s/sh$/html/g")
 
@@ -34,7 +38,6 @@ cat << % > $DIST/$OUT
 
 $(cat src/templates/nav.html)
 
-
 		<div id="map"></div>
 
 		<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
@@ -48,16 +51,25 @@ let map = L.map('map', {
 	zoomControl: true,
 	attributionControl: false
 });
+const entries = [
+$(while IFS= read -r line; do
+        cat <<- ENTRY
+		{title:"$(entree 2)",city:"$(entree 9)"}
+		,
+ENTRY
+	LINE=$(($LINE + 1))
+done < $DB | sed '$ d'
+)
+]
+
 const coords = [
 $(while IFS= read -r line; do
-    if [ $LIGNE != 1 ]; then
         cat <<- COORDS
 		{city:"$(entree 1)",$(entree 2)}
 		,
 COORDS
-	fi
-	LIGNE=$(($LIGNE + 1))
-done < $DB | sed '$ d'
+	LINE_CITIES=$(($LINE_CITIES + 1))
+done < $DB_CITIES | sed '$ d' | sed '1,2d' 
 )
 ]
 
@@ -78,12 +90,35 @@ const icon = L.divIcon({
 	html: \`<span style="\${markerHtmlStyles}" />\`
 })
 
-coords.forEach((data) => {
+const popupOptions = {
+ 'maxWidth': 'auto',
+ 'className': 'popup'
+}
+
+const entriesByCity = entries.reduce((acc, entry) => {
+    if (!acc[entry.city]) acc[entry.city] = [];
+    acc[entry.city].push(entry);
+    return acc;
+}, {});
+
+const coordsWithEntries = coords.map(coord => ({
+    ...coord,
+    relatedEntries: entriesByCity[coord.city] || []
+}));
+
+coordsWithEntries.forEach((data) => {
 	if(data.city != ""){
 		const marker = L.marker([data.lat, data.lon], {icon:icon}).addTo(map);
+		let popupContent = ''
+		data.relatedEntries.forEach((entry) => {
+		popupContent += "<p>" + entry.title + "</p>"
+})
+		marker.bindPopup(popupContent, popupOptions)
 	}
 });
 
+console.log(coordsWithEntries);
+
 </script>
 
 $(cat src/templates/foot.html)
diff --git a/src/static/style.css b/src/static/style.css
@@ -5,6 +5,7 @@
    	--noir:black;
    	--accent:yellow;
    	--corps:1rem;
+   	--indent:2rem;
    	--interligne:1.2rem;
     --marker-size:2rem;
    	--largeur-bordure-cellule:1px;
@@ -27,6 +28,10 @@ thead td{text-align:left}
 #TABLEAU td { border-left:1px solid black;padding-left:0px}
 
 #TABLEAU tr:hover{background:var(--accent) !important}
+#TABLEAU tr.show {display:flex;flex-direction:column;flex-wrap:wrap;}
+#TABLEAU tr.show td:not(:first-of-type){padding-left:var(--indent);width:calc(100% - var(--indent)) !important; border-top:1px solid black}
+#TABLEAU tr.show td {}
+#TABLEAU tr.show td.date::before {content:"Title : "}
 /*tr {
   display: flex;
   flex-wrap: wrap;
@@ -38,8 +43,7 @@ thead td{text-align:left}
 #TABLEAU tr.show {height:auto}
 #TABLEAU tr td{width:calc(var(--largeur) * 10)}
 #TABLEAU tr td.numeros{width:calc(var(--largeur) * 4)}
-#TABLEAU tr td.titre-complet	{width:calc(var(--largeur) * 40)}
-#TABLEAU tr td:first-of-type{width:calc(var(--largeur) * 30);}
+#TABLEAU tr td:first-of-type{width:min(calc(var(--largeur) * 30), 100vw);}
 /*
 #TABLEAU tr { display: grid;
   	grid-template-columns: repeat(8, 1fr [col-start]);
@@ -108,3 +112,5 @@ nav {display:flex; width:100%; justify-content:space-around;background:var(--fon
     background: var(--fond-A);
     outline: 0;
 }
+.leaflet-popup-content-wrapper {border-radius:0}
+.pin:hover span {background-color:var(--accent) !important}
diff --git a/src/table.sh b/src/table.sh
@@ -1,5 +1,6 @@
 #!/bin/bash
 
+echo Building table.html
 
 unsure(){
 # à revoir, ne capture pas "Grenoble?, Lyon?" par exemple
@@ -53,19 +54,19 @@ $(while IFS= read -r line; do
 	        <td onclick="sortTable(4)" class="debut">$(entree 5)</td>
 	        <td onclick="sortTable(5)" class="fin">$(entree 6)</td>
 	        <td onclick="sortTable(6)" class="numeros">$(entree 7)</td>
-	        <td onclick="sortTable(8)" class="ville">$(entree 8)</td>
-	        <td onclick="sortTable(9)" class="pays">$(entree 9)</td>
+	        <td onclick="sortTable(8)" class="ville">$(entree 9)</td>
+	        <td onclick="sortTable(9)" class="pays">$(entree 10)</td>
 	        <td onclick="sortTable(9)" class="language">$(entree 11)</td>
 	        <td onclick="sortTable(2)" class="titre-complet">$(entree 3)</td>
 	        <td onclick="sortTable(2)" class="type">$(entree 16)</td>
 	        <td onclick="sortTable(7)" class="format">$(entree 7)</td>
 	        <td onclick="sortTable(3)" class="periodicite">$(entree 4)</td>
-	        <td onclick="sortTable(2)" class="creators">$(entree 13)</td>
+	        <td onclick="sortTable(2)" class="creators">$(entree 14)</td>
 	        <td onclick="sortTable(2)" class="editor-in-chief">$(entree 12)</td>
 	        <td onclick="sortTable(2)" class="publisher">$(entree 17)</td>
-	        <td onclick="sortTable(10)" class="sources">$(entree 10)</td>
-	        <td onclick="sortTable(11)" class="travaux-lies">$(entree 14)</td>
-	        <td onclick="sortTable(11)" class="comments">$(entree 15)</td>
+	        <td onclick="sortTable(10)" class="sources">$(entree 13)</td>
+	        <td onclick="sortTable(11)" class="travaux-lies">$(entree 15)</td>
+	        <td onclick="sortTable(11)" class="comments">$(entree 16)</td>
 	        </tr>
         </thead>
 
@@ -78,19 +79,19 @@ ENTETE
 	        <td class="debut">$(entree 5)</td>
 	        <td class="fin">$(entree 6)</td>
 	        <td class="numeros">$(entree 7)</td>
-	        <td class="ville" $(entree 8) >$(entree 8 | unsure)</td>
-	        <td class="pays">$(entree 9)</td>
+	        <td class="ville" $(entree 9) >$(entree 9 | unsure)</td>
+	        <td class="pays">$(entree 10)</td>
 	        <td class="language">$(entree 11)</td>
 	        <td class="titre-complet">$(entree 3)</td>
 	        <td class="type">$(entree 16)</td>
 	        <td class="format">$(entree 7)</td>
 	        <td class="periodicite">$(entree 4 | unsure)</td>
-	        <td class="creators">$(entree 13)</td>
+	        <td class="creators">$(entree 14)</td>
 	        <td class="editor-in-chief">$(entree 12)</td>
 	        <td class="publisher">$(entree 17)</td>
-	        <td class="sources">$(entree 10)</td>
-	        <td class="travaux-lies">$(entree 14)</td>
-	        <td class="comments">$(entree 15)</td>
+	        <td class="sources">$(entree 13)</td>
+	        <td class="travaux-lies">$(entree 15)</td>
+	        <td class="comments">$(entree 16)</td>
 	    </tr>
 
 CORPS
diff --git a/src/timeline.sh b/src/timeline.sh
@@ -6,6 +6,7 @@
 
 #./src/utils/date_epoch.sh
 
+echo Building timeline.html
 
 DIST="dist"
 DB="src/db.tsv"