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,106 +160,9 @@
 
 {% 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,
-  		{
-  			type: "line",
-  			options:
-  			{
-  				scales:
-  				{
-  					yAxes: [
-  					{
-  						gridLines:
-  						{
-  							lineWidth: 1,
-  							color: Charts.colors.gray[900],
-  							zeroLineColor: Charts.colors.gray[900]
-  						}
-  					}]
-  				},
-  				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: {{ day_chart[0] }},
-  				datasets: [
-  				{
-  					label: "Performance",
-					data: {{ day_chart[1] }} 
-  				}]
-  			}
-  		}), e.data("chart", a))
-  	}();
 	(function worker() {
 		var e = $("#chart-sales");
+		var e1 = $("#chart-orders");
 		$.get('./chart-update', function(cdata) {
 			cdata = eval(cdata);
 			var a = new Chart(e,
@@ -311,18 +198,73 @@
 				},
 				data:
 				{
-																								      labels: cdata[0],
+																								      labels: cdata[0][0],
 					datasets: [
 					{
 						label: "Performance",
-						data: cdata[1]
+						data: cdata[0][1]
 					}]
 				}
-			});
+			});	
 			e.data("chart", a);
+
+			var a1 = new Chart(e1,
+			{
+				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: cdata[1][0],
+					datasets: [
+					{
+						label: "Sales",
+						data: cdata[1][1]
+					}]
+				}
+			});
+			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)]
@@ -46,20 +52,23 @@ def index():
         week_chart_values = [x[0] for x in week_chart_values]
         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():