Added city adding

src/views/Forecast.vue

@@ -1,17 +1,45 @@
 <template>
-  <v-card flat tile>
-    <v-card-title>Prognoza pogody</v-card-title>
-    <v-row justify="space-around">
-      <v-col pa-1 v-for="(city, i) in city_ids" :key="i">
-        <City :id="city" />
-      </v-col>
-    </v-row>
-  </v-card>
+  <div>
+    <v-card flat tile>
+      <v-card-title>Prognoza pogody</v-card-title>
+      <v-row justify="space-around">
+        <v-col v-for="(city, i) in cities" :key="i">
+          <City :city="city" />
+        </v-col>
+        <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,
     };
   }
 }