Commit bac92a4c authored by Dorian's avatar Dorian
Browse files

some template fixes

parent d0cb3c22
......@@ -40,9 +40,9 @@
display: block;
}
/* .pagedjs_first_page {
.pagedjs_first_page {
margin-left: calc(50% + var(--margin));
} */
}
}
@media screen {
......
......@@ -3,9 +3,9 @@
.cover h1{
display: inline-block;
font-family: "Liberation Serif";
/* font-family: "Liberation Serif"; */
color: black;
font-size: 1.2rem;
font-size: 1em;
font-weight: normal;
text-align: left;
margin: 0;
......@@ -45,12 +45,14 @@
position: relative;
z-index: 2;
width: calc(100% - 2cm);
margin: auto;
height: 10cm;
/* same than the maps */
width: 100%;
height: calc(calc(var(--pagedjs-pagebox-width) - 3.8cm) * calc(2/3));
border-radius: 50%;
border: 1pt black solid;
margin: auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
......@@ -114,5 +116,5 @@
font-style: italic;
position: absolute;
bottom: -0.05em; right: 0.01em;
bottom: -0.04em; right: 0.03em;
}
......@@ -3,10 +3,50 @@
font-family: "Liberation Mono";
src: url("/layout/fonts/liberation-mono/LiberationMono-Regular.ttf") format("truetype");
}
@font-face {
font-family: "Liberation Mono";
src: url("/layout/fonts/liberation-serif/LiberationMono-Italic.ttf") format("truetype");
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: "Liberation Mono";
src: url("/layout/fonts/liberation-serif/LiberationMono-Bold.ttf") format("truetype");
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: "Liberation Mono";
src: url("/layout/fonts/liberation-serif/LiberationMono-BoldItalic") format("truetype");
font-weight: bold;
font-style: italic;
}
@font-face {
font-family: "Liberation Serif";
src: url("/layout/fonts/liberation-serif/LiberationSerif-Regular.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
/* @font-face {
font-family: "Liberation Serif";
src: url("/layout/fonts/liberation-serif/LiberationSerif-Italic.ttf") format("truetype");
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: "Liberation Serif";
src: url("/layout/fonts/liberation-serif/LiberationSerif-Bold.ttf") format("truetype");
font-weight: bold;
font-style: normal;
} */
/* @font-face {
font-family: "Liberation Serif";
src: url("/layout/fonts/liberation-serif/LiberationSerif-BoldItalic") format("truetype");
font-weight: bold;
font-style: italic;
} */
@font-face {
......
......@@ -52,9 +52,10 @@ li{
.map{
width: 100%;
height: calc(var(--pagedjs-pagebox-height) / 2);
height: calc(calc(var(--pagedjs-pagebox-width) - 3.8cm) * calc(2/3));
border-radius: 50%;
border: 1pt black solid;
/* box-shadow: 0 0 24pt lightgrey; */
}
......@@ -77,6 +78,7 @@ li{
/* ___ CLUSTERS ____ */
.cluster{
break-before: always;
page: cluster;
counter-increment: cluster;
}
......@@ -85,17 +87,12 @@ li{
margin: 0;
}
.cluster > header > h1::before{
content: "Cluster " counter(cluster) " in " string(postal);
content: "Cluster " counter(cluster) " of " string(postal);
}
.cluster > header{
break-before: always;
counter-reset: potelet;
counter-set: potelet 1;
}
/* .cluster > header > p{
margin-bottom: 1em;
} */
/* .cluster h1{
string-set: cluster-id content(text);
......@@ -130,9 +127,13 @@ li{
content: "◯";
padding-right: 1em;
}
.cluster table.summary tr{
break-inside: avoid;
.cluster table.summary tr,
.cluster table.summary td{
/* break-inside: avoid; */
}
/* .cluster table.summary tr.False{
color: darkgrey;
} */
/* ___ POTELETS ____ */
......@@ -151,8 +152,8 @@ li{
.potelet header{
border: 0.5pt solid lightgrey;
padding: 1.5em 1em;
margin-bottom: 2em;
padding: 1.5em 1em 0.5em;
margin-bottom: 1em;
position: relative;
}
......@@ -180,64 +181,84 @@ li{
break-after: avoid;
}
/* ___ THE CONTENT ___ */
/* no content */
.potelet.False + .potelet.False{
break-before: always;
}
.potelet.False main::after{
content: "No PICTURE or COMMENT for this incident...";
display: block;
margin-bottom: 2em;
}
.potelet ul{
/* ___ THE CONTENT ___ */
ul.attachments{
margin: 0;
padding-left: 0;
}
.potelet li{
ul.attachments li{
list-style: none;
break-inside: avoid;
}
.potelet ul li p:first-child{
ul.attachments li p:first-child{
margin-top: 0;
}
.potelet ul li p{
ul.attachments li p{
margin: 0.5em 0;
}
.potelet ul li p:last-child{
ul.attachments li p:last-child{
margin-bottom: 0;
}
.potelet main .date{
ul.attachments .date{
text-align: right;
/* font-size: smaller; */
}
/* flex img/comment */
.potelet.flex ul.attachments{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.potelet.flex ul.attachments > li{
flex: 0 0 50%;
padding: 1em;
}
/* ___ PICTURES ___*/
.attachments li.image{
/* display: inline-flex;
ul.attachments li.image{
/* maximum height is the paper sheet */
max-height: calc(29.7cm - calc(2 * 1.6cm));
/* display: flex;
flex-direction: column; */
max-height: calc(29.1cm - calc(2 * 1.6cm));
}
/* .attachments li.image > *{
flex-grow: 0;
flex-shrink: 0;
} */
/* .attachments .img-container{
flex-grow: 1;
flex-shrink: 1;
} */
ul.attachments li.image > p{
/* flex-grow: 0;
flex-shrink: 0; */
}
ul.attachments .img-container{
/* flex-grow: 0;
flex-shrink: 1; */
/* max-height: calc(calc(29.7cm - calc(2 * 1.6cm)) - 4em); */
}
.attachments img{
ul.attachments img{
width: 100%;
/* width: 100%;
height: auto;
flex-shrink: 1 !important; */
max-height: calc(calc(29.7cm - calc(2 * 1.6cm)) - 4em);
/* max-height: 100%; */
object-fit: contain;
object-position: top left;
/* l'image est rogner si trop haute ! */
object-fit: cover;
object-position: cover;
}
/* ___ COMMENTS ___*/
.attachments .comment .text{
ul.attachments .comment .text{
display: inline-block;
width: auto;
margin: 0;
......@@ -250,19 +271,19 @@ li{
border-radius: 2em;
}
.damaged .attachments .comment .text{
.damaged ul.attachments .comment .text{
font-style: italic;
}
.missing .attachments .comment .text{
.missing ul.attachments .comment .text{
border-style: dashed;
}
/* not show syscomment ? */
.attachments .syscomment .text{
ul.attachments .syscomment .text{
background: whitesmoke;
color: grey;
padding: 0.5em 1em;
}
.attachments .syscomment{
ul.attachments .syscomment{
display: none;
}
......@@ -69,10 +69,14 @@
--content-height: calc(var(--pagedjs-pagebox-height) - var(--pagedjs-margin-top) - var(--pagedjs-margin-bottom));
}
div.pagedjs_page_content div{
/* max-height: calc(29.7cm - calc(2 * 1.6cm)); */
}
.fullpage{
/* width: var(--content-width);
height: var(--content-height); */
overflow: auto;
width: calc(21cm - calc(2 * 1.6cm));
height: calc(29.1cm - calc(2 * 1.6cm));
height: calc(29.7cm - calc(2 * 1.6cm));
}
// Zoom: it seems that open street map cannot give us zoom more than a certain one (20?)
// Zoom: open street map cannot give us zoom over 18
// so we have to set up a MaxNativeZoom (above which it interpolate the tiles)
// also the fitBounds only set the custom zoom by steps
// (padding below 30 doesn't affect most map and over 30 it make all zoom dezoom by one step that is too big) ...
function init_map(mapid, geojsonObject){
......@@ -11,12 +14,13 @@ function init_map(mapid, geojsonObject){
attribution:
'&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors' +
', Tiles courtesy of <a href="https://geo6.be/">GEO-6</a>',
maxZoom: 18
maxZoom: 19,
maxNativeZoom: 18
}).addTo(mymap);
// styling
let damagedMarkerStyle = {
radius: 15,
radius: 12,
fillColor: "#000",
color: "#000",
weight: 2,
......@@ -24,7 +28,7 @@ function init_map(mapid, geojsonObject){
fillOpacity: 1
};
let missingMarkerStyle = {
radius: 15,
radius: 12,
fillColor: "#000",
color: "#000",
weight: 2,
......@@ -60,6 +64,7 @@ function init_map(mapid, geojsonObject){
geojsonLayer.addTo(mymap);
mymap.fitBounds(geojsonLayer.getBounds(),{
padding: L.point([50, 50])
// maxZoom
});
console.log(mapid + " initiated");
......
This diff is collapsed.
......@@ -46,7 +46,7 @@
<!-- COVERS -->
<!-- minimal mini street -->
<div class="fullpage cover">
<!-- <div class="fullpage cover">
<div class="street">_¡_._<i>¡</i>_¡_¡__</div>
......@@ -56,13 +56,13 @@
in <h1 data-postal="{{ volume.code }}">{{ volume.name }}</h1>
</div>
<p>
-- {{volume.cluster_size}} clusters <br/>
-- {{volume.incident_size}} incidents
{{volume.cluster_size}} clusters <br/>
{{volume.incident_size}} incidents
</p>
</div>
</div> -->
<!-- pattern ellipsis -->
<div id="pattern-ellipsis" class="fullpage cover">
<!-- <div id="pattern-ellipsis" class="fullpage cover">
<div class="pattern">
</div>
......@@ -75,7 +75,7 @@
</p>
</div>
</div>
</div> -->
<!-- big ! -->
<div id="big-potelet" class="fullpage cover">
......@@ -83,12 +83,15 @@
<div class="cover-description">
missing and damaged boolards <br/>
reported on <a href="https://fixmystreet.brussels/">https://fixmystreet.brussels/</a> <br/><br/>
in <h1 data-postal="{{ volume.code }}">{{ volume.name }}</h1>
</div>
<p>
in <h1 data-postal="{{ volume.code }}">{{ volume.name }}</h1> <br/>
-- {{volume.cluster_size}} clusters <br/>
-- {{volume.incident_size}} incidents
</p>
-- {{volume.incident_size}} incidents <br/><br/>
{{volume.date.day}}
</div>
<footer>
<!-- <p>*groups of at least {{volume.threshold}} incidents close to each other</p> -->
</footer>
<div class="big-potelet">¡</div>
......@@ -135,7 +138,7 @@
<th>adress</th>
</tr>
{% for potelet in cluster.incidents %}
<tr>
<tr class="{{ potelet.img_or_txt }}">
<td>{{ potelet.id }}</td>
<td class="{{ potelet.subcat }}">{{ potelet.subcat }}</td>
<td>{{ potelet.creationDate.day }}</td>
......@@ -166,11 +169,14 @@
<p>
{{ potelet.adress }}<br><br>
STATUS: {{ potelet.status }} <br>
Created: {{ potelet.creationDate.day }} at {{ potelet.creationDate.time }}
⟶ Last updated: {{ potelet.updatedDate.day }} at {{ potelet.updatedDate.time }} <br><br>
Responsible organisation: {{ potelet.responsibleOrganisation }} <br>
Responsible department: {{ potelet.responsibleDepartment }}
Created: {{ potelet.creationDate.day }}
⟶ Last updated: {{ potelet.updatedDate.day }} <br>
STATUS: {{ potelet.status }} <br><br>
Responsible organisation: {{ potelet.actor }}
<!-- Responsible organisation: {{ potelet.responsibleOrganisation }} <br>
Responsible department: {{ potelet.responsibleDepartment }} -->
</p>
</header>
......@@ -191,9 +197,8 @@
</ul>
</div> -->
<div class="attachments">
<ul class="attachments">
<!-- <h4>attachments</h4> -->
<ul>
{% for attachment in potelet.attachments %}
{% if attachment.type == 'PICTURE' %}
......@@ -202,9 +207,9 @@
<p>
{{ attachment.type }} by {{ attachment.actor }}
</p>
<!-- <div class="img-container"> -->
<div class="img-container">
<img src="{{ attachment.href }}">
<!-- </div> -->
</div>
<p class="date">{{ attachment.date.day }} at {{ attachment.date.time }}</p>
</li>
......@@ -231,7 +236,6 @@
{% endfor %}
</ul>
</div>
</main>
<!-- empty footer for counter-increment -->
......
import json
from utils.dbInteraction import (
createConnection,
getPotelets,
getClusters,
getAttachments,
getHistory
)
import json
from jinja2 import Template
import geojson
from utils.dbInteraction import (
createConnection,
getPotelets,
getClusters,
getAttachments,
getHistory
getHistory,
getLastUpdate
)
from utils.formatingUtils import (
municipalityFilter,
formatingCluster,
formatingPotelet,
format_date,
addGeojsonToClusters
)
MUNICIPALITIES = {
1070: "Anderlecht",
1160: "Auderghem",
1082: "Berchem-Sainte-Agathe",
1000: "Bruxelles-Ville",
1020: "Laeken",
1030: "Schaerbeek",
1040: "Etterbeek",
1140: "Evere",
1190: "Forest",
1083: "Ganshoren",
1050: "Ixelles",
1060: "Saint-Gilles",
1070: "Anderlecht",
1090: "Jette",
1081: "Koekelberg",
1080: "Molenbeek-Saint-Jean",
1060: "Saint-Gilles",
1210: "Saint-Josse-ten-Noode",
1030: "Schaerbeek",
1180: "Uccle",
1081: "Koekelberg",
1082: "Berchem-Sainte-Agathe",
1083: "Ganshoren",
1140: "Evere",
1150: "Woluwe-Saint-Pierre",
1160: "Auderghem",
1170: "Watermael-Boitsfort",
1180: "Uccle",
1190: "Forest",
1200: "Woluwe-Saint-Lambert",
1150: "Woluwe-Saint-Pierre"
1210: "Saint-Josse-ten-Noode"
}
CLUSTER_THRESHOLD = 4
CODE = 1050
# NOTE:
# in this way we get the same cluster twice if it has two municipality....
# count the number of element more in which one
DB_PATH = '../data/potelets.db'
GEOJSON_PATH = '../data/potelets_clustered.geojson'
TEMPLATE_PATH = '../layout/template/template.html'
HTML_PATH = '../layout/potelets.html'
URL = 'http://fixmystreet.brussels/'
# --- Formating utility ---
def format_date(date_str):
date = {}
date["day"], date["time"] = date_str.split("T")
date["day"] = ".".join(date["day"].split("-")[::-1])
date["time"] = ":".join(date["time"].split(":")[:2])
return date
def format_actor(actor_type, organisation, department):
actor = ""
if actor_type == 'CITIZEN' or actor_type == 'UNKNOWN':
actor = actor_type
else:
if organisation and department:
actor = organisation + " " + department + " (" + actor_type + ")"
elif organisation:
actor = organisation + " (" + actor_type + ")"
if actor == "":
print("ERROR: empty actor")
return actor
def formatingPotelet(potelet):
# loads the dumped json
potelet["coordinates"] = json.loads(potelet["coordinates"])
potelet["geo_coordinates"] = json.loads(potelet["geo_coordinates"])
# format date
potelet["updatedDate"] = format_date(potelet["updatedDate"])
potelet["creationDate"] = format_date(potelet["creationDate"])
# add link to the original website
potelet["url"] = URL + str(potelet["id"])
# we merge the tables in order to have one dict like object by potelet
potelet["attachments"] = getAttachments(conn, potelet)
potelet["history"] = getHistory(conn, potelet)
has_img_or_txt = False
for attachment in potelet["attachments"]:
attachment["date"] = format_date(attachment["date"])
attachment["actor"] = format_actor(attachment["actor_type"], attachment["organisation"], attachment["department"])
type = attachment["type"]
if type == "COMMENT" or type == "PICTURE":
has_img_or_txt = True
potelet["img_or_txt"] = has_img_or_txt
for story in potelet["history"]:
story["date"] = format_date(story["date"])
story["actor"] = format_actor(story["actor_type"], story["organisation"], story["department"])
return potelet
def formatingCluster(cluster):
# write the size
cluster["size"] = len(cluster["incidents"])
#street names
cluster["streetnames"] = set()
for p in cluster["incidents"]:
streetname = " ".join(p["adress"].split(" ")[:-2])
cluster["streetnames"].add(streetname)
# creation dates
# pas besoin de trier les dates car la requette sql le fait déjà
cluster["dates"] = []
for p in cluster["incidents"]:
date = format_date(p["creationDate"])
cluster["dates"].append(date)
return cluster
def municipalityFilter(clusters, municipality):
# add a municipality set to every cluster
for cluster in clusters:
cluster["municipality"] = set()