charts & recent activity data moved to front-end on ajax request

app/app/templates/new/public/dashboard.html

@@ -149,23 +149,7 @@
                     <th scope="col">Message</th>
                   </tr>
                 </thead>
-                <tbody>
-                  <tr>
-	  	    {% for ra in recent_activity %}
-                    <th scope="row">
-		    	{{ ra[1] }}
-                    </th>
-                    <td>
-			{{ ra[2] }}
-                    </td>
-                    <td>
-                      	{{ ra[0] }}
-                    </td>
-                    <td>
-                      	{{ ra[3] }}
-                    </td>
-                  </tr>
-		  {% endfor %}
+                <tbody id="recent_activity_body">
                 </tbody>
               </table>
             </div>
@@ -176,63 +160,12 @@
 
 {% block script %}
   <script type="text/javascript">
-  OrdersChart = function ()
-  	{
-  		var e, a, t = $("#chart-orders");
-  		$('[name="ordersSelect"]');
-  		t.length && (e = t, a = new Chart(e,
-  		{
-  			type: "bar",
-  			options:
-  			{
-  				scales:
-  				{
-  					yAxes: [
-  					{
-  						gridLines:
-  						{
-  							lineWidth: 1,
-  							color: "#dfe2e6",
-  							zeroLineColor: "#dfe2e6"
-  						},
-  						ticks:
-  						{
-  							callback: function (e)
-  							{
-  								if (!(e % 10)) return e
-  							}
-  						}
-  					}]
-  				},
-  				tooltips:
-  				{
-  					callbacks:
-  					{
-  						label: function (e, a)
-  						{
-  							var t = a.datasets[e.datasetIndex].label || "",
-  								o = e.yLabel,
-  								n = "";
-  							return 1 < a.datasets.length && (n += '<span class="popover-body-label mr-auto">' + t + "</span>"), n += '<span class="popover-body-value">' + o + "</span>"
-  						}
-  					}
-  				}
-  			},
-  			data:
-  			{
-				labels: {{ week_chart[0]|safe }},
-  				datasets: [
-  				{
-  					label: "Sales",
-					data: {{ week_chart[1] }}
-  				}]
-  			}
-  		}), e.data("chart", a))
-  	}(),
-  	SalesChart = function ()
-  	{
-  		var e, a, t = $("#chart-sales");
-  		t.length && (e = t, a = new Chart(e,
+	(function worker() {
+		var e = $("#chart-sales");
+		var e1 = $("#chart-orders");
+		$.get('./chart-update', function(cdata) {
+			cdata = eval(cdata);
+			var a = new Chart(e,
 			{
 				type: "line",
 				options:
@@ -265,22 +198,19 @@
 				},
 				data:
 				{
-																							      labels: {{ day_chart[0] }},
+																								      labels: cdata[0][0],
 					datasets: [
 					{
 						label: "Performance",
-					data: {{ day_chart[1] }} 
+						data: cdata[0][1]
 					}]
 				}
-  		}), e.data("chart", a))
-  	}();
-	(function worker() {
-		var e = $("#chart-sales");
-		$.get('./chart-update', function(cdata) {
-			cdata = eval(cdata);
-			var a = new Chart(e,
+			});	
+			e.data("chart", a);
+
+			var a1 = new Chart(e1,
 			{
-				type: "line",
+				type: "bar",
 				options:
 				{
 					scales:
@@ -290,8 +220,15 @@
 							gridLines:
 							{
 								lineWidth: 1,
-								color: Charts.colors.gray[900],
-								zeroLineColor: Charts.colors.gray[900]
+								color: "#dfe2e6",
+								zeroLineColor: "#dfe2e6"
+							},
+							ticks:
+							{
+								callback: function (e)
+								{
+									if (!(e % 10)) return e
+								}
 							}
 						}]
 					},
@@ -311,18 +248,23 @@
 				},
 				data:
 				{
-																								      labels: cdata[0],
+					labels: cdata[1][0],
 					datasets: [
 					{
-						label: "Performance",
-						data: cdata[1]
+						label: "Sales",
+						data: cdata[1][1]
 					}]
 				}
 			});
-			e.data("chart", a);
+			e1.data("chart", a1);
+
 			setTimeout(worker, 600000);
 		});
 	})();
 	
