From f75329e9fc5940446cd6d0f259e59d8b757d4057 Mon Sep 17 00:00:00 2001
From: Thomas Ballmann <mail@i-2xdream.de>
Date: Mon, 30 Nov 2020 21:34:24 +0100
Subject: [PATCH] #42 finalize weather settings

---
 app/src/components/WeatherFindLocation.vue |  55 +++++---
 app/src/views/Weather.vue                  | 145 ++++++++++-----------
 lib/app/app.cpp                            |   2 +
 3 files changed, 112 insertions(+), 90 deletions(-)

diff --git a/app/src/components/WeatherFindLocation.vue b/app/src/components/WeatherFindLocation.vue
index ab40c82..b360b10 100644
--- a/app/src/components/WeatherFindLocation.vue
+++ b/app/src/components/WeatherFindLocation.vue
@@ -4,7 +4,7 @@
     :disabled="!api"
     :items="entries"
     :loading="isLoading"
-    :search-input.sync="search"
+    :search-input.sync="searchInput"
     no-filter
     _hide-no-data
     item-text="name"
@@ -12,6 +12,8 @@
     label="Location"
     placeholder="Start typing to Search"
     prepend-icon="$place"
+    return-object
+    clearable
   >
     <template #item="{ item }">
       <v-list-item-avatar
@@ -21,28 +23,28 @@
       >
         <img
           width="64"
-          :src="getConditionIcon(item.weather[0].icon)"
+          :src="getConditionIcon(item.weather.icon)"
         >
       </v-list-item-avatar>
 
       <v-list-item-content>
         <v-list-item-title>
-          {{ item.name }}, {{ item.sys.country }}
+          {{ item.label }}
         </v-list-item-title>
         <v-list-item-subtitle v-if="item.weather">
           <img
             width="16"
-            :src="getCountryFlag(item.sys.country)"
+            :src="getCountryFlag(item.country)"
           >
-          {{ item.weather[0].description }}
+          {{ item.weather.description }}
         </v-list-item-subtitle>
       </v-list-item-content>
       <v-list-item-action v-if="item.main">
-        {{ item.main.temp }}°С
+        {{ item.temp }}°С
       </v-list-item-action>
     </template>
     <template #selection="{ item }">
-      {{ item.name }}, {{ item.sys.country }}
+      {{ item.label }}
     </template>
   </v-autocomplete>
 </template>
@@ -60,6 +62,10 @@
         type: String,
         required: true,
       },
