first layout

layout/css/main.css

 
-img{
-  max-width: 4cm;
-  max-height: 4cm;
+html{
+  font-family: monospace;
+}
+
+.onelineflex{
+  display: flex;
+  align-items: baseline;
+}
+
+/* ___ POTELETS LAYOUT ____  */
+
+.potelet{
+  /* border: 2px solid lightgrey; */
+  /* margin-bottom: 0.5cm; */
+
+  page-break-before: always;
+}
+.potelet:not([data-split-from]){
+  /* border-top: 2px solid lightgrey; */
+}
+.potelet:last-of-type:not([data-split-to]){
+  /* border-bottom: 2px solid lightgrey; */
+}
+
+/* ___ HEADER ___ */
+
+header{
+  border: 1px solid lightgrey;
+  padding: 0 1em;
+  margin-bottom: 1em;
+
+  position: relative;
+}
+
+header .onelineflex > *{
+  margin-bottom: 0;
+}
+header .onelineflex > *{
+  padding-right: 1rem;
+}
+header .onelineflex > *:last-child{
+  flex-grow: 1;
+  text-align: right;
+}
+header a{
+  font-size: large;
+}
+
+/* ___ attachment & history column ____  */
+
+main{
+  /* display: flex; */
+  /* columns: 2 auto; */
+}
+main > .attachments{
+  /* flex: 1 0 66%; */
+  /* display: inline-block;
+  width: 50%; */
+  /* break-inside: avoid-column; */
+}
+main > .history{
+  /* flex: 1 0 33%; */
+  /* display: inline-block;
+  width: 40%; */
+  /* break-inside: avoid-column; */
+}
+main h4{
+  border-bottom: 1px solid lightgrey;
+  break-after: avoid;
+}
+
+main > *{
+  padding: 0 1em;
+}
+main > *:not(:last-child){
+  /* border-right: 1px solid lightgrey; */
+}
+main > *:last-child{
+  /* padding-left: 1em; */
+}
+
+/* ___ inside the column ___ */
+
+ul{
+  padding-left: 0;
+}
+li{
+  list-style: none;
+  break-inside: avoid;
+
+  margin: 1em 0;
+}
+ul p{
+  margin: 0.5em 0;
+}
+ul p:first-child{
+  margin-top: 0;
+}
+ul p:last-child{
+  margin-bottom: 0;
+}
+
+main .date{
+  text-align: right;
+  font-size: smaller;
+}
+
+.attachments img{
+  max-width: 100%;
+  max-height: 10cm;
+}
+.attachments .comment{
+  font-family: sans-serif;
+  background: whitesmoke;
+  padding: 0.5em 1em;
+  border-radius: 1em;
+}
+.attachments .syscomment{
+  background: whitesmoke;
+  color: grey;
+  padding: 0.5em 1em;
+}
+
+/* ___ PRINT ____  */
+
+@media print{
+
+  @page {
+    size: A4;
+    margin: 1.6cm;
+  }
+
 }

layout/layout.py

+import json
 from jinja2 import Template
 import sqlite3
 from sqlite3 import Error
@@ -6,6 +7,8 @@ db_file = '../db/potelets.db'
 template_file = 'template.html'
 layout_file = 'potelets.html'
 
+url = 'http://fixmystreet.brussels/'
+
 # --- sqlite request ---
 
 def create_connection(db_file):
@@ -20,12 +23,91 @@ def create_connection(db_file):
     except Error as e:
         print(e)
 
-def make_request(conn, sql):
-    """ make the sqlite request sql and return a fetchable oject
+def get_potelets(conn):
+    """ return the last 100 potelet cases and format them for templating
     """
+    sql = ''' SELECT * FROM potelets ORDER BY id DESC LIMIT 100'''
+    # sql = ''' SELECT potelet_id FROM history WHERE type='INCIDENT_ASKED_REOPENING '''
     cur = conn.cursor()
     cur.execute(sql)
-    return cur
+
+    # convert from a list of sqlite3.Row objects to real dict objects
+    potelets = [dict(potelet) for potelet in cur.fetchall()]
+
+    # in the db most data are strings, we may want to loads them as python objects,
+    # or reformat the string, before inserting them in the jinja template.
+    for potelet in potelets:
+        # loads the dumped json
+        potelet["coordinates"] = json.loads(potelet["coordinates"])
+
+        # format date
+        potelet["updatedDate"] = format_date(potelet["updatedDate"])
+        potelet["creationDate"] = format_date(potelet["creationDate"])
+
+        # we merge the tables in order to have one dict like object by potelet
+        potelet["attachments"] = get_attachments(conn, potelet)
+        potelet["history"] = get_history(conn, potelet)
+
+        # potelet["timeline"] = []
+
+
+        # add link to case on the original website
+        potelet["url"] = url + str(potelet["id"])
+
+    return potelets
+
+
+def get_attachments(conn, potelet):
+    """ return the attachments of a potelet by doing a sql request
+    """
+    values = [potelet["id"]]
+    sql = ''' SELECT * FROM attachments WHERE potelet_id=(?) '''
+    cur = conn.cursor()
+    cur.execute(sql, values)
+    attachments = [dict(attachment) for attachment in cur.fetchall()]
+    for attachment in attachments:
+        attachment["date"] = format_date(attachment["date"])
+        attachment["actor"] = format_actor(attachment["actor_type"], attachment["organisation"], attachment["department"])
+    return attachments
+
+def get_history(conn, potelet):
+    """ return the history of a potelet by doing a sql request
+    """
+    values = [potelet["id"]]
+    sql = ''' SELECT * FROM history WHERE potelet_id=(?) '''
+    cur = conn.cursor()
+    cur.execute(sql, values)
+    history = [dict(story) for story in cur.fetchall()]
+    for story in history:
+        story["date"] = format_date(story["date"])
+        story["actor"] = format_actor(story["actor_type"], story["organisation"], story["department"])
+    return history
+
+
+# --- Formating utility ---
+
+def format_date(date_str):
+    date = {}
+    date["day"] = date_str.split("T")[0]
+    date["time"] = date_str.split("T")[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
+
+
+# --- Main ---
 
 if __name__ == '__main__':
 
@@ -38,13 +120,11 @@ if __name__ == '__main__':
     with open(template_file, 'r') as file:
         template = Template(file.read())
 
-    print('Making sqlite request')
-    # sql = ''' SELECT * FROM potelets '''
-    sql = ''' SELECT * FROM attachments WHERE type="PICTURE" LIMIT 100 '''
-    cur = make_request(conn, sql)
+    print('Making the sqlite requests')
+    context = get_potelets(conn)
 
     print('Printing html layout in ' + layout_file)
-    html = template.render(context = cur)
+    html = template.render(context = context)
     with open(layout_file, 'w') as file:
         file.write(html)
 

layout/template.html

@@ -12,8 +12,82 @@
 </head>
 <body>
 
-    {% for img in context %}
-        <img src="{{ img.href }}">
+    {% for potelet in context %}
+
+        <div class="potelet">
+
+          <header>
+
+            <div class="onelineflex">
+              <h2> {{ potelet.id }} </h2>
+              <span> - Public furniture / Bollard / {{ potelet.subcat }} </span>
+              <a target="_blank" href="{{ potelet.url }}">↗</a>
+            </div>
+
+
+            <p>
+              <i>{{ potelet.adress }}</i> <br>
+              <small>(x: {{ potelet.coordinates.x }} , y: {{ potelet.coordinates.y }})</small>
+            </p>
+
+            <p>
+            STATUS: {{ potelet.status }} <br>
+            Last updated: {{ potelet.updatedDate.day }} at {{ potelet.updatedDate.time }}   <br>
+            Created: {{ potelet.creationDate.day }} at {{ potelet.creationDate.time }}
+            </p>
+
+            <p>
+            Organisation: {{ potelet.responsibleOrganisation }}   <br>
+            Department: {{ potelet.responsibleDepartment }}
+            </p>
+          </header>
+
+          <main>
+
+            <div class="attachments">
+              <h4>attachments</h4>
+              <ul>
+              {% for attachment in potelet.attachments %}
+                <li>
+                  <p>
+                  {{ attachment.type }} by {{ attachment.actor }}
+                  </p>
+
+                  {% if attachment.type == 'PICTURE' %}
+                    <img src="{{ attachment.href }}">
+                  {% elif attachment.type == 'COMMENT' %}
+                    <p class="comment">{{ attachment.text }}</p>
+                  {% elif ( attachment.type == 'SYSTEM_COMMENT' or
+                            attachment.type == 'DISMISSAL_COMMENT' or
+                            attachment.type == 'MERGE_COMMENT' or
+                            attachment.type == 'REOPEN_COMMENT') %}
+                    <p class="syscomment"> {{ attachment.text }}</p>
+                  {% endif %}
+
+                  <p class="date">{{ attachment.date.day }} at {{ attachment.date.time }}</p>
+                </li>
+              {% endfor %}
+              </ul>
+            </div>
+
+            <div class="history">
+              <h4>history</h4>
+              <ul>
+              {% for story in potelet.history %}
+                <li>
+                  <p>
+                  {{ story.type }} by {{ story.actor }}
+                  </p>
+                  <p class="date">{{ story.date.day }} at {{ story.date.time }}</p>
+                </li>
+              {% endfor %}
+              </ul>
+            </div>
+
+          </main>
+
+        </div>
+
     {% endfor %}
 
 </body>