+	$.get("./recent-activity", function(cdata) {
+		$("#recent_activity_body").html(cdata);
+	});
+	
   </script>
 {% endblock %}

app/app/templates/new/public/login.html

@@ -59,7 +59,7 @@
           <div class="row justify-content-center">
             <div class="col-lg-5 col-md-6">
               <h1 class="text-white">Welcome!</h1>
-              <p class="text-lead text-light">Log in to discover all the powerful functionality of lightweight HPC&amp; IoT Server</p>
+              <p class="text-lead text-light">Log in to enjoy all the powerful functionality of lightweight HPC&amp;A IoT Server</p>
             </div>
           </div>
         </div>

app/app/templates/new/public/register.html

@@ -59,7 +59,7 @@
           <div class="row justify-content-center">
             <div class="col-lg-5 col-md-6">
               <h1 class="text-white">Welcome!</h1>
-              <p class="text-lead text-light">Use these awesome forms to login or create new account in your project for free.</p>
+              <p class="text-lead text-light">Sign in to discover all the powerful functionality of lightweight HPC&amp;A IoT Server</p>
             </div>
           </div>
         </div>

app/app/views.py

@@ -33,10 +33,16 @@ def index():
         active_devices = dd.get_count_by_user(session['name'])
         total_activity = md.get_user_data_count(session['name'])[1][0]
         last_activity = md.get_user_data_count_per_day(session['name'])[1][0]
-        recent_activity = md.get_recent_activity(session['name'])[1]
-        print (recent_activity)
         info = [created_apps, active_devices, total_activity, last_activity]
 
+        return render_template('new/public/dashboard.html', info=info)
+        
+    else:
+        return render_template('new/public/login.html', users_signup=app.config['USERS_SIGNUP'])
+
+@app.route('/chart-update')
+def chart_update():
+    if 'name' in session:
         day_chart_values = md.get_user_data_count_per_hour_period(session['name'], 11)[1]
         day_chart_values = [x[0] for x in day_chart_values]
         day_chart_labels = [misc.local_hour(x) for x in range(11,-1,-1)]
@@ -47,19 +53,22 @@ def index():
         week_chart_labels = [misc.local_weekday(x) for x in range(6,-1,-1)]
         week_chart = [week_chart_labels, week_chart_values]
         
-        return render_template('new/public/dashboard.html', info=info, recent_activity=recent_activity, day_chart=day_chart, week_chart=week_chart)
-        
+        return "[{}, {}]".format(day_chart, week_chart)
     else:
-        return render_template('new/public/login.html', users_signup=app.config['USERS_SIGNUP'])
+        return '', 401
 
-@app.route('/chart-update')
-def chart_update():
-    day_chart_values = md.get_user_data_count_per_hour_period(session['name'], 11)[1]
-    day_chart_values = [x[0] for x in day_chart_values]
-    day_chart_labels = [misc.local_hour(x) for x in range(11,-1,-1)]
-    day_chart = [day_chart_labels, day_chart_values]
-    return "{}".format(day_chart)
+@app.route('/recent-activity')
+def recent_activity():
+    if 'name' in session:
+        recent_activity = md.get_recent_activity(session['name'])[1]
+        ra = ''
         
+        for r in recent_activity:
+            ra += '<tr><th scope="row">'+r[1]+'</th><th>'+r[2]+'</th><th>'+r[0]+'</th><th>'+str(r[3])+'</th></tr>'
+
+        return ra, 200
+    else:
+        return '', 401
 
 @app.route('/register', methods=['GET', 'POST'])
 def register():