Home Screen & Search foundation & restaurant Cats

package-lock.json

         "to-fast-properties": "^2.0.0"
       }
     },
+    "@fortawesome/fontawesome-common-types": {
+      "version": "0.2.28",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.28.tgz",
+      "integrity": "sha512-gtis2/5yLdfI6n0ia0jH7NJs5i/Z/8M/ZbQL6jXQhCthEOe5Cr5NcQPhgTvFxNOtURE03/ZqUcEskdn2M+QaBg=="
+    },
     "@fortawesome/fontawesome-free": {
       "version": "5.12.0",
       "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.12.0.tgz",
       "integrity": "sha512-vKDJUuE2GAdBERaQWmmtsciAMzjwNrROXA5KTGSZvayAsmuTGjam5z6QNqNPCwDfVljLWuov1nEC3mEQf/n6fQ==",
       "dev": true
     },
+    "@fortawesome/fontawesome-svg-core": {
+      "version": "1.2.28",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.28.tgz",
+      "integrity": "sha512-4LeaNHWvrneoU0i8b5RTOJHKx7E+y7jYejplR7uSVB34+mp3Veg7cbKk7NBCLiI4TyoWS1wh9ZdoyLJR8wSAdg==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.28"
+      }
+    },
+    "@fortawesome/free-solid-svg-icons": {
+      "version": "5.13.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.13.0.tgz",
+      "integrity": "sha512-IHUgDJdomv6YtG4p3zl1B5wWf9ffinHIvebqQOmV3U+3SLw4fC+LUCCgwfETkbTtjy5/Qws2VoVf6z/ETQpFpg==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.28"
+      }
+    },
     "@hapi/address": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz",
       "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==",
       "dev": true
     },
+    "blueimp-canvas-to-blob": {
+      "version": "3.27.0",
+      "resolved": "https://registry.npmjs.org/blueimp-canvas-to-blob/-/blueimp-canvas-to-blob-3.27.0.tgz",
+      "integrity": "sha512-AcIj+hCw6WquxzJuzC6KzgYmqxLFeTWe88KuY2BEIsW1zbEOfoinDAGlhyvFNGt+U3JElkVSK7anA1FaSdmmfA=="
+    },
     "bn.js": {
       "version": "4.11.8",
       "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.11.8.tgz",
         }
       }
     },
+    "font-awesome": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/font-awesome/-/font-awesome-4.7.0.tgz",
+      "integrity": "sha1-j6jPBBGhoxr9B7BtKQK7n8gVoTM="
+    },
     "for-in": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
         "easy-stack": "^1.0.0"
       }
     },
+    "js-sha256": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/js-sha256/-/js-sha256-0.9.0.tgz",
+      "integrity": "sha512-sga3MHh9sgQN2+pJ9VYZ+1LPwXOxuBJBA5nrR5/ofPfuiJBE2hnjsaN8se8JznOmGLN2p49Pe5U/ttafcs/apA=="
+    },
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
         "vue": "^2.5.17"
       }
     },
+    "vue-fontawesome-icon": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/vue-fontawesome-icon/-/vue-fontawesome-icon-1.3.0.tgz",
+      "integrity": "sha512-nuwBARz2AgxHV4sbS+xc/pvIPBVM3XbgW9R7aHW8AODkLLmf2qiMTov74/C0jspgcod7pxjPtRMyxX2j0feBEg==",
+      "requires": {
+        "core-js": "^2.6.5",
+        "vue": "^2.6.10"
+      }
+    },
     "vue-hot-reload-api": {
       "version": "2.3.4",
       "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
       "integrity": "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==",
       "dev": true
     },