+      search: {
+        type: String,
+        required: false,
+      },
       lang: {
         type: String,
         required: true,
@@ -74,13 +80,16 @@
       entries: [],
       isLoading: false,
       model: null,
-      search: null,
+      searchInput: null,
     }),
     watch: {
-      model (val) {
-        this.$emit('update:location', val)
+      model (item) {
+        if (item) {
+          this.$emit('update:location', item.id)
+          this.$emit('update:search', item.label)
+        }
       },
-      search (val) {
+      searchInput (val) {
         if (!val || val.length < 3) {
           return
         }
@@ -103,19 +112,31 @@
 
         axios.get(url)
           .then(res => {
-            this.entries = res.data.list
+            const entries = []
+
+            res.data.list.forEach((item) => {
+              entries.push({
+                id: item.id,
+                label: item.name + ', ' + item.sys.country,
+                temp: item.main.temp,
+                country: item.sys.country,
+                weather: {
+                  icon: item.weather[0].icon,
+                  description: item.weather[0].description,
+                },
+              })
+            })
+
+            this.entries = entries
             this.isLoading = false
           })
       },
     },
     created () {
-      // TODO
+      // create entry for the current item
       this.entries = [{
-        name: 'Freilassing',
-        sys: {
-          country: 'DE',
-        },
         id: this.location,
+        label: this.search,
       }]
       this.model = this.location
     },
diff --git a/app/src/views/Weather.vue b/app/src/views/Weather.vue
index 2aa3a54..ba54b9a 100644
--- a/app/src/views/Weather.vue
+++ b/app/src/views/Weather.vue
@@ -1,75 +1,73 @@
 <template>
-  <div class="pa-5">
-    <v-card
-      flat
-    >
-      <v-card-title class="display-2 mb-12 justify-center text-center">
-        Weather settings
-      </v-card-title>
+  <v-card
+    flat
+  >
+    <v-card-title class="display-2 mb-12 justify-center text-center">
+      Weather settings
+    </v-card-title>
 
-      <v-card-text>
-        <v-text-field
-          v-model="form.api"
-          label="OpenWeatherMap API key"
-          prepend-icon="$vpn_key"
-        >
-          <template #append-outer>
-            <v-btn
-              icon
-              href="https://openweathermap.org/"
-              target="_blank"
-            >
-              <v-icon>$launch</v-icon>
-            </v-btn>
-          </template>
-        </v-text-field>
+    <v-card-text>
+      <v-text-field
+        v-model="form.api"
+        label="OpenWeatherMap API key"
+        prepend-icon="$vpn_key"
+      >
+        <template #append-outer>
+          <v-btn
+            icon
+            href="https://openweathermap.org/"
+            target="_blank"
+          >
+            <v-icon>$launch</v-icon>
+          </v-btn>
+        </template>
+      </v-text-field>
 
-        <weather-find-location
-          :api="form.api"
-          :location.sync="form.location"
-          :placeholder="form.name"
-          :lang="form.lang"
-          :unit="form.unit"
-        />
+      <weather-find-location
+        :api="form.api"
+        :location.sync="form.location"
+        :search.sync="form.name"
+        :lang="form.lang"
+        :unit="form.unit"
+      />
 
-        <v-select
-          v-model="form.unit"
-          :disabled="!form.api"
-          :items="weatherUnit"
-          label="Units"
-          prepend-icon=" "
-        />
-        <v-select
-          v-model="form.lang"
-          :disabled="!form.api"
-          :items="weatherLang"
-          label="Language"
-          prepend-icon="$translate"
-        />
-      </v-card-text>
+      <v-select
+        v-model="form.unit"
+        :disabled="!form.api"
+        :items="weatherUnit"
+        label="Units"
+        prepend-icon=" "
+      />
+      <v-select
+        v-model="form.lang"
+        :disabled="!form.api"
+        :items="weatherLang"
+        label="Language"
+        prepend-icon="$translate"
+      />
+    </v-card-text>
 
-      <v-divider class="mt-12" />
-      <v-card-actions>
-        <v-btn
-          text
-          @click="resetChanges"
-        >
-          Restore
-        </v-btn>
-        <v-spacer />
-        <v-btn
-          :loading="isProcessing"
-          depressed
-          @click="commitChanges"
-        >
-          <v-icon left>
-            $done
-          </v-icon>
-          Save
-        </v-btn>
-      </v-card-actions>
-    </v-card>
-  </div>
+    <v-divider class="mt-12" />
+    <v-card-actions>
+      <v-btn
+        text
+        @click="resetChanges"
+      >
+        Restore
+      </v-btn>
+      <v-spacer />
+      <v-btn
+        :loading="isProcessing"
+        depressed
+        @click="commitChanges"
+      >
+        <v-icon left>
+          $done
+        </v-icon>
+        Save
+      </v-btn>
+    </v-card-actions>
+  </v-card>
 </template>
 
 <script>
@@ -116,12 +114,13 @@
       commitChanges () {
         this.isProcessing = true
 
-        // TODO
         this.updateSettings({
-          weather_: {
-            api: '',
-            locationId: 0,
-
+          weather: {
+            api: this.form.api,
+            location: this.form.location,
+            lang: this.form.lang,
+            unit: this.form.unit,
+            name: this.form.name,
           },
         })
 
@@ -132,7 +131,7 @@
       resetChanges () {
         this.form.api = this.settings.weather.api
         this.form.location = this.settings.weather.location
-        this.form.name = 'freilassing' // this.settings.weather.name
+        this.form.name = this.settings.weather.name
         this.form.lang = this.settings.weather.lang
         this.form.unit = this.settings.weather.unit
       },
diff --git a/lib/app/app.cpp b/lib/app/app.cpp
index c74d442..5d74f8d 100644
--- a/lib/app/app.cpp
+++ b/lib/app/app.cpp
@@ -190,6 +190,7 @@ void setupApiSettings()
 		root["playlist"]["images"] = NVS.getString("playlist.images");
 
 		root["weather"]["api"] = NVS.getString("weather.api");
+		root["weather"]["name"] = NVS.getString("weather.name");
 		root["weather"]["location"] = NVS.getInt("weather.loc");
 		root["weather"]["lang"] = NVS.getString("weather.lang");
 		root["weather"]["unit"] = NVS.getString("weather.unit");
@@ -241,6 +242,7 @@ void setupApiSettings()
 			if (!doc["weather"].isNull()) {
 				NVS.setString("weather.api", weather["api"]);
 				NVS.setInt("weather.loc", weather["location"].as<unsigned int>());
+				NVS.setString("weather.name", weather["name"]);
 				NVS.setString("weather.lang", weather["lang"]);
 				NVS.setString("weather.unit", weather["unit"]);
 			}