final version?

This commit is contained in:
silas 2020-12-08 20:24:21 +01:00
parent d913cd56bc
commit 9aff53878a
16 changed files with 382 additions and 230 deletions

8
dist/bundle.js vendored

File diff suppressed because one or more lines are too long

2
dist/index.html vendored
View File

@ -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>

82
dist/main.css vendored
View File

@ -4770,28 +4770,51 @@ html.is-reveal-open {
.top-bar .menu li {
flex: 1;
text-align: center;
height: 5rem;
padding-top: 0.9rem;
padding-bottom: 0.5rem; }
height: 3rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
position: relative; }
.top-bar .menu li:first-child {
flex: initial;
padding-left: 0.5rem;
padding-right: 0.5rem; }
@media print, screen and (min-width: 64em) {
.top-bar .menu li {
padding-top: 0.5rem; } }
height: 4rem; } }
.top-bar .menu li a {
color: black;
font-family: "Bahnschrift", Helvetica, Arial, serif;
font-size: 1.4rem; }
font-size: 1.3rem;
padding: 0.3rem; }
@media print, screen and (min-width: 64em) {
.top-bar .menu li a {
font-size: 2rem; } }
padding: 0.7rem 1rem;
font-size: 1.7rem; } }
.top-bar .menu li.active {
background: #d7c9ac; }
background: white; }
.top-bar .menu li.active > a {
background: #d7c9ac; }
background: transparent; }
.top-bar .menu li::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url(/img/einkreiser.png);
background-size: 100% 100%;
background-repeat: no-repeat;
display: none;
cursor: pointer; }
.top-bar .menu li.active::after {
display: initial;
opacity: 0.7; }
.top-bar .menu .logo-img {
height: 3rem; }
cursor: pointer;
height: 2rem; }
@media print, screen and (min-width: 64em) {
.top-bar .menu .logo-img {
height: 4rem; } }
height: 3rem; } }
.top-bar .menu.responsive-menu {
position: absolute;
right: 0;
@ -4821,6 +4844,7 @@ html.is-reveal-open {
height: 0.22222rem;
box-shadow: 0 0.66667rem 0 #fefefe, 0 1.33333rem 0 #fefefe; }
.title-bar .logo-img {
cursor: pointer;
float: left;
height: 2rem; }
@ -4935,6 +4959,11 @@ html.is-reveal-open {
margin-bottom: 0; }
.anchor.show-in-dialog {
position: fixed; }
.anchor:last-child {
height: calc(100vh - 8rem - 1px); }
@media print, screen and (max-width: 63.99875em) {
.anchor:last-child {
height: calc(100vh - 7rem - 1px); } }
#modal {
display: none; }
@ -4956,7 +4985,8 @@ html.is-reveal-open {
max-height: 80%;
overflow: auto;
padding: 2rem 1rem;
background: #d7c9ac; }
background: #d7c9ac;
height: initial; }
@font-face {
font-family: "WinterSunrise";
@ -4981,12 +5011,12 @@ body {
width: 100%;
height: 100%; }
body #main-content-container {
height: calc(100% - 5rem);
height: calc(100vh - 4rem);
position: relative;
overflow: auto; }
@media print, screen and (max-width: 49.99875em) {
@media print, screen and (max-width: 63.99875em) {
body #main-content-container {
height: calc(100% - 3rem); } }
height: calc(100vh - 3rem); } }
body #main-content-container #scroll-container {
min-height: 100%;
background: #d7c9ac; }
@ -5026,11 +5056,11 @@ h1 {
position: fixed; }
#home-img-container #home-img img {
width: 100%;
height: calc(100% - 5rem);
height: calc(100vh - 4rem);
object-fit: cover; }
@media print, screen and (max-width: 49.99875em) {
@media print, screen and (max-width: 63.99875em) {
#home-img-container #home-img img {
height: calc(100% - 3rem); } }
height: calc(100vh - 3rem); } }
#home-img-container #home-img #start-text-img-overlay {
position: absolute;
bottom: 3rem;
@ -5064,17 +5094,29 @@ img.full-screen-width {
padding: 3rem 2rem; } }
.fill-height {
height: calc(100vh - 5rem); }
@media print, screen and (max-width: 49.99875em) {
height: calc(100vh - 4rem); }
@media print, screen and (max-width: 63.99875em) {
.fill-height {
height: calc(100vh - 3rem); } }
@media print, screen and (min-width: 50em) {
.fill-height-medium-up {
height: calc(100vh - 5rem); } }
height: calc(100vh - 3rem); } }
@media print, screen and (min-width: 50em) and (min-width: 64em) {
.fill-height-medium-up {
height: calc(100vh - 4rem); } }
.img-column {
max-width: 40%; }
.img-column img {
object-fit: cover; }
.padding-bottom-0 {
padding-bottom: 0; }
.hide-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none; }
.hide-scrollbar::-webkit-scrollbar {
display: none; }