+    "vue-image-upload-resize": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/vue-image-upload-resize/-/vue-image-upload-resize-2.3.0.tgz",
+      "integrity": "sha512-ElzyAVCluiDt8xSZkSK9FbuLY5mr23JlO4cHyyRo86RfEGLWtvXrTq7vYOgDstT8rNBmnTgNCkPKc0rpmyl1yA==",
+      "requires": {
+        "blueimp-canvas-to-blob": "^3.14.0",
+        "vue": "^2.5.17"
+      }
+    },
     "vue-js-modal": {
       "version": "1.3.33",
       "resolved": "https://registry.npmjs.org/vue-js-modal/-/vue-js-modal-1.3.33.tgz",

package.json

     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.28",
+    "@fortawesome/free-solid-svg-icons": "^5.13.0",
     "@nuxtjs/axios": "^5.9.3",
     "animate.css": "^3.7.2",
     "axios": "^0.19.2",
     "core-js": "^2.6.11",
     "datatables.net": "^1.10.20",
+    "font-awesome": "^4.7.0",
     "jquery": "^3.4.1",
+    "js-sha256": "^0.9.0",
     "lodash": "^4.17.15",
     "material-design-icons-iconfont": "^3.0.3",
     "moment": "^2.24.0",
     "vue-browser-geolocation": "^1.8.0",
     "vue-carousel": "^0.18.0",
     "vue-eva-icons": "^1.1.1",
+    "vue-fontawesome-icon": "^1.3.0",
+    "vue-image-upload-resize": "^2.3.0",
     "vue-js-modal": "^1.3.33",
     "vue-json-excel": "^0.2.98",
     "vue-router": "^3.1.5",

src/components/accounts/login.vue

 <template>
-  <!-- <div>
-    <div class="container" style="padding-top:120px; padding-left:18%;">
-      <div class="col-md-12" style="text-align:left">
-        <b-card title="Login" tag="article" style="max-width: 20rem;" class="mb-6">
-          <div class="row">
-            <div class="col-md-12" style="margin-bottom: 1em">
-              <label>Cellphone / Email</label>
-              <div class="input-group-prepend">
-                <input class="form-control" type="text" name="username" />
-              </div>
-            </div>
-          </div>
-          <div class="row">
-            <div class="col-md-12" style="margin-bottom: 1em">
-              <label>Password</label>
-              <div class="input-group-prepend">
-                <input class="form-control" type="password" name="password" />
-              </div>
-            </div>
-          </div>
-
-          <b-button variant="primary" @click="Login">Login</b-button>
-        </b-card>
-      </div>
-    </div>
-  </div>-->
   <div class="login-page">
-    <form id="signIn">
-      <div class="form col-md-12">
-        <div>
-          <h4>Login</h4>
-        </div>
-        <div v-if="false">
-          <alert
-            :text="'User doesn\'t exist or Username and Password is incorrect'"
-            :type="'ERROR'"
-          />
-        </div>
-        <div class="row">
-          <div class="col-md-12" style="margin-bottom: 1em">
-            <div class="input-group mb-3">
-              <div class="input-group-prepend">
-                <span class="input-group-text">
-                  <eva-icon name="person-outline" fill="#60CBEB"></eva-icon>
-                </span>
-                <input
-                  class="form-control"
-                  type="text"
-                  placeholder="Email / Cell"
-                  v-model="username"
-                  value
-                />
-              </div>
+    <div class="form col-md-12">
+      <div>
+        <h4>Login</h4>
+      </div>
+      <div v-if="hasError">
+        <alert :text="errorMessage" :type="'ERROR'" />
+      </div>
+      <div class="row">
+        <div class="col-md-12" style="margin-bottom: 1em">
+          <div class="input-group mb-3">
+            <div class="input-group-prepend">
+              <span class="input-group-text">
+                <eva-icon name="person-outline" fill="#60CBEB"></eva-icon>
+              </span>
+              <input
+                class="form-control"
+                type="text"
+                placeholder="Email Address"
+                v-model="auth.emailAddress"
+                value
+              />
             </div>
-            <div class="input-group mb-3">
-              <div class="input-group-prepend">
-                <span class="input-group-text">
-                  <eva-icon name="lock-outline" fill="#60CBEB"></eva-icon>
+          </div>
+          <div class="input-group mb-3">
+            <div class="input-group-prepend">
+              <span class="input-group-text">
+                <eva-icon name="lock-outline" fill="#60CBEB"></eva-icon>
+              </span>
+              <input
+                class="form-control"
+                :type="isPasswordShown"
+                v-model="auth.password"
+                id="password"
+                placeholder="Password"
+                value
+              />
+              <div class="input-group-append">
+                <span class="input-group-text" @click="togglePassword()">
+                  <eva-icon v-if="showPassword" name="eye-off-outline" fill="#60CBEB"></eva-icon>
+                  <eva-icon v-else name="eye-outline" fill="#60CBEB"></eva-icon>
                 </span>
-                <input
-                  class="form-control"
-                  :type="isPasswordShown"
-                  v-model="password"
-                  id="password"
-                  placeholder="Password"
-                  value
-                />
-                <div class="input-group-append">
-                  <span class="input-group-text">
-                    <eva-icon
-                      v-if="showPassword"
-                      name="eye-off-outline"
-                      fill="#60CBEB"
-                      @click="togglePassword()"
-                    ></eva-icon>
-                    <eva-icon v-else name="eye-outline" fill="#60CBEB" @click="togglePassword()"></eva-icon>
-                  </span>
-                </div>
               </div>
             </div>
           </div>
         </div>
-        <button @click="Login()" class="btn btn-b-n" type="submit">Login</button>
       </div>
-    </form>
+      <button @click="Login()" class="btn btn-b-n" type="button">Login</button>
+    </div>
   </div>
 </template>
 
 <script>
+import { mapState, mapActions } from "vuex";
+
 export default {
   name: "Login",
   data() {
     return {
       isPasswordShown: "password",
-      showPassword: false
+      showPassword: false,
+      hasError: false,
+      errorMessage: ""
     };
   },
   methods: {
+    ...mapActions("authentiaction", ["getAuthentication", "Login"]),
     Login() {
-      //Handle Login
+      this.Login(this.auth).then(() => {
+        if (this.$store.state.auth.resault === "Access Granted") {
+          console.log(JSON.stringify(this.auth));
+          this.$router.push("/");
+        } else {
+          console.log(JSON.stringify(this.auth));
+          this.hasError = true;
+          this.errorMessage = this.$store.state.auth.resault;
+        }
+      });
     },
     togglePassword() {
       if (this.showPassword) {
 
       this.showPassword = !this.showPassword;
     }
+  },
+  computed: {
+    ...mapState("authentiaction", ["auth"])
+  },
+  mounted() {
+    this.getAuthentication();
   }
 };
 </script>

src/components/accounts/register.vue

 <template>
-  <form>
-    <div class="reg-page">
-      <div class="regform">
-        <div class="col-md-12" style="text-align:left">
-          <h4>User Registration</h4>
-          <div class="form-group row"></div>
-          <div class="row" style="text-align:left">
-            <div class="col-md-12" style="margin-bottom: 1em">
-              <div class="input-group-prepend">
-                <span class="input-group-text">
-                  <eva-icon name="person-outline" fill="#60CBEB"></eva-icon>
-                </span>
-                <input class="form-control" type="text" name="name" placeholder="Name" />
-              </div>
+  <div class="reg-page">
+    <div class="regform">
+      <div class="col-md-12" style="text-align:left">
+        <h4>User Registration</h4>
+        <div class="form-group row"></div>
+        <div v-if="hasError" class="form-group row">
+          <div>
+            <alert :text="resultString" :type="'ERROR'" class="col-md-12" />
+          </div>
+        </div>
+        <div class="row" style="text-align:left">
+          <div class="col-md-12" style="margin-bottom: 1em">
+            <label>Name</label>
+            <div class="input-group-prepend">
+              <span class="input-group-text">
+                <eva-icon name="person-outline" fill="#60CBEB"></eva-icon>
+              </span>
+              <input class="form-control" type="text" name="name" v-model="userContainer.firstName" />
             </div>
-            <div class="col-md-12" style="margin-bottom: 1em">
-              <div class="input-group-prepend">
-                <span class="input-group-text">
-                  <eva-icon name="book-outline" fill="#60CBEB"></eva-icon>
-                </span>
-                <input class="form-control" type="text" name="surname" placeholder="Surname" />
-              </div>
+          </div>
+        </div>
+        <div class="row" style="text-align:left">
+          <div class="col-md-12" style="margin-bottom: 1em">
+            <label>Surname</label>
+            <div class="input-group-prepend">
+              <span class="input-group-text">
+                <eva-icon name="book-outline" fill="#60CBEB"></eva-icon>
+              </span>
+              <input
+                class="form-control"
+                type="text"
+                name="surname"
+                v-model="userContainer.surname"
+              />
             </div>
-            <div class="col-md-12" style="margin-bottom: 1em">
-              <div class="input-group-prepend">
-                <span class="input-group-text">
-                  <eva-icon name="email-outline" fill="#60CBEB"></eva-icon>
-                </span>
-                <input class="form-control" type="text" name="email" placeholder="Email Address" />
-              </div>
+          </div>
+        </div>
+        <div class="row" style="text-align:left">
+          <div class="col-md-12" style="margin-bottom: 1em">
+            <label>Email Address</label>
+            <div class="input-group-prepend">
+              <span class="input-group-text">
+                <eva-icon name="email-outline" fill="#60CBEB"></eva-icon>
+              </span>
+              <input
+                class="form-control"
+                type="text"
+                name="email"
+                v-model="userContainer.emailAddress"
+              />
             </div>
-            <div class="col-md-12" style="margin-bottom: 1em">
-              <div class="input-group-prepend">
-                <span class="input-group-text">
-                  <eva-icon name="phone-outline" fill="#60CBEB"></eva-icon>
-                </span>
-                <input
-                  class="form-control"
-                  type="text"
-                  name="cellnumber"
-                  placeholder="Cellphone Number"
-                />
-              </div>
+          </div>
+        </div>
+        <div class="row" style="text-align:left">
+          <div class="col-md-12" style="margin-bottom: 1em">
+            <label>Cellphone</label>
+            <div class="input-group-prepend">
+              <span class="input-group-text">
+                <eva-icon name="phone-outline" fill="#60CBEB"></eva-icon>
+              </span>
+              <input
+                class="form-control"
+                type="text"
+                name="cellnumber"
+                v-model="userContainer.cellphone"
+              />
             </div>
           </div>
-          <div class="row" style="text-align:left">
-            <div class="col-md-12" style="margin-bottom: 1em">
-              <div class="input-group-prepend">
-                <span class="input-group-text">
-                  <eva-icon name="lock-outline" fill="#60CBEB"></eva-icon>
-                </span>
-                <input
-                  class="form-control"
-                  :type="PasswordBoxType"
-                  id="password"
-                  placeholder="Password"
-                  name="password"
-                  value
-                />
-              </div>
+        </div>
+        <div class="row" style="text-align:left">
+          <div class="col-md-12" style="margin-bottom: 1em">
+            <label>Password</label>
+            <div class="input-group-prepend">
+              <span class="input-group-text">
+                <eva-icon name="lock-outline" fill="#60CBEB"></eva-icon>
+              </span>
+              <input
+                class="form-control"
+                :type="PasswordBoxType"
+                id="password"
+                name="password"
+                v-model="userContainer.password"
+                value
+              />
             </div>
-            <div class="col-md-12" style="margin-bottom: 1em">
-              <div class="input-group-prepend">
-                <span class="input-group-text">
-                  <eva-icon name="lock-outline" fill="#60CBEB"></eva-icon>
-                </span>
-                <input
-                  class="form-control"
-                  :type="PasswordBoxType"
-                  id="confirmpassword"
-                  placeholder="Confirm Password"
-                  name="confirmpassword"
-                  v-model="confirmpassword"
-                  value
-                />
-                <div>
-                  <div class="input-group-append">
-                    <span class="input-group-text">
-                      <eva-icon
-                        v-if="showPassword"
-                        name="eye-off-outline"
-                        fill="#60CBEB"
-                        @click="togglePassword()"
-                      ></eva-icon>
-                      <eva-icon v-else name="eye-outline" fill="#60CBEB" @click="togglePassword()"></eva-icon>
-                    </span>
-                  </div>
+          </div>
+        </div>
+        <div class="row" style="text-align:left">
+          <div class="col-md-12" style="margin-bottom: 1em">
+            <label>Confirm Password</label>
+            <div class="input-group-prepend">
+              <span class="input-group-text">
+                <eva-icon name="lock-outline" fill="#60CBEB"></eva-icon>
+              </span>
+              <input
+                class="form-control"
+                :type="PasswordBoxType"
+                id="confirmpassword"
+                name="confirmpassword"
+                v-model="confirmpassword"
+                value
+              />
+              <div>
+                <div class="input-group-append">
+                  <span class="input-group-text">
+                    <eva-icon
+                      v-if="showPassword"
+                      name="eye-off-outline"
+                      fill="#60CBEB"
+                      @click="togglePassword()"
+                    ></eva-icon>
+                    <eva-icon v-else name="eye-outline" fill="#60CBEB" @click="togglePassword()"></eva-icon>
+                  </span>
                 </div>
               </div>
             </div>
           </div>
-          <div class="form-group row"></div>
-          <div class="row offset-md-4">
-            <div class="col-md-2">
-              <button
-                @click="SubmitData()"
-                class="btn btn-b-n"
-                type="submit"
-                data-dismiss="modal"
-              >Submit</button>
-            </div>
-            <div class="col-md-2 offset-md-1">
-              <button @click="Close()" class="btn btn-b-n" type="submit" data-dismiss="modal">Cancel</button>
-            </div>
+        </div>
+        <div class="form-group row"></div>
+        <div class="row offset-md-4">
+          <div class="col-md-2">
+            <button
+              @click="RegisterData()"
+              class="btn btn-b-n"
+              type="submit"
+              data-dismiss="modal"
+            >Submit</button>
+          </div>
+          <div class="col-md-2 offset-md-1">
+            <button @click="Close()" class="btn btn-b-n" type="button" data-dismiss="modal">Cancel</button>
           </div>
         </div>
       </div>
     </div>
-  </form>
+  </div>
 </template>
 
 <script>
 import { mapState, mapActions } from "vuex";
-//import { sha256 } from 'js-sha256'
+import alert from "../shared/alert.vue";
+
 export default {
   name: "registration",
+  components: {
+    alert
+  },
   data() {
     return {
-      passwordCheck: "",
       showPassword: false,
       PasswordBoxType: "password",
-      confirmpassword: ""
+      confirmpassword: "",
+      hasError: false,
+      errorMsg: ""
     };
   },
   methods: {
-    ...mapActions("registration", ["regUser", "getUser"]),
+    ...mapActions("registration", ["regUser", "getUserContainer"]),
     RegisterData() {
-      this.regUser(this.user).then(() => {
-        if (this.user.id > 0) {
-          this.$router.push("/login");
-        } else {
-          alert("Error");
-        }
-      });
+      this.hasError = false;
+      this.errorMsg = "";
+
+      if (this.userContainer.password !== this.confirmpassword) {
+        this.hasError = true;
+        this.errorMsg = "Passwords do not match.";
+        return;
+      }
+
+      // this.regUser(this.userContainer).then(() => {
+      //   if (this.userContainer.Id > 0) {
+      //     this.$router.push("/login");
+      //   } else {
+      //     this.errorMsg = this.userContainer.resultString;
+      //     this.hasError = true;
+      //     this.userContainer.password = "";
+      //     this.confirmpassword = "";
+      //   }
+      // });
+      this.regUser(this.userContainer);
+      this.$router.push("/login");
     },
     Close() {
       this.$router.push("/");
     }
   },
   computed: {
-    ...mapState("registration", ["user"])
+    ...mapState("registration", ["userContainer"]),
+    resultString() {
+      return this.userContainer.resultString;
+    }
   },
   mounted() {
-    //this.getUser(0);
+    this.getUserContainer();
   }
 };
 </script>

src/components/accounts/restaurantRegistration.vue

 <template>
-  <form>
-    <div class="reg-page">
-      <div class="regform">
-        <div class="col-md-12" style="text-align:left">
-          <h4>Restaurant Registration</h4>
-          <div class="form-group row"></div>
-          <div class="form-group row">
-            <div class="col-md-12" style="text-align:left">
-              <h5>Restaurant Details</h5>
-            </div>
+  <div class="reg-page">
+    <div class="regform">
+      <div class="col-md-12" style="text-align:left">
+        <h4>Restaurant Registration</h4>
+        <div class="form-group row"></div>
+        <div v-if="hasError" class="form-group row">
+          <div>
+            <alert :text="resultString" :type="'ERROR'" class="col-md-12" />
           </div>
-          <div class="row" style="text-align:left">
-            <div class="col-md-12" style="margin-bottom: 1em">
-              <div class="input-group-prepend">
-                <span class="input-group-text">
-                  <eva-icon name="activity-outline" fill="#60CBEB"></eva-icon>
-                </span>
-                <input class="form-control" type="text" name="rname" placeholder="Name" />
-              </div>
-            </div>
+        </div>
+        <div class="form-group row">
+          <div class="col-md-12" style="text-align:left">
+            <h5>Restaurant Details</h5>
           </div>
-          <div class="row" style="text-align:left">
-            <div class="col-md-12" style="margin-bottom: 1em">
-              <div class="input-group-prepend">
-                <span class="input-group-text">
-                  <eva-icon name="image-outline" fill="#60CBEB"></eva-icon>
-                </span>
-                <input type="file" name="logo" placeholder="Logo" />
-              </div>
+        </div>
+        <div class="row" style="text-align:left">
+          <div class="col-md-12" style="margin-bottom: 1em">
+            <label>Name</label>
+            <div class="input-group-prepend">
+              <span class="input-group-text">
+                <eva-icon name="edit-2-outline" fill="#60CBEB"></eva-icon>
+              </span>
+              <input
+                class="form-control"
+                type="text"
+                name="rname"
+                v-model="restaurantContainer.name"
+              />
             </div>
           </div>
-          <div class="row" style="text-align:left">
-            <div class="col-md-12" style="margin-bottom: 1em">
-              <div class="input-group-prepend">
-                <label>Are you part of a chain?</label>
-                <div class="custom-control custom-switch">
-                  <input
-                    style="margin-left: 1px"
-                    type="checkbox"
-                    class="custom-control-input"
-                    id="customSwitch1"
-                    :checked="chain"
-                    @change="ChangeChain"
-                  />
-                  <label
-                    class="custom-control-label"
-                    for="customSwitch1"
-                    style="margin-left: 40px"
-                  >{{chain ? 'Yes' : 'No'}}</label>
-                </div>
-              </div>
+        </div>
+        <div class="row" style="text-align:left">
+          <div class="col-md-12" style="margin-bottom: 1em">
+            <label>Logo / Cover Picture</label>
+            <div class="input-group-prepend">
+              <image-uploader
+                :preview="true"
+                :className="['fileinput', { 'fileinput--loaded': hasImage }]"
+                capture="environment"
+                :debug="1"
+                doNotResize="gif"
+                :autoRotate="true"
+                outputFormat="verbose"
+                @input="setImage"
+              >
+                <label for="fileInput" slot="upload-label">
+                  <figure>
+                    <path
+                      class="path1"
+                      d="M9.5 19c0 3.59 2.91 6.5 6.5 6.5s6.5-2.91 6.5-6.5-2.91-6.5-6.5-6.5-6.5 2.91-6.5 6.5zM30 8h-7c-0.5-2-1-4-3-4h-8c-2 0-2.5 2-3 4h-7c-1.1 0-2 0.9-2 2v18c0 1.1 0.9 2 2 2h28c1.1 0 2-0.9 2-2v-18c0-1.1-0.9-2-2-2zM16 27.875c-4.902 0-8.875-3.973-8.875-8.875s3.973-8.875 8.875-8.875c4.902 0 8.875 3.973 8.875 8.875s-3.973 8.875-8.875 8.875zM30 14h-4v-2h4v2z"
+                    ></path>
+                  </figure>
+                </label>
+              </image-uploader>
             </div>
           </div>
-          <div class="row" style="text-align:left">
-            <div class="col-md-12" style="margin-bottom: 1em">
-              <div class="input-group-prepend">
-                <span class="input-group-text">
-                  <eva-icon name="credit-card-outline" fill="#60CBEB"></eva-icon>
-                </span>
-                <input
-                  class="form-control"
-                  type="number"
-                  name="deliveryFee"
-                  placeholder="Delivery Fee"
-                />
-              </div>
+        </div>
+        <div class="row" style="text-align:left">
+          <div class="col-md-12" style="margin-bottom: 1em">
+            <label>Delivery Fee</label>
+            <div class="input-group-prepend">
+              <span class="input-group-text">
+                <eva-icon name="credit-card-outline" fill="#60CBEB"></eva-icon>
+              </span>
+              <input
+                class="form-control"
+                type="number"
+                name="deliveryFee"
+                v-model="restaurantContainer.deliveryFee"
+              />
             </div>
           </div>
-          <div class="row" style="text-align:left">
-            <div class="col-md-12" style="margin-bottom: 1em">
-              <div class="input-group-prepend">
-                <span class="input-group-text">
-                  <eva-icon name="navigation-2-outline" fill="#60CBEB"></eva-icon>
-                </span>
-                <input
-                  class="form-control"
-                  type="number"
-                  name="deliveryRadius"
-                  placeholder="Delivery Radius(KM)"
-                />
-              </div>
+        </div>
+        <div class="row" style="text-align:left">
+          <div class="col-md-12" style="margin-bottom: 1em">
+            <label>Delivery Radius (KM)</label>
+            <div class="input-group-prepend">
+              <span class="input-group-text">
+                <eva-icon name="pin-outline" fill="#60CBEB"></eva-icon>
+              </span>
+              <input
+                class="form-control"
+                type="number"
+                name="deliveryRadius"
+                v-model="restaurantContainer.deliveryRadius"
+              />
             </div>
           </div>
-          <div class="row" style="text-align:left">
-            <div class="col-md-12" style="margin-bottom: 1em">
-              <div class="input-group-prepend">
-                <label>Methods Of Payment</label>
-                <!-- <span class="input-group-text">
-                  <eva-icon name="credit-card-outline" fill="#60CBEB"></eva-icon>
-                </span>-->
-                <ul>
-                  <li v-for="(mop, i) in mops" :key="i">
-                    <input type="checkbox" :id="mop.name" :value="mop.name" v-model="selectedMops" />
-                    <label :for="mop.name">{{ mop.name }}</label>
-                  </li>
-                </ul>
-              </div>
+        </div>
+        <div class="row" style="text-align:left">
+          <div class="col-md-12" style="margin-bottom: 1em">
+            <label>Delivery Time (Minutes)</label>
+            <div class="input-group-prepend">
+              <span class="input-group-text">
+                <eva-icon name="clock-outline" fill="#60CBEB"></eva-icon>
+              </span>
+              <input
+                class="form-control"
+                type="number"
+                name="deliveryRadius"
+                placeholder="From"
+                v-model="deliverfrom"
+              />
+              <input
+                class="form-control"
+                type="number"
+                name="deliveryRadius"
+                placeholder="To"
+                v-model="deliverTo"
+              />
             </div>
           </div>
-          <div class="row" style="text-align:left">
-            <div class="col-md-12" style="margin-bottom: 1em">
-              <div class="input-group-prepend">
-                <span class="input-group-text">
-                  <eva-icon name="activity-outline" fill="#60CBEB"></eva-icon>
-                </span>
-                <input
-                  class="form-control"
-                  type="text"
-                  name="shopName"
-                  placeholder="Shopping Centre"
-                />
-              </div>
+        </div>
+        <div class="row" style="text-align:left">
+          <div class="col-md-12" style="margin-bottom: 1em">
+            <div class="input-group-prepend">
+              <label>Methods Of Payment</label>
+              <ul>
+                <li v-for="(mop, i) in mops" :key="i">
+                  <input type="checkbox" :id="mop.name" :value="mop.name" v-model="selectedMops" />
+                  <label :for="mop.name">{{ mop.name }}</label>
+                </li>
+              </ul>
             </div>
           </div>
-          <div class="row" style="text-align:left">
-            <div class="col-md-12" style="margin-bottom: 1em">
-              <div class="input-group-prepend">
-                <span class="input-group-text">
-                  <eva-icon name="activity-outline" fill="#60CBEB"></eva-icon>
-                </span>
-                <input class="form-control" type="text" name="shopNo" placeholder="Shop Number" />
-              </div>
+        </div>
+        <div class="row" style="text-align:left">
+          <div class="col-md-12" style="margin-bottom: 1em">
+            <label>Shopping Centre</label>
+            <div class="input-group-prepend">
+              <span class="input-group-text">
+                <eva-icon name="shopping-cart-outline" fill="#60CBEB"></eva-icon>
+              </span>
+              <input
+                class="form-control"
+                type="text"
+                name="shopName"
+                v-model="restaurantContainer.shoppingCentre"
+              />
             </div>
           </div>
-          <div class="row" style="text-align:left">
-            <div class="col-md-12" style="margin-bottom: 1em">
-              <Map @GoogleAddress="UpdateAddress" />
+        </div>
+        <div class="row" style="text-align:left">
+          <div class="col-md-12" style="margin-bottom: 1em">
+            <label>Shop Number</label>
+            <div class="input-group-prepend">
+              <span class="input-group-text">
+                <eva-icon name="hash-outline" fill="#60CBEB"></eva-icon>
+              </span>
+              <input
+                class="form-control"
+                type="text"
+                name="shopNo"
+                v-model="restaurantContainer.shopNumber"
+              />
             </div>
           </div>
-          <div class="row" style="text-align:left">
-            <div class="col-md-12" style="margin-bottom: 1em">
-              <label>Trading Hours</label>
-              <ListView
-                :items="tradingHours"
-                :showColumnChooser="false"
-                :hideSearch="true"
-                :deleteable="true"
-                @onDelete="Delete"
-                @onNew="New"
+        </div>
+        <div class="row" style="text-align:left">
+          <div class="col-md-12" style="margin-bottom: 1em">
+            <Map @GoogleAddress="UpdateAddress" />
+          </div>
+        </div>
+        <div class="row" style="text-align:left">
+          <div class="col-md-12" style="margin-bottom: 1em">
+            <label>Trading Hours</label>
+            <ListView
+              :items="tradingHours"
+              :showColumnChooser="false"
+              :hideSearch="true"
+              :deleteable="true"
+              @onDelete="Delete"
+              @onNew="New"
+            />
+            <modal name="tradingHours" :width="600" :height="380">
+              <TradingHours @tradingUpdate="TradingUpdate" />
+            </modal>
+          </div>
+        </div>
+        <div class="row" style="text-align:left">
+          <div class="col-md-12" style="margin-bottom: 1em">
+            <label>Categories</label>
+            <ListView
+              :items="categories"
+              :showColumnChooser="false"
+              :hideSearch="true"
+              :deleteable="true"
+              :displayColumn="columns"
+              :sortKey="Description"
+              @onDelete="DeleteCat"
+              @onNew="NewCat"
+            />
+            <modal name="Categories" :width="600" :height="500">
+              <Categories @selected="selectedCategory" />
+            </modal>
+          </div>
+        </div>
+        <hr />
+        <div class="form-group row">
+          <div class="col-md-12" style="text-align:left">
+            <h5>Restaurant Admin Details</h5>
+          </div>
+        </div>
+        <div class="row" style="text-align:left">
+          <div class="col-md-12" style="margin-bottom: 1em">
+            <label>First Name</label>
+            <div class="input-group-prepend">
+              <span class="input-group-text">
+                <eva-icon name="person-outline" fill="#60CBEB"></eva-icon>
+              </span>
+              <input
+                class="form-control"
+                type="text"
+                name="name"
+                v-model="restaurantContainer.userFirstName"
               />
-              <modal name="tradingHours" :width="600" :height="330">
-                <TradingHours @tradingUpdate="TradingUpdate" />
-              </modal>
             </div>
           </div>
-          <hr />
-          <div class="form-group row">
-            <div class="col-md-12" style="text-align:left">
-              <h5>Restaurant Admin Details</h5>
+          <div class="col-md-12" style="margin-bottom: 1em">
+            <label>Surname</label>
+            <div class="input-group-prepend">
+              <span class="input-group-text">
+                <eva-icon name="book-outline" fill="#60CBEB"></eva-icon>
+              </span>
+              <input
+                class="form-control"
+                type="text"
+                name="surname"
+                v-model="restaurantContainer.userSurname"
+              />
             </div>
           </div>
-          <div class="row" style="text-align:left">
-            <div class="col-md-12" style="margin-bottom: 1em">
-              <div class="input-group-prepend">
-                <span class="input-group-text">
-                  <eva-icon name="person-outline" fill="#60CBEB"></eva-icon>
-                </span>
-                <input class="form-control" type="text" name="name" placeholder="Name" />
-              </div>
-            </div>
-            <div class="col-md-12" style="margin-bottom: 1em">
-              <div class="input-group-prepend">
-                <span class="input-group-text">
-                  <eva-icon name="book-outline" fill="#60CBEB"></eva-icon>
-                </span>
-                <input class="form-control" type="text" name="surname" placeholder="Surname" />
-              </div>
-            </div>
-            <div class="col-md-12" style="margin-bottom: 1em">
-              <div class="input-group-prepend">
-                <span class="input-group-text">
-                  <eva-icon name="email-outline" fill="#60CBEB"></eva-icon>
-                </span>
-                <input class="form-control" type="text" name="email" placeholder="Email Address" />
-              </div>
-            </div>
-            <div class="col-md-12" style="margin-bottom: 1em">
-              <div class="input-group-prepend">
-                <span class="input-group-text">
-                  <eva-icon name="phone-outline" fill="#60CBEB"></eva-icon>
-                </span>
-                <input
-                  class="form-control"
-                  type="text"
-                  name="cellnumber"
-                  placeholder="Cellphone Number"
-                />
-              </div>
+          <div class="col-md-12" style="margin-bottom: 1em">
+            <label>Email Address</label>
+            <div class="input-group-prepend">
+              <span class="input-group-text">
+                <eva-icon name="email-outline" fill="#60CBEB"></eva-icon>
+              </span>
+              <input
+                class="form-control"
+                type="text"
+                name="email"
+                v-model="restaurantContainer.userEmailAddress"
+              />
             </div>
           </div>
-          <div class="row" style="text-align:left">
-            <div class="col-md-12" style="margin-bottom: 1em">
-              <div class="input-group-prepend">
-                <span class="input-group-text">
-                  <eva-icon name="lock-outline" fill="#60CBEB"></eva-icon>
-                </span>
-                <input
-                  class="form-control"
-                  :type="PasswordBoxType"
-                  id="password"
-                  placeholder="Password"
-                  name="password"
-                  value
-                />
-              </div>
+        </div>
+        <div class="row" style="text-align:left">
+          <div class="col-md-12" style="margin-bottom: 1em">
+            <label>Password</label>
+            <div class="input-group-prepend">
+              <span class="input-group-text">
+                <eva-icon name="lock-outline" fill="#60CBEB"></eva-icon>
+              </span>
+              <input
+                class="form-control"
+                :type="PasswordBoxType"
+                id="password"
+                name="password"
+                value
+                v-model="restaurantContainer.userPassword"
+              />
             </div>
-            <div class="col-md-12" style="margin-bottom: 1em">
-              <div class="input-group-prepend">
-                <span class="input-group-text">
-                  <eva-icon name="lock-outline" fill="#60CBEB"></eva-icon>
-                </span>
-                <input
-                  class="form-control"
-                  :type="PasswordBoxType"
-                  id="confirmpassword"
-                  placeholder="Confirm Password"
-                  name="confirmpassword"
-                  v-model="confirmpassword"
-                  value
-                />
-                <div>
-                  <div class="input-group-append">
-                    <span class="input-group-text">
-                      <eva-icon
-                        v-if="showPassword"
-                        name="eye-off-outline"
-                        fill="#60CBEB"
-                        @click="togglePassword()"
-                      ></eva-icon>
-                      <eva-icon v-else name="eye-outline" fill="#60CBEB" @click="togglePassword()"></eva-icon>
-                    </span>
-                  </div>
+          </div>
+          <div class="col-md-12" style="margin-bottom: 1em">
+            <label>Confirm Password</label>
+            <div class="input-group-prepend">
+              <span class="input-group-text">
+                <eva-icon name="lock-outline" fill="#60CBEB"></eva-icon>
+              </span>
+              <input
+                class="form-control"
+                :type="PasswordBoxType"
+                id="confirmpassword"
+                name="confirmpassword"
+                v-model="confirmpassword"
+                value
+              />
+              <div>
+                <div class="input-group-append">
+                  <span class="input-group-text">
+                    <eva-icon
+                      v-if="showPassword"
+                      name="eye-off-outline"
+                      fill="#60CBEB"
+                      @click="togglePassword()"
+                    ></eva-icon>
+                    <eva-icon v-else name="eye-outline" fill="#60CBEB" @click="togglePassword()"></eva-icon>
+                  </span>
                 </div>
               </div>
             </div>
           </div>
-          <div class="form-group row"></div>
-          <div class="row offset-md-4">
-            <div class="col-md-2">
-              <button
-                @click="SubmitData()"
-                class="btn btn-b-n"
-                type="submit"
-                data-dismiss="modal"
-              >Submit</button>
-            </div>
-            <div class="col-md-2 offset-md-1">
-              <button @click="Close()" class="btn btn-b-n" type="submit" data-dismiss="modal">Cancel</button>
+        </div>
+        <div class="form-group row"></div>
+        <div class="row offset-md-4">
+          <div class="col-md-2">
+            <button
+              @click="SubmitData()"
+              class="btn btn-b-n"
+              type="button"
+              data-dismiss="modal"
+            >Submit</button>
+          </div>
+          <div class="col-md-2 offset-md-1">
+            <button @click="Close()" class="btn btn-b-n" type="button" data-dismiss="modal">Cancel</button>
+          </div>
+        </div>
+        <div class="row" style="text-align:left">
+          <div class="col-md-12" style="margin-bottom: 1em">
+            <div v-if="hasError" class="form-group row">
+              <div>
+                <alert :text="resultString" :type="'ERROR'" class="col-md-12" />
+              </div>
             </div>
           </div>
         </div>
       </div>
     </div>
-  </form>
+  </div>
 </template>
 
 <script>
 import ListView from "../shared/listView";
 import Switches from "vue-switches";
 import TradingHours from "../accounts/tradingHours";
+import { mapState, mapActions } from "vuex";
+import ImageUploader from "vue-image-upload-resize";
+import Categories from "../restaurants/restaurantCategorySelect";
 
 export default {
   name: "RestaurantRegistration",
     Map,
     ListView,
     Switches,
-    TradingHours
+    TradingHours,
+    ImageUploader,
+    Categories
   },
   data() {
     return {
         { name: "Credit Card" },
         { name: "EFT" },
         { name: "Account" },
-        { name: "Cash On Delivery" }
+        { name: "Cash On Delivery" },
+        { name: "Instant EFT" }
       ],
-      tradingHours: []
+      tradingHours: [],
+      categories: [],
+      hasError: false,
+      confirmpassword: "",
+      showPassword: false,
+      PasswordBoxType: "password",
+      hasImage: false,
+      image: null,
+      columns: ["Description"],
+      deliverfrom: "",
+      deliverTo: ""
     };
   },
   methods: {
+    ...mapActions("registration", ["regRestaurant", "getRestaurantContainer"]),
     UpdateAddress(address) {
-      console.log(JSON.stringify(address));
+      this.restaurantContainer.streetNumber = address.streetNumber;
+      this.restaurantContainer.streetName = address.streetName;
+      this.restaurantContainer.suburb = address.suburb;
+      this.restaurantContainer.city = address.city;
+      this.restaurantContainer.province = address.province;
+      this.restaurantContainer.country = address.country;
+      this.restaurantContainer.postalCode = address.postalCode;
+      this.restaurantContainer.googleMapUrl = address.url;
+      this.restaurantContainer.latitude = address.coordinates.lat;
+      this.restaurantContainer.longitude = address.coordinates.lng;
     },
     New() {
-      //Create Model
       this.$modal.show("tradingHours");
     },
     Delete(item) {
       this.tradingHours.pop(item);
     },
+    NewCat() {
+      this.$modal.show("Categories");
+    },
+    DeleteCat(item) {
+      this.categories.pop(item);
+    },
+    selectedCategory(item) {
+      this.categories.push(item[0]);
+      this.$modal.hide("Categories");
+    },
     TradingUpdate(item) {
       this.tradingHours.push(item);
       this.$modal.hide("tradingHours");
     },
     ChangeChain() {
       this.chain = !this.chain;
+    },
+    Close() {
+      this.$router.push("/");
+    },
+    SubmitData() {
+      this.hasError = false;
+      this.errorMsg = "";
+
+      this.restaurantContainer.tHours = this.tradingHours;
+      this.restaurantContainer.logo = this.image;
+
+      var mops = "";
+      for (let i = 0; i < this.selectedMops.length; i++) {
+        mops = mops + this.selectedMops[i] + "|";
+      }
+
+      var cats = "";
+      for (let i = 0; i < this.categories.length; i++) {
+        cats = cats + this.categories[i].description + "|";
+      }
+
+      this.restaurantContainer.categories = cats;
+      this.restaurantContainer.methodsOfPayment = mops;
+      this.restaurantContainer.deliveryTime =
+        this.deliverfrom + " - " + this.deliverTo + " Min";
+
+      if (this.restaurantContainer.userPassword !== this.confirmpassword) {
+        this.hasError = true;
+        this.errorMsg = "Passwords do not match.";
+        return;
+      }
+
+      this.regRestaurant(this.restaurantContainer);
+      this.$router.push("/login");
+    },
+    togglePassword() {
+      this.showPassword = !this.showPassword;
+      if (this.showPassword) {
+        this.PasswordBoxType = "text";
+      } else {
+        this.PasswordBoxType = "password";
+      }
+    },
+    setImage: function(output) {
+      this.hasImage = true;
+      this.image = output.dataUrl;
+    }
+  },
+  computed: {
+    ...mapState("registration", ["restaurantContainer"]),
+    resultString() {
+      return this.restaurantContainer.result;
     }
+  },
+  mounted() {
+    this.getRestaurantContainer();
   }
 };
 </script>

