ProjektKuro · tlahmann · Apr 6, 2020 · Apr 14, 2020 · Apr 14, 2020 · Apr 14, 2020
diff --git a/package.json b/package.json
@@ -21,6 +21,7 @@
     "vue-resource": "^1.5.1",
     "vue-router": "^3.1.5",
     "vue2-leaflet": "^2.5.2",
+    "vuetify": "^2.2.11",
     "vuex": "^3.1.2",
     "vuex-simple": "^2.2.0"
   },
@@ -40,10 +41,14 @@
     "babel-eslint": "^10.0.3",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.1.2",
+    "sass": "^1.19.0",
+    "sass-loader": "^8.0.0",
     "typescript": "~3.7.5",
     "vue-axios": "^2.1.5",
     "vue-cli-plugin-i18n": "~0.6.1",
-    "vue-template-compiler": "^2.6.11"
+    "vue-cli-plugin-vuetify": "^2.0.5",
+    "vue-template-compiler": "^2.6.11",
+    "vuetify-loader": "^1.3.0"
   },
   "eslintConfig": {
     "root": true,

diff --git a/public/index.html b/public/index.html
@@ -7,6 +7,8 @@
     <link rel="shortcut icon" href="<%= BASE_URL %>kuro-logo.svg">
     <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
     <title><%= htmlWebpackPlugin.options.title %></title>
+    <!-- <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"> -->
+    <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css"> -->
   </head>
   <body>
     <noscript>

diff --git a/src/App.vue b/src/App.vue
@@ -4,7 +4,7 @@
     <div class="content">
       <router-view />
     </div>
-    <Footer/>
+    <Footer />
   </div>
 </template>
 
@@ -40,7 +40,8 @@ body {
 }
 
 .content {
-  margin: 1rem 1.25rem;
+  margin: 1rem auto;
+  max-width: calc(100% - 1.25rem);
+  width: 1240px;
 }
-
 </style>
diff --git a/src/components/Header.vue b/src/components/Header.vue
@@ -79,8 +79,8 @@ export default {
 .kuro-logo {
   /* text-align: center; */
   /* margin: 0.25rem auto; */
-  height: 7.5rem;
-  width: 7.5rem;
+  /* height: 7.5rem;
+  width: 7.5rem; */
 }
 
 .kuro-header-name {

diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
diff --git a/src/components/LocaleChanger.vue b/src/components/LocaleChanger.vue
@@ -20,7 +20,7 @@
 export default {
   name: "LocaleChanger",
   data() {
-    return { langs: ["de", "en", "da", "tr", "fr"] };
+    return { langs: ["de", "en", "fr", "tr", "da"] };
   },
   methods: {
     getIcon(locale) {
@@ -56,13 +56,7 @@ export default {
 .locale-changer img {
   color: white;
   padding: 16px;
-  font-size: 16px;
-  border: none;
   cursor: pointer;
-  border: 1px solid lightgray;
-  border-radius: 5px;
-  box-shadow: 2px 4px 6px 1px rgba(0, 0, 0, 0.2);
-  transition: 0.3s;
   background-color: #c6e2e6;
 }
 
@@ -76,12 +70,7 @@ export default {
   display: none;
   list-style: none;
   position: absolute;
-  min-width:63px;
-  margin: 0;
-  padding: 0;
-  /* background-color: hsl(0, 0%, 98%); */
-  /* box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); */
-  z-index: 99;
+  z-index: 1099;
 }
 
 .dropdown-content {
@@ -90,8 +79,8 @@ export default {
 }
 /* Images inside the dropdown */
 .dropdown-content img {
-  display: inline-block;
-  max-width: 30px;
+  display: inline-block;    
+  max-width: 40px;
   padding: 10px;
 }
 

diff --git a/src/components/MapView.vue b/src/components/MapView.vue
@@ -106,5 +106,7 @@ export default {
   margin-right: 20px;
   margin-left: auto;
   border-radius: 5px;
+  border: 1px solid #c6e2e6;
+  box-shadow: 2px 4px 6px 1px rgba(0, 0, 0, 0.2);
 }
 </style>
diff --git a/src/components/market/Market.vue b/src/components/market/Market.vue
@@ -1,15 +1,19 @@
 <template>
+
   <div class="market">
-    <img class="shop-image" src="@/assets/ic_markt.svg" alt="shop-logo" />
-    <div class="shop-text">
-      <span class="shop-name" v:bind="prop-name">{{ name }}</span>
-      <span
-        class="shop-address"
-        v:bind="prop-address"
-      >{{ (address || {address: 'noAddress'}).address }}</span>
-      <small class="shop-address" v:bind="prop-address">{{ (address || {postalCode: ''}).postalCode }} {{ (address || {city: ''}).city }}</small>
+      <v-expansion-panel-header class="shop-text">
+        <img class="shop-image" src="@/assets/ic_markt.svg" alt="shop-logo" />
+        <div class="shop-text">
+          <span class="shop-name" v:bind="prop-name">{{ name }}</span>
+          <span
+            class="shop-address"
+            v:bind="prop-address"
+          >{{ (address || {address: 'noAddress'}).address }}</span>
+          <small class="shop-address" v:bind="prop-address">{{ (address || {postalCode: ''}).postalCode }} {{ (address || {city: ''}).city }}</small>
+        </div>
+      </v-expansion-panel-header>
+      <v-expansion-panel-content>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</v-expansion-panel-content>
     </div>
-  </div>
 </template>
 
 <script>
@@ -29,30 +33,16 @@ export default {
 
 <style scoped>
 .market {
-  display: flex;
-  flex-direction: row;
-  border: 1px solid lightgray;
-  border-radius: 5px;
-  box-shadow: 2px 4px 6px 1px rgba(0, 0, 0, 0.2);
-  transition: 0.3s;
-  padding: 0.5rem;
-  margin: 0.5rem auto;
   background-color: #c6e2e6;
 }
 
-.market:hover {
-  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
-  border: 1px solid lightgray;
-}
-
 .shop-image {
-  margin-left: 0.75rem;
+  margin: 0 0.75rem;
   max-width: 3.5rem;
 }
 
 .shop-text {
-  margin: 0.5rem 0.75rem;
-  display: block;
+  text-align: left;
 }
 
 .shop-text .shop-name,

diff --git a/src/components/product/Product.vue b/src/components/product/Product.vue
@@ -45,6 +45,7 @@ export default {
   background-color: #c6e2e6;
   border: 1px solid #c6e2e6;
   border-radius: 5px;
+  box-shadow: 2px 4px 6px 1px rgba(0, 0, 0, 0.2);
 }
 .details .product-image {
   margin: 0 auto;

diff --git a/src/components/product/ProductDetails.vue b/src/components/product/ProductDetails.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="product-card" v:bind="prop-product">
     <div class="title">
-      <img class="product-image" src="@/assets/logo.svg" alt="product-logo" />
+      <img class="product-image" :src="product.image" alt="product-logo" />
       <h3 class="product-name">{{ $t(`Products.${product.name}`) }}</h3>
     </div>
     <div class="details">
@@ -26,23 +26,12 @@ export default {
 </script>
 
 <style scoped>
-@media screen and (min-width: 769px) {
-  .title {
-    display: flex;
-    /* min-width: auto; */
-    margin: 0.5rem 0.5rem;
-    hyphens: auto;
-    flex-direction: row;
-  }
-}
-@media screen and (max-width: 768px) {
-  .title {
-    display: flex;
-    /* min-width: auto; */
-    margin: 0.5rem 0.5rem;
-    hyphens: auto;
-    flex-direction: column;
-  }
+.title {
+  display: flex;
+  /* min-width: auto; */
+  margin: 0.5rem 0.5rem;
+  hyphens: auto;
+  flex-direction: row;
 }
 .details {
   padding: 1rem;
@@ -59,7 +48,7 @@ export default {
 }
 .product-name {
   text-align: left;
-  margin-left: 0 0.5rem;
+  margin: 0 0.5rem;
   /* max-width: 4rem; */
 }
 /* .product {

diff --git a/src/interfaces.ts b/src/interfaces.ts
@@ -7,13 +7,15 @@ export interface IProductState {
 export interface IProduct {
     categories: string[];
     description: string;
+    image: string;
     name: string;
     productId: string;
 }
 
 export interface IApiProduct {
     categories: string[];
     description: string;
+    image: string;
     name: string;
     _id: string;
     updatedAt: string;
@@ -22,4 +24,4 @@ export interface IApiProduct {
 }
 export interface IApiResponse {
     products: IApiProduct[]
-}
+}
diff --git a/src/locales/de.json b/src/locales/de.json
@@ -38,10 +38,10 @@
     "SearchFilterLabel": "Produktfilter",
     "Products": "Produkte",
     "Brot": "Brot",
-    "Damenhygiene": "Damenhygiene",
+    "Damenhygiene": "Damen\u00ADhygiene",
     "Desinfektionsmittel": "Des\u00ADinfek\u00ADtions\u00ADmit\u00ADtel",
     "Eier": "Eier",
-    "Fertiggerichte": "Fertiggerichte",
+    "Fertiggerichte": "Fertig\u00ADgerichte",
     "Gemüsekonserven": "Ge\u00ADmü\u00ADse\u00ADkon\u00ADser\u00ADven",
     "Hefe": "Hefe",
     "Kartoffeln": "Kartoffeln",
@@ -64,4 +64,4 @@
     "SorryError": "Entschuldigung, der folgende Fehler ist Aufgetreten"
   },
   "User denied Geolocation": "Der Benutzer hat die Positionserfassung verweigert"
-}
+}
diff --git a/src/main.ts b/src/main.ts
@@ -5,6 +5,7 @@ import './registerServiceWorker'
 import router from './router'
 import i18n from './i18n'
 import VueResource from 'vue-resource'
+import vuetify from './plugins/vuetify';
 
 Vue.config.productionTip = false;
 Vue.use(VueResource);
@@ -13,5 +14,6 @@ new Vue({
   store,
   router,
   i18n,
+  vuetify,
   render: h => h(App)
 }).$mount('#app');
diff --git a/src/models/index.ts b/src/models/index.ts
@@ -0,0 +1,3 @@
+export * from './address';
+export * from './product';
+export * from './shop';
diff --git a/src/models/product.ts b/src/models/product.ts
@@ -1,14 +1,15 @@
 import { Resource } from "./resource";
-enum EProductStatus{
+enum EProductStatus {
     empty = "empty",
     enough = "normal",
     much = "much"
 }
 export class Product extends Resource {
     private _name: string;
+    private _image?: string;
     private _status: string;
     private _categories: string[];
-    constructor (json: any) {
+    constructor(json: any) {
         super(json);
         this._name = json?.name;
         this._status = json?.status;
@@ -20,12 +21,15 @@ export class Product extends Resource {
     get name(): string {
         return this._name;
     }
+    get image(): string {
+        return this._image || require("../assets/logo.svg");
+    }
     get status(): string {
         return this._status;
     }
     set status(statusUpdate: string) {
         // Must be valid Status: "much"
-        if(statusUpdate in EProductStatus) {
+        if (statusUpdate in EProductStatus) {
             //todo: add error notification via snackbar-notifier
             return;
         }