test fix JS ChartJS import

the-maux · Dec 4, 2024 · 918516c · 918516c
1 parent b7d87ca
commit 918516c
Show file tree

Hide file tree

Showing 11 changed files with 173 additions and 37 deletions.
diff --git a/src/Chartboard/app/Config/properties.json b/src/Chartboard/app/Config/properties.json
@@ -1,7 +1,7 @@
 {
   "CHARTBOARD_TOKEN": "abd581219b534c21be6a3ebe7ae96fda",
   "CHARTBOARD_URL": "http://0.0.0.0:8080/api",
-  "DEFAULT_CONFIG": "stream",
+  "DEFAULT_CONFIG": "streams",
   "REDIS_HOST": "0.0.0.0",
   "REDIS_PASSWORD": null,
   "REDIS_PORT": 6379,

diff --git a/src/Chartboard/app/properties.py b/src/Chartboard/app/properties.py
@@ -16,11 +16,11 @@
 BASIC_LAYOUT = 'default_config.yaml'
 BASIC_CONFIG = os.path.join(CONF_DIR, PROPERTIES['default_config'] if 'default_config' in PROPERTIES else BASIC_LAYOUT)
 CHARTBOARD_CSS_STYLES = ['css/layout.css']
-CHARTBOARD_JAVASCRIPT_FILES = ['js/websocket.js',         # Websocket mecanic
-                             'js/style.js',             # color / responsiv / fliping mecanic
-                             'js/Chartboard.js',          # all the client Chartboard logic is here
-                             'tiles/chartjs.js',        # simplify the chartJs librari usage
-                             'tiles/text_value.js']     # handle all the other tiles mecanic (stream, txt, etc)
+CHARTBOARD_JAVASCRIPT_FILES = ['js/websocket.js',  # Websocket mecanic
+                               'js/style.js',  # color / responsiv / fliping mecanic
+                               'js/Chartboard.js',  # all the client Chartboard logic is here
+                               'tiles/chartjs.js',  # simplify the chartJs librari usage
+                               'tiles/text_value.js']  # handle all the other tiles mecanic (stream, txt, etc)
 FLIPBOARD_INTERVAL = PROPERTIES['FLIPBOARD_INTERVAL'] if 'FLIPBOARD_INTERVAL' in PROPERTIES else 10
 
 ALLOWED_TILES = ['text', 'simple_percentage', 'listing', 'big_value', 'just_value',  # Homemade
@@ -31,20 +31,20 @@
                  'iframe', 'stream', 'custom']  # misc
 
 COLOR_TAB = [  # material color
-    'rgba(66, 165, 245, 0.8)',      # blue #42a5f5
-    'rgba(114, 191, 68, 0.8)',      # green #72bf44
-    'rgba(0, 150, 136, 0.8)',       # teal #009688
-    'rgba(255, 234, 0, 0.8)',       # yellow #ffea00
-    'rgba(255, 152, 0, 0.8)',       # orange #ff9800
-    'rgba(213, 0, 0, 0.8)',         # red #d50000
-    'rgb(240, 98, 146)',            # pink #f06292
-    'rgba(224, 224, 224, 0.8)',     # Grey #e0e0e0
-    'rgb(177, 208, 225)',           # Light Blue #b1d0e1
-    'rgba(121, 85, 72, 0.8)',       # Marron #795548
-    'rgba(149, 117, 205, 0.8)',     # purple #9575cd
-    'rgb(224, 64, 251)',            # Light Purple #e040fb
-    'rgb(48, 79, 254)',             # Indigo #304ffe
-    'rgb(33, 33, 33)'               # Black #212121
+    'rgba(66, 165, 245, 0.8)',  # blue #42a5f5
+    'rgba(114, 191, 68, 0.8)',  # green #72bf44
+    'rgba(0, 150, 136, 0.8)',  # teal #009688
+    'rgba(255, 234, 0, 0.8)',  # yellow #ffea00
+    'rgba(255, 152, 0, 0.8)',  # orange #ff9800
+    'rgba(213, 0, 0, 0.8)',  # red #d50000
+    'rgb(240, 98, 146)',  # pink #f06292
+    'rgba(224, 224, 224, 0.8)',  # Grey #e0e0e0
+    'rgb(177, 208, 225)',  # Light Blue #b1d0e1
+    'rgba(121, 85, 72, 0.8)',  # Marron #795548
+    'rgba(149, 117, 205, 0.8)',  # purple #9575cd
+    'rgb(224, 64, 251)',  # Light Purple #e040fb
+    'rgb(48, 79, 254)',  # Indigo #304ffe
+    'rgb(33, 33, 33)'  # Black #212121
 ]
 BACKGROUND_TAB = ['#4caf50', '#ff6d00', '#d50000']
 print(f"[DEBUG] CHARTBOARD start in DEBUG MODE:{DEBUG} & LOG:{LOG}", flush=True)
diff --git a/src/Chartboard/app/routing.py b/src/Chartboard/app/routing.py
@@ -1,6 +1,6 @@
-from django.conf.urls import url
+from django.urls import re_path
 from src.Chartboard.app.views.wshandler import WSConsumer
 
 websocket_urlpatterns = [
-    url(r'^communication/websocket$', WSConsumer.as_asgi()),
+    re_path(r'^communication/websocket$', WSConsumer.as_asgi()),
 ]
diff --git a/src/Chartboard/app/views/api.py b/src/Chartboard/app/views/api.py
@@ -23,7 +23,7 @@ def get_tile(request, tile_key):
     if redis.exists(getRedisPrefix(tile_key)):
         if request.method == 'DELETE':
             redis.delete(tile_key)
-            httpMessage = 'Tile\'s data deleted.'
+            httpMessage = f"{tile_key}: tiles data deleted."
         if request.method == 'GET':
             httpMessage = redis.get(tile_key)
     else:

diff --git a/src/Chartboard/app/views/wshandler.py b/src/Chartboard/app/views/wshandler.py
@@ -10,29 +10,36 @@ class WSConsumer(WebsocketConsumer):
 
     def connect(self):
         async_to_sync(self.channel_layer.group_add)('event', self.channel_name)
-        self.accept()
+        res = self.accept()
+        print(f"(DEBUG) New connection Websocket accepted: {res}")
+
 
     def disconnect(self, close_code):
         async_to_sync(self.channel_layer.group_discard)('event', self.channel_name)
-        self.close()
+        res = self.close()
+        print(f"(DEBUG) Closing websocket accepted: {res}")
+
+    def update_tile_receive(self, tile_id, template_name=None):
+        """ Create or update the tile with value and send to the client with websocket """
+        tileData = MyCache().get(tile_id=getRedisPrefix(tile_id))
+        if tileData is None:
+            print(f'[DEBUG] Building fake data for {tile_id}. with template {template_name}', flush=True)
+            tileData = buildFakeDataFromTemplate(tile_id, template_name, MyCache())
+        res = self.send(text_data=tileData)
+        print(f"(DEBUG) Update_tile_receive for {tile_id}")
 
     def receive(self, text_data, **kwargs):
         """ handle msg sended by client, by 2 way: update all tiles or update 1 specific tile """
+        print(f"(DEBUG) Websocket receive")
         if 'first_connection:' in text_data:
+            print(f"(DEBUG) first_connection: websocket")
             listOftiles = listOfTilesFromLayout(text_data.replace('first_connection:/', ''))
             for tileId in listOftiles:
                 self.update_tile_receive(tile_id=tileId, template_name=listOftiles[tileId]['tile_template'])
         else:
             for tile_id in MyCache().listOfTilesCached():
                 self.update_tile_receive(tile_id=tile_id)
 
-    def update_tile_receive(self, tile_id, template_name=None):
-        """ Create or update the tile with value and send to the client with websocket """
-        tileData = MyCache().get(tile_id=getRedisPrefix(tile_id))
-        if tileData is None:
-            print(f'[DEBUG] Building fake data for {tile_id}. with template {template_name}', flush=True)
-            tileData = buildFakeDataFromTemplate(tile_id, template_name, MyCache())
-        self.send(text_data=tileData)
 
     def update_tile(self, data):
         """ send to client a single tile config """

diff --git a/src/Chartboard/static/js/Chartboard.js b/src/Chartboard/static/js/Chartboard.js
@@ -126,7 +126,7 @@ function initCHARTBOARDObject() {
 (function ($) {
     $(document).ready(function () {
         initCHARTBOARDObject();
-        if (window.location.pathname === "/") {
+        if (window.location.pathname === "/") { // Flipboard mode activated
             initFlipboard();
             getDashboardsByApi();
         } else { // No dashboard rotation

diff --git a/src/Chartboard/static/js/websocket.js b/src/Chartboard/static/js/websocket.js
@@ -125,7 +125,7 @@ function initWebSocketManager() {
     };
     websocket.sendmessage = async function(nextDashboardPath) {
         while (this.readyState === 0) {
-            await sleep(200);
+            await sleep(2000);
         }
         this.send("first_connection:" + nextDashboardPath);
         websocket.lastDashboard = nextDashboardPath.substring(1);

diff --git a/src/Chartboard/templates/base_template.html b/src/Chartboard/templates/base_template.html
@@ -14,9 +14,9 @@
 
 
 <!-- <script type="text/javascript" src="https://raw.githack.com/the-maux/Chartboard-CDN/master/popper.min.js"></script>-->
-        <script src="https://unpkg.com/@popperjs/core@2"></script>
 
-        <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+
+
 <!-- <script type="text/javascript" src="https://raw.githack.com/the-maux/Chartboard-CDN/master/chart.bundle.js"></script>-->
 
 

diff --git a/src/Chartboard/templates/base_template_new.html b/src/Chartboard/templates/base_template_new.html
@@ -0,0 +1,81 @@
+{% load static %}
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+        <title>Chartboard</title>
+
+        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
+
+
+<!-- <script type="text/javascript" src="https://raw.githack.com/the-maux/Chartboard-CDN/master/jquery-3.4.1.min.js"></script>-->
+        <script type="text/javascript" src="https://webapps1.chicago.gov/cdn/jQuery-3.4.1/jquery-3.4.1.min.js"></script>
+
+
+<!-- <script type="text/javascript" src="https://raw.githack.com/the-maux/Chartboard-CDN/master/popper.min.js"></script>-->
+
+
+
+<!-- <script type="text/javascript" src="https://raw.githack.com/the-maux/Chartboard-CDN/master/chart.bundle.js"></script>-->
+
+
+<!--<script type="text/javascript" src="https://raw.githack.com/the-maux/Chartboard-CDN/master/chartjs-plugin-trendline.min.js"></script>-->
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-trendline/dist/chartjs-plugin-trendline.min.js"></script>
+
+
+<!--<script type="text/javascript" src="https://raw.githack.com/the-maux/Chartboard-CDN/master/chartjs-plugin-labels.min.js"></script>-->
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/emn178/chartjs-plugin-labels/src/chartjs-plugin-labels.js"></script>
+
+
+<!--<script type="text/javascript" src="https://raw.githack.com/the-maux/Chartboard-CDN/master/chartjs-plugin-tsgauge.js"></script>-->
+<!--<script type="text/javascript" src="https://raw.githubusercontent.com/kluverua/Chartjs-tsgauge/refs/heads/master/Gauge.js"></script>!!!!!!!!!!!!-->
+
+
+<!--<script type="text/javascript" src="https://raw.githack.com/the-maux/Chartboard-CDN/master/chartjs-plugin-radialgauge.js"></script>-->
+<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.min.js"></script> LA VERSION EST LA BONNE ?-->
+ <!--   <script src="node_modules/chartjs-chart-radial-gauge/build/Chart.RadialGauge.umd.min.js"></script>-->
+
+
+
+<!--<script type="text/javascript" src="https://raw.githack.com/the-maux/Chartboard-CDN/master/chart-plugin-test-linearradial.js"></script>-->
+
+
+
+
+        <!-- ------------------------------------------------------------------------------------------------------- -->
+        <!--        <link type="text/css" rel="stylesheet" href="https://raw.githack.com/the-maux/Chartboard-CDN/master/bootstrap.min.css">-->
+        <!-- Latest compiled and minified CSS -->
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+
+        <!-- Optional theme -->
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
+
+        <!-- Latest compiled and minified JavaScript -->
+        <!--<script type="text/javascript" src="https://raw.githack.com/the-maux/Chartboard-CDN/master/bootstrap.min.js"></script>-->
+        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
+
+
+    <!-- ------------------------------------------------------------------------------------------------------- -->
+
+
+
+
+
+        {% for file in CHARTBOARD_css %}
+            <link href="{% static file %}" rel="stylesheet" media="screen">
+        {% endfor %}
+        {% for file in CHARTBOARD_js %}
+            <script type="text/javascript" src="{% static file %}"></script>
+        {% endfor %}
+        {% block head %} {% endblock %}
+
+    </head>
+
+    <body class="flipboard fadeIn">
+        <div class="sticky-top alert alert-danger bouton-image monBouton" id="alertDeconnection"></div>
+        {% block put_body %} {% endblock %}
+    <script> $("#alertDeconnection").hide(); </script>
+    </body>
+</html>
diff --git a/src/Chartboard/templates/tiles/base_template_old.html b/src/Chartboard/templates/tiles/base_template_old.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+        <title>Chartboard</title>
+        <link type="text/css" rel="stylesheet" href="https://raw.githack.com/the-maux/Chartboard-CDN/master/bootstrap.min.css">
+        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
+        <script type="text/javascript" src="https://raw.githack.com/the-maux/Chartboard-CDN/master/jquery-3.4.1.min.js"></script>
+        <script type="text/javascript" src="https://raw.githack.com/the-maux/Chartboard-CDN/master/popper.min.js"></script>
+        <script type="text/javascript" src="https://raw.githack.com/the-maux/Chartboard-CDN/master/bootstrap.min.js"></script>
+        <script type="text/javascript" src="https://raw.githack.com/the-maux/Chartboard-CDN/master/chart.bundle.js"></script>
+        <script type="text/javascript" src="https://raw.githack.com/the-maux/Chartboard-CDN/master/chartjs-plugin-trendline.min.js"></script>
+        <script type="text/javascript" src="https://raw.githack.com/the-maux/Chartboard-CDN/master/chartjs-plugin-labels.min.js"></script>
+        <script type="text/javascript" src="https://raw.githack.com/the-maux/Chartboard-CDN/master/chartjs-plugin-tsgauge.js"></script>
+        <script type="text/javascript" src="https://raw.githack.com/the-maux/Chartboard-CDN/master/chartjs-plugin-radialgauge.js"></script>
+        <script type="text/javascript" src="https://raw.githack.com/the-maux/Chartboard-CDN/master/chart-plugin-test-linearradial.js"></script>
+
+
+            <link href="/static/css/layout.css" rel="stylesheet" media="screen">
+
+
+            <script type="text/javascript" src="/static/js/websocket.js"></script>
+
+            <script type="text/javascript" src="/static/js/style.js"></script>
+
+            <script type="text/javascript" src="/static/js/Chartboard.js"></script>
+
+            <script type="text/javascript" src="/static/tiles/chartjs.js"></script>
+
+            <script type="text/javascript" src="/static/tiles/text_value.js"></script>
+
+
+
+    </head>
+
+    <body class="flipboard fadeIn">
+        <div class="sticky-top alert alert-danger bouton-image monBouton" id="alertDeconnection"></div>
+
+
+      <div data-fliptime-interval="10" id="CarboardIframe">
+
+      </div>
+
+
+    <script> $("#alertDeconnection").hide(); </script>
+    </body>
+</html>
diff --git a/src/Chartboard/webserver/routing.py b/src/Chartboard/webserver/routing.py
@@ -5,7 +5,7 @@
 application = ProtocolTypeRouter({
     'websocket': AuthMiddlewareStack(
         URLRouter(
-            src.CHARTBOARD.app.routing.websocket_urlpatterns
+            routing.websocket_urlpatterns
         )
     )
 })