src/components/accounts/tradingHours.vue

           <span class="input-group-text" style="color: #60CBEB">
             <b>F</b>
           </span>
-          <VueTimepicker v-model="tradingData.from"></VueTimepicker>
+          <VueTimepicker v-model="tradingData.from" :disabled="EnableTime"></VueTimepicker>
         </div>
       </div>
       <div class="col-md-6" style="margin-bottom: 1em">
           <span class="input-group-text" style="color: #60CBEB">
             <b>T</b>
           </span>
-          <VueTimepicker v-model="tradingData.to"></VueTimepicker>
+          <VueTimepicker v-model="tradingData.to" :disabled="EnableTime"></VueTimepicker>
+        </div>
+      </div>
+    </div>
+    <div class="row" style="text-align:left">
+      <div class="col-md-12" style="margin-bottom: 1em">
+        <div class="custom-control custom-switch">
+          <label>Opened 24 Hours?</label>
+          <input
+            style="margin-left: 1px"
+            type="checkbox"
+            class="custom-control-input"
+            id="th24HSwitch"
+            :checked="tradingData.open24"
+            @change="selectionChangedHours"
+            :disabled="tradingData.closed"
+          />
+          <label
+            class="custom-control-label"
+            for="th24HSwitch"
+            style="margin-left: 40px"
+          >{{tradingData.open24 ? 'Yes' : 'No'}}</label>
         </div>
       </div>
     </div>
             id="thCloseSwitch"
             :checked="tradingData.closed"
             @change="selectionChanged"
