From c0a3378d2587c9fda27e97645799dd7a008819a1 Mon Sep 17 00:00:00 2001
From: hellekin <hellekin@cepheide.org>
Date: Thu, 8 Oct 2020 17:38:04 +0200
Subject: Make map more beautiful

This commit introduces a few things:

1. New `content_for` hooks for :debug, :head, and :body_end so that views
   code remains consistent and clean
2. Fullscreen map!
3. Welcome#index view, the Rails way

It also moves controller-related code to the controller,

Enjoy!
---
 app/assets/images/incommon-map-icon.svg        | 116 +++++++++++++++++++++++++
 app/assets/stylesheets/application/_body.scss  |   4 +
 app/assets/stylesheets/application/_debug.scss |  12 +++
 app/assets/stylesheets/application/_map.scss   |  14 +++
 app/controllers/welcome_controller.rb          |   2 +
 app/views/application/_debug.html.erb          |   5 ++
 app/views/layouts/application.html.erb         |   3 +
 app/views/welcome/index.html.erb               |  53 +++++------
 8 files changed, 177 insertions(+), 32 deletions(-)
 create mode 100644 app/assets/images/incommon-map-icon.svg
 create mode 100644 app/assets/stylesheets/application/_debug.scss
 create mode 100644 app/assets/stylesheets/application/_map.scss
 create mode 100644 app/views/application/_debug.html.erb

(limited to 'app')

diff --git a/app/assets/images/incommon-map-icon.svg b/app/assets/images/incommon-map-icon.svg
new file mode 100644
index 0000000..558325a
--- /dev/null
+++ b/app/assets/images/incommon-map-icon.svg
@@ -0,0 +1,116 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="320"
+   height="320"
+   viewBox="0 0 320 320"
+   version="1.1"
+   id="svg8"
+   inkscape:export-filename="/home/how/src/incommon.cc/v1/incommon-map/app/assets/images/login.png"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
+   sodipodi:docname="incommon-map-icon.svg">
+  <defs
+     id="defs2">
+    <marker
+       inkscape:stockid="Arrow2Lend"
+       orient="auto"
+       refY="0.0"
+       refX="0.0"
+       id="Arrow2Lend"
+       style="overflow:visible;"
+       inkscape:isstock="true">
+      <path
+         id="path850"
+         style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round;stroke:#ffffff;stroke-opacity:1;fill:#ffffff;fill-opacity:1"
+         d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z "
+         transform="scale(1.1) rotate(180) translate(1,0)" />
+    </marker>
+    <marker
+       inkscape:stockid="Arrow1Mend"
+       orient="auto"
+       refY="0.0"
+       refX="0.0"
+       id="Arrow1Mend"
+       style="overflow:visible;"
+       inkscape:isstock="true">
+      <path
+         id="path838"
+         d="M 0.0,0.0 L 5.0,-5.0 L -12.5,0.0 L 5.0,5.0 L 0.0,0.0 z "
+         style="fill-rule:evenodd;stroke:#e1ffff;stroke-width:1pt;stroke-opacity:1;fill:#e1ffff;fill-opacity:1"
+         transform="scale(0.4) rotate(180) translate(10,0)" />
+    </marker>
+    <marker
+       inkscape:stockid="Arrow1Lend"
+       orient="auto"
+       refY="0.0"
+       refX="0.0"
+       id="Arrow1Lend"
+       style="overflow:visible;"
+       inkscape:isstock="true">
+      <path
+         id="path832"
+         d="M 0.0,0.0 L 5.0,-5.0 L -12.5,0.0 L 5.0,5.0 L 0.0,0.0 z "
+         style="fill-rule:evenodd;stroke:#e1ffff;stroke-width:1pt;stroke-opacity:1;fill:#e1ffff;fill-opacity:1"
+         transform="scale(0.8) rotate(180) translate(12.5,0)" />
+    </marker>
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="1"
+     inkscape:cx="160"
+     inkscape:cy="160"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:window-width="1916"
+     inkscape:window-height="1041"
+     inkscape:window-x="0"
+     inkscape:window-y="18"
+     inkscape:window-maximized="0" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-212.3333)">
+    <circle
+       style="opacity:1;fill:#216778;fill-opacity:1;stroke:none;stroke-width:0;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:fill markers stroke"
+       id="path815"
+       cx="160"
+       cy="372.33331"
+       r="160" />
+    <path
+       style="fill:none;stroke:#ffffff;stroke-width:20;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#Arrow2Lend)"
+       d="M 121.85231,407.83675 237.94589,293.38278"
+       id="path827"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cc" />
+  </g>
+</svg>
diff --git a/app/assets/stylesheets/application/_body.scss b/app/assets/stylesheets/application/_body.scss
index cadac51..f151b47 100644
--- a/app/assets/stylesheets/application/_body.scss
+++ b/app/assets/stylesheets/application/_body.scss
@@ -38,6 +38,10 @@ body {
     }
 }
 
+main > article {
+    background-color: rgba(255, 255, 255, 0.8);
+}
+
 img {
     max-width: 100%;
 }
