src/main.cpp

@@ -109,11 +109,13 @@ public:
 
     // картинки, их даже можно кешировать
     static constexpr const char* FAVICON_ICO = "static/favicon.png";
+    static constexpr const char* KROKODIL_GIF = "static/krokodil.gif";
     static constexpr const char* VUE_JS = "static/js/vue.js"; // это тоже можно кешировать
 
     // а эти стили нельзя кешировать в отладочной версии
     static constexpr const char* STYLE_CSS = "static/style.css";
     static constexpr const char* FIELDS_CSS = "static/fields.css";
+    static constexpr const char* KB_MP4 = "static/video_2024-11-06_15-49-35.mp4";
 
     ServerResources(const ServerResources&) = delete;
 
@@ -122,7 +124,9 @@ public:
         auth.users.emplace_back(std::make_shared<http::auth::User>("admin", "", http::auth::User::SUPERUSER));
 
         sf->registerFile(FAVICON_ICO, mime_types::image_png, true);
+        sf->registerFile(KROKODIL_GIF, mime_types::image_gif, true);
         sf->registerFile(VUE_JS, mime_types::javascript, true);
+        sf->registerFile(KB_MP4, mime_types::video_mp4, true);
 
         sf->registerFile(STYLE_CSS, mime_types::text_css, true);
         sf->registerFile(FIELDS_CSS, mime_types::text_css, true);
@@ -183,9 +187,11 @@ public:
         }));
 
         s.resources.emplace_back(std::make_unique<http::resource::GenericResource>("/favicon.ico", [this](const auto& req, auto& rep) { boost::ignore_unused(req); sf->serve(FAVICON_ICO, rep); }));
+        s.resources.emplace_back(std::make_unique<http::resource::GenericResource>("/images/krokodil_vzryvaetsya_hd.gif", [this](const auto& req, auto& rep) { boost::ignore_unused(req); sf->serve(KROKODIL_GIF, rep); }));
         s.resources.emplace_back(std::make_unique<http::resource::GenericResource>("/style.css", [this](const auto& req, auto& rep) { boost::ignore_unused(req); sf->serve(STYLE_CSS, rep); }));
         s.resources.emplace_back(std::make_unique<http::resource::GenericResource>("/fields.css", [this](const auto& req, auto& rep) { boost::ignore_unused(req); sf->serve(FIELDS_CSS, rep); }));
         s.resources.emplace_back(std::make_unique<http::resource::GenericResource>("/js/vue.js", [this](const auto& req, auto& rep) { boost::ignore_unused(req); sf->serve(VUE_JS, rep); }));