+            :disabled="tradingData.open24"
           />
           <label
             class="custom-control-label"
         description: "",
         from: "",
         to: "",
-        closed: false
+        closed: false,
+        open24: false
       }
     };
   },
     },
     selectionChanged() {
       this.tradingData.closed = !this.tradingData.closed;
+    },
+    selectionChangedHours() {
+      this.tradingData.open24 = !this.tradingData.open24;
+    }
+  },
+  computed: {
+    EnableTime() {
+      if (this.tradingData.closed || this.tradingData.open24) {
+        return true;
+      } else {
+        return false;
+      }
     }
   }
 };

src/components/home/restaurantCategory.vue

+<template>
+  <div class="container">
+    <div class="form-group row"></div>
+    <div class="form-group row">
+      <div class="col-md-4" v-for="cat in restaurantsCategories" :key="cat.id">
+        <router-link :to="`/property/property/${cat.id}`">
+          <div class="card-box-a card-shadow">
+            <div class="img-box-a">
+              <img
+                :src="cat.image"
+                alt
+                class="img-a img-fluid"
+                style="height:350px; width:350px; object-fit: cover;"
+              />
+            </div>
+            <div class="card-overlay">
+              <div class="card-overlay-a-content">
+                <div class="card-header-a">
+                  <h4 class="card-title-a">
+                    <router-link :to="`/property/property/${cat.id}`" class="link-a">
+                      {{
+                      cat.description
+                      }}
+                    </router-link>
+                  </h4>
+                  <!-- <h4 class="card-title-c">
+                    <router-link :to="`/property/property/${cat.id}`" class="link-a">
+                      {{
+                      restaurant.subText
+                      }}
+                    </router-link>
+                  </h4>-->
+                </div>
+                <!-- <div class="card-body-a">
+                  <div class="price-box d-flex"></div>
+                  <router-link :to="`/property/property/${cat.id}`" class="link-a">
+                    Click here to view
+                    <span class="ion-ios-arrow-forward"></span>
+                  </router-link>
+                </div>
+                <div class="card-footer-a">
+                  <ul class="card-info d-flex justify-content-around">
+                    <li>
+                      <h4 class="card-info-title">
+                        <img src="/img/delivery-truck-with-dollar.png" height="30px" width="30px" />
+                      </h4>
+                      <span>{{ restaurant.deliveryFee }}</span>
+                    </li>
+                    <li>
+                      <h4 class="card-info-title">
+                        <img
+                          src="/img/delivery-truck-with-circular-clock.png"
+                          height="30px"
+                          width="30px"
+                        />
+                      </h4>
+                      <span>{{ restaurant.deliveryTime }}</span>
+                    </li>
+                  </ul>
+                </div>-->
+              </div>
+            </div>
+          </div>
+        </router-link>
+        <br />
+      </div>
+    </div>
+    <div v-if="wait" id="preloader"></div>
+  </div>
+</template>
+
+<script>
+import { mapState, mapActions } from "vuex";
+
+export default {
+  name: "restaurantCategorySearch",
+  data() {
+    return {
+      wait: true
+    };
+  },
+  methods: {
+    ...mapActions("restaurantCategories", ["getCategories"])
+  },
+  computed: {
+    ...mapState("restaurantCategories", ["restaurantsCategories"])
+  },
+  mounted() {
+    this.getCategories().then(() => {
+      this.wait = false;
+    });
+  }
+};
+</script>

