final version?

src/client/html/geschenke.html

@@ -1,5 +1,5 @@
 <div class="flex-container fill-height-medium-up">
-    <div class="grow height-100 overflow-auto site-content">
+    <div class="grow height-100 overflow-auto site-content hide-scrollbar">
         <h1>Gechenkliste</h1>
         <p>
             Ihr macht uns die größte Freude, wenn ihr mit uns feiert und den Tag verbringt. Wenn ihr uns gerne etwas

src/client/index.html

@@ -31,7 +31,7 @@
             </ul>
             <ul class="menu align-center-middle medium-horizontal hide-for-small-only">
                 <li><img class="logo-img" src="img/logo.png" alt="J&S"></li>
-                <li class="active" data-site="home" data-img="1"><a>Home</a></li>
+                <li class="active" data-site="home" data-img-show-always="1"><a>Home</a></li>
                 <li data-site="tagesablauf"><a>Tagesablauf</a></li>
                 <li data-site="unterkunft"><a>Unterkunft</a></li>
                 <li data-site="geschenke"><a>Geschenke</a></li>

src/client/js/PresentsHandler.ts

@@ -1,20 +1,40 @@
 export class PresentsHandler {
     presents: {
-        isBought: boolean,
-        image: string,
-        name: string,
-        description: string
-        link: string
-    }[] = [];
+        [id: number]: {
+            id: number,
+            version: number,
+            isBought: boolean,
+            image: string,
+            name: string,
+            description: string
+            link: string
+        }
+    } = {};
+
+    // @ts-ignore
+    private readonly basePath = __BASE_PATH__;
 
     async loadPresents() {
-        this.presents = require("./presents").default;
+        const presents = require("./presents").default;
+        presents.forEach(p => this.presents[p.id] = p);
         await this.updateStates();
     }
 
     async updateStates() {
-        //TODO vom server laden
-        this.presents[3].isBought = true;
+        const presentData: any[] = await fetch(this.basePath + "/presents", {
+            "credentials": "same-origin",
+            "method": "GET",
+        }).then(function (res) {
+            return res.json();
+        });
+
+        presentData.forEach(data => {
+            const present = this.presents[data.id];
+            if (present){
+                present.isBought = data.isBought === 1;
+                present.version = data.version;
+            }
+        })
     }
 
     async showPresents() {
@@ -26,8 +46,7 @@ export class PresentsHandler {
         await this.loadPresents();
 
         presentContainer.innerText = "";
-        console.log(this.presents);
-        this.presents.forEach(present => {
+        Object.values(this.presents).forEach(present => {
             const element = <HTMLLinkElement>presentTemplate.cloneNode(true);
             (<HTMLImageElement>element.querySelector(".present-image")).src = present.image;
             (<HTMLElement>element.querySelector(".present-name")).innerText = present.name;
@@ -53,8 +72,56 @@ export class PresentsHandler {
         })
     }
 
-    private async setPresentIsBought(present: { isBought: boolean; image: string; name: string; description: string; link: string }, isBought: boolean) {
-        //TODO auf Server updaten
-        present.isBought = isBought;
+    private async setPresentIsBought(present: { id: number, isBought: boolean; version: number, image: string; name: string; description: string; link: string }, isBought: boolean) {
+        const url = this.basePath + "/presents"
+
+        const params = {
+            id: present.id,
+            version: present.version,
+            isBought: isBought
+        }
+
+        const res = await this.send(url, params);
+
+        console.log("result", res);
+
+        if (res.present && res.present.id === present.id) {
+            present.version = res.present.version;
+            present.isBought = res.present.isBought === 1
+        }
+
+        if (res.success === false) {
+            if (res.error === "wrong-version") {
+                alert("Jemand hat schon vor dir das Geschenk bearbeitet. Bitte versuche es erneut.")
+            }
+        }
+    }
+
+    private async send(url, params) {
+        let headers = {};
+        if (!(params instanceof FormData) && typeof params === "object") {
+            params = JSON.stringify(params);
+            headers = {
+                "Content-Type": "application/json"
+            }
+        }
+
+        return fetch(url, {
+            "credentials": "same-origin",
+            "method": "POST",
+            "headers": headers,
+            "body": params,
+        }).then(function (res) {
+            return res.json();
+        }).catch(function (e) {
+            debugger;
+            console.error("error", e);
+            return {
+                "success": false,
+                "errors": [
+                    "not-online"
+                ]
+            }
+        });
     }
 }

src/client/js/index.ts

@@ -16,7 +16,6 @@ const images = {
     geschenke: require("../img/geschenke.jpg").default,
 }
 
-
 const callbacks = {
     home: () => {
     },
@@ -54,6 +53,7 @@ const callbacks = {
 
         const navBar = document.querySelector(".top-bar");
         const anchors = document.querySelectorAll(".anchor");
+
         const margin = navBar.clientHeight + 50;
 
         const observerDown = new IntersectionObserver(entries => {
@@ -63,7 +63,6 @@ const callbacks = {
                 }
             });
         }, {threshold: 1, rootMargin: "-" + margin + "px 0px 0px 0px"});
-        // }, {threshold: 1, rootMargin: "-100px 0px 0px 0px"});
         const observerUp = new IntersectionObserver(entries => {
             entries.some(entry => {
                 if (entry.isIntersecting && entry.intersectionRect.top === navBar.clientHeight && !scrollToView) {
@@ -95,7 +94,6 @@ $(document).foundation();
 $(function () {
     const container = document.getElementById("main-content");
     const img = document.getElementById("home-img-container");
-    const navbar = document.getElementById("main-menu");
 
     let currentSite = "home";
 
@@ -130,4 +128,10 @@ $(function () {
             }
         });
     })
+
+    document.querySelectorAll(".logo-img").forEach(img => {
+        img.addEventListener("click", () => {
+            document.querySelector("li[data-site='home']").dispatchEvent(new Event("click"));
+        })
+    })
 });

src/client/js/presents.ts

@@ -1,49 +1,65 @@
 export default [{
+    id: 1,
     isBought: false,
     image: require("../img/geschenke/test.jpg").default,
     name: "Akku-Bohrer",
     description: "Der von BOSCH, weil ich den schon immer mal haben wollte",
     link: "http://www.onlinewahn.de/ende.htm",
+    version: 0,
 }, {
-    isBought: true,
+    id: 2,
+    isBought: false,
     image: require("../img/geschenke/test.jpg").default,
     name: "Windows",
     description: "Bisher konnte ich es mir nicht leisten und musste immer auf eine Web-Version zurückgreifen",
     link: "https://www.windows93.net/",
+    version: 0,
 },{
+    id: 3,
     isBought: false,
     image: require("../img/geschenke/test.jpg").default,
     name: "Akku-Bohrer",
     description: "Der von BOSCH, weil ich den schon immer mal haben wollte",
     link: "http://www.onlinewahn.de/ende.htm",
+    version: 0,
 }, {
+    id: 4,
     isBought: false,
     image: require("../img/geschenke/test.jpg").default,
     name: "Windows",
     description: "Bisher konnte ich es mir nicht leisten und musste immer auf eine Web-Version zurückgreifen",
     link: "https://www.windows93.net/",
+    version: 0,
 },{
+    id: 5,
     isBought: false,
     image: require("../img/geschenke/test.jpg").default,
     name: "Akku-Bohrer",
     description: "Der von BOSCH, weil ich den schon immer mal haben wollte",
     link: "http://www.onlinewahn.de/ende.htm",
+    version: 0,
 }, {
+    id:6,
     isBought: false,
     image: require("../img/geschenke/test.jpg").default,
     name: "Windows",
     description: "Bisher konnte ich es mir nicht leisten und musste immer auf eine Web-Version zurückgreifen",
     link: "https://www.windows93.net/",
+    version: 0,
 },{
+    id:7,
     isBought: false,
     image: require("../img/geschenke/test.jpg").default,
     name: "Akku-Bohrer",
     description: "Der von BOSCH, weil ich den schon immer mal haben wollte",
     link: "http://www.onlinewahn.de/ende.htm",
+    version: 0,
 }, {
+    id: 8,
     isBought: false,
     image: require("../img/geschenke/test.jpg").default,
     name: "Windows",
     description: "Bisher konnte ich es mir nicht leisten und musste immer auf eine Web-Version zurückgreifen",
     link: "https://www.windows93.net/",
+    version: 0,
 },]

src/client/sass/_navbar.scss

@@ -4,7 +4,7 @@
   background: white;
   padding: 0;
 
-  .grid-container{
+  .grid-container {
     padding: 0;
   }
 
@@ -13,47 +13,81 @@
     display: flex;
 
     li {
+
       flex: 1;
       text-align: center;
-      height: 5rem;
-      padding-top: 0.9rem;
+      height: 3rem;
+      padding-top: 0.5rem;
       padding-bottom: 0.5rem;
 
-      @include breakpoint(large){
-        padding-top: 0.5rem;
+      &:first-child {
+        flex: initial;
+        padding-left: 0.5rem;
+        padding-right: 0.5rem;
+      }
+
+
+      @include breakpoint(large) {
+        height: 4rem;
       }
 
       a {
         color: black;
         font-family: "Bahnschrift", Helvetica, Arial, serif;
-        font-size: 1.4rem;
-        @include breakpoint(large){
-          font-size: 2rem;
+        font-size: 1.3rem;
+        padding: 0.3rem;
+        @include breakpoint(large) {
+          padding: 0.7rem 1rem;
+          font-size: 1.7rem;
         }
       }
 
       &.active {
-        background: $background-color;
+        background: white;
 
         > a {
-          background: $background-color;
+          background: transparent;
         }
       }
+
+      position: relative;
+
+      &::after {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        //background: red;
+        background-image: url("../img/einkreiser.png");
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+        display: none;
+        cursor: pointer;
+      }
+
+      &.active::after {
+        display: initial;
+        opacity: 0.7;
+      }
     }
 
     .logo-img {
-      height: 3rem;
-      @include breakpoint(large){
-        height: 4rem;
+      cursor: pointer;
+      height: 2rem;
+      @include breakpoint(large) {
+        height: 3rem;
       }
     }
 
-    &.responsive-menu{
+    &.responsive-menu {
       position: absolute;
-      right:0;
+      right: 0;
       z-index: 1;
       box-shadow: 0 0 5px $background-color;
-      .menu-closer{
+
+      .menu-closer {
         z-index: -1;
         position: fixed;
         top: 0;
@@ -70,23 +104,27 @@
   }
 }
 
-$menuIconHeight : 2rem;
-.title-bar{
+$menuIconHeight: 2rem;
+.title-bar {
   background: $background-color;
   text-align: right;
   //justify-content: flex-end;
   display: block;
-  .menu-icon{
+
+  .menu-icon {
     width: $menuIconHeight;
     height: $menuIconHeight;
     outline: none;
-    &::after{
+
+    &::after {
       background: #fefefe;
       height: #{($menuIconHeight/9)};
       box-shadow: 0 #{($menuIconHeight/3)} 0 #fefefe, 0 #{($menuIconHeight*2/3)} 0 #fefefe;
     }
   }
-  .logo-img{
+
+  .logo-img {
+    cursor: pointer;
     float: left;
     height: $menuIconHeight;
   }

src/client/sass/_tagesablauf.scss

@@ -85,7 +85,12 @@ $states: godi fingerfood foto sekt essen spiel dance;
 
   &.show-in-dialog {
     position: fixed;
-
+  }
+  &:last-child{
+    height: calc(100vh - 8rem - 1px);
+    @include breakpoint(medium down) {
+      height: calc(100vh - 7rem - 1px);
+    }
   }
 }
 
@@ -113,6 +118,7 @@ $states: godi fingerfood foto sekt essen spiel dance;
       overflow: auto;
       padding: 2rem 1rem;
       background: $background-color;
+      height: initial;
     }
   }
 }

src/client/sass/index.scss

@@ -15,6 +15,13 @@
   src: url("../img/WinterSunrise.ttf");
 }
 
+@mixin fullHeight{
+  height: calc(100vh - 4rem);
+  @include breakpoint(medium down) {
+    height: calc(100vh - 3rem);
+  }
+}
+
 .width-100 {
   width: 100%;
 }
@@ -39,10 +46,7 @@ body {
   height: 100%;
 
   #main-content-container {
-    height: calc(100% - 5rem);
-    @include breakpoint(small only) {
-      height: calc(100% - 3rem);
-    }
+    @include fullHeight;
     position: relative;
     overflow: auto;
 
@@ -103,10 +107,7 @@ h1 {
 
     img {
       width: 100%;
-      height: calc(100% - 5rem);
-      @include breakpoint(small only) {
-        height: calc(100% - 3rem);
-      }
+      @include fullHeight;
       object-fit: cover;
     }
 
@@ -151,15 +152,15 @@ img.full-screen-width {
 }
 
 .fill-height {
-  height: calc(100vh - 5rem);
-  @include breakpoint(small only) {
-    height: calc(100vh - 3rem);
-  }
+  @include fullHeight;
 }
 
 .fill-height-medium-up {
   @include breakpoint(medium) {
-    height: calc(100vh - 5rem);
+    height: calc(100vh - 3rem);
+    @include breakpoint(large){
+      height: calc(100vh - 4rem);
+    }
   }
 }
 
@@ -169,4 +170,16 @@ img.full-screen-width {
   img {
     object-fit: cover;
   }
+}
+
+.padding-bottom-0 {
+  padding-bottom: 0;
+}
+
+.hide-scrollbar{
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  &::-webkit-scrollbar{
+    display: none;
+  }
 }