118
package-lock.json generated
View File

@ -337,7 +337,6 @@
"version": "1.19.0",
"resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.0.tgz",
"integrity": "sha512-W98JrE0j2K78swW4ukqMleo8R7h/pFETjM2DQ90MF6XK2i4LO4W3gQ71Lt4w3bfm2EvVSyWHplECvB5sK22yFQ==",
"dev": true,
"requires": {
"@types/connect": "*",
"@types/node": "*"
@ -347,16 +346,6 @@
"version": "3.4.33",
"resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.33.tgz",
"integrity": "sha512-2+FrkXY4zllzTNfJth7jOqEHC+enpLeGslEhpnTAkg21GkRrWV4SsAtqchtT4YS9/nODBU2/ZfsBY2X4J/dX7A==",
"dev": true,
"requires": {
"@types/node": "*"
}
},
"@types/engine.io": {
"version": "3.1.4",
"resolved": "https://registry.npmjs.org/@types/engine.io/-/engine.io-3.1.4.tgz",
"integrity": "sha512-98rXVukLD6/ozrQ2O80NAlWDGA4INg+tqsEReWJldqyi2fulC9V7Use/n28SWgROXKm6003ycWV4gZHoF8GA6w==",
"dev": true,
"requires": {
"@types/node": "*"
}
@ -365,7 +354,6 @@
"version": "4.17.9",
"resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.9.tgz",
"integrity": "sha512-SDzEIZInC4sivGIFY4Sz1GG6J9UObPwCInYJjko2jzOf/Imx/dlpume6Xxwj1ORL82tBbmN4cPDIDkLbWHk9hw==",
"dev": true,
"requires": {
"@types/body-parser": "*",
"@types/express-serve-static-core": "*",
@ -377,7 +365,6 @@
"version": "4.17.14",
"resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.17.14.tgz",
"integrity": "sha512-uFTLwu94TfUFMToXNgRZikwPuZdOtDgs3syBtAIr/OXorL1kJqUJT9qCLnRZ5KBOWfZQikQ2xKgR2tnDj1OgDA==",
"dev": true,
"requires": {
"@types/node": "*",
"@types/qs": "*",
@ -409,8 +396,7 @@
"@types/mime": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/@types/mime/-/mime-2.0.3.tgz",
"integrity": "sha512-Jus9s4CDbqwocc5pOAnh8ShfrnMcPHuJYzVcSUU7lrh8Ni5HuIqX3oilL86p3dlTrk0LzHRCgA/GQ7uNCw6l2Q==",
"dev": true
"integrity": "sha512-Jus9s4CDbqwocc5pOAnh8ShfrnMcPHuJYzVcSUU7lrh8Ni5HuIqX3oilL86p3dlTrk0LzHRCgA/GQ7uNCw6l2Q=="
},
"@types/minimatch": {
"version": "3.0.3",
@ -421,8 +407,7 @@
"@types/node": {
"version": "14.14.10",
"resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.10.tgz",
"integrity": "sha512-J32dgx2hw8vXrSbu4ZlVhn1Nm3GbeCFNw2FWL8S5QKucHGY0cyNwjdQdO+KMBZ4wpmC7KhLCiNsdk1RFRIYUQQ==",
"dev": true
"integrity": "sha512-J32dgx2hw8vXrSbu4ZlVhn1Nm3GbeCFNw2FWL8S5QKucHGY0cyNwjdQdO+KMBZ4wpmC7KhLCiNsdk1RFRIYUQQ=="
},
"@types/parse-json": {
"version": "4.0.0",
@ -433,35 +418,22 @@
"@types/qs": {
"version": "6.9.5",
"resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.5.tgz",
"integrity": "sha512-/JHkVHtx/REVG0VVToGRGH2+23hsYLHdyG+GrvoUGlGAd0ErauXDyvHtRI/7H7mzLm+tBCKA7pfcpkQ1lf58iQ==",
"dev": true
"integrity": "sha512-/JHkVHtx/REVG0VVToGRGH2+23hsYLHdyG+GrvoUGlGAd0ErauXDyvHtRI/7H7mzLm+tBCKA7pfcpkQ1lf58iQ=="
},
"@types/range-parser": {
"version": "1.2.3",
"resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.3.tgz",
"integrity": "sha512-ewFXqrQHlFsgc09MK5jP5iR7vumV/BYayNC6PgJO2LPe8vrnNFyjQjSppfEngITi0qvfKtzFvgKymGheFM9UOA==",
"dev": true
"integrity": "sha512-ewFXqrQHlFsgc09MK5jP5iR7vumV/BYayNC6PgJO2LPe8vrnNFyjQjSppfEngITi0qvfKtzFvgKymGheFM9UOA=="
},
"@types/serve-static": {
"version": "1.13.8",
"resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.13.8.tgz",
"integrity": "sha512-MoJhSQreaVoL+/hurAZzIm8wafFR6ajiTM1m4A0kv6AGeVBl4r4pOV8bGFrjjq1sGxDTnCoF8i22o0/aE5XCyA==",
"dev": true,
"requires": {
"@types/mime": "*",
"@types/node": "*"
}
},
"@types/socket.io": {
"version": "2.1.11",
"resolved": "https://registry.npmjs.org/@types/socket.io/-/socket.io-2.1.11.tgz",
"integrity": "sha512-bVprmqPhJMLb9ZCm8g0Xy8kwBFRbnanOWSxzWkDkkIwxTvud5tKMfAJymXX6LQbizUKCS1yima7JM4BeLqjNqA==",
"dev": true,
"requires": {
"@types/engine.io": "*",
"@types/node": "*"
}
},
"@types/source-list-map": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/@types/source-list-map/-/source-list-map-0.1.2.tgz",
@ -899,8 +871,7 @@
"arg": {
"version": "4.1.3",
"resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz",
"integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==",
"dev": true
"integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA=="
},
"arr-diff": {
"version": "4.0.0",
@ -1886,6 +1857,11 @@
"integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
"dev": true
},
"bignumber.js": {
"version": "9.0.0",
"resolved": "https://registry.npmjs.org/bignumber.js/-/bignumber.js-9.0.0.tgz",
"integrity": "sha512-t/OYhhJ2SD+YGBQcjY8GzzDHEk9f3nerxjtfa6tlMXfe7frs/WozhvCNoGvpM0P3bNf3Gq5ZRMlGr5f3r4/N8A=="
},
"binary-extensions": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.1.0.tgz",
@ -2191,8 +2167,7 @@
"buffer-from": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz",
"integrity": "sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==",
"dev": true
"integrity": "sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A=="
},
"buffer-xor": {
"version": "1.0.3",
@ -2837,8 +2812,7 @@
"core-util-is": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
"integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
"dev": true
"integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac="
},
"cosmiconfig": {
"version": "7.0.0",
@ -3227,8 +3201,7 @@
"diff": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz",
"integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==",
"dev": true
"integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A=="
},
"diffie-hellman": {
"version": "5.0.3",
@ -5225,6 +5198,11 @@
"integrity": "sha512-VjSeb/lHmkoyd8ryPVIKvOCn4D1koMqY+vqyjjUfc3xyKtP4dYOxM44sZrnqQSzSds3xyOrUTLTC9LVCVgLngw==",
"dev": true
},
"isarray": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
"integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE="
},
"isexe": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
@ -5521,8 +5499,7 @@
"make-error": {
"version": "1.3.6",
"resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
"integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==",
"dev": true
"integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw=="
},
"map-cache": {
"version": "0.2.2",
@ -5868,6 +5845,41 @@
"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
},
"mysql": {
"version": "2.18.1",
"resolved": "https://registry.npmjs.org/mysql/-/mysql-2.18.1.tgz",
"integrity": "sha512-Bca+gk2YWmqp2Uf6k5NFEurwY/0td0cpebAucFpY/3jhrwrVGuxU2uQFCHjU19SJfje0yQvi+rVWdq78hR5lig==",
"requires": {
"bignumber.js": "9.0.0",
"readable-stream": "2.3.7",
"safe-buffer": "5.1.2",
"sqlstring": "2.3.1"
},
"dependencies": {
"readable-stream": {
"version": "2.3.7",
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
"integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
"requires": {
"core-util-is": "~1.0.0",
"inherits": "~2.0.3",
"isarray": "~1.0.0",
"process-nextick-args": "~2.0.0",
"safe-buffer": "~5.1.1",
"string_decoder": "~1.1.1",
"util-deprecate": "~1.0.1"
}
},
"string_decoder": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
"integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
"requires": {
"safe-buffer": "~5.1.0"
}
}
}
},
"nan": {
"version": "2.14.2",
"resolved": "https://registry.npmjs.org/nan/-/nan-2.14.2.tgz",
@ -6785,8 +6797,7 @@
"process-nextick-args": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
"integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
"dev": true
"integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag=="
},
"promise-inflight": {
"version": "1.0.1",
@ -7885,6 +7896,11 @@
"extend-shallow": "^3.0.0"
}
},
"sqlstring": {
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/sqlstring/-/sqlstring-2.3.1.tgz",
"integrity": "sha1-R1OT/56RR5rqYtyvDKPRSYOn+0A="
},
"sshpk": {
"version": "1.16.1",
"resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.16.1.tgz",
@ -8509,7 +8525,6 @@
"version": "9.0.0",
"resolved": "https://registry.npmjs.org/ts-node/-/ts-node-9.0.0.tgz",
"integrity": "sha512-/TqB4SnererCDR/vb4S/QvSZvzQMJN8daAslg7MeaiHvD8rDZsSfXmNeNumyZZzMned72Xoq/isQljYSt8Ynfg==",
"dev": true,
"requires": {
"arg": "^4.1.0",
"diff": "^4.0.1",
@ -8521,14 +8536,12 @@
"source-map": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
"dev": true
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
},
"source-map-support": {
"version": "0.5.19",
"resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.19.tgz",
"integrity": "sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==",
"dev": true,
"requires": {
"buffer-from": "^1.0.0",
"source-map": "^0.6.0"
@ -8596,8 +8609,7 @@
"typescript": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.1.2.tgz",
"integrity": "sha512-thGloWsGH3SOxv1SoY7QojKi0tc+8FnOmiarEGMbd/lar7QOEd3hvlx3Fp5y6FlDUGl9L+pd4n2e+oToGMmhRQ==",
"dev": true
"integrity": "sha512-thGloWsGH3SOxv1SoY7QojKi0tc+8FnOmiarEGMbd/lar7QOEd3hvlx3Fp5y6FlDUGl9L+pd4n2e+oToGMmhRQ=="
},
"undefsafe": {
"version": "2.0.3",
@ -8851,8 +8863,7 @@
"util-deprecate": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
"integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
"dev": true
"integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8="
},
"util.promisify": {
"version": "1.0.0",
@ -9911,8 +9922,7 @@
"yn": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz",
"integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==",
"dev": true
"integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q=="
},
"yocto-queue": {
"version": "0.1.0",

View File

@ -38,10 +38,11 @@
"webpack-cli": "^3.3.12"
},
"dependencies": {
"express": "^4.17.1",
"@types/express": "^4.17.8",
"dotenv": "^8.2.0",
"express": "^4.17.1",
"mysql": "^2.18.1",
"ts-node": "^9.0.0",
"typescript": "^4.0.2",
"@types/express": "^4.17.8"
"typescript": "^4.0.2"
}
}

1
setup.sql Normal file
View File

@ -0,0 +1 @@
CREATE TABLE presents (id int(11) NOT NULL PRIMARY KEY, version int(11) NOT NULL, isBought tinyint(1) NOT NULL)

View File

@ -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

View File

@ -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>

View File

@ -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"
]
}
});
}
}