src/components/home/restaurantsSection.vue

+<template>
+  <div class="container">
+    <div class="form-group row"></div>
+    <div class="form-group row">
+      <div class="col-md-4" v-for="restaurant in restaurants" :key="restaurant.id">
+        <router-link :to="`/property/property/${restaurant.id}`">
+          <div class="card-box-a card-shadow">
+            <div class="img-box-a">
+              <img
+                :src="restaurant.logo"
+                alt
+                class="img-a img-fluid"
+                style="height:350px; width:350px; object-fit: cover;"
+              />
+            </div>
+            <div class="card-overlay">
+              <div class="card-overlay-a-content">
+                <div class="card-header-a">
+                  <h2 class="card-title-a">
+                    <router-link :to="`/property/property/${restaurant.id}`" class="link-a">
+                      {{
+                      restaurant.name
+                      }}
+                    </router-link>
+                  </h2>
+                  <h3 class="card-title-b">
+                    <router-link :to="`/property/property/${restaurant.id}`" class="link-a">
+                      {{
+                      restaurant.suburb
+                      }}
+                    </router-link>
+                  </h3>
+                  <h4 class="card-title-c">
+                    <router-link :to="`/property/property/${restaurant.id}`" class="link-a">
+                      {{
+                      restaurant.subText
+                      }}
+                    </router-link>
+                  </h4>
+                </div>
+                <div class="card-body-a">
+                  <div class="price-box d-flex"></div>
+                  <router-link :to="`/property/property/${restaurant.id}`" class="link-a">
+                    <span class="ion-ios-arrow-forward"></span>
+                  </router-link>
+                </div>
+                <div class="card-footer-a">
+                  <ul class="card-info d-flex justify-content-around">
+                    <li>
+                      <h4 class="card-info-title">
+                        <img src="/img/delivery-truck-with-dollar.png" height="30px" width="30px" />
+                      </h4>
+                      <span>{{ restaurant.deliveryFee }}</span>
+                    </li>
+                    <li>
+                      <h4 class="card-info-title">
+                        <img
+                          src="/img/delivery-truck-with-circular-clock.png"
+                          height="30px"
+                          width="30px"
+                        />
+                      </h4>
+                      <span>{{ restaurant.deliveryTime }}</span>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </div>
+        </router-link>
+      </div>
+    </div>
+    <div v-if="wait" id="preloader"></div>
+  </div>
+</template>
+
+<script>
+import { mapState, mapActions } from "vuex";
+
+export default {
+  name: "restaurantSections",
+  data() {
+    return {
+      wait: true
+    };
+  },
+  methods: {
+    ...mapActions("restaurantSearch", ["getRestaurants"])
+  },
+  computed: {
+    ...mapState("restaurantSearch", ["restaurants"])
+  },
+  mounted() {
+    this.getRestaurants().then(() => {
+      this.wait = false;
+    });
+  }
+};
+</script>

src/components/restaurants/restaurantCategories.vue

+<template>
+  <div>
+    <div class="container">
+      <div class="container">
+        <div class="row">
+          <div class="col-md-12 col-lg-8">
+            <div class="title-box-d">
+              <br />
+              <h1 class="title-d" style="text-align:left; font-size: 250%">Restaurant Categories</h1>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="container">
+      <div class="form-group row">
+        <div class="col-md-12">
+          <ListView
+            :items="restaurantsCategories"
+            :showColumnChooser="false"
+            :editable="true"
+            :hideSearch="true"
+            :deleteable="true"
+            :displayFormats="formats"
+            :sortKey="Description"
+            @onEdit="Edit"
+            @onDelete="Delete"
+            @onNew="New"
+          />
+        </div>
+        <modal name="Category" :width="600" :height="600">
+          <Category @CategoryUpdate="CategoryUpdate" :editCategory="CurrentCategory" />
+        </modal>
+      </div>
+      <div v-if="wait" id="preloader"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Category from "../restaurants/restaurantCategory";
+import ListView from "../shared/listView";
+import { mapState, mapActions } from "vuex";
+
+export default {
+  name: "RestaurantCategoryList",
+  components: {
+    ListView,
+    Category
+  },
+  data() {
+    return {
+      wait: true,
+      formats: ["", "", "image"],
+      category: {}
+    };
+  },
+  methods: {
+    ...mapActions("restaurantCategories", [
+      "getCategories",
+      "addCategory",
+      "updateCategory",
+      "deleteCategory"
+    ]),
+    New() {
+      this.category = null;
+      this.$modal.show("Category");
+    },
+    Edit(item) {
+      this.category = item;
+      this.$modal.show("Category");
+    },
+    Delete(item) {
+      this.deleteCategory(item.id);
+    },
+    CategoryUpdate(item) {
+      //Add new
+      if (item.id == 0) {
+        this.addCategory(item);
+      } else {
+        this.updateCategory(item);
+      }
+      this.$modal.hide("Category");
+    }
+  },
+  computed: {
+    ...mapState("restaurantCategories", ["restaurantsCategories"]),
+    CurrentCategory() {
+      return this.category;
+    }
+  },
+  mounted() {
+    this.getCategories().then(() => {
+      this.wait = false;
+    });
+  }
+};
+</script>

src/components/restaurants/restaurantCategory.vue

+<template>
+  <div class="container">
+    <div class="row">
+      <div class="col-md-12" style="margin-bottom: 1em">
+        <h1>Category</h1>
+      </div>
+    </div>
+    <div class="row" style="text-align:left">
+      <div class="col-md-12" style="margin-bottom: 1em">
+        <label>Description</label>
+        <div class="input-group-prepend">
+          <span class="input-group-text">
+            <eva-icon name="credit-card-outline" fill="#60CBEB"></eva-icon>
+          </span>
+          <input class="form-control" type="text" name="description" v-model="category.description" />
+        </div>
+      </div>
+    </div>
+    <div v-if="!category.image" class="row" style="text-align:left">
+      <div class="col-md-12" style="margin-bottom: 1em">
+        <label>Image</label>
+        <div class="input-group-prepend">
+          <image-uploader
+            :preview="true"
+            :className="['fileinput', { 'fileinput--loaded': hasImage }]"
+            capture="environment"
+            :debug="1"
+            doNotResize="gif"
+            :autoRotate="true"
+            outputFormat="verbose"
+            @input="setImage"
+          >
+            <label for="fileInput" slot="upload-label">
+              <figure>
+                <path
+                  class="path1"
+                  d="M9.5 19c0 3.59 2.91 6.5 6.5 6.5s6.5-2.91 6.5-6.5-2.91-6.5-6.5-6.5-6.5 2.91-6.5 6.5zM30 8h-7c-0.5-2-1-4-3-4h-8c-2 0-2.5 2-3 4h-7c-1.1 0-2 0.9-2 2v18c0 1.1 0.9 2 2 2h28c1.1 0 2-0.9 2-2v-18c0-1.1-0.9-2-2-2zM16 27.875c-4.902 0-8.875-3.973-8.875-8.875s3.973-8.875 8.875-8.875c4.902 0 8.875 3.973 8.875 8.875s-3.973 8.875-8.875 8.875zM30 14h-4v-2h4v2z"
+                ></path>
+              </figure>
+            </label>
+          </image-uploader>
+        </div>
+      </div>
+    </div>
+    <div v-else class="row" style="text-align:left">
+      <div class="col-md-12" style="margin-bottom: 1em">
+        <img :src="category.image" style="height:200px; width:200px; object-fit: cover;" />
+        <br />
+        <span class="input-group-text" align="center" style="width:150px" @click="removeImage()">
+          <eva-icon name="trash-2-outline" fill="#60CBEB"></eva-icon>Delete
+        </span>
+      </div>
+    </div>
+    <div class="row"></div>
+    <div class="row">
+      <div class="col-md-12" style="margin-bottom: 1em">
+        <div class="input-group-prepend">
+          <b-button class="btn btn-b-n" @click="Ok">Ok</b-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import ImageUploader from "vue-image-upload-resize";
+
+export default {
+  name: "Category",
+  props: {
+    editCategory: { default: {} }
+  },
+  components: {
+    ImageUploader
+  },
+  data() {
+    return {
+      hasImage: false,
+      category: {
+        id: 0,
+        image: null,
+        description: ""
+      }
+    };
+  },
+  methods: {
+    setImage: function(output) {
+      this.hasImage = true;
+      this.category.image = output.dataUrl;
+    },
+    Ok() {
+      this.$emit("CategoryUpdate", this.category);
+    },
+    removeImage() {
+      this.category.image = null;
+    }
+  },
+  watch: {
+    editCategory: {
+      immediate: true,
+      handler(val, oldVal) {
+        if (val) {
+          this.category = val;
+        }
+      }
+    }
+  }
+};
+</script>

