final4

.env.development

@@ -0,0 +1 @@
+VUE_APP_API_URL=http://localhost:1234/api/

.env.production

@@ -0,0 +1 @@
+VUE_APP_API_URL=https://reservation.ck.si/api/

README.md

@@ -22,3 +22,8 @@ npm run lint
 
 ### Customize configuration
 See [Configuration Reference](https://cli.vuejs.org/config/).
+
+### deploy
+```
+npm run build --mode=production && scp -r dist/* redplanet@dagobert:/home/redplanet/htdocs/reservation.ck.si/frontend
+```

src/router/index.js

@@ -21,7 +21,7 @@ const routes = [
 ]
 
 const router = new VueRouter({
-  mode: 'history',
+  mode: 'hash',
   base: process.env.BASE_URL,
   routes
 })

src/views/Cancel.vue

@@ -2,7 +2,7 @@
   <div class="cancel">
     <h1 v-if="!success">cancelling reservation {{$route.params.token}} ...</h1>
     <h1 v-else>
-      Your reservation got cancelled.<br>
+      your reservation got cancelled.<br>
       thanks for letting us know!
     </h1>
 
@@ -38,7 +38,7 @@
           token: this.$route.params.token
         }
         const response = await fetch(
-          `http://localhost:1234/api/guest/cancel`, {
+          `${process.env.VUE_APP_API_URL}guest/cancel`, {
             method: 'POST',
             headers: { 'Content-Type': 'application/json' },
             body: JSON.stringify(data),

src/views/Home.vue

@@ -14,7 +14,10 @@
           <input name="newsletter" id="newsletter" type="checkbox" class="input-checkbox" />stay informed
         </label> -->
         <input class="input-btn" type="submit" :value="(sending ? 'send ...' : 'reserve')" />
-        <div v-if="error">oh no something went wrong!</div>
+        <div v-if="error">
+          oh no something went wrong!<br>
+          {{errorReason.detail}}
+        </div>
       </form>
       <div v-if="showHelp" style="margin-bottom: 1em;">
         *robot voice* give us your data for the reservation!
@@ -33,74 +36,19 @@
       TEXT!
     </div> -->
     <div
+      v-if="canShare"
       @click="share"
       style="cursor: pointer; margin-top: 5em;"
     >
-
-      <svg
-      style="fill: #fff"
-      version="1.1"
-      id="svg5225"
-      xml:space="preserve"
-      width="350.21805"
-      height="180.67772"
-      xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-      xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-      xmlns="http://www.w3.org/2000/svg"
-      xmlns:svg="http://www.w3.org/2000/svg"><defs
-        id="defs5229" /><sodipodi:namedview
-        id="namedview5227"
-        pagecolor="#ffffff"
-        bordercolor="#999999"
-        borderopacity="1"
-        inkscape:showpageshadow="0"
-        inkscape:pageopacity="0"
-        inkscape:pagecheckerboard="0"
-        inkscape:deskcolor="#d1d1d1" /><inkscape:clipboard
-        min="622.8099,381.05079"
-        max="973.02795,561.72851"
-        geom-min="622.8099,381.05079"
-        geom-max="973.02795,561.72851" /><g
-        id="g5231"
-        transform="translate(-622.8099,-392.30077)"><path
-          id="rect666"
-          style="opacity:1;stroke-width:0;paint-order:stroke fill markers;"
-          d="m 659.49419,392.30077 v 16.42729 h -16.29894 v 19.18185 H 622.8099 v 50.60456 h 21.94223 v 18.91764 h 17.1749 v 19.63024 h 55.25355 l -37.05351,55.91614 h 30.5701 l 37.05351,-55.91614 H 938.594 v -16.05974 h 15.9914 v -18.04835 h 18.44255 v -50.6054 h -19.99946 v -20.0503 h -16.86734 v -19.99779 z m 6.9343,23.4191 h 263.36676 v 19.99779 h 19.99946 v 41.86585 h -18.44255 v 16.05974 H 667.98538 v -19.63024 h -21.94223 v -41.86584 h 20.38534 z" /><g
-          aria-label="WILLTEILEN"
-          id="text1443"
-          style="font-size:96px;line-height:1.25;letter-spacing:0px;word-spacing:0px"
-          transform="matrix(0.42672625,0,0,0.42672625,457.42597,276.68463)"><path
-            d="m 590.70676,451.06763 h -21.89063 l -6.5625,-29.85938 q -0.46875,-1.875 -1.5,-7.45312 -0.98437,-5.57813 -1.45312,-9.32813 -0.375,3.04688 -1.21875,7.59375 -0.84375,4.5 -1.6875,8.29688 -0.79688,3.79687 -6.79688,30.75 h -21.89062 l -16.96875,-68.53125 h 17.85937 l 7.45313,34.35937 q 2.53125,11.39063 3.46875,18.14063 0.60937,-4.78125 2.15625,-12.98438 1.59375,-8.20312 2.95312,-13.59375 l 6.04688,-25.92187 h 17.15625 l 5.85937,25.92187 q 1.5,6.23438 3.04688,14.39063 1.54687,8.15625 2.0625,12.1875 0.60937,-5.20313 3.32812,-18.04688 l 7.59375,-34.45312 h 17.85938 z"
-            style="font-weight:bold;font-family:'Open Sans ExtraBold';-inkscape-font-specification:'Open Sans ExtraBold,  Bold'"
-            id="path4358" /><path
-            d="m 616.44113,451.06763 v -68.53125 h 18.60938 v 68.53125 z"
-            style="font-weight:bold;font-family:'Open Sans ExtraBold';-inkscape-font-specification:'Open Sans ExtraBold,  Bold'"
-            id="path4360" /><path
-            d="m 649.86301,451.06763 v -68.53125 h 18.51562 v 53.57812 h 26.39063 v 14.95313 z"
-            style="font-weight:bold;font-family:'Open Sans ExtraBold';-inkscape-font-specification:'Open Sans ExtraBold,  Bold'"
-            id="path4362" /><path
-            d="m 705.73801,451.06763 v -68.53125 h 18.51562 v 53.57812 h 26.39063 v 14.95313 z"
-            style="font-weight:bold;font-family:'Open Sans ExtraBold';-inkscape-font-specification:'Open Sans ExtraBold,  Bold'"
-            id="path4364" /><path
-            d="M 791.84738,451.06763 H 773.33176 V 397.677 h -16.73438 v -15.14062 h 51.9375 V 397.677 h -16.6875 z"
-            style="font-weight:bold;font-family:'Open Sans ExtraBold';-inkscape-font-specification:'Open Sans ExtraBold,  Bold'"
-            id="path4366" /><path
-            d="m 859.01926,451.06763 h -40.6875 v -68.53125 h 40.6875 v 14.85937 H 836.84738 V 408.177 h 20.53125 v 14.85938 h -20.53125 v 12.9375 h 22.17188 z"
-            style="font-weight:bold;font-family:'Open Sans ExtraBold';-inkscape-font-specification:'Open Sans ExtraBold,  Bold'"
-            id="path4368" /><path
-            d="m 871.01926,451.06763 v -68.53125 h 18.60937 v 68.53125 z"
-            style="font-weight:bold;font-family:'Open Sans ExtraBold';-inkscape-font-specification:'Open Sans ExtraBold,  Bold'"
-            id="path4370" /><path
-            d="m 904.44113,451.06763 v -68.53125 h 18.51563 v 53.57812 h 26.39062 v 14.95313 z"
-            style="font-weight:bold;font-family:'Open Sans ExtraBold';-inkscape-font-specification:'Open Sans ExtraBold,  Bold'"
-            id="path4372" /><path
-            d="m 1001.0036,451.06763 h -40.68747 v -68.53125 h 40.68747 v 14.85937 H 978.83176 V 408.177 h 20.53125 v 14.85938 h -20.53125 v 12.9375 h 22.17184 z"
-            style="font-weight:bold;font-family:'Open Sans ExtraBold';-inkscape-font-specification:'Open Sans ExtraBold,  Bold'"
-            id="path4374" /><path
-            d="m 1078.2536,451.06763 h -24.2812 l -25.0313,-48.28125 h -0.4218 q 0.8906,11.39062 0.8906,17.39062 v 30.89063 h -16.4063 v -68.53125 h 24.1875 l 24.9375,47.625 h 0.2813 q -0.6563,-10.35938 -0.6563,-16.64063 v -30.98437 h 16.5 z"
-            style="font-weight:bold;font-family:'Open Sans ExtraBold';-inkscape-font-specification:'Open Sans ExtraBold,  Bold'"
-            id="path4376" /></g></g></svg>
+      <svg class="share" fill="#fff" version="1.1" viewBox="0 0 350.22 180.68" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><g transform="translate(-622.81 -392.3)"><path d="m659.49 392.3v16.427h-16.299v19.182h-20.385v50.605h21.942v18.918h17.175v19.63h55.254l-37.054 55.916h30.57l37.054-55.916h190.84v-16.06h15.991v-18.048h18.443v-50.605h-19.999v-20.05h-16.867v-19.998zm6.9343 23.419h263.37v19.998h19.999v41.866h-18.443v16.06h-263.37v-19.63h-21.942v-41.866h20.385z" stroke-width="0" style="paint-order:stroke fill markers"/><g transform="matrix(.42673 0 0 .42673 457.43 276.68)" aria-label="WILLTEILEN"><path d="m590.71 451.07h-21.891l-6.5625-29.859q-0.46875-1.875-1.5-7.4531-0.98437-5.5781-1.4531-9.3281-0.375 3.0469-1.2188 7.5938-0.84375 4.5-1.6875 8.2969-0.79688 3.7969-6.7969 30.75h-21.891l-16.969-68.531h17.859l7.4531 34.359q2.5312 11.391 3.4688 18.141 0.60937-4.7812 2.1562-12.984 1.5938-8.2031 2.9531-13.594l6.0469-25.922h17.156l5.8594 25.922q1.5 6.2344 3.0469 14.391 1.5469 8.1562 2.0625 12.188 0.60937-5.2031 3.3281-18.047l7.5938-34.453h17.859z"/><path d="m616.44 451.07v-68.531h18.609v68.531z"/><path d="m649.86 451.07v-68.531h18.516v53.578h26.391v14.953z"/><path d="m705.74 451.07v-68.531h18.516v53.578h26.391v14.953z"/><path d="m791.85 451.07h-18.516v-53.391h-16.734v-15.141h51.938v15.141h-16.688z"/><path d="m859.02 451.07h-40.688v-68.531h40.688v14.859h-22.172v10.781h20.531v14.859h-20.531v12.938h22.172z"/><path d="m871.02 451.07v-68.531h18.609v68.531z"/><path d="m904.44 451.07v-68.531h18.516v53.578h26.391v14.953z"/><path d="m1001 451.07h-40.687v-68.531h40.687v14.859h-22.172v10.781h20.531v14.859h-20.531v12.938h22.172z"/><path d="m1078.3 451.07h-24.281l-25.031-48.281h-0.4218q0.8906 11.391 0.8906 17.391v30.891h-16.406v-68.531h24.188l24.938 47.625h0.2813q-0.6563-10.359-0.6563-16.641v-30.984h16.5z"/></g></g></svg>
     </div>
+    <a
+      v-else
+      href="mailto:?subject=invitation%20-%20oct%2028&body=%40SWK%0D%0Areservation%20required%3A%20reservation.ck.si "
+      style="cursor: pointer; margin-top: 5em;"
+    >
+      <svg class="share" fill="#fff" version="1.1" viewBox="0 0 350.22 180.68" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><g transform="translate(-622.81 -392.3)"><path d="m659.49 392.3v16.427h-16.299v19.182h-20.385v50.605h21.942v18.918h17.175v19.63h55.254l-37.054 55.916h30.57l37.054-55.916h190.84v-16.06h15.991v-18.048h18.443v-50.605h-19.999v-20.05h-16.867v-19.998zm6.9343 23.419h263.37v19.998h19.999v41.866h-18.443v16.06h-263.37v-19.63h-21.942v-41.866h20.385z" stroke-width="0" style="paint-order:stroke fill markers"/><g transform="matrix(.42673 0 0 .42673 457.43 276.68)" aria-label="WILLTEILEN"><path d="m590.71 451.07h-21.891l-6.5625-29.859q-0.46875-1.875-1.5-7.4531-0.98437-5.5781-1.4531-9.3281-0.375 3.0469-1.2188 7.5938-0.84375 4.5-1.6875 8.2969-0.79688 3.7969-6.7969 30.75h-21.891l-16.969-68.531h17.859l7.4531 34.359q2.5312 11.391 3.4688 18.141 0.60937-4.7812 2.1562-12.984 1.5938-8.2031 2.9531-13.594l6.0469-25.922h17.156l5.8594 25.922q1.5 6.2344 3.0469 14.391 1.5469 8.1562 2.0625 12.188 0.60937-5.2031 3.3281-18.047l7.5938-34.453h17.859z"/><path d="m616.44 451.07v-68.531h18.609v68.531z"/><path d="m649.86 451.07v-68.531h18.516v53.578h26.391v14.953z"/><path d="m705.74 451.07v-68.531h18.516v53.578h26.391v14.953z"/><path d="m791.85 451.07h-18.516v-53.391h-16.734v-15.141h51.938v15.141h-16.688z"/><path d="m859.02 451.07h-40.688v-68.531h40.688v14.859h-22.172v10.781h20.531v14.859h-20.531v12.938h22.172z"/><path d="m871.02 451.07v-68.531h18.609v68.531z"/><path d="m904.44 451.07v-68.531h18.516v53.578h26.391v14.953z"/><path d="m1001 451.07h-40.687v-68.531h40.687v14.859h-22.172v10.781h20.531v14.859h-20.531v12.938h22.172z"/><path d="m1078.3 451.07h-24.281l-25.031-48.281h-0.4218q0.8906 11.391 0.8906 17.391v30.891h-16.406v-68.531h24.188l24.938 47.625h0.2813q-0.6563-10.359-0.6563-16.641v-30.984h16.5z"/></g></g></svg>
+    </a>
   </div>
 </template>
 
@@ -121,6 +69,7 @@
         selectionText: null,
         success: false,
         error: false,
+        errorReason: null,
       }
     },
     components: {
@@ -150,10 +99,13 @@
       //     return g
       //   })
       // }
+      canShare () {
+        return !!navigator.share
+      }
     },
     methods: {
       async fetchGuests() {
-        const response = await fetch('/api/guest')
+        const response = await fetch(`${process.env.VUE_APP_API_URL}guest`)
         const data = await response.json()
         this.guests = data
       },
@@ -171,7 +123,7 @@
           newsletter: false,
         }
         const response = await fetch(
-          '/api/guest', {
+          `${process.env.VUE_APP_API_URL}guest`, {
             method: 'POST',
             headers: {
               'Content-Type': 'application/json',
@@ -186,12 +138,10 @@
           this.success = true
           this.fetchGuests()
         } else {
-          this.anzeigename = ''
-          this.name = ''
-          this.email = ''
-          this.success = true
+          this.success = false
           this.fetchGuests()
-          // this.error = true
+          this.error = true
+          this.errorReason = await response.json()
         }
         this.sending = false
         return false
@@ -204,7 +154,6 @@
       },
       async share () {
         location.href = "#";
-        location.href = "#teilnehmen";
         try {
           await navigator.share({ url:"https://reservation.ck.si/" })
         } catch (err) {
@@ -221,6 +170,7 @@
           this.selectionText = this.selection.toString()
         }
       });
+      
       // this.$refs.details.$el
     },
   }
@@ -278,9 +228,8 @@
   }
 
   .input-btn:hover {
-    color: rgb(87, 87, 87);
-    background: rgb(255, 255, 255);
-    border-top: 2px solid rgb(207, 207, 207);
+    color: #fff;
+    background: #3260eb;
   }
 
   .input-checkbox {
@@ -325,7 +274,13 @@
     padding: 3%;
   }
 
-
+  .share {
+    max-width: 30em;
+    mix-blend-mode: soft-light;
+  }
+  .share:hover {
+    mix-blend-mode: difference;
+  }
 
   .selection-text {
     position: fixed;