Просмотр исходного кода

use html progress element for progress

Daniel Sheffield 1 год назад
Родитель
Сommit
da126b6105
3 измененных файлов с 30 добавлено и 20 удалено
  1. 5 6
      app/rest/templates/loading.tpl
  2. 13 1
      app/rest/templates/progress.tpl
  3. 12 13
      app/rest/trend.py

+ 5 - 6
app/rest/templates/loading.tpl

@@ -1,5 +1,9 @@
 <html>
   <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/purecss@2.1.0/build/pure-min.css" integrity="sha384-yHIFVG6ClnONEA5yB5DJXfW2/KC173DIQrYoZMEtBvGzmf0PKiGyNEqe9N6BNDBH" crossorigin="anonymous"/>
+    <link rel="stylesheet" href="https://shandan.one/css/grids-responsive-min.css"/>
+    <link rel="stylesheet" href="https://shandan.one/css/responsive-visibility-collapse.css"/>
     <link rel="stylesheet" href="/grocery/static/cloud-gears.css"/>
     <style>
 body {
@@ -15,12 +19,7 @@ body {
   </head>
   <body>
     <div class="loader-container">
-      <span class="loader"></span>
-      <%
-      for indicator in progress:
-          include('progress', **indicator)
-      end
-      %>
+    % include('progress', **progress)
     </div>
     <meta http-equiv="Refresh" content="0.2;" />
   </body>

+ 13 - 1
app/rest/templates/progress.tpl

@@ -1,3 +1,15 @@
+<style>
+div.progress {
+    display:grid;
+    grid-template-columns: max-content max-content;
+    grid-gap:5px;
+}
+div.progress label       { text-align:left; }
+div.progress label:after { content: {{"..." if not complete else ""}}; }
+</style>
 <p>
-{{name}}... {{status}}
+  <div class="progress">
+    <label for="loading">{{stage}}</label>
+    <progress id="loading" value="{{percent}}" max="100"></progress>
+  </div>
 </p>

+ 12 - 13
app/rest/trend.py

@@ -44,7 +44,11 @@ def trend(queue: Queue, conn: Connection[TupleRow], path: str, query: FormsDict)
     queue.put(None)
 
 def trend_internal(conn: Connection[TupleRow], path: str, query: FormsDict):
-    progress = []
+    progress = {
+        'stage': None,
+        'percent': None,
+        'complete': False,
+    }
     try:
         with conn.cursor() as cur:
             query_manager = QueryManager(cur, display_mapper)
@@ -59,12 +63,10 @@ def trend_internal(conn: Connection[TupleRow], path: str, query: FormsDict):
                 yield abort(400, f"Unsupported unit {unit}")
                 return
 
-            progress.append({ "name": "Loading data", "status": ""})
+            progress.update({ "stage": "Querying database", "percent": "10"})
             yield template("loading", progress=progress)
             data = get_data(query_manager, **fields)
-            progress[-1]["status"] = "done"
-            yield template("loading", progress=progress)
-
+            
             if data.empty:
                 yield abort(404, f"No data for {fields}")
                 return
@@ -72,7 +74,7 @@ def trend_internal(conn: Connection[TupleRow], path: str, query: FormsDict):
             in_chart = data['$/unit'].apply(lambda x: (x or False) and True)
             data = data[in_chart]
             
-            progress.append({ "name": "Loading chart", "status": ""})
+            progress.update({ "stage": "Preparing data", "percent": "30"})
             yield template("loading", progress=progress)
             
             pivot = data.pivot_table(index=['ts_raw',], columns=['product',], values=['$/unit'], aggfunc='mean')
@@ -115,21 +117,18 @@ def trend_internal(conn: Connection[TupleRow], path: str, query: FormsDict):
             for _, spine in ax.spines.items():
                 spine.set_color('#ffffff')
             
-            progress[-1]["status"] = "done"
+            progress.update({ "stage": "Rendering chart", "percent": "50"})
             yield template("loading", progress=progress)
             
-            progress.append({ "name": "Rendering chart", "status": ""})
-            yield template("loading", progress=progress)
-
             f = StringIO()
             plt.savefig(f, format='svg')
+            progress.update({ "stage": "Done", "percent": "100", "complete": True})
+            yield template("loading", progress=progress)
+            
             organic = BOOLEAN.get(query.organic, None)
             action = path.split('/')[-1]
             form = get_form(action, 'post', _filter, organic, data)
             
-            progress[-1]["status"] = "done"
-            yield template("loading", progress=progress)
-            
             yield template("trend", form=form, svg=f.getvalue())
 
     finally: