UnitPage & MakeOffer updated with eva icon

src/components/processFlow/makeOffer.vue

@@ -26,38 +26,41 @@
           </div>
         </div>
         <div class="form-group row">
-          <div class="col-md-4">
+          <div class="col-md-6">
             <label for="resortunit">Unit</label>
-            <input
-              class="form-control"
-              type="text"
-              id="resort"
-              name="resortunit"
-              disabled
-              v-model="item.unit"
-            />
-          </div>
-          <div class="col-md-4">
-            <label for="resortWeek">Week</label>
-            <input
-              class="form-control"
-              type="text"
-              id="week"
-              name="resortWeek"
-              disabled
-              v-model="item.week"
-            />
+            <div class="input-group mb-3">
+              <div class="input-group-prepend">
+                <span class="input-group-text" style="color: #60CBEB">
+                  <b>U#</b>
+                </span>
+              </div>
+              <input
+                class="form-control"
+                type="text"
+                id="resort"
+                name="resortunit"
+                disabled
+                v-model="item.unit"
+              />
+            </div>
           </div>
-          <div class="col-md-4">
-            <label for="resortModule">Module</label>
-            <input
-              class="form-control"
-              type="text"
-              id="module"
-              name="resortModule"
-              disabled
-              v-model="item.module"
-            />
+          <div class="col-md-6">
+            <label for="resortWeek">Module / Week Number</label>
+            <div class="input-group mb-3">
+              <div class="input-group-prepend">
+                <span class="input-group-text" style="color: #60CBEB">
+                  <b>M</b>
+                </span>
+              </div>
+              <input
+                class="form-control"
+                type="text"
+                id="week"
+                name="resortWeek"
+                disabled
+                v-model="item.module"
+              />
+            </div>
           </div>
         </div>
       </div>
@@ -66,7 +69,9 @@
           <label>Current Price</label>
           <div class="input-group mb-3">
             <div class="input-group-prepend">
-              <span class="input-group-text">R</span>
+              <span class="input-group-text" style="color: #60CBEB">
+                <b>R</b>
+              </span>
             </div>
             <input class="form-control" type="number" v-model="item.price" disabled />
           </div>
@@ -75,7 +80,9 @@
           <label>Offer</label>
           <div class="input-group mb-3">
             <div class="input-group-prepend">
-              <span class="input-group-text">R</span>
+              <span class="input-group-text" style="color: #60CBEB">
+                <b>R</b>
+              </span>
             </div>
             <input
               class="form-control"

src/components/timeshare/resort/resortPage.vue

@@ -1,161 +1,160 @@
 <template>
-  <div>
-    <section>
-      <section class="intro-single">
-        <div class="container">
-          <div class="row">
-            <div class="col-md-12 col-lg-8">
-              <div class="title-single-box">
-                <h1 class="title-single" style="text-align:left;">{{resort.prName}}</h1>
-              </div>
-            </div>
+  <!-- eslint-disable max-len -->
+  <section>
+    <div class="container intro-single">
+      <div class="row">
+        <div class="col-md-12 col-lg-8">
+          <div class="title-single-box">
+            <h1 class="title-single" style="text-align:left;">{{resort.prName}}</h1>
           </div>
+          <br />
         </div>
-      </section>
-      <div class="myMargin">
-        <div class="row">
-          <div class="col-md-3">
-            <h3>Filter Resort</h3>
-            <form
-              id="mainForm"
-              method="POST"
-              action="/filter"
-              accept-charset="UTF-8"
-              enctype="multipart/form-data"
-            >
-              <div class="form-group">
-                <select class="form-control" name="season">
-                  <option value>
-                    <span style="color:white;">Season</span>
-                  </option>
-                </select>
-              </div>
-              <div class="form-group">
-                <select class="form-control" name="bedrooms">
-                  <option value>Bedrooms</option>
-                </select>
-              </div>
+        <div class="row mb-4">
+          <div class="col-md-4">
+            <img class="img-fluid" :src="image1" alt="Resort Image" />
+          </div>
+          <div class="col-md-4">
+            <img class="img-fluid" :src="image2" alt="Resort Image" />
+          </div>
+          <div class="col-md-4">
+            <img class="img-fluid" :src="image3" alt="Resort Image" />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="myMargin">
+      <div class="row">
+        <div class="col-md-3">
+          <h3>Filter Resort</h3>
+          <form
+            id="mainForm"
+            method="POST"
+            action="/filter"
+            accept-charset="UTF-8"
+            enctype="multipart/form-data"
+          >
+            <div class="form-group">
+              <select class="form-control" name="season">
+                <option value>
+                  <span style="color:white;">Season</span>
+                </option>
+              </select>
+            </div>
+            <div class="form-group">
+              <select class="form-control" name="bedrooms">
+                <option value>Bedrooms</option>
+              </select>
+            </div>
 
-              <div class="form-group">
-                <input
-                  class="form-control"
-                  type="number"
-                  step="any"
-                  id="minPrice"
-                  name="minPrice"
-                  placeholder="Minimum Price"
-                />
-              </div>
-              <div class="form-group">
-                <input
-                  class="form-control"
-                  type="number"
-                  step="any"
-                  id="maxPrice"
-                  name="maxPrice"
-                  placeholder="Maximum Price"
-                />
-              </div>
-              <div class="form-group">
-                <label>Filter Arrival Date From</label>
-                <input type="date" class="form-control" name="arrivaldate" value />
-              </div>
-              <div class="form-group">
-                <label>Filter Arrival Date To</label>
-                <input type="date" class="form-control" name="arrivaldate" value />
-              </div>
+            <div class="form-group">
+              <input
+                class="form-control"
+                type="number"
+                step="any"
+                id="minPrice"
+                name="minPrice"
+                placeholder="Minimum Price"
+              />
+            </div>
+            <div class="form-group">
+              <input
+                class="form-control"
+                type="number"
+                step="any"
+                id="maxPrice"
+                name="maxPrice"
+                placeholder="Maximum Price"
+              />
+            </div>
+            <div class="form-group">
+              <label>Filter Arrival Date From</label>
+              <input type="date" class="form-control" name="arrivaldate" value />
+            </div>
+            <div class="form-group">
+              <label>Filter Arrival Date To</label>
+              <input type="date" class="form-control" name="arrivaldate" value />
+            </div>
 
-              <br />
+            <br />
 
-              <button class="btn btn-b-n" type="submit">Search</button>
-            </form>
-          </div>
-          <div class="col-md-9">
-            <WeekList :resortCode="resortCode" />
-            <div>
-              <div class="btn btn-b-n" @click="routerGoTo('/timeshare/buy')">Back to Region</div>
-              <hr />
-            </div>
-            {{description}}
+            <button class="btn btn-b-n" type="submit">Search</button>
+          </form>
+        </div>
+        <div class="col-md-9">
+          <WeekList :resortCode="resortCode" />
+          <div>
+            <div class="btn btn-b-n" @click="routerGoTo('/timeshare/buy')">Back to Region</div>
             <hr />
-            <div class="row mb-4">
-              <div class="col-md-4">
-                <img class="img-fluid" :src="image1" alt="Resort Image" />
-              </div>
-              <div class="col-md-4">
-                <img class="img-fluid" :src="image2" alt="Resort Image" />
-              </div>
-              <div class="col-md-4">
-                <img class="img-fluid" :src="image3" alt="Resort Image" />
-              </div>
-            </div>
-            <div class="row">
-              <div class="col-md-10 mb-4">
-                <ul class="nav nav-tabs" id="myTab" role="tablist">
-                  <li class="nav-item">
-                    <a
-                      class="nav-link active"
-                      id="directions-tab"
-                      data-toggle="tab"
-                      href="#directions"
-                      role="tab"
-                      aria-controls="directions"
-                      aria-selected="false"
-                    >Directions</a>
-                  </li>
-                  <li class="nav-item">
-                    <a
-                      class="nav-link"
-                      id="resort-layout-tab"
-                      data-toggle="tab"
-                      href="#resort-layout"
-                      role="tab"
-                      aria-controls="resort-layout"
-                      aria-selected="true"
-                    >Resort Layout</a>
-                  </li>
-                </ul>
-                <div class="tab-content" id="myTabContent">
-                  <div
-                    class="tab-pane fade show active"
-                    id="directions"
-                    role="tabpanel"
-                    aria-labelledby="directions-tab"
-                  >
-                    <iframe
-                      :src="mapUrl"
-                      width="100%"
-                      height="450"
-                      frameborder="0"
-                      style="border:0"
-                      allowfullscreen
-                    ></iframe>
-                    <br />
+          </div>
+          {{description}}
+          <hr />
 
-                    <small>
-                      <a
-                        :href="mapUrl"
-                        style="color:#60CBEB;text-align:left"
-                        target="_blank"
-                      >See map bigger</a>
-                    </small>
-                  </div>
-                  <div
-                    class="tab-pane fade"
-                    id="resort-layout"
-                    role="tabpanel"
-                    aria-labelledby="resort-layout-tab"
-                  >
-                    <img class="img-fluid" :src="layout" alt="Resort Layout" />
-                  </div>
+          <div class="row">
+            <div class="col-md-10 mb-4">
+              <ul class="nav nav-tabs" id="myTab" role="tablist">
+                <li class="nav-item">
+                  <a
+                    class="nav-link active"
+                    id="directions-tab"
+                    data-toggle="tab"
+                    href="#directions"
+                    role="tab"
+                    aria-controls="directions"
+                    aria-selected="false"
+                  >Directions</a>
+                </li>
+                <li class="nav-item">
+                  <a
+                    class="nav-link"
+                    id="resort-layout-tab"
+                    data-toggle="tab"
+                    href="#resort-layout"
+                    role="tab"
+                    aria-controls="resort-layout"
+                    aria-selected="true"
+                  >Resort Layout</a>
+                </li>
+              </ul>
+              <div class="tab-content" id="myTabContent">
+                <div
+                  class="tab-pane fade show active"
+                  id="directions"
+                  role="tabpanel"
+                  aria-labelledby="directions-tab"
+                >
+                  <iframe
+                    :src="mapUrl"
+                    width="100%"
+                    height="450"
+                    frameborder="0"
+                    style="border:0"
+                    allowfullscreen
+                  ></iframe>
+                  <br />
+
+                  <small>
+                    <a
+                      :href="mapUrl"
+                      style="color:#60CBEB;text-align:left"
+                      target="_blank"
+                    >See map bigger</a>
+                  </small>
+                </div>
+                <div
+                  class="tab-pane fade"
+                  id="resort-layout"
+                  role="tabpanel"
+                  aria-labelledby="resort-layout-tab"
+                >
+                  <img class="img-fluid" :src="layout" alt="Resort Layout" />
                 </div>
               </div>
             </div>
           </div>
         </div>
       </div>
-    </section>
-  </div>
+    </div>
+  </section>
 </template>
 <script>
 import { mapState, mapActions } from 'vuex';

src/components/timeshare/resort/unitPage.vue

@@ -1,31 +1,33 @@
 <template>
   <!-- eslint-disable max-len -->
-  <section>
-    <section class="intro-single">
-      <div class="container">
-        <div class="row">
-          <div class="col-md-12 col-lg-8">
-            <div class="title-single-box">
-              <h1 class="title-single" style="text-align:left;">{{resort.prName}}</h1>
-            </div>
-            <br />
-          </div>
-          <div class="row mb-4">
-            <div class="col-md-4">
-              <img class="img-fluid" :src="image1" alt="Resort Image" />
-            </div>
-            <div class="col-md-4">
-              <img class="img-fluid" :src="image2" alt="Resort Image" />
-            </div>
-            <div class="col-md-4">
-              <img class="img-fluid" :src="image3" alt="Resort Image" />
-            </div>
-          </div>
+  <div class="container">
+    <br />
+    <br />
+    <br />
+    <br />
+    <br />
+    <div class="row">
+      <div class="col-md-12 col-lg-8">
+        <div class="title-box-d">
+          <h1 class="title-d" style="text-align:left;">{{resort.prName}}</h1>
         </div>
+        <br />
       </div>
-    </section>
-    <div class="container" style="text-align:left;">
       <div class="row mb-4">
+        <div class="col-md-4">
+          <img class="img-fluid" :src="image1" alt="Resort Image" />
+        </div>
+        <div class="col-md-4">
+          <img class="img-fluid" :src="image2" alt="Resort Image" />
+        </div>
+        <div class="col-md-4">
+          <img class="img-fluid" :src="image3" alt="Resort Image" />
+        </div>
+      </div>
+    </div>
+    <br />
+    <div class="container col-md-12" style="text-align:left;">
+      <div class="row">
         <div class="col-md-6">
           <div class="title-box-d">
             <h3 class="title-d">Property Description</h3>
@@ -48,11 +50,11 @@
             accept-charset="UTF-8"
             enctype="multipart/form-data"
           >
-            <div class="title-box-d section-t4">
+            <div class="title-box-d">
               <h3 class="title-d">Summary</h3>
             </div>
             <div class="form-row">
-              <div class="col-md-3">
+              <div class="col-md-6">
                 <label for="resortunit">Unit</label>
                 <div class="input-group mb-3">
                   <div class="input-group-prepend">
@@ -70,12 +72,12 @@
                   />
                 </div>
               </div>
-              <div class="col-md-3">
-                <label for="resortWeek">Week</label>
+              <div class="col-md-6">
+                <label for="resortWeek">Module / Week Number</label>
                 <div class="input-group mb-3">
                   <div class="input-group-prepend">
                     <span class="input-group-text" style="color: #60CBEB">
-                      <b>W#</b>
+                      <b>M</b>
                     </span>
                   </div>
                   <input
@@ -83,52 +85,14 @@
                     type="text"
                     id="week"
                     name="resortWeek"
-                    :value="week.week"
+                    :value="week.module"
                     disabled
                   />
                 </div>
               </div>
 
-              <div class="form-row">
-                <div class="col-md-9">
-                  <label for="resortModule">Module</label>
-                  <div class="input-group mb-3">
-                    <div class="input-group-prepend">
-                      <span class="input-group-text" style="color: #60CBEB">
-                        <b>M</b>
-                      </span>
-                    </div>
-                    <input
-                      class="form-control"
-                      type="text"
-                      id="module"
-                      name="resortModule"
-                      :value="week.module"
-                      disabled
-                    />
-                  </div>
-                </div>
-              </div>
-              <div class="col-md-5">
-                <label for="price">Price</label>
-                <div class="input-group mb-3">
-                  <div class="input-group-prepend">
-                    <span class="input-group-text" style="color: #60CBEB">
-                      <b>R</b>
-                    </span>
-                  </div>
-                  <input
-                    class="form-control"
-                    type="text"
-                    name="price"
-                    id="price"
-                    :value="week.price"
-                    disabled
-                  />
-                </div>
-              </div>
-              <div class="col-md-5">
-                <label for="resortModule">Current Levy</label>
+              <div class="col-md-6">
+                <label for="resortModule">Current Year Levy</label>
                 <div class="input-group mb-3">
                   <div class="input-group-prepend">
                     <span class="input-group-text" style="color: #60CBEB">
@@ -145,6 +109,21 @@
                   />
                 </div>
               </div>
+              <div class="col-md-6">
+                <label for="price">Price</label>
+                <div class="card-box-ico">
+                  <span class="ion-money">R</span>
+                </div>
+
+                <input
+                  class="form-control"
+                  type="text"
+                  name="price"
+                  id="price"
+                  :value="week.price"
+                  disabled
+                />
+              </div>
             </div>
             <br />
             <div class="form-row">
@@ -218,7 +197,7 @@
         </div>
       </div>
     </div>
-  </section>
+  </div>
 </template>
 
 <script>
@@ -252,6 +231,10 @@ export default {
     ...mapActions('resort', ['initResort']),
     ...mapActions('week', ['initWeek']),
   },
+  formatPrice(value) {
+    const val = (value / 1).toFixed(2);
+    return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ' ');
+  },
 };
 </script>
 <style scoped>