Add dropdown

tutorials/device-dashboard/mongoose_app.c

@@ -51,17 +51,21 @@ static void sync_metrics(bool is_write) {
 
 // Read-write device settings
 static double s_volume = 17.2;
+static int s_log_level = MG_LL_DEBUG;
 static char s_name[20] = "Dublin";
 
 static struct mg_field fields_settings[] = {
     {"volume", MG_VAL_DBL, &s_volume, sizeof(s_volume)},
     {"name", MG_VAL_STR, &s_name, sizeof(s_name)},
+    {"log_level", MG_VAL_INT, &s_log_level, sizeof(s_log_level)},
     {NULL, 0, NULL, 0},
 };
 
 static void sync_settings(bool is_write) {
   if (is_write) {
+    mg_log_level = s_log_level;
   } else {
+    s_log_level = mg_log_level;
   }
 }
 

tutorials/device-dashboard/web_root/index.html

@@ -17,7 +17,7 @@
           },
           settings: {
             volume: 12,
-            motor: false,
+            log_level: 3,
             name: 'Galway',
           },
           metrics: {
@@ -211,12 +211,22 @@
             <div class="panel-title">Device settings</div>
             <div class="panel-body">
               <div class="field">
-                <label class="field-label" for="setting-name">Name</label>
-                <input class="field-input" id="setting-name" type="text" data-bind="settings.name" data-autosave="1" />
+                <label class="field-label">Name</label>
+                <input class="field-input"type="text" data-bind="settings.name" data-autosave="1" />
               </div>
               <div class="field">
-                <label class="field-label" for="setting-volume">Volume</label>
-                <input class="field-input" id="setting-volume" type="text" data-bind="settings.volume" />
+                <label class="field-label">Volume</label>
+                <input class="field-input" type="text" data-bind="settings.volume" />
+              </div>
+              <div class="field">
+                <label class="field-label">Log Level</label>
+                <select class="field-input" data-bind="settings.log_level">
+                  <option value="0">Disable logs</option>
+                  <option value="1">Error</option>
+                  <option value="2">Info</option>
+                  <option value="3">Debug</option>
+                  <option value="4">Verbose (very noisy)</option>
+                </select>
               </div>
             </div>
             <div class="panel-footer">

tutorials/device-dashboard/web_root/style.css

@@ -302,8 +302,8 @@ body {
 }
 
 .field-input.edited, .select.edited, .slider.edited>* {
-  border-color: #50500040;
-  background: #ffff0020;
+  border-color: #00502040;
+  background: #00ff0020;
 }
 
 .field-input.error, .select.error, .slider.error>* {
@@ -554,7 +554,7 @@ body {
   cursor: not-allowed;
 }
 .toggle.edited {
-  border-color: #ee0;
+  border-color: #0fe;
 }
 
 @media (max-width: 900px) {
@@ -573,4 +573,4 @@ body {
   .overview-grid {
     grid-template-columns: 1fr;
   }
-}
+}