Stuff

kasperlegarth · Feb 7, 2023 · 5da1353 · 5da1353
1 parent 0f5c0c2
commit 5da1353
Show file tree

Hide file tree

Showing 9 changed files with 157 additions and 35 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -13,7 +13,8 @@
       :typesOfGarnish="typesOfGarnish"
       @newGarnish="addGarnish"
       @newGarnishType="addGarnishType"
-      @newTonicType="addTonicType" />
+      @newTonicType="addTonicType"
+      @newGinType="addGinType" />
   </main>
 </template>
 
@@ -40,23 +41,52 @@ export default {
       this.getGarnish()
     },
     async getGin() {
-      const headers = { "X-Master-Key": process.env.VUE_APP_MASTERKEY }
+      const headers = { "X-Master-Key": process.env.VUE_APP_MASTERKEY, "Access-Control-Allow-Origin": "*", "Access-Control-Allow-Headers": "Origin, X-Requested-With, Content-Type, Accept" }
       let request = await fetch(`https://api.jsonbin.io/v3/b/${process.env.VUE_APP_ENDPOINT_GIN}/latest`, { headers })
-          .then(response =>response.json())
+          .then(response => response.json())
 
-      this.gins = request.record.gins;
-      this.typesOfGin = request.record.types;
+      this.gins = request.record.gins
+      this.typesOfGin = request.record.types
     },
     addGin(gin) {
       console.log("Add the gin: ", gin)
     },
