template with scripts and random results

components/Button.vue

@@ -1,5 +1,5 @@
 <template>
-  <button>
+  <button :disabled="disabled">
     {{ text }}
     <fa v-if="icon" :icon="icon" />
   </button>
@@ -15,6 +15,10 @@ export default {
     icon: {
       type: Array,
       default: null
+    },
+    disabled: {
+      type: Boolean,
+      default: false
     }
   }
 }

components/InputFile.vue

@@ -44,6 +44,10 @@ export default {
     id: {
       type: String,
       default: 'input-file'
+    },
+    edit: {
+      type: Object,
+      default: null
     }
   },
   data () {
@@ -54,6 +58,11 @@ export default {
       name: null
     }
   },
+  watch: {
+    edit () {
+      this.getFileInfo(this.edit)
+    }
+  },
   methods: {
     handleDrop (event) {
       event.preventDefault()

components/Loader.vue

@@ -0,0 +1,6 @@
+<template>
+  <div>
+    <!-- @MACIEJ fajnie by bylo jakbys zrobil, ze ten loader ma duzy z-index, zajmuje 100% height i width i juz wgl by bylo super jakby sie kręciło coś -->
+    loading...
+  </div>
+</template>

pages/check.vue

@@ -0,0 +1,47 @@
+<template>
+  <main>
+    <h1>Cat or Not</h1>
+    <Loader v-if="loading" />
+    <InputFile label="YOUR PICTURE" :edit="image && image.file" @set="(value) => handlePhotoChange(value)" />
+    <Button v-if="result === null" text="CONTINUE" :disabled="image === null" :icon="['fas', 'arrow-right']" @click.native="() => getResult()" />
+    <template v-else>
+      <!-- @MACIEJ tutaj wstaw nowy komponent, do ktorego np. przeslesz rozny tekst i typ (success, fail) zaleznie od zmiennej result. Ma wyswietlac czy jest kotek czy nie -->
+      <!-- @temp -->
+      {{ result }}
+      <Button text="TRY AGAIN" :icon="['fas', 'redo']" @click.native="getResult" />
+      <Button text="PICK ANOTHER" :icon="['fas', 'arrow-right']" @click.native="clear" />
+    </template>
+  </main>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      image: null,
+      result: null,
+      loading: false
+    }
+  },
+  methods: {
+    handlePhotoChange (value) {
+      this.image = value
+      // this.result = this.checkPhoto(value)
+    },
+    checkPhoto (photo) {
+      return Math.random() < 0.5
+    },
+    clear () {
+      this.image = null
+      this.result = null
+    },
+    getResult () {
+      this.loading = true
+      setTimeout(() => {
+        this.result = this.checkPhoto(this.image)
+        this.loading = false
+      }, 1500)
+    }
+  }
+}
+</script>

pages/index.vue

@@ -1,3 +1,8 @@
 <template>
-  <div />
+  <main>
+    <h1>Cat or Not</h1>
+    <nuxt-link to="/check">
+      <Button text="GET STARTED" />
+    </nuxt-link>
+  </main>
 </template>