+        s.resources.emplace_back(std::make_unique<http::resource::GenericResource>("/vid/video_2024-11-06_15-49-35.mp4", [this](const auto& req, auto& rep) { boost::ignore_unused(req); sf->serve(KB_MP4, rep); }));
 
         s.resources.emplace_back(std::make_unique<http::auth::AuthRequiredResource>("/api/get/statistics", this->auth, http::auth::User::WATCH_STATISTICS, [this](const auto& req, auto& rep) {
             if (req.method != "GET") {

static/fields.css

@@ -1,5 +1,5 @@
 .tabs-header {
-    margin: 0.5em 0 3px;
+    margin: 0.5em 0;
     background: var(--brand-bg);
 }
 .tabs-header > * {
@@ -17,7 +17,7 @@
 }
 .tabs-btn.active {
     color: var(--brand-text);
-    border-bottom: 3px solid var(--bg-action);
+    border-bottom: 3px solid var(--brand-text);
 }
 .tabs-body-item {
     padding: 20px 0;
@@ -58,7 +58,7 @@
 }
 
 .action-button {
-    background: var(--bg-action);
+    background: var(--brand-bg);
 }
 
 .nav-bar-element {
@@ -113,7 +113,7 @@ label {
 .settings-set-container input, .settings-set-container select {
     margin-top: 0.5em;
     border: none;
-    border-bottom: solid 2px var(--text-color2);
+    border-bottom: solid 2px var(--text-color);
     width: 20em;
     box-sizing: border-box;
 }
@@ -121,7 +121,7 @@ label {
 .settings-set-container input:focus {
     outline: none;
     border: none;
-    border-bottom: solid 2px var(--bg-action);
+    border-bottom: solid 2px var(--brand-text);
 }
 
 .settings-set-container input:invalid {
@@ -193,7 +193,7 @@ details > summary {
 
 .toggle-input input[type="checkbox"]:checked + .slider {
     left: 25px;
-    background-color: var(--bg-action);
+    background-color: var(--brand-text);
 }
 
 .toggle-input input[type="checkbox"]:checked + .slider:before {

static/js/vue.js

@@ -1,6 +1,6 @@
 /*!
- * Vue.js v2.7.14
+ * Vue.js v2.7.16
- * (c) 2014-2022 Evan You
+ * (c) 2014-2023 Evan You
  * Released under the MIT License.
  */
 (function (global, factory) {
@@ -82,9 +82,16 @@
       return val == null
           ? ''
           : Array.isArray(val) || (isPlainObject(val) && val.toString === _toString)
-              ? JSON.stringify(val, null, 2)
+              ? JSON.stringify(val, replacer, 2)
               : String(val);
   }
+  function replacer(_key, val) {
+      // avoid circular deps from v3
+      if (val && val.__v_isRef) {
+          return val.value;
+      }
+      return val;
+  }
   /**
    * Convert an input value to a number for persistence.
    * If the conversion fails, return original string.
@@ -246,9 +253,7 @@
    */
   function genStaticKeys$1(modules) {
       return modules
-          .reduce(function (keys, m) {
+          .reduce(function (keys, m) { return keys.concat(m.staticKeys || []); }, [])
-          return keys.concat(m.staticKeys || []);
-      }, [])
           .join(',');
   }
   /**
@@ -751,6 +756,11 @@
       return __assign.apply(this, arguments);
   };
 
+  typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+      var e = new Error(message);
+      return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+  };
+
   var uid$2 = 0;
   var pendingCleanupDeps = [];
   var cleanupDeps = function () {
@@ -882,7 +892,7 @@
   });
 
   var arrayKeys = Object.getOwnPropertyNames(arrayMethods);
-  var NO_INIITIAL_VALUE = {};
+  var NO_INITIAL_VALUE = {};
   /**
    * In some cases we may want to disable observation inside a component's
    * update computation.
@@ -941,7 +951,7 @@
               var keys = Object.keys(value);
               for (var i = 0; i < keys.length; i++) {
                   var key = keys[i];
-                  defineReactive(value, key, NO_INIITIAL_VALUE, undefined, shallow, mock);
+                  defineReactive(value, key, NO_INITIAL_VALUE, undefined, shallow, mock);
               }
           }
       }
@@ -978,7 +988,8 @@
   /**
    * Define a reactive property on an Object.
    */
-  function defineReactive(obj, key, val, customSetter, shallow, mock) {
+  function defineReactive(obj, key, val, customSetter, shallow, mock, observeEvenIfShallow) {
+      if (observeEvenIfShallow === void 0) { observeEvenIfShallow = false; }
       var dep = new Dep();
       var property = Object.getOwnPropertyDescriptor(obj, key);
       if (property && property.configurable === false) {
@@ -988,10 +999,10 @@
       var getter = property && property.get;
       var setter = property && property.set;
       if ((!getter || setter) &&
-          (val === NO_INIITIAL_VALUE || arguments.length === 2)) {
+          (val === NO_INITIAL_VALUE || arguments.length === 2)) {
           val = obj[key];
       }
-      var childOb = !shallow && observe(val, false, mock);
+      var childOb = shallow ? val && val.__ob__ : observe(val, false, mock);
       Object.defineProperty(obj, key, {
           enumerable: true,
           configurable: true,
@@ -1036,7 +1047,7 @@
               else {
                   val = newVal;
               }
-              childOb = !shallow && observe(newVal, false, mock);
+              childOb = shallow ? newVal && newVal.__ob__ : observe(newVal, false, mock);
               {
                   dep.notify({
                       type: "set" /* TriggerOpTypes.SET */,
@@ -2499,11 +2510,10 @@
           // to the data on the placeholder node.
           vm.$vnode = _parentVnode;
           // render self
+          var prevInst = currentInstance;
+          var prevRenderInst = currentRenderingInstance;
           var vnode;
           try {
-              // There's no need to maintain a stack because all render fns are called
-              // separately from one another. Nested component's render fns are called
-              // when parent component is patched.
               setCurrentInstance(vm);
               currentRenderingInstance = vm;
               vnode = render.call(vm._renderProxy, vm.$createElement);
@@ -2527,8 +2537,8 @@
               }
           }
           finally {
-              currentRenderingInstance = null;
+              currentRenderingInstance = prevRenderInst;
-              setCurrentInstance();
+              setCurrentInstance(prevInst);
           }
           // if the returned array contains only a single node, allow it
           if (isArray(vnode) && vnode.length === 1) {
@@ -2793,6 +2803,112 @@
       };
   }
 
+  var activeEffectScope;
+  var EffectScope = /** @class */ (function () {
+      function EffectScope(detached) {
+          if (detached === void 0) { detached = false; }
+          this.detached = detached;
+          /**
+           * @internal
+           */
+          this.active = true;
+          /**
+           * @internal
+           */
+          this.effects = [];
+          /**
+           * @internal
+           */
+          this.cleanups = [];
+          this.parent = activeEffectScope;
+          if (!detached && activeEffectScope) {
+              this.index =
+                  (activeEffectScope.scopes || (activeEffectScope.scopes = [])).push(this) - 1;
+          }
+      }
+      EffectScope.prototype.run = function (fn) {
+          if (this.active) {
+              var currentEffectScope = activeEffectScope;
+              try {
+                  activeEffectScope = this;
+                  return fn();
+              }
+              finally {
+                  activeEffectScope = currentEffectScope;
+              }
+          }
+          else {
+              warn$2("cannot run an inactive effect scope.");
+          }
+      };
+      /**
+       * This should only be called on non-detached scopes
+       * @internal
+       */
+      EffectScope.prototype.on = function () {
+          activeEffectScope = this;
+      };
+      /**
+       * This should only be called on non-detached scopes
+       * @internal
+       */
+      EffectScope.prototype.off = function () {
+          activeEffectScope = this.parent;
+      };
+      EffectScope.prototype.stop = function (fromParent) {
+          if (this.active) {
+              var i = void 0, l = void 0;
+              for (i = 0, l = this.effects.length; i < l; i++) {
+                  this.effects[i].teardown();
+              }
+              for (i = 0, l = this.cleanups.length; i < l; i++) {
+                  this.cleanups[i]();
+              }
+              if (this.scopes) {
+                  for (i = 0, l = this.scopes.length; i < l; i++) {
+                      this.scopes[i].stop(true);
+                  }
+              }
+              // nested scope, dereference from parent to avoid memory leaks
+              if (!this.detached && this.parent && !fromParent) {
+                  // optimized O(1) removal
+                  var last = this.parent.scopes.pop();
+                  if (last && last !== this) {
+                      this.parent.scopes[this.index] = last;
+                      last.index = this.index;
+                  }
+              }
+              this.parent = undefined;
+              this.active = false;
+          }
+      };
+      return EffectScope;
+  }());
+  function effectScope(detached) {
+      return new EffectScope(detached);
+  }
+  /**
+   * @internal
+   */
+  function recordEffectScope(effect, scope) {
+      if (scope === void 0) { scope = activeEffectScope; }
+      if (scope && scope.active) {
+          scope.effects.push(effect);
+      }
+  }
+  function getCurrentScope() {
+      return activeEffectScope;
+  }
+  function onScopeDispose(fn) {
+      if (activeEffectScope) {
+          activeEffectScope.cleanups.push(fn);
+      }
+      else {
+          warn$2("onScopeDispose() is called when there is no active effect scope" +
+              " to be associated with.");
+      }
+  }
+
   var activeInstance = null;
   var isUpdatingChildComponent = false;
   function setActiveInstance(vm) {
@@ -3095,7 +3211,8 @@
       if (setContext === void 0) { setContext = true; }
       // #7573 disable dep collection when invoking lifecycle hooks
       pushTarget();
-      var prev = currentInstance;
+      var prevInst = currentInstance;
+      var prevScope = getCurrentScope();
       setContext && setCurrentInstance(vm);
       var handlers = vm.$options[hook];
       var info = "".concat(hook, " hook");
@@ -3107,7 +3224,10 @@
       if (vm._hasHookEvent) {
           vm.$emit('hook:' + hook);
       }
-      setContext && setCurrentInstance(prev);
+      if (setContext) {
+          setCurrentInstance(prevInst);
+          prevScope && prevScope.on();
+      }
       popTarget();
   }
 
@@ -3325,7 +3445,10 @@
       var instance = currentInstance;
       var call = function (fn, type, args) {
           if (args === void 0) { args = null; }
-          return invokeWithErrorHandling(fn, null, args, instance, type);
+          var res = invokeWithErrorHandling(fn, null, args, instance, type);
+          if (deep && res && res.__ob__)
+              res.__ob__.dep.depend();
+          return res;
       };
       var getter;
       var forceTrigger = false;
@@ -3350,6 +3473,7 @@
                       return s.value;
                   }
                   else if (isReactive(s)) {
+                      s.__ob__.dep.depend();
                       return traverse(s);
                   }
                   else if (isFunction(s)) {
@@ -3493,112 +3617,6 @@
       };
   }
 
-  var activeEffectScope;
-  var EffectScope = /** @class */ (function () {
-      function EffectScope(detached) {
-          if (detached === void 0) { detached = false; }
-          this.detached = detached;
-          /**
-           * @internal
-           */
-          this.active = true;
-          /**
-           * @internal
-           */
-          this.effects = [];
-          /**
-           * @internal
-           */
-          this.cleanups = [];
-          this.parent = activeEffectScope;
-          if (!detached && activeEffectScope) {
-              this.index =
-                  (activeEffectScope.scopes || (activeEffectScope.scopes = [])).push(this) - 1;
-          }
-      }
-      EffectScope.prototype.run = function (fn) {
-          if (this.active) {
-              var currentEffectScope = activeEffectScope;
-              try {
-                  activeEffectScope = this;
-                  return fn();
-              }
-              finally {
-                  activeEffectScope = currentEffectScope;
-              }
-          }
-          else {
-              warn$2("cannot run an inactive effect scope.");
-          }
-      };
-      /**
-       * This should only be called on non-detached scopes
-       * @internal
-       */
-      EffectScope.prototype.on = function () {
-          activeEffectScope = this;
-      };
-      /**
-       * This should only be called on non-detached scopes
-       * @internal
-       */
-      EffectScope.prototype.off = function () {
-          activeEffectScope = this.parent;
-      };
-      EffectScope.prototype.stop = function (fromParent) {
-          if (this.active) {
-              var i = void 0, l = void 0;
-              for (i = 0, l = this.effects.length; i < l; i++) {
-                  this.effects[i].teardown();
-              }
-              for (i = 0, l = this.cleanups.length; i < l; i++) {
-                  this.cleanups[i]();
-              }
-              if (this.scopes) {
-                  for (i = 0, l = this.scopes.length; i < l; i++) {
-                      this.scopes[i].stop(true);
-                  }
-              }
-              // nested scope, dereference from parent to avoid memory leaks
-              if (!this.detached && this.parent && !fromParent) {
-                  // optimized O(1) removal
-                  var last = this.parent.scopes.pop();
-                  if (last && last !== this) {
-                      this.parent.scopes[this.index] = last;
-                      last.index = this.index;
-                  }
-              }
-              this.parent = undefined;
-              this.active = false;
-          }
-      };
-      return EffectScope;
-  }());
-  function effectScope(detached) {
-      return new EffectScope(detached);
-  }
-  /**
-   * @internal
-   */
-  function recordEffectScope(effect, scope) {
-      if (scope === void 0) { scope = activeEffectScope; }
-      if (scope && scope.active) {
-          scope.effects.push(effect);
-      }
-  }
-  function getCurrentScope() {
-      return activeEffectScope;
-  }
-  function onScopeDispose(fn) {
-      if (activeEffectScope) {
-          activeEffectScope.cleanups.push(fn);
-      }
-      else {
-          warn$2("onScopeDispose() is called when there is no active effect scope" +
-              " to be associated with.");
-      }
-  }
-
   function provide(key, value) {
       if (!currentInstance) {
           {
@@ -3893,7 +3911,7 @@
       suspensible = _b === void 0 ? false : _b, // in Vue 3 default is true
       userOnError = source.onError;
       if (suspensible) {
-          warn$2("The suspensiblbe option for async components is not supported in Vue2. It is ignored.");
+          warn$2("The suspensible option for async components is not supported in Vue2. It is ignored.");
       }
       var pendingRequest = null;
       var retries = 0;
@@ -3996,7 +4014,7 @@
   /**
    * Note: also update dist/vue.runtime.mjs when adding new exports to this file.
    */
-  var version = '2.7.14';
+  var version = '2.7.16';
   /**
    * @internal type is manually declared in <root>/types/v3-define-component.d.ts
    */
@@ -4373,7 +4391,7 @@
                           "Instead, use a data or computed property based on the prop's " +
                           "value. Prop being mutated: \"".concat(key, "\""), vm);
                   }
-              });
+              }, true /* shallow */);
           }
           // static props are already proxied on the component's prototype
           // during Vue.extend(). We only need to proxy props defined at
@@ -4689,6 +4707,9 @@
           vm.__v_skip = true;
           // effect scope
           vm._scope = new EffectScope(true /* detached */);
+          // #13134 edge case where a child component is manually created during the
+          // render of a parent component
+          vm._scope.parent = undefined;
           vm._scope._vm = true;
           // merge options
           if (options && options._isComponent) {
@@ -5935,7 +5956,7 @@
       return false;
   }
   function pruneCache(keepAliveInstance, filter) {
-      var cache = keepAliveInstance.cache, keys = keepAliveInstance.keys, _vnode = keepAliveInstance._vnode;
+      var cache = keepAliveInstance.cache, keys = keepAliveInstance.keys, _vnode = keepAliveInstance._vnode, $vnode = keepAliveInstance.$vnode;
       for (var key in cache) {
           var entry = cache[key];
           if (entry) {
@@ -5945,6 +5966,7 @@
               }
           }
       }
+      $vnode.componentOptions.children = undefined;
   }
   function pruneCacheEntry(cache, key, keys, current) {
       var entry = cache[key];
@@ -6266,7 +6288,7 @@
       }
       var el = document.createElement(tag);
       if (tag.indexOf('-') > -1) {
-          // http://stackoverflow.com/a/28210364/1070244
+          // https://stackoverflow.com/a/28210364/1070244
           return (unknownElementCache[tag] =
               el.constructor === window.HTMLUnknownElement ||
                   el.constructor === window.HTMLElement);
@@ -7141,8 +7163,11 @@
                               var insert_1 = ancestor.data.hook.insert;
                               if (insert_1.merged) {
                                   // start at index 1 to avoid re-invoking component mounted hook
-                                  for (var i_10 = 1; i_10 < insert_1.fns.length; i_10++) {
+                                  // clone insert hooks to avoid being mutated during iteration.
-                                      insert_1.fns[i_10]();
+                                  // e.g. for customed directives under transition group.
+                                  var cloned = insert_1.fns.slice(1);
+                                  for (var i_10 = 0; i_10 < cloned.length; i_10++) {
+                                      cloned[i_10]();
                                   }
                               }
                           }
@@ -8281,12 +8306,10 @@
       }
       for (name in newStyle) {
           cur = newStyle[name];
-          if (cur !== oldStyle[name]) {
           // ie9 setting to null has no effect, must use empty string
           setProp(el, name, cur == null ? '' : cur);
       }
   }
-  }
   var style$1 = {
       create: updateStyle,
       update: updateStyle
@@ -9531,7 +9554,7 @@
                           return "continue";
                       }
                   }
-                  // http://en.wikipedia.org/wiki/Conditional_comment#Downlevel-revealed_conditional_comment
+                  // https://en.wikipedia.org/wiki/Conditional_comment#Downlevel-revealed_conditional_comment
                   if (conditionalComment.test(html)) {
                       var conditionalEnd = html.indexOf(']>');
                       if (conditionalEnd >= 0) {

static/login.html

@@ -35,7 +35,7 @@
             width: 100%;
             box-sizing: border-box;
             border: none;
-            border-bottom: var(--text-color2) 2px solid;
+            border-bottom: var(--brand-bg) 2px solid;
             background-color: var(--bg-color);
             text-overflow: ellipsis;
             min-height: 2em;
@@ -44,7 +44,7 @@
         .form-row input:focus {
             outline: none;
             border: none;
-            border-bottom: var(--bg-action) 2px solid;
+            border-bottom: var(--brand-text) 2px solid;
             background-color: var(--bg-selected);
         }
 
@@ -52,7 +52,6 @@
             border: none;
             font-weight: bolder;
             background: var(--bg-action);
-            color: var(--text-color);
             text-align: center;
         }
 

static/main.html

@@ -116,7 +116,7 @@
                 <table>
                     <tbody>
                     <tr><th>Температура ADRV</th><td>{{ stat_device.adrv }} °C</td></tr>
-                    <tr><th>Температура ZYNQ</th><td>{{ stat_device.zynq }} °C</td></tr>
+                    <tr><th>Температура ZYNQ <span hidden>ULTRASUCK</span></th><td>{{ stat_device.zynq }} °C</td></tr>
                     <tr><th>Температура FPGA</th><td>{{ stat_device.fpga }} °C</td></tr>
                     </tbody>
                 </table>
@@ -441,7 +441,8 @@
             </div>
             <template>
                 <div v-for="classesGroup in ['rt1', 'rt2', 'rt3', 'cd']">
-                    <h3>Классы {{ classesGroup.toUpperCase() }} <button class="action-button" @click="qosAddClass(classesGroup)"> + </button></h3>
+                    <h3>Классы {{ classesGroup.toUpperCase() }}</h3>
+                    <button class="action-button" @click="qosAddClass(classesGroup)">Добавить класс {{ classesGroup.toUpperCase() }}</button>
                     <details v-for="(qosClass, index) in param.qos[classesGroup]" :key="index" class="settings-set-container">
                         <summary>
                             <span v-if="classesGroup === 'cd'">#{{ index }} CIR={{ qosClass.cir }}кбит, PIR={{ qosClass.pir }}кбит {{ qosClass.description }}</span>
@@ -631,10 +632,20 @@
                 <button class="action-button" @click="settingsUploadUpdate()">Загрузить<span class="submit-spinner" v-show="submitStatus.firmwareUpload"></span></button>
                 <button class="dangerous-button" v-show="uploadFw.sha256 !== null" @click="settingsPerformFirmwareUpgrade()">Обновить встроенное ПО <span class="submit-spinner" v-show="submitStatus.firmwareUpgrade"></span></button>
             </div>
+
+            <div hidden>
+                <p>
+                    Эти настройки пока недоступны, но скоро разработчик это поправит. А пока смотри на крокодила, или купи разработчику банку <span style="text-decoration: line-through;">пива</span> колы для ускорения процесса)
+                </p>
+                <div><img loading="lazy" src="/images/krokodil_vzryvaetsya_hd.gif" alt="krokodil"></div>
+                <div><video preload="auto" controls style="max-width: 100%"><source src="/vid/video_2024-11-06_15-49-35.mp4" type="video/mp4" /></video></div>
+            </div>
         </div>
         <p>Последнее обновление статистики: {{ lastUpdateTime }}</p>
     </div>
 </div>
+
+<!-- Версия для разработки включает в себя возможность вывода в консоль полезных уведомлений -->
 <script src="/js/vue.js"></script>
 <script>
     function updateHeaderHeight() {

static/style.css

@@ -2,11 +2,11 @@
 body {
     --text-color: #262626;
     --text-color2: #3d3d3d;
-    --text-good: #0CF500;
+    --text-good: green;
-    --text-bad: #F5000C;
+    --text-bad: red;
 
-    --brand-bg: #B3C0D1;
+    --brand-bg: #EDF3FE;
-    --brand-text: #0146f4;
+    --brand-text: #5488F7;
 
     --bg-color: #FEFEFE;
     --bg-selected: #F1F1F1;
@@ -20,8 +20,8 @@ body {
     body {
         --text-color: #eee;
         --text-color2: #bbb;
-        --text-good: #91FF00;
+        --text-good: greenyellow;
-        --text-bad: #FF1F2A;
+        --text-bad: orangered;
 
         --brand-bg: #393E50;
         --brand-text: #5F93F3;