TCP 2019 example implementation

fsek · Feb 24, 2020 · e04a28f · e04a28f
1 parent 2cb4853
commit e04a28f
Show file tree

Hide file tree

Showing 6 changed files with 132 additions and 1 deletion.
diff --git a/www/index.html b/www/index.html
@@ -6,7 +6,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
   <meta name="apple-mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-status-bar-style" content="black">
-  <meta http-equiv="Content-Security-Policy" content="default-src 'self' https://stage.fsektionen.se https://fsektionen.se wss://fsektionen.se wss://stage.fsektionen.se gap://ready 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; child-src 'self' https://www.youtube.com gap://ready; media-src *; img-src 'self' https://stage.fsektionen.se https://fsektionen.se data:" />
+  <meta http-equiv="Content-Security-Policy" content="default-src 'self' https://stage.fsektionen.se https://fsektionen.se wss://fsektionen.se wss://stage.fsektionen.se gap://ready 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; child-src 'self' https://www.youtube.com gap://ready; media-src *; img-src * 'self' https://stage.fsektionen.se https://fsektionen.se data:" />
   <title>F-sektionen</title>
 
   <!-- Material/iOS stylesheets. Will be replaced on deploy -->
@@ -204,6 +204,15 @@
           <div class="page-content settings-content">
             <div class="list">
               <ul>
+                <li>
+                  <a href="/store/" class="item-link">
+                    <div class="item-content">
+                      <div class="item-inner">
+                        <div class="item-title">F-shoppen</div>
+                      </div>
+                    </div>
+                  </a>
+                </li>
                 <li>
                   <a href="/songbook/" class="item-link">
                     <div class="item-content">
@@ -906,6 +915,19 @@
         </div>
       </div>
     </script>
+
+    <script type="text/template7" id="storeTemplate">
+      {{#each products}}
+        <div class="card">
+          <div class="card-header" style="background-image: url({{image_url}})"></div>
+          <div class="card-content card-content-padding">
+            <div class="product-name">{{name}}</div>
+            Pris: {{price}} kr
+            <button data-id="{{id}}" class="button button-fill buy-product">Köp</button>
+          </div>
+        </div>
+      {{/each}}
+    </script>
   </section>
 
   <!-- External JS Libraries -->
@@ -945,6 +967,7 @@
   <script type="text/javascript" src="js/gallery.js"></script>
   <script type="text/javascript" src="js/album.js"></script>
   <script type="text/javascript" src="js/cafe.js"></script>
+  <script type="text/javascript" src="js/store.js"></script>
 </body>
 
 </html>

diff --git a/www/js/index.js b/www/js/index.js
@@ -207,6 +207,11 @@ var alternativesView = app.views.create('#view-alternatives', {
       path: '/contact/:contactId',
       url: './contact.html',
     },
+    {
+      name: 'store',
+      path: '/store/',
+      url: './store.html',
+    }
   ]
 });
 

diff --git a/www/js/store.js b/www/js/store.js
@@ -0,0 +1,50 @@
+$$(document).on('page:init', '.page[data-name="store"]', function () {
+  let storeProductAPIEndpointURL = API + '/store_products';
+
+  $.getJSON(storeProductAPIEndpointURL)
+    .done(function(resp) {
+      initStore(resp);
+    })
+    .fail(function(resp) {
+      console.log(resp.statusText);
+    });
+
+  function initStore(resp) {
+    let products = resp.store_products;
+    products.forEach(function(product) {
+      product.price /= 100;
+      if (product.image_url === "") {
+        product.image_url = "img/missing_thumb.png";
+      }
+    });
+
+    let templateHTML = app.templates.storeTemplate({products: products});
+    let storeContainer = $('.store-content');
+    storeContainer.html(templateHTML);
+
+    $('.buy-product').on('click', function() {
+      productId = $('.buy-product').attr('data-id');
+      buyProduct(productId);
+    });
+  }
+
+  function buyProduct(id) {
+    $.ajax({
+      url: API + '/store_orders',
+      type: 'POST',
+      dataType: 'json',
+      data: {
+        "item": {
+          "id": id,
+          "quantity": 1
+        }
+      },
+      success: function(resp) {
+        app.dialog.alert(resp.success, 'Varan är köpt');
+      },
+      error: function(resp) {
+        app.dialog.alert(resp.responseJSON.error);
+      }
+    });
+  }
+});
diff --git a/www/scss/index.scss b/www/scss/index.scss
@@ -20,3 +20,4 @@
 @import 'partials/album';
 @import 'partials/about_app';
 @import 'partials/cafe';
+@import 'partials/store';
diff --git a/www/scss/partials/_store.scss b/www/scss/partials/_store.scss
@@ -0,0 +1,34 @@
+.store-content {
+  .card:nth-child(-n+2) {
+    margin-top: 16px;
+  }
+
+  .card {
+    width: calc(50% - 18px);
+    float: left;
+    box-shadow: none;
+    margin-left: 8px
+  }
+
+  .card-header {
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-color: #f8f8f8;
+    height: 37vh;
+  }
+
+  .card-content {
+    text-align: center;
+  }
+
+  .product-name {
+    font-size: 19px;
+    font-weight: bold;
+  }
+
+  .buy-product {
+    background-color: $fsek-orange;
+    margin-top: 10px;
+  }
+}
diff --git a/www/store.html b/www/store.html
@@ -0,0 +1,18 @@
+<div data-name="store" class="page no-toolbar">
+  <div class="navbar">
+    <div class="navbar-inner sliding">
+      <div class="left">
+        <a href="#" class="back link">
+          <i class="icon icon-back"></i>
+          <span class="ios-only">Tillbaka</span>
+        </a>
+      </div>
+      <div class="title">F-shoppen</div>
+    </div>
+  </div>
+  <div class="page-content store-content">
+    <div class="infinite-scroll-preloader">
+      <div class="preloader"></div>
+    </div>
+  </div>
+</div>