diff --git a/app/assets/stylesheets/application/_debug.scss b/app/assets/stylesheets/application/_debug.scss
new file mode 100644
index 0000000..75b1988
--- /dev/null
+++ b/app/assets/stylesheets/application/_debug.scss
@@ -0,0 +1,12 @@
+/*
+  DEBUG
+*/
+
+#debug {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    padding: 0.5rem;
+    background-color: rgba(255,0,0,0.5);
+    color: white;
+}
diff --git a/app/assets/stylesheets/application/_map.scss b/app/assets/stylesheets/application/_map.scss
new file mode 100644
index 0000000..d2330e1
--- /dev/null
+++ b/app/assets/stylesheets/application/_map.scss
@@ -0,0 +1,14 @@
+/*
+ MAP
+*/
+
+#map {
+    position: fixed;
+    height: 100%;
+    width: 100%;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: -1;
+}
diff --git a/app/controllers/welcome_controller.rb b/app/controllers/welcome_controller.rb
index 5e80d26..48167b2 100644
--- a/app/controllers/welcome_controller.rb
+++ b/app/controllers/welcome_controller.rb
@@ -1,6 +1,8 @@
 class WelcomeController < ApplicationController
   # GET /
   def index
+    @resources = Resource.order(:uuid).page params[:page]
+    Rails.logger.info "WECLOME ///// #{@resources&.count || 0}"
   end
 
   # GET /authenticate(/:token)
diff --git a/app/views/application/_debug.html.erb b/app/views/application/_debug.html.erb
new file mode 100644
index 0000000..fce114d
--- /dev/null
+++ b/app/views/application/_debug.html.erb
@@ -0,0 +1,5 @@
+<% if Rails.env.development? %>
+    <div id="debug">
+        <%= yield :debug %>
+    </div>
+<% end %>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 38dcf46..02c8553 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -7,6 +7,7 @@
 
     <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
     <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
+    <%= yield :head %>
   </head>
 
   <body>
@@ -26,6 +27,8 @@
       <footer>
           <%= yield :footer %>
       </footer>
+      <%= render partial: 'debug' %>
       <%= render partial: 'flash' %>
+      <%= yield :body_end %>
   </body>
 </html>
diff --git a/app/views/welcome/index.html.erb b/app/views/welcome/index.html.erb
index 9873194..1977962 100644
--- a/app/views/welcome/index.html.erb
+++ b/app/views/welcome/index.html.erb
@@ -1,23 +1,26 @@
-<head>
-	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
-	   integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
-	   crossorigin="">
-	</link>
-</head>
-
-<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
-   integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
-   crossorigin="">
-</script>
+<% content_for :head do %>
+    <%= stylesheet_link_tag("https://unpkg.com/leaflet@1.7.1/dist/leaflet.css",
+                            integrity: "sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==",
+                            crossorigin: '') %>
+    <%= javascript_include_tag("https://unpkg.com/leaflet@1.7.1/dist/leaflet.js",
+                               integrity: "sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==",
+                               crossorigin: '') %>
+<% end %>
 
 <h1>Bienvenue à l'atelier carto d'IN COMMON</h1>
 
-<div id="mapid" style="height: 500px;">
-</div>
+<%= tag.div(id: 'map') %>
+
+<% content_for :debug do %>
+    <p>Premier élément de la liste:</p>
+    <% res = @resources.first %>
+    <p><%= res.feature["properties"]["name"] %></p>
+    <p><%= res.feature["geometry"]["coordinates"] %></p>
+<% end %>
+
+<% content_for :body_end do %>
 <script>
-	<% @resources = Resource.order(:uuid).page params[:page] %>
-	<% res = @resources.first%>
-	var mymap = L.map('mapid').setView([50.8503396, 4.3517103],13);
+	var mymap = L.map('map').setView([50.8503396, 4.3517103],13);
 
 	L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
 		attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery <a href="https://www.mapbox.com/">Mapbox</a>',
@@ -27,24 +30,10 @@
 		zoomOffset: -1,
 		accessToken: 'pk.eyJ1IjoibmVtYWVsIiwiYSI6ImNrZzBrYjBudTB3bnMyenFmNWtrN3h3bmMifQ.Rkeyhm-9iIQOV7NAMA5LaA'
 	}).addTo(mymap);
-	//var marker = L.marker(<%= [res.feature["geometry"]["coordinates"][1],res.feature["geometry"]["coordinates"][0]]%>).addTo(mymap);
 	var marker = L.marker([50.850, 4.351]).addTo(mymap);
-	//CONTINUER AVEC LES WHILE ET CONDITIONS, @resources ne contient que 25 elements (lié au nombre d'élément par page?)
+	//CONTINUER AVEC LES WHILE ET CONDITIONS, @resources ne contient que 25 elements (lié au nombre d'élément par page?) -- oui
 	//OU PLUTOT UTILISER POSTGRES POUR FAIRE DES REQUESTES SUR @resources
 	var count = 0
-	<% i = 0
-	while i < 25
-		if @resources[i] != nil%>
-		//var marker = L.marker(<%= [@resources[i].feature["geometry"]["coordinates"][1],@resources[i].feature["geometry"]["coordinates"][0]]%>).addTo(mymap);
-		//console.log('<%= @resources[i].feature["properties"]["name"] %>');
-		console.log('<%= @resources[i].feature["geometry"]["coordinates"] %>');
-		count += 1
-		<% end %>
-
-	<% i += 1
-	end %>
 	console.log(count)
 </script>
-<p>Premier élément de la liste:</p>
-<p><%= res.feature["properties"]["name"] %></p>
-<p><%= res.feature["geometry"]["coordinates"] %></p>
+<% end %>
-- 
cgit v1.2.3