[change] Switched to prettier

openwisp · Jan 25, 2025 · 050929f · 050929f
1 parent 0200b6c
commit 050929f
Show file tree

Hide file tree

Showing 15 changed files with 1,423 additions and 1,092 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -66,7 +66,7 @@ jobs:
           pip install -U -I -e .
           pip uninstall -y django
           pip install -U ${{ matrix.django-version }}
-          sudo npm install -g jshint stylelint
+          sudo npm install -g prettier
 
           # start influxdb
           docker compose up -d influxdb

diff --git a/.jshintrc b/.jshintrc
diff --git a/.jshintignore → .prettierignore b/.jshintignore → .prettierignore
diff --git a/.stylelintignore b/.stylelintignore
diff --git a/.stylelintrc.json b/.stylelintrc.json
diff --git a/docs/developer/installation.rst b/docs/developer/installation.rst
@@ -69,7 +69,7 @@ Install development dependencies:
 
     pip install -e .
     pip install -r requirements-test.txt
-    npm install -g jshint stylelint
+    npm install -g prettier
 
 Install WebDriver for Chromium for your browser version from
 https://chromedriver.chromium.org/home and extract ``chromedriver`` to one

diff --git a/openwisp_monitoring/device/static/monitoring/css/percircle.min.css b/openwisp_monitoring/device/static/monitoring/css/percircle.min.css
@@ -1 +1,220 @@
-.percircle.dark{background-color:#777}.percircle.dark .bar,.percircle.dark .fill{border-color:#c6ff00}.percircle.dark>span{color:#777}.percircle.dark:after{background-color:#555}.percircle.dark:hover>span{color:#c6ff00}.percircle.red .bar,.percircle.red .fill{border-color:#dd5454}.percircle.red:hover>span{color:#dd5454}.percircle.red.dark .bar,.percircle.red.dark .fill{border-color:#f84a4a}.percircle.red.dark:hover>span{color:#f84a4a}.percircle.blue .bar,.percircle.blue .fill{border-color:#82cefa}.percircle.blue:hover>span{color:#82cefa}.percircle.blue.dark .bar,.percircle.blue.dark .fill{border-color:#20cceb}.percircle.blue.dark:hover>span{color:#20cceb}.percircle.green .bar,.percircle.green .fill{border-color:#8dea7b}.percircle.green:hover>span{color:#8dea7b}.percircle.green.dark .bar,.percircle.green.dark .fill{border-color:#a9ff3a}.percircle.green.dark:hover>span{color:#a9ff3a}.percircle.orange .bar,.percircle.orange .fill{border-color:#e88239}.percircle.orange:hover>span{color:#e88239}.percircle.orange.dark .bar,.percircle.orange.dark .fill{border-color:#dc5b00}.percircle.orange.dark:hover>span{color:#dc5b00}.percircle.pink .bar,.percircle.pink .fill{border-color:#ff8ed0}.percircle.pink:hover>span{color:#ff8ed0}.percircle.pink.dark .bar,.percircle.pink.dark .fill{border-color:#ff58b9}.percircle.pink.dark:hover>span{color:#ff58b9}.percircle.purple .bar,.percircle.purple .fill{border-color:#aa7eff}.percircle.purple:hover>span{color:#aa7eff}.percircle.purple.dark .bar,.percircle.purple.dark .fill{border-color:#7a38f7}.percircle.purple.dark:hover>span{color:#7a38f7}.percircle.yellow .bar,.percircle.yellow .fill{border-color:#dcbd00}.percircle.yellow:hover>span{color:#dcbd00}.percircle.yellow.dark .bar,.percircle.yellow.dark .fill{border-color:#ffdb00}.percircle.yellow.dark:hover>span{color:#ffdb00}.percircle.gt50 .slice,.rect-auto{clip:rect(auto,auto,auto,auto)}.gt50 .fill,.percircle .bar,.pie{position:absolute;border:.08em solid #307bbb;width:.84em;height:.84em;clip:rect(0,.5em,1em,0);border-radius:50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}.bar{-webkit-backface-visibility:hidden;backface-visibility:hidden}.gt50 .bar:after,.gt50 .fill,.pie-fill{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.percircle{position:relative;font-size:120px;width:1em;height:1em;border-radius:50%;float:left;margin:0 .1em .1em 0;background-color:#ccc}.percircle *,.percircle :after,.percircle :before{box-sizing:content-box}.percircle.animate:after,.percircle.animate>span{-webkit-transition:-webkit-transform .2s ease-in-out;transition:transform .2s ease-in-out}.percircle.animate .bar{-webkit-transition:-webkit-transform .6s ease-in-out;transition:transform .6s ease-in-out}.percircle.center{float:none;margin:0 auto}.percircle.big{font-size:240px}.percircle.small{font-size:80px}.percircle>span{position:absolute;z-index:1;width:100%;top:50%;top:calc(50% - .1em);transform:translateY(-50%);height:1em;font-size:.2em;color:#ccc;display:block;text-align:center;white-space:nowrap}.perclock>span{font-size:.175em}.percircle:after{position:absolute;top:.08em;left:.08em;display:block;content:" ";border-radius:50%;background-color:#f5f5f5;width:.84em;height:.84em}.percircle .slice{position:absolute;width:1em;height:1em;clip:rect(0,1em,1em,.5em)}.percircle:hover{cursor:default}.percircle:hover>span{-webkit-transform:scale(1.3) translateY(-50%);transform:scale(1.3) translateY(-50%);color:#307bbb}.percircle:hover:after{-webkit-transform:scale(1.1);transform:scale(1.1)}
+.percircle.dark {
+  background-color: #777;
+}
+.percircle.dark .bar,
+.percircle.dark .fill {
+  border-color: #c6ff00;
+}
+.percircle.dark > span {
+  color: #777;
+}
+.percircle.dark:after {
+  background-color: #555;
+}
+.percircle.dark:hover > span {
+  color: #c6ff00;
+}
+.percircle.red .bar,
+.percircle.red .fill {
+  border-color: #dd5454;
+}
+.percircle.red:hover > span {
+  color: #dd5454;
+}
+.percircle.red.dark .bar,
+.percircle.red.dark .fill {
+  border-color: #f84a4a;
+}
+.percircle.red.dark:hover > span {
+  color: #f84a4a;
+}
+.percircle.blue .bar,
+.percircle.blue .fill {
+  border-color: #82cefa;
+}
+.percircle.blue:hover > span {
+  color: #82cefa;
+}
+.percircle.blue.dark .bar,
+.percircle.blue.dark .fill {
+  border-color: #20cceb;
+}
+.percircle.blue.dark:hover > span {
+  color: #20cceb;
+}
+.percircle.green .bar,
+.percircle.green .fill {
+  border-color: #8dea7b;
+}
+.percircle.green:hover > span {
+  color: #8dea7b;
+}
+.percircle.green.dark .bar,
+.percircle.green.dark .fill {
+  border-color: #a9ff3a;
+}
+.percircle.green.dark:hover > span {
+  color: #a9ff3a;
+}
+.percircle.orange .bar,
+.percircle.orange .fill {
+  border-color: #e88239;
+}
+.percircle.orange:hover > span {
+  color: #e88239;
+}
+.percircle.orange.dark .bar,
+.percircle.orange.dark .fill {
+  border-color: #dc5b00;
+}
+.percircle.orange.dark:hover > span {
+  color: #dc5b00;
+}
+.percircle.pink .bar,
+.percircle.pink .fill {
+  border-color: #ff8ed0;
+}
+.percircle.pink:hover > span {
+  color: #ff8ed0;
+}
+.percircle.pink.dark .bar,
+.percircle.pink.dark .fill {
+  border-color: #ff58b9;
+}
+.percircle.pink.dark:hover > span {
+  color: #ff58b9;
+}
+.percircle.purple .bar,
+.percircle.purple .fill {
+  border-color: #aa7eff;
+}
+.percircle.purple:hover > span {
+  color: #aa7eff;
+}
+.percircle.purple.dark .bar,
+.percircle.purple.dark .fill {
+  border-color: #7a38f7;
+}
+.percircle.purple.dark:hover > span {
+  color: #7a38f7;
+}
+.percircle.yellow .bar,
+.percircle.yellow .fill {
+  border-color: #dcbd00;
+}
+.percircle.yellow:hover > span {
+  color: #dcbd00;
+}
+.percircle.yellow.dark .bar,
+.percircle.yellow.dark .fill {
+  border-color: #ffdb00;
+}
+.percircle.yellow.dark:hover > span {
+  color: #ffdb00;
+}
+.percircle.gt50 .slice,
+.rect-auto {
+  clip: rect(auto, auto, auto, auto);
+}
+.gt50 .fill,
+.percircle .bar,
+.pie {
+  position: absolute;
+  border: 0.08em solid #307bbb;
+  width: 0.84em;
+  height: 0.84em;
+  clip: rect(0, 0.5em, 1em, 0);
+  border-radius: 50%;
+  -webkit-transform: rotate(0deg);
+  transform: rotate(0deg);
+}
+.bar {
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+.gt50 .bar:after,
+.gt50 .fill,
+.pie-fill {
+  -webkit-transform: rotate(180deg);
+  transform: rotate(180deg);
+}
+.percircle {
+  position: relative;
+  font-size: 120px;
+  width: 1em;
+  height: 1em;
+  border-radius: 50%;
+  float: left;
+  margin: 0 0.1em 0.1em 0;
+  background-color: #ccc;
+}
+.percircle *,
+.percircle :after,
+.percircle :before {
+  box-sizing: content-box;
+}
+.percircle.animate:after,
+.percircle.animate > span {
+  -webkit-transition: -webkit-transform 0.2s ease-in-out;
+  transition: transform 0.2s ease-in-out;
+}
+.percircle.animate .bar {
+  -webkit-transition: -webkit-transform 0.6s ease-in-out;
+  transition: transform 0.6s ease-in-out;
+}
+.percircle.center {
+  float: none;
+  margin: 0 auto;
+}
+.percircle.big {
+  font-size: 240px;
+}
+.percircle.small {
+  font-size: 80px;
+}
+.percircle > span {
+  position: absolute;
+  z-index: 1;
+  width: 100%;
+  top: 50%;
+  top: calc(50% - 0.1em);
+  transform: translateY(-50%);
+  height: 1em;
+  font-size: 0.2em;
+  color: #ccc;
+  display: block;
+  text-align: center;
+  white-space: nowrap;
+}
+.perclock > span {
+  font-size: 0.175em;
+}
+.percircle:after {
+  position: absolute;
+  top: 0.08em;
+  left: 0.08em;
+  display: block;
+  content: " ";
+  border-radius: 50%;
+  background-color: #f5f5f5;
+  width: 0.84em;
+  height: 0.84em;
+}
+.percircle .slice {
+  position: absolute;
+  width: 1em;
+  height: 1em;
+  clip: rect(0, 1em, 1em, 0.5em);
+}
+.percircle:hover {
+  cursor: default;
+}
+.percircle:hover > span {
+  -webkit-transform: scale(1.3) translateY(-50%);
+  transform: scale(1.3) translateY(-50%);
+  color: #307bbb;
+}
+.percircle:hover:after {
+  -webkit-transform: scale(1.1);
+  transform: scale(1.1);
+}
diff --git a/openwisp_monitoring/device/static/monitoring/js/alert-settings.js b/openwisp_monitoring/device/static/monitoring/js/alert-settings.js
@@ -1,11 +1,17 @@
 (function ($) {
-    'use strict';
-    $(function () {
-        var isActiveCheckboxes = $('[id^="id_monitoring-metric-content_type-object_id"][id $="alertsettings-0-is_active"]');
-        isActiveCheckboxes.each(function(i, checkbox){
-            $(checkbox).click(function () {
-                $('#' + this.id).parent().parent().siblings().toggle(this.checked);
-            });
-        });
+  "use strict";
+  $(function () {
+    var isActiveCheckboxes = $(
+      '[id^="id_monitoring-metric-content_type-object_id"][id $="alertsettings-0-is_active"]',
+    );
+    isActiveCheckboxes.each(function (i, checkbox) {
+      $(checkbox).click(function () {
+        $("#" + this.id)
+          .parent()
+          .parent()
+          .siblings()
+          .toggle(this.checked);
+      });
     });
+  });
 })(django.jQuery);