-    addGinType(typeName) {
-      console.log("Add the type: ", typeName)
+    async addGinType(typeName) {
+      let newId = null;
+      if(this.typesOfGin.length > 0) {
+        let lastIdInArray = this.typesOfGin.at(-1).id;
+        newId = lastIdInArray + 1;
+      } else {
+        newId = 1;
+      }
+
+      const newData = {
+        types: this.typesOfGin,
+        gins: this.gins
+      }
+
+      newData.types.push({
+        id: newId,
+        name: typeName
+      })
+
+      const options =  {
+        method: "PUT",
+        headers: { "X-Master-Key": process.env.VUE_APP_MASTERKEY, "Content-Type": "application/json" },
+        body: JSON.stringify(newData)
+      }
+
+      await fetch(`https://api.jsonbin.io/v3/b/${process.env.VUE_APP_ENDPOINT_GIN}`, options)
+        .then(response => {
+          if(response.ok) {
+            this.getGin()
+          }
+        })
     },
     async getTonic() {
       const headers = { "X-Master-Key": process.env.VUE_APP_MASTERKEY }
       let request = await fetch(`https://api.jsonbin.io/v3/b/${process.env.VUE_APP_ENDPOINT_TONIC}/latest`, { headers })
-          .then(response =>response.json())
+          .then(response => response.json())
 
       this.tonics = request.record.tonics;
       this.typesOfTonic = request.record.types;
@@ -100,7 +130,7 @@ export default {
     async getGarnish() {
       const headers = { "X-Master-Key": process.env.VUE_APP_MASTERKEY }
       let request = await fetch(`https://api.jsonbin.io/v3/b/${process.env.VUE_APP_ENDPOINT_GARNISH}/latest`, { headers })
-          .then(response =>response.json())
+          .then(response => response.json())
 
       this.garnish = request.record.garnish
       this.typesOfGarnish = request.record.types
@@ -191,9 +221,6 @@ export default {
     margin: 0;
     height: 100%;
     font-size: 16px;
-    font-family: "Poppins", sans-serif;
-    background-color: $color--chalky;
-    overflow: hidden;
   }
 
   h1 {
@@ -273,8 +300,10 @@ export default {
         }
 
         textarea {
+          margin-top: 12px;
           padding: 12px;
           width: 100%;
+          min-height: 125px;
           font-family: "Poppins", sans-serif;
           font-size: 16px;
           border-radius: 3px;

diff --git a/src/assets/_variables.scss b/src/assets/_variables.scss
@@ -4,4 +4,5 @@ $color--white: #fff;
 $color--swan-white: #f7f1e3;
 $color--crocodile-tooth: #d1ccc0;
 $color--chalky: #e2d78a;
-$color--black: #000000;
+$color--black: #000000;
+$color--ocean-green: #4CA886;
diff --git a/src/assets/hand.gif b/src/assets/hand.gif
diff --git a/src/assets/logo.png b/src/assets/logo.png
diff --git a/src/components/GinForm.vue b/src/components/GinForm.vue
@@ -9,6 +9,20 @@
                 <textarea v-model="ginDescription" placeholder="Say something clever about the gin"></textarea>
             </div>
         </div>
+        <div class="form__group">
+            <strong class="form__group-title">Gin type</strong>
+            <div v-for="ginType in typesOfGin" class="form__group-field" :key="ginType.id">
+                <input type="radio" v-model="pickedGinType" name="type" :value="ginType.id" :id="ginType.id" />
+                <label :for="ginType.id">{{ ginType.name }}</label>
+            </div>
+            <div class="form__group-footer">
+                <a href="#" @click.prevent="showNewType = true">Add new type</a>
+                <div class="form__group-field">
+                    <input v-if="showNewType" @keyup.enter="addType" type="text" class="small" placeholder="Name of new type" v-model="newType" />
+                    <button v-if="showNewType" @click="addType" type="button" class="button button--main button--small">Add</button>
+                </div>
+            </div>
+        </div>
     </div>
 </template>
 
@@ -31,13 +45,28 @@
             typesOfTonic: {
                 type: Array,
                 default: Array.empty
+            },
+            typesOfGin: {
+                type: Array,
+                default: Array.empty,
             }
         },
         data() {
             return {
+                showNewType: false,
+                newType: "",
+                pickedGinType: "",
                 ginName: "",
                 ginDescription: ""
             }
+        },
+        methods: {
+            addType() {
+                this.$emit("newType", this.newType);
+                
+                this.newType = "";
+                this.showNewType = false; 
+            }
         }
     }
 </script>
diff --git a/src/components/Panel.vue b/src/components/Panel.vue
@@ -34,9 +34,12 @@
 
 <style lang="scss">
     .panel {
+        display: flex;
+        flex-direction: column;
         background-color: $color--white;
         border: solid 1px lighten($color--crocodile-tooth, 12);
         border-radius: 3px;;
+        height: 100%;
 
         &__header {
             margin: 0;
@@ -48,13 +51,14 @@
         &__body {
             padding: 24px;
             border-top: solid 1px lighten($color--crocodile-tooth, 12);
-            border-bottom: solid 1px lighten($color--crocodile-tooth, 12);
         }
 
         &__footer {
+            margin-top: auto;
             padding: 24px;
             display: flex;
             justify-content: flex-end;
+            border-top: solid 1px lighten($color--crocodile-tooth, 12);
         }
     }
 

diff --git a/src/router/index.js b/src/router/index.js
@@ -16,7 +16,7 @@ const routes = [
 ]
 
 const router = createRouter({
-  history: createWebHistory("/what-the-gin/"),
+  history: createWebHistory(),
   routes
 })
 

diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
@@ -21,7 +21,7 @@
         <article class="dashboard__form">
             <Panel headline="Add new Gin" @confirm="addGin" confirmText="Add gin">
                 <template v-slot:body>
-                    <GinForm ref="ginForm" :typesOfGin="typesOfGin"></GinForm>
+                    <GinForm ref="ginForm" :typesOfGarnish="typesOfGarnish" :garnish="garnish" :typesOfTonic="typesOfTonic" :tonics="tonics" :typesOfGin="typesOfGin" @newType="addNewGinType"></GinForm>
                 </template>
             </Panel>
         </article>
@@ -42,7 +42,7 @@
             TonicForm,
             GinForm
         },
-        emits: ["newGin", "newTonic", "newGarnish", "newGarnish", "newGarnishType", "newTonicType"],
+        emits: ["newGin", "newTonic", "newGarnish", "newGarnish", "newGinType", "newGarnishType", "newTonicType"],
         props: {
             gins: {
                 type: Array,
@@ -109,31 +109,37 @@
             },
             addGin() {
                 console.log("add gin")
+            },
+            addNewGinType(payload) {
+                this.$emit("newGinType", payload)
             }
         }
     }
 </script>
 
 <style lang="scss">
+    body {
+        font-family: "Poppins", sans-serif;
+        background-color: $color--swan-white;
+    }
+
     .dashboard {
         display: flex;
         margin: 5vh auto 0;
         width: 80vw;
         justify-content: space-between;
+        align-items: stretch;
         flex-wrap: wrap;
 
         h1 {
             width: 100%;
         }
 
         &__form {
-            width: 400px;
-            max-width: 30%;
+            margin: 0 0 3%;
+            width: 100%;
+            max-width: 32%;
             flex-shrink: 0;
-
-            @media(max-width: 1024px) {
-                width: 100%;
-            }
         }
 
         &__gins {

diff --git a/src/views/Guide.vue b/src/views/Guide.vue
@@ -1,20 +1,22 @@
 <template>
   <div class="figure">
-      <svg class="body" viewBox="0 0 1079 1440" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M-601.853 1827.16C-1349.69 1415.69 -1356.97 841.37 -1183.22 439.961C-993.433 1.51337 -584.273 -383.323 -107.513 -380.774C768.878 -376.077 1226.78 502.328 1029.15 1211.65C917.969 1610.74 -33.2031 2139.97 -601.853 1827.13V1827.16Z" fill="#4CA886" stroke="black" stroke-width="7" stroke-miterlimit="10"/>
-      </svg>
+    <svg class="body" viewBox="0 0 1079 1440" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M-601.853 1827.16C-1349.69 1415.69 -1356.97 841.37 -1183.22 439.961C-993.433 1.51337 -584.273 -383.323 -107.513 -380.774C768.878 -376.077 1226.78 502.328 1029.15 1211.65C917.969 1610.74 -33.2031 2139.97 -601.853 1827.13V1827.16Z" fill="#4CA886" stroke="black" stroke-width="7" stroke-miterlimit="10"/>
+    </svg>
 
-      <div class="face">
-        <div class="eye eye--left"></div>
-        <div class="eye eye--right"></div>
+    <div class="face">
+      <div class="eye eye--left"></div>
+      <div class="eye eye--right"></div>
 
-        <svg class="mouth" viewBox="0 0 83 34" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path d="M79.028 4.26442C62.9547 29.8343 29.1911 37.54 3.62122 21.4666" stroke="black" stroke-width="7" stroke-miterlimit="10" stroke-linecap="round"/>
-        </svg>
-      </div>
+      <svg class="mouth" viewBox="0 0 83 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M79.028 4.26442C62.9547 29.8343 29.1911 37.54 3.62122 21.4666" stroke="black" stroke-width="7" stroke-miterlimit="10" stroke-linecap="round"/>
+      </svg>
+    </div>
 
-      <div class="hand"></div>
+    <div class="hand">
+      <img src="@/assets/hand.gif" />
     </div>
+  </div>
   <div class="welcome-screen">
     <transition name="slide-up">
       <div v-if="transitionStep == 1" class="transition-text transition-text--big">
@@ -34,6 +36,10 @@
       </div>
     </transition>
   </div>
+  <div class="controls">
+    <button class="main">🌿 Let the good times begin 🍸</button>
+    <button class="speed">🏎️</button>
+  </div>
 </template>
 
 <script>
@@ -91,6 +97,10 @@ export default {
 </script>
 
 <style lang="scss">
+  body {
+    background-color: $color--chalky;
+  }
+  
   .figure {
     position: absolute;
     top: 0;
@@ -137,7 +147,21 @@ export default {
     .body {
       position: relative;
       height: 100%;
+      max-width: 80%;
       z-index: 1;
+      display: block;
+    }
+
+    .hand {
+      position: absolute;
+      top: 23%;
+      right: 15%;
+      width: 15%;
+      z-index: 2;
+
+      img {
+        width: 100%;
+      }
     }
   }
 
@@ -161,7 +185,7 @@ export default {
       font-size: clamp(50px, 4vw, 102px);
 
       &--big {
-        font-size: clamp(75px, 6vw, 142px)
+        font-size: clamp(65px, 5vw, 142px)
       }
 
       &.slide-up-enter-active,
@@ -181,6 +205,35 @@ export default {
     }
   }
 
+  .controls {
+    position: absolute;
+    bottom: 10vh;
+    right: 10.75vw;
+    width: 43vw;
+    display: flex;
+    align-items: center;
+
+    button {
+      border: solid 3px $color--black;
+      font-size: clamp(18px, 2vw, 35px);
+      color: $color--black;
+    }
+
+    .main {
+      padding: 1.75vw 2vw;
+      white-space: nowrap;
+      background-color: transparent;
+      border-radius: 70px;
+    }
+
+    .speed {
+      padding: 1.35vw 2vw 2.15vw;
+      margin-left: 20px;
+      background-color: $color--ocean-green;
+      border-radius: 50%;
+    }
+  }
+
   @keyframes blink {
     0%,
     25% {