View File

@ -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"));
})
})
});

View File

@ -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,
},]

View File

@ -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;
}

View File

@ -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;
}
}
}

View File

@ -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;
}
}

View File

@ -1,10 +1,12 @@
import * as express from "express";
import {createServer, Server as HTTPServer} from "http";
import * as path from "path";
import * as mysql from "mysql";
export class Server {
private httpServer: HTTPServer;
private app: express.Application;
private mysqlConnection;
// private io: socketIO.Server;
// private activeSockets: string[] = [];
@ -13,20 +15,39 @@ export class Server {
private readonly DEFAULT_PORT = parseInt(process.env.PORT) || 5000;
constructor() {
this.initialize();
}
private initialize(): void {
this.app = express();
this.httpServer = createServer(this.app);
// this.io = socketIO(this.httpServer);
this.mysqlConnection = mysql.createConnection({
host: process.env.MYSQL_HOST || "localhost",
user: process.env.MYSQL_USER || "root",
password: process.env.MYSQL_PASSWORD || "",
database: process.env.MYSQL_DATABASE || "hochzeit"
});
this.configureApp();
this.configureRoutes();
// this.handleSocketConnection();
}
private async query(sql): Promise<any[]> {
return new Promise((resolve, reject) => {
this.mysqlConnection.query(sql, (error, results) => {
if (error) {
reject(error)
} else {
resolve(results);
}
})
})
}
private configureApp(): void {
this.app.use(express.json({limit: "1mb"}));
this.app.use(express.static(path.join(__dirname, "../../dist")));
}
@ -34,98 +55,29 @@ export class Server {
this.app.get("/", (req, res) => {
res.sendFile("index.html");
});
}
this.app.get("/presents", async (req, res) => {
res.json(await this.query("SELECT * FROM presents"));
})
this.app.post("/presents", async (req, res) => {
const id = parseInt(req.body.id);
const isBought = (req.body.isBought === true)?1:0;
const version = parseInt(req.body.version) || 0;
const newVersion = version + 1;
// private handleSocketConnection(): void {
// let webserverSocket = null;
// this.io.on("connection", socket => {
// console.log("new client", new Date());
// const existingSocket = this.activeSockets.find(
// existingSocket => existingSocket === socket.id
// );
//
// if (!existingSocket) {
// this.activeSockets.push(socket.id);
//
// socket.emit("update-user-list", {
// users: this.activeSockets.filter(
// existingSocket => existingSocket !== socket.id
// )
// });
//
// socket.broadcast.emit("update-user-list", {
// users: [socket.id]
// });
// }
//
// socket.on("message", (data: any) => {
// console.log(new Date(), data.to, data.message.type);
// if (data.message.type === undefined){
// console.log(new Date(), data.message);
// }
// if (data.to) {
// socket.to(data.to).emit("message", data);
// } else if (webserverSocket) {
// data.from = socket.id;
// webserverSocket.emit("message", data)
// }
// });
//
// socket.on("set-webserver", () => {
// if (webserverSocket === null) {
// console.log("setting webserver", new Date())
// webserverSocket = socket;
//
// this.activeSockets.forEach(s => {
// if (s !== socket.id){
// socket.to(s).emit("ready");
// }
// });
// }
// })
//
// if (webserverSocket){
// socket.emit("ready");
// }
// // socket.on("request-offer", () => {
// // if (webserverSocket) {
// // webserverSocket.emit("request-offer", {socket: socket.id})
// // }
// // });
// //
// // socket.on("answer", data => {
// // console.log("got answer", data.answer);
// // socket.to(data.to).emit("answer", data.answer);
// // });
// //
// // socket.on("send-answer", data => {
// // if (webserverSocket) {
// // addMessage(socket.id, JSON.parse(data));
// // webserverSocket.emit("send-answer", data)
// // }
// // });
// //
// // socket.on("send-ice-candidate", data => {
// // if (socket.to(data.to)){
// // addMessage(socket.id, data.candidate);
// // socket.to(data.to).emit("ice-candidate", data.candidate)
// // }
// // });
//
// socket.on("disconnect", () => {
// console.log("losing client", new Date())
// this.activeSockets = this.activeSockets.filter(
// existingSocket => existingSocket !== socket.id
// );
// socket.broadcast.emit("remove-user", {
// socketId: socket.id
// });
// if (socket === webserverSocket){
// webserverSocket = null;
// }
// });
// });
// }
const presents = await this.query("SELECT * FROM presents WHERE id = '" + id + "'");
if (presents.length === 0) {
await this.query("INSERT INTO presents (id, isBought, version) VALUES (" + id + ", " + isBought + ", " + newVersion + ");");
} else {
const present = presents[0];
if (present.version === version) {
await this.query("UPDATE presents SET version = " + newVersion + ", isBought = " + isBought + " WHERE ID = " + id);
} else {
return res.json({"success": false, "error": "wrong-version", present: present});
}
}
return res.json({"success": true, present: {id: id, isBought: isBought, version: newVersion}})
})
}
public listen(callback: (port: number) => void): void {
this.httpServer.listen(this.DEFAULT_PORT, () => {

View File

@ -62,7 +62,9 @@ let moduleExports = {
// template: '!!html-loader!src/client/index.html'
template: 'src/client/index.html'
}),
new webpack.DefinePlugin({}),
new webpack.DefinePlugin({
__BASE_PATH__: '"'+process.env.BASE_PATH+'"',
}),
new MiniCssExtractPlugin(),
],