Improve TraderoBot UI/UX

- Add UI for logs

base/templates/base/botzinhos_detail.html

@@ -62,6 +62,9 @@ <h6 class="text-center">
 
 		<h4>Actions</h4>
 		<ul>
+			<li>
+				<a class="btn btn-warning" href="{% url "base:botzinhos-logs" bot.pk %}">View Logs</a>
+			</li>
 			<li>
 				<a class="btn btn-warning" href="{% url "base:botzinhos-update" bot.pk %}">Update</a>
 			</li>

base/templates/base/botzinhos_logs.html

@@ -0,0 +1,75 @@
+{% extends "base/base.html" %}
+
+{% load bootstrap5 mathfilters symbols %}
+
+{% block title %}
+	Botzinhos (小bots)
+{% endblock title %}
+
+{% block content %}
+	<div class="container">
+		<h6 class="text-center">
+			<span id="date"></span> |
+			<strong id="clock" class="text-primary"></strong>
+			<strong>UTC</strong> - Time Interval: <span class="text-primary fw-bolder">| {{ time_interval }}m |</span>
+		</h6>
+
+		{% groups_breadcrumbs request.user %}
+
+		<div id="bots-list" class="list-group pt-2">
+			{% bot_render_html_snippet bot=bot %}
+		</div>
+
+	{% include "base/logs_section.html" with summary=summary logs=logs page_obj=page_obj %}
+
+{% endblock content %}
+
+{% block bootstrap5_extra_script %}
+    <script>
+    	if (location.protocol === "http:") {
+    		ws_protocol = "ws:"
+    	} else {
+    		ws_protocol = "wss:"
+    	}
+
+        const botsSocket = new WebSocket(
+            ws_protocol + '//'
+            + window.location.host
+            + '/ws/bots/html'
+        );
+
+        botsSocket.onmessage = function(e) {
+            const data = JSON.parse(e.data);
+            // console.log(data)
+            if (data.type === "bot_update") {
+            	bot_element = document.getElementById(data.bot)
+            	if (bot_element) {
+            		bot_element.outerHTML = data.text;
+            	}
+            }
+        };
+
+        botsSocket.onclose = function(e) {
+            console.error('Bots socket closed unexpectedly');
+        };
+
+        function currentTime() {
+		  let date = new Date();
+		  let hh = date.getUTCHours();
+		  let mm = date.getUTCMinutes();
+		  let ss = date.getUTCSeconds();
+
+		   hh = (hh < 10) ? "0" + hh : hh;
+		   mm = (mm < 10) ? "0" + mm : mm;
+		   ss = (ss < 10) ? "0" + ss : ss;
+
+		   let time = hh + ":" + mm + ":" + ss;
+
+		  document.getElementById("clock").innerText = time;
+		  document.getElementById("date").innerText = date.toLocaleDateString("en-US", {year: 'numeric', month: 'long', day: 'numeric' });
+		  let t = setTimeout(function(){ currentTime() }, 1000);
+		}
+
+		currentTime();
+    </script>
+{% endblock %}

base/templates/base/logs_section.html

@@ -0,0 +1,15 @@
+<div class="container">
+
+    <h4>Logs</h4>
+
+	<div id="logs-list" class="list-group">
+	{% for log in page_obj %}
+		{{ log.timestamp|date:"r" }}| {{ log.message }} <br>
+	{% endfor %}
+	</div>
+
+    <div class="container">
+        {% include "base/_paginator.html" with page_obj=page_obj %}
+    </div>
+
+</div>

base/tests.py

@@ -225,6 +225,12 @@ def test_botzinhos_list(self):
         response = self.client.get(url)
         self.assertEqual(response.status_code, 200)
 
+    def test_botzinhos_logs(self):
+        self.client.force_login(self.user1)
+        url = reverse("base:botzinhos-logs", args=[self.bot1.pk])
+        response = self.client.get(url)
+        self.assertEqual(response.status_code, 200)
+
     def test_botzinhos_detail(self):
         self.client.force_login(self.user2)
         url = reverse("base:botzinhos-detail", args=[self.bot1.pk])

base/urls.py

@@ -60,6 +60,11 @@ def default_rate_limit(v):
         default_rate_limit(base_views.BotzinhosUpdateView.as_view()),
         name="botzinhos-update",
     ),
+    path(
+        "Botzinhos/<pk>/Bitácula",
+        default_rate_limit(base_views.BotzinhosLogsView.as_view()),
+        name="botzinhos-logs",
+    ),
     path(
         "Botzinhos/<pk>",
         default_rate_limit(base_views.BotzinhosDetailView.as_view()),

base/views.py

@@ -129,6 +129,25 @@ def get_context_data(self, **kwargs):
         return context
 
 
+class BotzinhosLogsView(OwnerMixin, LoginRequiredMixin, DetailView):
+    model = TraderoBot
+    template_name = "base/botzinhos_logs.html"
+    context_object_name = "bot"
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        logs = self.object.logs.all().order_by("-id")
+        #
+        paginator = Paginator(logs, 30)
+        page_number = self.request.GET.get("page", 1)
+        page_obj = paginator.get_page(page_number)
+        #
+        context["page_obj"] = page_obj
+        context["time_interval"] = settings.TIME_INTERVAL_BOTS
+
+        return context
+
+
 class BotzinhosCreateView(LoginRequiredMixin, CreateView):
     model = TraderoBot
     form_class = TraderoBotForm