src/components/restaurants/restaurantCategorySelect.vue

+<template>
+  <div class="container">
+    <div class="row">
+      <div class="col-md-12" style="margin-bottom: 1em">
+        <h1>Categories</h1>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-md-12" style="margin-bottom: 1em">
+        <ListView
+          :items="restaurantsCategories"
+          :showColumnChooser="false"
+          :hideSearch="false"
+          :deleteable="false"
+          :displayColumn="columns"
+          :sortKey="Description"
+          :showNew="false"
+          @onRowClick="onRowClick"
+        />
+        <!-- will need to emit the seleted item  -->
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import ListView from "../shared/listView";
+import { mapState, mapActions } from "vuex";
+
+export default {
+  name: "RestaurantCategories",
+  components: {
+    ListView
+  },
+  data() {
+    return {
+      columns: ["Description"]
+    };
+  },
+  methods: {
+    ...mapActions("restaurantCategories", ["getCategories"]),
+    onRowClick(item) {
+      this.$emit("selected", item);
+    }
+  },
+  computed: {
+    ...mapState("restaurantCategories", ["restaurantsCategories"])
+  },
+  mounted() {
+    this.getCategories();
+  }
+};
+</script>

src/components/shared/home.vue

 <template>
   <div class="container">
-    <h1>Food Glorious Food</h1>
-    <P>
-      Is it worth the waiting for?
-      <br />If we live 'til eighty four
-      <br />All we ever get is gru... el!
-      <br />Ev'ry day we say our prayer --
-      <br />Will they change the bill of fare?
-      <br />Still we get the same old gru... el!
-      <br />There's not a crust, not a crumb can we find
-      <br />Can we beg, can we borrow, or cadge
-      <br />But there's nothing to stop us from getting a thrill
-      <br />When we all close our eyes and imag... ine
-    </P>
-    <P>
-      Food, glorious food!
-      <br />Hot sausage and mustard!
-      <br />While we're in the mood --
-      <br />Cold jelly and custard!
-      <br />Peas, pudding and saveloys!
-      <br />What next is the question?
-      <br />Rich gentlemen have it, boys --
-      <br />In-di-gestion!
-    </P>
-    <P>
-      Food, glorious food!
-      <br />We're anxious to try it
-      <br />Three banquets a day --
-      <br />Our favourite diet!
-    </P>
-    <P>
-      Just picture a great big steak --
-      <br />Fried, roasted or stewed
-      <br />Oh, food
-      <br />Wonderful food
-      <br />Marvellous food
-      <br />Glorious food
-    </P>
-    <P>
-      Food, glorious food!
-      <br />What is there more handsome?
-      <br />Gulped, swallowed or chewed --
-      <br />Still worth a king's ransom!
-      <br />What is it we dream about?
-      <br />What brings on a sigh?
-      <br />Piled pieahes and cream, about
-      <br />Six feet high!
-    </P>
-    <P>
-      Food, glorious food!
-      <br />Eat right through the menu
-      <br />Just loosen your belt
-      <br />Two inches and then you
-      <br />Work up a new appetite
-      <br />In this interlude --
-      <br />The food
-      <br />Once again, food
-      <br />Fabulous food
-      <br />Glorious food
-      <br />
-    </P>
-    <P>
-      Food, glorious food!
-      <br />Don't care what it looks like --
-      <br />Burned!
-      <br />Underdone!
-      <br />Crude!
-      <br />Don't care what the cook's like
-      <br />Just thinking of growing fat --
-      <br />Our senses go reeling
-      <br />One moment of knowing that
-      <br />Full-up feeling!
-      <br />
-    </P>
-    <P>
-      Food, glorious food!
-      <br />What wouldn't we give for
-      <br />That extra bit more --
-      <br />That's all that we live for
-      <br />Why should we be fated to
-      <br />Do nothing but brood
-      <br />On food
-      <br />Magical food
-      <br />Wonderful food
-      <br />Marvellous food
-      <br />Fabulous food
-    </P>
-    <P>
-      Beautiful food
-      <br />Glorious food!
-    </P>
+    <div class="form-group row">
+      <div class="col-md-10 offset-md-1">
+        <ul class="nav nav-pills-a nav-pills mb-3 section-t3" id="pills-tab" role="tablist">
+          <li class="nav-item">
+            <a
+              class="nav-link active"
+              id="pills-video-tab"
+              data-toggle="pill"
+              href="#pills-video"
+              role="tab"
+              aria-controls="pills-video"
+              aria-selected="true"
+            >Restaurants</a>
+          </li>
+          <li class="nav-item">
+            <a
+              class="nav-link"
+              id="pills-plans-tab"
+              data-toggle="pill"
+              href="#pills-plans"
+              role="tab"
+              aria-controls="pills-plans"
+              aria-selected="false"
+            >Categories</a>
+          </li>
+        </ul>
+        <div class="tab-content" id="pills-tabContent">
+          <div
+            class="tab-pane fade show active"
+            id="pills-video"
+            role="tabpanel"
+            aria-labelledby="pills-video-tab"
+          >
+            <Cards />
+          </div>
+          <div
+            class="tab-pane fade"
+            id="pills-plans"
+            role="tabpanel"
+            aria-labelledby="pills-plans-tab"
+          >
+            <Categories />
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
+
+<script>
+import Cards from "../home/restaurantsSection";
+import Categories from "../home/restaurantCategory";
+
+export default {
+  name: "HomePage",
+  components: {
+    Cards,
+    Categories
+  }
+};
+</script>

src/components/shared/imageLoader.vue

+<template>
+  <div>
+    <div>
+      <label class="btn btn-b-n" style="width: 85px; height:40px;">
+        Upload
+        <input
+          type="file"
+          accept=".jpeg, .jpg, .gif, .png"
+          value="Upload Photo"
+          style="width: 0px;height: 0px;overflow: hidden;"
+          name="images[]"
+          @change="imagesAdd"
+          :multiple="false"
+          :disabled="!mayEdit"
+        />
+      </label>
+    </div>
+    <br />
+    <div class="form-group row">
+      <div v-for="(img, i) in image" class="col-md-2" :key="i">
+        <img :src="img" style="height:200px; width:150px; object-fit: cover;" />
+        <br />
+        <span class="input-group-text" align="center" style="width:150px" @click="removeImage(key)">
+          <eva-icon name="trash-2-outline" fill="#60CBEB"></eva-icon>Delete
+        </span>
+      </div>
+      <br />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    loadedImages: Function,
+    mayEdit: { type: Boolean, default: () => true }
+  },
+  data() {
+    return {
+      images: {},
+      image: [],
+      imagesDefault: []
+    };
+  },
+  methods: {
+    imagesAdd(e) {
+      if (!this.allowMultiple) {
+        this.images = {};
+        this.image = [];
+      }
+
+      const files = e.target.files || e.dataTransfer.files;
+
+      this.images = [];
+      Array.prototype.push.apply(this.images, files);
+      if (!this.images.length) return;
+
+      this.createImage(this.images);
+      this.loadedImages(this.images);
+
+      this.$emit("ImageLoaded", this.images);
+    },
+
+    createImage(file) {
+      for (let i = 0; i < file.length; i++) {
+        const reader = new FileReader();
+        var vm = this;
+
+        reader.onload = e => {
+          vm.image.push(e.target.result);
+        };
+        reader.readAsDataURL(file[i]);
+      }
+    },
+
+    removeImage(key) {
+      this.image.splice(key, 1);
+      this.images.splice(key, 1);
+
+      if (!this.image.length) {
+        this.$refs.im.value = "";
+      }
+    }
+  }
+};
+</script>

src/components/shared/listView.vue

-/* eslint-disable no-restricted-syntax */ /* eslint-disable guard-for-in */
 <template>
   <div>
     <div style="height:5px"></div>
               class="btn btn-primary myBackground btn-width cursor-pointer"
               data-toggle="modal"
               data-target="#myModal"
-            >Column Chooser</div>
+            >
+              Column Chooser
+            </div>
             <div class="col-md-12">
               <div id="myModal" class="modal fade" role="dialog">
                 <div class="modal-dialog modal-lg">
             <div
               class="btn btn-primary myBackground btn-width cursor-pointer"
               @click="onClearSelected()"
-            >Clear Selected</div>
+            >
+              Clear Selected
+            </div>
           </div>
           <div class="p2" v-if="showNew">
-            <div class="btn btn-primary myBackground btn-width cursor-pointer" @click="onNew()">New</div>
+            <div class="btn btn-primary myBackground btn-width cursor-pointer" @click="onNew()">
+              New
+            </div>
           </div>
         </div>
       </div>
                 :class="{ active: hover === c }"
               >
                 <div class="d-flex bd-highlight">
-                  <div
-                    v-if="displayHeaders.length === 0"
-                    class="p-2 w-100 bd-highlight"
-                  >{{ column | toProper }}</div>
-                  <div
-                    v-else
-                    class="p-2 w-100 bd-highlight"
-                  >{{ displayHeaders[c] !== "" ? displayHeaders[c] : column | toProper }}</div>
+                  <div v-if="displayHeaders.length === 0" class="p-2 w-100 bd-highlight">
+                    {{ column | toProper }}
+                  </div>
+                  <div v-else class="p-2 w-100 bd-highlight">
+                    {{ displayHeaders[c] !== "" ? displayHeaders[c] : column | toProper }}
+                  </div>
                   <div class="p-2 flex-shrink-1 bd-highlight">
                     <img
                       src="../../../public/img/sort-up.png"
             :class="{ selected: isSelected(i), 'cursor-pointer': allowSelect }"
           >
             <td v-for="(column, c) in Columns" :key="c">
-              <div
-                v-if="displayFormats.length === 0"
-              >{{ isObject(item[column]) ? item[column].display : item[column] }}</div>
+              <div v-if="displayFormats.length === 0">
+                {{ isObject(item[column]) ? item[column].display : item[column] }}
+              </div>
               <div v-else-if="displayFormats.length > 0 && displayFormats[c] === 'date'">
-                <div
-                  v-if="item[column] !== '0001-01-01T00:00:00'"
-                >{{ isObject(item[column]) ? item[column].display : item[column] | toDate }}</div>
+                <div v-if="item[column] !== '0001-01-01T00:00:00'">
+                  {{ isObject(item[column]) ? item[column].display : item[column] | toDate }}
+                </div>
+              </div>
+              <div v-else-if="displayFormats.length > 0 && displayFormats[c] === 'money'">
+                {{ isObject(item[column]) ? item[column].display : item[column] | toCurrency }}
               </div>
-              <div
-                v-else-if="displayFormats.length > 0 && displayFormats[c] === 'money'"
-              >{{ isObject(item[column]) ? item[column].display : item[column] | toCurrency }}</div>
               <div v-else-if="displayFormats.length > 0 && displayFormats[c] === 'image'">
                 <img :src="item[column]" style="height:100px; width:100px; object-fit: cover;" />
               </div>
               <div v-else>{{ isObject(item[column]) ? item[column].display : item[column] }}</div>
             </td>
             <td v-if="showCustomAction" class="my-width">
