Added city adding

src/components/City.vue

@@ -28,7 +28,7 @@ import axios from "axios";
 
 @Component
 export default class City extends Vue {
-  @Prop({ required: true }) private readonly id!: number;
+  @Prop({ required: true }) private readonly city!: any;
 
   private created() {
     this.getCurrentData();
@@ -39,7 +39,7 @@ export default class City extends Vue {
     axios
       .get("https://api.openweathermap.org/data/2.5/weather", {
         params: {
-          id: this.id,
+          id: this.city.id,
           units: "metric",
           lang: "pl",
           appid: process.env.VUE_APP_OWM_API_KEY,
@@ -57,7 +57,7 @@ export default class City extends Vue {
     axios
       .get("https://api.openweathermap.org/data/2.5/forecast", {
         params: {
-          id: this.id,
+          id: this.city.id,
           units: "metric",
           lang: "pl",
           appid: process.env.VUE_APP_OWM_API_KEY, 

src/components/NewCity.vue

@@ -0,0 +1,112 @@
+<template>
+  <v-row justify="center">
+    <v-dialog persistent max-width="600px" :value="true">
+      <v-card>
+        <v-card-title>
+          <span class="text-h5">Dodawanie miasta</span>
+        </v-card-title>
+        <v-card-text>
+          <v-autocomplete
+            v-model="select"
+            :loading="loading"
+            :items="items"
+            item-value="id"
+            item-text="name"
+            :search-input.sync="search"
+            cache-items
+            class="mx-4"
+            hide-no-data
+            label="Wyszukaj miasto"
+            solo-inverted
+            clearable
+          >
+            <template slot="item" slot-scope="{ item }">
+              <v-row align="center">
+                <v-col cols="auto">
+                  <v-img
+                    width="32"
+                    :src="
+                      'https://www.countryflags.io/' +
+                      item.country +
+                      '/flat/32.png'
+                    "
+                  ></v-img>
+                </v-col>
+                <v-col>
+                  {{ item.name }}
+                </v-col>
+              </v-row>
+            </template>
+            <template slot="selection" slot-scope="{ item }">
+              <v-row align="center">
+                <v-col cols="auto">
+                  <v-img
+                    width="32"
+                    :src="
+                      'https://www.countryflags.io/' +
+                      item.country +
+                      '/flat/32.png'
+                    "
+                  ></v-img>
+                </v-col>
+                <v-col cols="auto">
+                  {{ item.name }}
+                </v-col>
+              </v-row>
+            </template>
+          </v-autocomplete>
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer></v-spacer>
+          <v-btn color="blue darken-1" text @click="close()"> Zamknij </v-btn>
+          <v-btn color="blue darken-1" text @click="save()" :disabled="!select"> Dodaj miasto </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </v-row>
+</template>
+
+<script lang="ts">
+import { Component, Watch, Vue } from "vue-property-decorator";
+import axios from "axios";
+
+@Component
+export default class NewCity extends Vue {
+  private close() {
+    this.$emit("close");
+  }
+
+  private save() {
+    this.$emit(
+      "save",
+      this.$data.items.find((el: any) => el.id === this.$data.select)
+    );
+    this.close();
+  }
+
+  @Watch("search")
+  private queryCity() {
+    if (this.$data.search.length > 0) {
+      axios
+        .get(process.env.VUE_APP_CITY_RESOLVER, {
+          params: {
+            query: this.$data.search,
+          },
+        })
+        .then((res) => {
+          console.log(res.data);
+          this.$data.items = res.data;
+        });
+    }
+  }
+
+  private data() {
+    return {
+      loading: false,
+      items: [],
+      search: null,
+      select: null,
+    };
+  }
+}
+</script>

src/views/Forecast.vue

@@ -1,17 +1,45 @@
 <template>
-  <v-card flat tile>
+  <div>
-    <v-card-title>Prognoza pogody</v-card-title>
+    <v-card flat tile>
-    <v-row justify="space-around">
+      <v-card-title>Prognoza pogody</v-card-title>
-      <v-col pa-1 v-for="(city, i) in city_ids" :key="i">
+      <v-row justify="space-around">
-        <City :id="city" />
+        <v-col v-for="(city, i) in cities" :key="i">
-      </v-col>
+          <City :city="city" />
-    </v-row>
+        </v-col>
-  </v-card>
+        <v-hover v-slot="{ hover }">
+          <v-col>
+            <v-card
+              tile
+              outlined
+              height="200"
+              width="350"
+              :color="hover ? 'grey lighten-2' : ''"
+              class="rounded-xl"
+              style="outline-style: dashed"
+              :style="hover ? 'cursor: pointer;' : ''"
+              @click="add = true"
+            >
+              <v-row align="center" justify="center" class="fill-height">
+                <v-col cols="auto" class="px-0">
+                  <v-icon size="60" left>mdi-plus</v-icon>
+                </v-col>
+                <v-col cols="auto" class="px-0">
+                  <span class="text-h4">Dodaj miasto</span>
+                </v-col>
+              </v-row>
+            </v-card>
+          </v-col>
+        </v-hover>
+      </v-row>
+    </v-card>
+    <NewCity v-if="add" @save="addCity($event)" @close="add = false" />
+  </div>
 </template>
 
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
 import City from "@/components/City.vue";
+import NewCity from "@/components/NewCity.vue";
 import { nanoid } from "nanoid";
 import {
   collection,
@@ -26,6 +54,7 @@ import {
 @Component({
   components: {
     City,
+    NewCity,
   },
 })
 export default class Forecast extends Vue {
@@ -36,6 +65,11 @@ export default class Forecast extends Vue {
     this.getFirebaseUserData();
   }
 
+  private addCity(city: object) {
+    console.log(city);
+    this.$data.cities.push(city);
+  }
+
   private async getFirebaseUserData() {
     const q = query(this.users, where("uid", "==", this.user.uid));
 
@@ -65,8 +99,8 @@ export default class Forecast extends Vue {
 
   private data() {
     return {
-      city_ids: [6695624, 759734, 3094802, 764849],
       cities: [],
+      add: false,
     };
   }
 }