Initial commit

X5GON · Jan 15, 2020 · 3cf0db1 · 3cf0db1
commit 3cf0db1
Show file tree

Hide file tree

Showing 13 changed files with 520 additions and 0 deletions.
diff --git a/css/x5gon.css b/css/x5gon.css
@@ -0,0 +1,10 @@
+body {
+    background-color: #000D32;
+    color:  #505973;
+    font-family: Open Sans;
+}
+#main-navbar {
+    position: fixed;
+    bottom: 0;
+    right: 0;
+}
diff --git a/favicon.ico b/favicon.ico
diff --git a/img/x5gon.svg b/img/x5gon.svg
diff --git a/index.html b/index.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans&display=swap" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/npm/quasar@^1.0.0/dist/quasar.min.css" rel="stylesheet" type="text/css">
+    <link rel="stylesheet" type="text/css" href="css/x5gon.css" />
+  </head>
+
+  <body>
+    <script src="https://cdn.jsdelivr.net/npm/vue@latest/dist/vue.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vuex@3.1.2/dist/vuex.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vue-router@3.1.4/dist/vue-router.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/quasar@^1.0.0/dist/quasar.umd.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/http-vue-loader@1.4.1/src/httpVueLoader.min.js"></script>
+
+    <div id="q-app">
+      <router-view class="view"></router-view>
+      <nav id="main-navbar">
+        <router-link to="/">/home</router-link>
+        <router-link to="/overview">/overview</router-link>
+        <router-link to="/basket">/basket</router-link>
+        <router-link to="/sequence">/sequence</router-link>
+        <router-link to="/debug">/debug</router-link>
+      </nav>
+    </div>
+</div>
+
+<script>
+
+  // TODO: refactor this code into App component
+  // TODO: remove Quasar if not needed?
+
+  Vue.use(VueRouter);
+  Vue.use(Vuex);
+
+  const router = new VueRouter({
+      mode: 'hash',
+      routes: [
+          { path: '/', component: httpVueLoader('js/Home.vue') },
+          { path: '/overview', component: httpVueLoader('js/Overview.vue') },
+          { path: '/basket', component: httpVueLoader('js/Basket.vue') },
+          { path: '/sequence', component: httpVueLoader('js/Sequence.vue') },
+          { path: '/debug', component: httpVueLoader('js/Debug.vue') },
+      ]
+  });
+
+  const store = new Vuex.Store({
+      state: {
+          count: 0
+      },
+      mutations: {
+          increment (state) {
+              state.count++
+          }
+      }
+  });
+
+
+  var app = new Vue({
+      router: router,
+      store: store,
+      el: '#q-app',
+      data: function () {
+          return {
+          }
+      },
+      methods: {
+      },
+  })
+</script>
+</body>
+</html>
diff --git a/js/Basket.vue b/js/Basket.vue
@@ -0,0 +1,19 @@
+<template>
+  <div class="view-basket">
+    <p>Basket</p>
+  </div>
+</template>
+
+<script>
+  module.exports = {
+      components: {
+      },
+      data: function() {
+          return {
+          }
+      }
+    }
+</script>
+
+<style type="text/css">
+</style>
diff --git a/js/Debug.vue b/js/Debug.vue
@@ -0,0 +1,38 @@
+<template>
+  <div class="view-debug">
+    <strong>Debug</strong>
+    <pre id="query-t">Query: {{ $route.query.t }}</pre>
+    <pre id="hash">Hash: {{ $route.hash }}</pre>
+    <div v-touch-pan="handler">v1: {{ v1 }}</div>
+    <div v-touch-swipe="handler">v2: {{ v2 }}</div>
+    <span>userdata: {{ userdata }}</span>
+    <div v-ripple>Click me. I got ripples.
+    </div>
+    <input v-model="userdata">
+    <div>
+      <q-btn @click="doSomething" label="Do something" />
+    </div>
+</template>
+
+<script>
+
+  module.exports = {
+      data: function () {
+          return {
+              v1: "var1",
+              v2: "var2",
+              userdata: "",
+          }
+      },
+      methods: {
+          handler: function (e) { console.log("handler", e, this.$event);
+                                  this.v2 += " handler"; },
+          doSomething: function (e) { console.log("doSomething", e, this.$event);
+                                      this.v1 += " something";
+                                    },
+      },
+  }
+</script>
+
+<style>
+</style>
diff --git a/js/Filterbar.vue b/js/Filterbar.vue
@@ -0,0 +1,51 @@
+<template>
+  <nav class="filterbar">
+    <ul class="filterbar">
+      <li v-for="item in items" v-bind:key="item">{{ item }}</li>
+    </ul>
+  </nav>
+</template>
+
+<script>
+    const items = [ "Provider", "Modality", "Language", "Culture", "Theme" ];
+
+    module.exports = {
+        data: function() {
+            return {
+                items: items
+            }
+        }
+    }
+</script>
+
+<style type="text/css">
+
+  .filterbar {
+    margin: 0;
+    padding: 0;
+    padding-top: 9;
+    color: #505973;
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+    font-family: Open Sans;
+    font-size: 14px;
+  }
+  .filterbar li {
+      display: inline-block;
+      padding: .5em;
+      width: 8em;
+  }
+  .filterbar li:hover {
+      color: #fff;
+      font-weight: 600;
+  }
+  .filterbar li:after {
+      content: " V";
+      # url("data:image/svg+xml; utf8; <svg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'>
+<path d='M15.0711 7.99999L8 15.0711L0.928932 7.99999' stroke='#505973' stroke-linecap='round' stroke-linejoin='round'/></svg>");
+      display: block;
+      width: 1em;
+      height: 1em;
+  }
+</style>
diff --git a/js/Header.vue b/js/Header.vue
@@ -0,0 +1,18 @@
+<template>
+  <header class="x5gon-header">
+    <img src="../img/x5gon.svg" alt="X5GON" />
+  </header>
+</template>
+
+<script>
+</script>
+
+<style type="text/css">
+  header.x5gon-header {
+    background-color: #fff;
+    display: flex;
+    height: 67px;
+    align-items: center;
+    justify-content: center;
+  }
+</style>
diff --git a/js/Home.vue b/js/Home.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="view-home">
+    <x5gon-header></x5gon-header>
+    <div class="content">
+      <div class="filteredinput">
+        <input v-model="query" id="q" placeholder="Recherche" @keydown.enter="search" type="search" />
+        <filterbar></filterbar>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  module.exports = {
+      components: {
+          'filterbar': httpVueLoader('js/Filterbar.vue'),
+          'x5gon-header': httpVueLoader('js/Header.vue')
+      },
+      data: function() {
+          return {
+              query: ''
+          }
+      },
+      methods: {
+          search: function () {
+              console.log("do search", this.query);
+          }
+      }
+    }
+</script>
+
+<style scoped>
+  .content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  #q {
+      width: 100%;
+      max-width: 60em;
+      height: 40px;
+      margin-top: 30%;
+  }
+</style>
diff --git a/js/ItemDetail.vue b/js/ItemDetail.vue
@@ -0,0 +1,39 @@
+<template>
+  <div class="view-itemdetail">
+    <div class="itemdetail-name">{{ item.name }}</div>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 100" preserveAspectRatio="xMidYMid">
+      <defs>
+        <radialGradient id="paint0_radial" cx="0" cy="0" r="100%" fx="0" fy="0" gradientUnits="objectBoundingBox" transform="translate(100%)" spreadMethod="pad">
+      <stop stop-color="#ff9059" stop-opacity="1" offset="0"/>
+      <stop stop-color="#ff9059" stop-opacity="0.2" offset="1"/>
+        </radialGradient>
+      </defs>
+      <rect x="0" y="0" width="50" height="100" stroke="black" stroke-opacity="1" stroke-width=".1" fill="none" />
+      <g transform="translate(25, 75) scale(1,-1)">
+        <circle id="circle" fill="url(#paint0_radial)" fill-opacity="1" fill-rule="nonzero" stroke="none" cx="0" cy="0" r="25"/>
+        <path id="concept1" fill="none" stroke="#3e1966" stroke-linecap="round" stroke-opacity="1" stroke-width="5" d="M 0 0 L 0 15"/>
+        <path id="concept2" fill="none" stroke="#933b50" stroke-linecap="round" stroke-opacity="1" stroke-width="5" d="M 0 15 L 0 20"/>
+        <path id="concept3" fill="none" stroke="#be4b4d" stroke-linecap="round" stroke-opacity="1" stroke-width="5" d="M 0 20 L 0 30"/>
+        <path id="concept4" fill="none" stroke="#e95c44" stroke-linecap="round" stroke-opacity="1" stroke-width="5" d="M 0 30 L 0 40"/>
+        <path id="concept5" fill="none" stroke="#505973" stroke-linecap="round" stroke-opacity="1" stroke-width="5" d="M 0 40 L 0 45"/>
+      </g>
+    </svg>
+  </div>
+</template>
+
+<script>
+  module.exports = {
+      data: function() {
+          return {
+          }
+      },
+      props: {
+          item: Object
+      }
+      methods: {
+      }
+  }
+</script>
+
+<style scoped>
+</style>
diff --git a/js/Overview.vue b/js/Overview.vue
@@ -0,0 +1,83 @@
+<template>
+  <div class="view-overview">
+    <result-drawer class="left-drawer" :results="results" @active="set_active"></result-drawer>
+    <item-detail v-if="active" :item="active"></item-detail>
+  </div>
+</template>
+
+  <script>
+  module.exports = {
+      components: {
+          'result-drawer': httpVueLoader('js/ResultDrawer.vue'),
+          'item-detail': httpVueLoader('js/ItemDetail.vue')
+      },
+      props: {
+          results: {
+              type: Array,
+              default: function () {
+                  return [
+                      {
+                          'name': 'name1',
+                          'provider': 'provider1',
+                          'author': 'author1',
+                          'url': 'url1'
+                      },
+                      {
+                          'name': 'name2',
+                          'provider': 'provider2',
+                          'author': 'author2',
+                          'url': 'url2'
+                      },
+                      {
+                          'name': 'name3',
+                          'provider': 'provider3',
+                          'author': 'author3',
+                          'url': 'url3'
+                      },
+                      {
+                          'name': 'name4',
+                          'provider': 'provider4',
+                          'author': 'author4',
+                          'url': 'url4'
+                      },
+                      {
+                          'name': 'name5',
+                          'provider': 'provider5',
+                          'author': 'author5',
+                          'url': 'url5'
+                      },
+                      {
+                          'name': 'name6',
+                          'provider': 'provider6',
+                          'author': 'author6',
+                          'url': 'url6'
+                      }
+                  ]
+              }
+          }
+      },
+      data: function() {
+          return {
+              active: null,
+              results: this.$prop.results
+          }
+      },
+      methods: {
+          set_active: function (resource) {
+              console.log("Overview - set_active", resource);
+              this.active = resource;
+          }
+      }
+    }
+</script>
+
+<style type="text/css">
+  .content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    }
+    .left-drawer {
+        width: 50%;
+    }
+</style>