-              <button
-                type="button"
-                class="btn my-btn"
-                @click="onCustomClick(item)"
-              >{{ CustomActionHeading }}</button>
+              <button type="button" class="btn my-btn" @click="onCustomClick(item)">
+                {{ CustomActionHeading }}
+              </button>
             </td>
             <td v-if="editable" class="my-width">
               <button type="button" class="btn my-btn" @click="onEdit(item)">Edit</button>
       <div class="d-flex justify-content-between" v-if="showPager">
         <div class="p-1">
           {{
-          currentPage +
-          " / " +
-          PageCount +
-          (!hideItemCount ? " - (" + FilteredItems.length + " items)" : "")
+            currentPage +
+              " / " +
+              PageCount +
+              (!hideItemCount ? " - (" + FilteredItems.length + " items)" : "")
           }}
         </div>
         <div class="p-1">
     ListViewControl
   },
   mounted() {
-    try {
-      // to assign initial value to itemsPerPage
-      if (this.itemsPerPageList && this.itemsPerPageList.length > 0) {
-        const [startItem] = this.itemsPerPageList;
-        this.visibleItemsPerPageCount = startItem;
-      }
-    } catch (error) {
-      throw error;
+    if (this.itemsPerPageList && this.itemsPerPageList.length > 0) {
+      const [startItem] = this.itemsPerPageList;
+      this.visibleItemsPerPageCount = startItem;
     }
     this.getInitColumn();
   },
       hover: -1,
       selectedItems: [],
       showControl: false,
-      sortKey: "",
       reverse: false,
       searchItem: "",
       visibleItemsPerPageCount: 20,
       this.allColumn = list;
     },
     getInitColumn() {
-      const list = [];
       const listAll = [];
       if (this.items) {
         for (const i in Object.keys(this.items)) {
           const item = this.items[i];
           for (const o in Object.keys(item)) {
-            if (
-              !listAll.includes(Object.keys(item)[o]) &&
-              !Array.isArray(Object.values(item)[o])
-            ) {
+            if (!listAll.includes(Object.keys(item)[o]) && !Array.isArray(Object.values(item)[o])) {
               const columnName = Object.keys(item)[o];
               if (!listAll.some(x => x.column === columnName)) {
                 listAll.push({
     },
     AllColumns() {
       const list = [];
-      if (this.items) {
-      }
       return list;
     },
     FilteredItems() {
         endSlice = list.length;
       }
       return list.slice(startSlice, endSlice);
-    },
-    GetAllColumn() {}
+    }
+    //GetAllColumn() {}
   }
 };
 </script>

src/components/shared/mapSetLocation.vue

   <div>
     <label>Location</label>
     <div class="input-group-prepend">
+      <span class="input-group-text">
+        <eva-icon name="map" fill="#60CBEB"></eva-icon>
+      </span>
       <gmap-autocomplete class="form-control" @place_changed="setPlace"></gmap-autocomplete>
       <button class="btn btn-primary btn-l" @click="addMarker">Add</button>
       <br />
         if (place.address_components[i].types[0] === "locality") {
           this.city = place.address_components[i].long_name;
         }
-        if (place.address_components[i].types[0] === "administrative_area_level_1") {
+        if (
+          place.address_components[i].types[0] === "administrative_area_level_1"
+        ) {
           this.province = place.address_components[i].long_name;
         }
         if (place.address_components[i].types[0] === "country") {

src/components/shared/navBar.vue

 
   <nav class="navbar navbar-light bg-light navbar-expand-lg fixed-top" style="font-size:18px;">
     <div class="container-fluid">
-      <div class="col-md-2">
+      <div class="col-md-2 offset-1">
         <button
           class="navbar-toggler collapsed"
           type="button"
           data-toggle="collapse"
           data-target="#navbarTogglerDemo01"
           aria-expanded="false"
-        >
-          <span class="fa fa-search" aria-hidden="true"></span>
-        </button>
+        ></button>
       </div>
-
-      <div class="col-md-8">
+      <div class="col-md-1 offset-2">
+        <div class="input-group-prepend">
+          <input type="text" placeholder="search" />
+          <span class="input-group-text">
+            <i class="fa fa-search" style="color:#60CBEB"></i>
+          </span>
+        </div>
+      </div>
+      <div class="col-md-5">
         <div class="navbar-collapse collapse justify-content-center" id="navbarDefault">
           <ul class="navbar-nav">
-            <li class="nav-item dropdown">
+            <li class="nav-item dropdown" v-if="!isLoggedIn">
               <a
                 class="nav-link dropdown-toggle"
                 href="#"
                 data-toggle="dropdown"
                 aria-haspopup="true"
                 aria-expanded="false"
-                >Register</a
-              >
+              >Register</a>
               <!--@click="routerGoTo('/RegistrationPage')" -->
               <div class="dropdown-menu" aria-labelledby="navbarDropdown">
-                <a class="dropdown-item cursor-pointer" @click="routerGoTo('/Registration')"
-                  >Individual User</a
-                >
-                <a class="dropdown-item cursor-pointer" @click="routerGoTo('/RegisterRestaurant')"
-                  >Restaurant</a
-                >
-              </div>
-            </li>
-            <!-- <li class="nav-item dropdown">
-              <a
-                class="nav-link dropdown-toggle"
-                href="#"
-                id="navbarDropdown"
-                role="button"
-                data-toggle="dropdown"
-                aria-haspopup="true"
-                aria-expanded="false"
-                >Properties</a
-              >
-              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
-                <a class="dropdown-item cursor-pointer" @click="routerGoTo('/property/Search')"
-                  >Search</a
-                >
-                <a class="dropdown-item cursor-pointer" @click="routerGoTo('/property/new/Sale')"
-                  >To Sell</a
-                >
-                <a class="dropdown-item cursor-pointer" @click="routerGoTo('/property/new/Rental')"
-                  >To Rent</a
-                >
-                <hr v-if="isLoggedIn" />
                 <a
-                  v-if="isLoggedIn"
                   class="dropdown-item cursor-pointer"
-                  @click="routerGoTo('/properties')"
-                  >My Properties</a
-                >
-              </div>
-            </li> -->
-
-            <!-- <li class="nav-item dropdown">
-              <a
-                class="nav-link dropdown-toggle"
-                href="#"
-                id="navbarDropdown"
-                role="button"
-                data-toggle="dropdown"
-                aria-haspopup="true"
-                aria-expanded="false"
-                >About</a
-              >
-              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
-                <a class="dropdown-item cursor-pointer" @click="routerGoTo('/about/us')"
-                  >About Us</a
-                >
-                <a class="dropdown-item cursor-pointer" @click="routerGoTo('/about/timeshare')"
-                  >About Timeshare</a
-                >
+                  @click="routerGoTo('/Registration')"
+                >Individual User</a>
+                <a
+                  class="dropdown-item cursor-pointer"
+                  @click="routerGoTo('/RegisterRestaurant')"
+                >Restaurant</a>
               </div>
-            </li> -->
+            </li>
 
-            <li class="nav-item dropdown">
+            <li class="nav-item dropdown" v-if="isLoggedIn">
               <a
                 class="nav-link dropdown-toggle"
                 href="#"
                 aria-haspopup="true"
                 aria-expanded="false"
                 v-if="isLoggedIn"
-                >{{ NAME }}</a
               >
-              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
-                <a class="dropdown-item cursor-pointer" @click="routerGoTo('/status/list')"
-                  >Status</a
-                >
+                <!--{{ NAME }}-->
+                User
+              </a>
+              <div
+                v-if="SystemRole === 'Customer'"
+                class="dropdown-menu"
+                aria-labelledby="navbarDropdown"
+              >
                 <a
                   class="dropdown-item cursor-pointer"
-                  @click="routerGoTo('/status/timeshareAdmin')"
-                  >Timeshare Week Admin</a
-                >
+                  @click="routerGoTo('/status/list')"
+                >My Details</a>
                 <a
                   class="dropdown-item cursor-pointer"
-                  @click="routerGoTo('/status/tenderWeekAdmin')"
-                  >Tender Week Management</a
-                >
+                  @click="routerGoTo('/status/timeshareAdmin')"
+                >My Orders</a>
+              </div>
+              <div
+                v-if="SystemRole === 'RestaurantAdmin' || SystemRole === 'RestaurantUser'"
+                class="dropdown-menu"
+                aria-labelledby="navbarDropdown"
+              >
                 <a
                   class="dropdown-item cursor-pointer"
-                  @click="routerGoTo('/unitConfiguration/list')"
-                  >Unit Configuration</a
-                >
+                  @click="routerGoTo('/status/list')"
+                >Restaurant Details</a>
                 <a
                   class="dropdown-item cursor-pointer"
-                  @click="routerGoTo('/communication/template')"
-                  >Templates</a
-                >
+                  @click="routerGoTo('/status/timeshareAdmin')"
+                >Menu</a>
                 <hr />
                 <a
                   class="dropdown-item cursor-pointer"
-                  @click="routerGoTo('/status/userManagementPage')"
-                  >User Management & Access</a
-                >
-                <a class="dropdown-item cursor-pointer" @click="routerGoTo('/status/changeLogPage')"
-                  >Changes Logs</a
-                >
+                  @click="routerGoTo('/status/timeshareAdmin')"
+                >Users</a>
                 <a
                   class="dropdown-item cursor-pointer"
-                  @click="routerGoTo('/userDefinedGroups/list')"
-                  >Property User Defined Groups</a
-                >
-                <a class="dropdown-item cursor-pointer" @click="routerGoTo('/propertyTypes/list')"
-                  >Property Types</a
-                >
-                <hr />
-                <a class="dropdown-item cursor-pointer" @click="routerGoTo('/searchLog')"
-                  >Search Logs</a
-                >
-                <a class="dropdown-item cursor-pointer" @click="routerGoTo('/Offers')">Offers</a>
-                <a class="dropdown-item cursor-pointer" @click="routerGoTo('/Carousel')"
-                  >Carousel</a
-                >
+                  @click="routerGoTo('/status/timeshareAdmin')"
+                >Roles</a>
+              </div>
+              <div
+                v-if="SystemRole === 'SuperAdmin'"
+                class="dropdown-menu"
+                aria-labelledby="navbarDropdown"
+              >
                 <a
                   class="dropdown-item cursor-pointer"
-                  @click="routerGoTo('/user/updateProfileInfo')"
-                  >Update Info</a
-                >
-                <a class="dropdown-item cursor-pointer" @click="routerGoTo('/payments')"
-                  >Payments</a
-                >
-                <a class="dropdown-item cursor-pointer" @click="routerGoTo('/landingPages')"
-                  >Landing Pages / Campaignes</a
-                >
+                  @click="routerGoTo('/status/list')"
+                >Restaurants</a>
+                <a
+                  class="dropdown-item cursor-pointer"
+                  @click="routerGoTo('/RestaurantCategory')"
+                >Restaurant Categories</a>
+                <a
+                  class="dropdown-item cursor-pointer"
+                  @click="routerGoTo('/status/timeshareAdmin')"
+                >Customers</a>
               </div>
             </li>
             <li class="nav-item dropdown" v-if="!isLoggedIn">
                 data-toggle="dropdown"
                 aria-haspopup="true"
                 aria-expanded="false"
-                >Login</a
-              >
+              >Login</a>
             </li>
             <li class="nav-item dropdown" v-if="isLoggedIn">
               <span>
               </span>
             </li>
           </ul>
+          <!-- <i class="fa fa-shopping-cart"></i> -->
         </div>
       </div>
     </div>
 </template>
 
 <script>
-import { mapState, mapActions } from "vuex";
-import Log from "../../assets/Log";
+// import { mapState, mapActions } from "vuex";
+// import Log from "../../assets/Log";
 
 export default {
   computed: {
-    ...mapState("authentication", ["user", "flag", "status", "person", "token"]),
+    //...mapState("authentication", ["user", "flag", "status", "person", "token"]),
     isLoggedIn() {
-      console.log(Log.isLoggedIn());
-      return Log.isLoggedIn();
+      // console.log(Log.isLoggedIn());
+      // return Log.isLoggedIn();
+      return true;
     },
     NAME() {
-      return Log.getPerson().name;
+      //return Log.getPerson().name;
+      return "UserName";
+    },
+    SystemRole() {
+      //return "Customer";
+      return "SuperAdmin";
+      //return "RestaurantAdmin";
     },
     // eslint-disable-next-line vue/return-in-computed-property
     Logout() {
     }
   },
   methods: {
-    ...mapActions("authentication", ["logout"]),
+    //...mapActions("authentication", ["logout"]),
 
     routerGoTo(goTo) {
       this.$emit("routerGoTo", goTo);

src/main.js

 /* eslint-disable prefer-template */
-import Vue from 'vue';
-import EvaIcons from 'vue-eva-icons';
-import axios from 'axios';
-import moment from 'moment';
-import App from './App.vue';
-import router from './router';
-import store from './store';
-import VModal from 'vue-js-modal'
+import Vue from "vue";
+import EvaIcons from "vue-eva-icons";
+import axios from "axios";
+import moment from "moment";
+import App from "./App.vue";
+import router from "./router";
+import store from "./store";
+import VModal from "vue-js-modal";
+import "font-awesome/css/font-awesome.min.css";
+import VueGeolocation from "vue-browser-geolocation";
+import * as VueGoogleMaps from "vue2-google-maps";
 
-import VueGeolocation from 'vue-browser-geolocation'
-Vue.use(VueGeolocation)
-import * as VueGoogleMaps from 'vue2-google-maps'
+Vue.use(VueGeolocation);
 Vue.use(VueGoogleMaps, {
   load: {
-    key: 'AIzaSyC1Ksf24t03oxHkQYb-DymF9HipgGP30ao',
-    libraries: 'places', // necessary for places input
-  },
-})
-
+    key: "AIzaSyC1Ksf24t03oxHkQYb-DymF9HipgGP30ao",
+    libraries: "places" // necessary for places input
+  }
+});
 
+Vue.component("VueFontawesome", require("vue-fontawesome-icon/VueFontawesome.vue").default);
 
 Vue.use(EvaIcons);
 
 Vue.prototype.$axios = axios;
 
 Vue.prototype.$http = axios;
-const token = localStorage.getItem('token');
+const token = localStorage.getItem("token");
 if (token) {
   Vue.prototype.$http.defaults.headers.common.Authorization = token;
 }
       next();
       return;
     }
-    next('/users/login');
+    next("/users/login");
   } else {
     next();
   }
 });
 
-Vue.filter('toCurrency', (value) => {
-  if (typeof value !== 'number') {
+Vue.filter("toCurrency", value => {
+  if (typeof value !== "number") {
     return value;
   }
-  const formatter = new Intl.NumberFormat('en-US', {
-    minimumFractionDigits: 2,
+  const formatter = new Intl.NumberFormat("en-US", {
+    minimumFractionDigits: 2
   });
   return `R ${formatter.format(value)}`;
 });
 
-Vue.filter('toProper', (value) => {
-  if (typeof value !== 'string') {
+Vue.filter("toProper", value => {
+  if (typeof value !== "string") {
     console.log(typeof value);
     return value;
   }
-  value = value.replace(/([a-z])([A-Z])/g, '$1 $2');
+  value = value.replace(/([a-z])([A-Z])/g, "$1 $2");
   return value.charAt(0).toUpperCase() + value.slice(1);
 });
 
-Vue.filter('toDate', value => value.substring(0, value.length > 9 ? 10 : value.length));
+Vue.filter("toDate", value => value.substring(0, value.length > 9 ? 10 : value.length));
 
-Vue.filter('toTime', value => moment(String(value)).format('hh:mm'));
+Vue.filter("toTime", value => moment(String(value)).format("hh:mm"));
 
 new Vue({
   render: h => h(App),
   router,
-  store,
-}).$mount('#app');
+  store
+}).$mount("#app");
 
 Vue.use(VModal);

src/router/index.js

 import Login from "../components/accounts/login.vue";
 import RegisterRestaurant from "../components/accounts/restaurantRegistration.vue";
 import RegistrationPage from "../components/accounts/registrationPage.vue";
+import RestaurantCategory from "../components/restaurants/restaurantCategories.vue"
 
 Vue.use(Router);
 
       y: 0
     };
   },
-  routes: [
-    {
+  routes: [{
       path: "/",
       name: "Home",
       component: Home
     {
       path: "/RegistrationPage",
       name: "RegistrationPage",
-      components: RegistrationPage
+      component: RegistrationPage
+    },
+    {
+      path: "/RestaurantCategory",
+      name: "RestaurantCategory",
+      component: RestaurantCategory
     }
   ]
 });

src/store/index.js

 import Vue from 'vue';
 import Vuex from 'vuex';
 
-//import TimeshareModule from './modules/timeshare/timeshare';
-
+import Registration from './modules/accounts/registration';
+import Authentication from './modules/accounts/authentication';
+import RestaurantSearch from './modules/restaurants/restaurantSearch';
+import RestaurantCategories from './modules/restaurants/restaurantCategories';
 
 Vue.use(Vuex);
 /* eslint no-param-reassign: ["error", { "props": false }] */
 export default new Vuex.Store({
   modules: {
 
-    //timeshare: TimeshareModule,
-
+    registration: Registration,
+    authentiaction: Authentication,
+    restaurantSearch: RestaurantSearch,
+    restaurantCategories: RestaurantCategories
   },
 });

src/store/modules/accounts/authentication.js

+import Vue from 'vue';
+import Vuex from 'vuex';
+import axios from 'axios';
+
+Vue.use(Vuex);
+
+export default {
+  namespaced: true,
+  state: {
+    auth: {}
+  },
+  mutations: {
+    setAuthentication(state, auth) {
+      state.auth = auth;
+    }
+  },
+  getters: {},
+  actions: {
+    getAuthentication({
+      commit
+    }) {
+      axios
+        .get('api/Authentication')
+        .then(result => commit('setAuthentication', result.data));
+    },
+    Login({
+      commit
+    }, auth) {
+      //   axios
+      //     .post('api/Authentication', auth)
+      //     .then(result => commit('setAuthentication', result.data));
+      axios({
+        url: 'api/Authentication',
+        data: {
+          emailAddress: auth.emailAddress,
+          password: auth.password,
+        },
+        method: 'POST',
+      }).then((resp) => {
+        commit('setAuthentication', resp.data);
+      });
+    }
+  }
+}

src/store/modules/accounts/registration.js

+import axios from 'axios'
+import {
+  sha256
+} from 'js-sha256'
+
+export default {
+  namespaced: true,
+  state: {
+    userContainer: {},
+    restaurantContainer: {}
+  },
+  mutations: {
+    addUserContainer(state, userContainer) {
+      state.userContainer = userContainer
+    },
+    addRestaurantContainer(state, restaurantContainer) {
+      state.restaurantContainer = restaurantContainer;
+    },
+  },
+  getters: {},
+  actions: {
+    getUserContainer({
+      commit
+    }) {
+      axios
+        .get('/api/registration/GetUserContainer')
+        .then((result) => commit('addUserContainer', result.data))
+        .catch(console.error)
+    },
+    regUser({
+      commit
+    }, user) {
+      user.password = sha256(user.password + '≡∆≤≥√∞ProVision')
+      axios
+        .post('/api/registration/resgisterUser', user)
+        .then((result) => commit('addUserContainer', result.data))
+        .catch(console.error)
+    },
+    getRestaurantContainer({
+      commit
+    }) {
+      axios
+        .get('/api/registration/GetRestaurantContainer')
+        .then((result) => commit('addRestaurantContainer', result.data))
+        .catch(console.error)
+    },
+    regRestaurant({
+      commit
+    }, restaurant) {
+      restaurant.userPassword = sha256(restaurant.userPassword + '≡∆≤≥√∞ProVision')
+      axios
+        .post('/api/registration/resgisterRestaurant', restaurant)
+        .then((result) => commit('addRestaurantContainer', result.data))
+        .catch(console.error)
+    }
+  }
+}

src/store/modules/restaurants/restaurantCategories.js

+import axios from 'axios';
+
+export default {
+  namespaced: true,
+  state: {
+    restaurantsCategories: [],
+    restaurantCategory: {}
+  },
+  mutations: {
+    setRestaurantsCategories(state, categories) {
+      state.restaurantsCategories = categories;
+    },
+    addCategory(state, category) {
+      state.restaurantCategory = category;
+      state.restaurantsCategories.push(category);
+    },
+    updateCategories(state, category) {
+      state.restaurantsCategories.find(item => item.id === category.id).description = category
+        .description;
+      state.restaurantsCategories.find(item => item.id === category.id).image = category
+        .image;
+    },
+    removeCategories(state, id) {
+      state.restaurantsCategories.pop(state.restaurantsCategories.find(item => item.id === id));
+    }
+  },
+  getters: {},
+  actions: {
+    getCategories({
+      commit
+    }) {
+      axios
+        .get('/api/RestaurantCategory')
+        .then(result => commit('setRestaurantsCategories', result.data));
+    },
+    addCategory({
+      commit
+    }, category) {
+      axios
+        .post('/api/RestaurantCategory', category)
+        .then(result => commit('addCategory', result.data));
+    },
+    updateCategory({
+      commit
+    }, category) {
+      axios
+        .put('/api/RestaurantCategory', category)
+        .then(result => commit('updateCategories', result.data));
+    },
+    deleteCategory({
+      commit
+    }, id) {
+      axios
+        .delete(`/api/RestaurantCategory/${id}`)
+        .then(result => commit('removeCategories', id));
+    }
+  }
+}

src/store/modules/restaurants/restaurantSearch.js

+import axios from 'axios'
+
+export default {
+  namespaced: true,
+  state: {
+    restaurants: []
+  },
+  mutations: {
+    setRestaurants(state, rests) {
+      state.restaurants = rests;
+    }
+  },
+  getters: {},
+  actions: {
+    getRestaurants({
+      commit
+    }) {
+      axios.get('/api/restaurant').then(result => commit('setRestaurants', result.data));
+    }
+  }
+}