#42 show always connected wifi

app/src/views/Wifi.vue

@@ -9,57 +9,105 @@
         Wifi settings
       </v-card-title>
 
-      <v-skeleton-loader
-        v-if="isLoading"
-        type="list-item-two-line,list-item-two-line,list-item-two-line"
-        class="mx-auto"
-      />
-
-      <v-list v-else>
-        <template v-for="(wifi, i) in wifiAvailable">
-          <div :key="i">
-            <v-divider v-if="i > 0" />
-
-            <v-list-item
-              class="px-1"
-              @click="onWifiSelect(wifi)"
-            >
-              <v-list-item-icon class="mr-2 ml-2">
-                <v-icon v-if="wifi.ssid === settings.system.wifi">
-                  $check
-                </v-icon>
-
-                <v-progress-circular
-                  v-if="wifi.ssid === connectingSSID"
-                  :size="24"
-                  :width="2"
-                  color="grey "
-                  indeterminate
-                />
-              </v-list-item-icon>
-
-              <v-list-item-content dark>
-                <v-list-item-title v-text="wifi.ssid" />
-                <v-list-item-subtitle v-text="wifi.bssid" />
-              </v-list-item-content>
-
-              <v-list-item-icon>
-                <v-icon
-                  v-if="wifi.secure"
-                  class="mx-2"
-                >
-                  $lock
-                </v-icon>
-                <v-icon class="mx-2">
-                  {{ wifi.rssi | wifiIcon(0) }}
-                </v-icon>
-                <v-icon class="ml-3">
-                  $next
+      <v-list>
+        <template v-if="stats.wifi.connected">
+          <v-list-item
+            class="px-1"
+          >
+            <v-list-item-icon class="mr-2 ml-2">
+              <v-icon>
+                $check
+              </v-icon>
+            </v-list-item-icon>
+
+            <v-list-item-content dark>
+              <v-list-item-title v-text="stats.wifi.ssid" />
+              <v-list-item-subtitle v-text="stats.wifi.mac" />
+            </v-list-item-content>
+
+            <v-list-item-icon>
+              <v-icon
+                v-if="stats.wifi.secure"
+                class="mx-2"
+              >
+                $lock
+              </v-icon>
+              <v-icon class="mx-2">
+                {{ stats.wifi.rssi | wifiIcon(0) }}
+              </v-icon>
+              <v-btn
+                icon
+                disabled
+              >
+                <v-icon>
+                  $info
                 </v-icon>
-              </v-list-item-icon>
-            </v-list-item>
-          </div>
+              </v-btn>
+            </v-list-item-icon>
+          </v-list-item>
+          <v-divider />
         </template>
+        <v-subheader class="pl-0 mt-5">
+          Networks
+        </v-subheader>
+
+        <template v-if="!isLoading">
+          <template
+
+            v-for="(wifi, i) in wifiAvailable"
+          >
+            <div
+              v-if="wifi.ssid !== settings.system.wifi"
+              :key="i"
+            >
+              <v-divider v-if="i > 0" />
+
+              <v-list-item
+                class="px-1"
+                @click="onWifiSelect(wifi)"
+              >
+                <v-list-item-icon class="mr-2 ml-2">
+                  <v-icon v-if="wifi.ssid === settings.system.wifi">
+                    $check
+                  </v-icon>
+
+                  <v-progress-circular
+                    v-if="wifi.ssid === connectingSSID"
+                    :size="24"
+                    :width="2"
+                    color="grey "
+                    indeterminate
+                  />
+                </v-list-item-icon>
+
+                <v-list-item-content dark>
+                  <v-list-item-title v-text="wifi.ssid" />
+                  <v-list-item-subtitle v-text="wifi.bssid" />
+                </v-list-item-content>
+
+                <v-list-item-icon>
+                  <v-icon
+                    v-if="wifi.secure"
+                    class="mx-2"
+                  >
+                    $lock
+                  </v-icon>
+                  <v-icon class="mx-2">
+                    {{ wifi.rssi | wifiIcon(0) }}
+                  </v-icon>
+                  <v-icon class="ml-3">
+                    $next
+                  </v-icon>
+                </v-list-item-icon>
+              </v-list-item>
+            </div>
+          </template>
+        </template>
+
+        <v-skeleton-loader
+          v-else
+          type="list-item-two-line,list-item-two-line,list-item-two-line"
+        />
 
         <v-divider />