unit page form updated

src/components/timeshare/resort/resortPage.vue

@@ -23,16 +23,6 @@
               accept-charset="UTF-8"
               enctype="multipart/form-data"
             >
-              <div class="form-group">
-                <select class="form-control" name="region" id="region">
-                  <option value>Region</option>
-                </select>
-              </div>
-              <div class="form-group">
-                <select class="form-control" id="resort" name="resort">
-                  <option value>Resort</option>
-                </select>
-              </div>
               <div class="form-group">
                 <select class="form-control" name="season">
                   <option value>
@@ -79,12 +69,6 @@
 
               <button class="btn btn-b-n" type="submit">Search</button>
             </form>
-            <div class="col-md-12 blue-bg p-2 p-md-4">
-              <h3>Facilities</h3>
-              <ul>
-                <li v-for="(item, i) in resort.prUnitFacilities.split('\n')" :key="i">{{item}}</li>
-              </ul>
-            </div>
           </div>
           <div class="col-md-9">
             <WeekList :resortCode="resortCode" />
@@ -106,7 +90,7 @@
               </div>
             </div>
             <div class="row">
-              <div class="col-md-12 mb-4">
+              <div class="col-md-10 mb-4">
                 <ul class="nav nav-tabs" id="myTab" role="tablist">
                   <li class="nav-item">
                     <a

src/components/timeshare/resort/unitPage.vue

@@ -1,8 +1,20 @@
 <template>
+  <!-- eslint-disable max-len -->
   <section>
     <section class="intro-single">
       <div class="container">
         <div class="row">
+          <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="col-md-12 col-lg-8">
             <div class="title-single-box">
               <h1 class="title-single" style="text-align:left;">{{resort.prName}}</h1>
@@ -11,10 +23,16 @@
         </div>
       </div>
     </section>
-    <div class="container">
+    <div class="container" style="text-align:left;">
       <div class="row mb-4">
         <div class="col-md-6">
           <p>{{description}}</p>
+          <div>
+            <h5>Facilities</h5>
+            <ul>
+              <li v-for="(item, i) in resort.prUnitFacilities.split('\n')" :key="i">{{item}}</li>
+            </ul>
+          </div>
         </div>
         <div class="col-md-6">
           <form
@@ -25,113 +43,145 @@
             enctype="multipart/form-data"
           >
             <div class="form-row">
-              <div class="col-md-6">
+              <div class="col-md-3">
                 <label for="resortunit">Unit</label>
-                <input
-                  class="form-control"
-                  type="text"
-                  id="resort"
-                  name="resortunit"
-                  :value="week.unit"
-                  disabled
-                />
+                <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"
+                    :value="week.unit"
+                    disabled
+                  />
+                </div>
               </div>
-              <div class="col-md-6">
+              <div class="col-md-3">
                 <label for="resortWeek">Week</label>
-                <input
-                  class="form-control"
-                  type="text"
-                  id="week"
-                  name="resortWeek"
-                  :value="week.week"
-                  disabled
-                />
+                <div class="input-group mb-3">
+                  <div class="input-group-prepend">
+                    <span class="input-group-text" style="color: #60CBEB">
+                      <b>W#</b>
+                    </span>
+                  </div>
+                  <input
+                    class="form-control"
+                    type="text"
+                    id="week"
+                    name="resortWeek"
+                    :value="week.week"
+                    disabled
+                  />
+                </div>
               </div>
-            </div>
-            <br />
-            <div class="form-row">
-              <div class="col-md-6">
-                <label for="resortModule">Module</label>
-                <input
-                  class="form-control"
-                  type="text"
-                  id="module"
-                  name="resortModule"
-                  :value="week.module"
-                  disabled
-                />
+
+              <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-6">
+              <div class="col-md-5">
                 <label for="price">Price</label>
-                <input
-                  class="form-control"
-                  type="text"
-                  name="price"
-                  id="price"
-                  :value="'R ' + week.price"
-                  disabled
-                />
-              </div>
-            </div>
-            <br />
-            <div class="form-row">
-              <div class="col-md-6">
-                <label for="resortModule">Current Year Levy</label>
-                <input
-                  class="form-control"
-                  type="text"
-                  id="levy"
-                  name="levy"
-                  :value="'R ' + week.currentLevy"
-                  disabled
-                />
-              </div>
-            </div>
-            <br />
-            <div class="form-row">
-              <div class="col-md-12">
-                <input class="form-control" type="text" name="name" placeholder="Name" />
+                <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>
-            <br />
-            <div class="form-row">
-              <div class="col-md-12">
-                <input
-                  class="form-control"
-                  type="number"
-                  name="mobile"
-                  placeholder="Contact Number"
-                />
+              <div class="col-md-5">
+                <label for="resortModule">Current Levy</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"
+                    id="levy"
+                    name="levy"
+                    :value="week.currentLevy"
+                    disabled
+                  />
+                </div>
               </div>
             </div>
             <br />
             <div class="form-row">
-              <div class="col-md-12">
-                <input class="form-control" type="email" name="email" placeholder="Email" />
+              <div>
+                <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" name="name" placeholder="Name" />
+                  </div>
+                </div>
+                <div class="input-group mb-3">
+                  <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="number"
+                      name="mobile"
+                      placeholder="Contact Number"
+                    />
+                  </div>
+                </div>
+                <div class="input-group mb-3">
+                  <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="email" name="email" placeholder="Email" />
+                  </div>
+                </div>
               </div>
             </div>
-            <br />
+          </form>
+          <br />
 
-            <button class="btn btn-b-c even-width mr-auto" type="submit">Enquire Now</button>
+          <button class="btn btn-b-c even-width mr-auto" type="submit">Enquire Now</button>
 
-            <a
-              class="btn btn-b-n even-width mr-auto"
-              href="/share-transfer-initiation-for-purchaser/"
-            >Make an Offer</a>
+          <a
+            class="btn btn-b-n even-width mr-auto"
+            href="/share-transfer-initiation-for-purchaser/"
+          >Make an Offer</a>
 
-            <a class="btn btn-b-c even-width mr-auto" href="javascript:history.back()">Back</a>
-          </form>
-        </div>
-      </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" />
+          <a class="btn btn-b-c even-width mr-auto" href="javascript:history.back()">Back</a>
         </div>
       </div>
     </div>

vue.config.js

@@ -2,7 +2,7 @@ module.exports = {
   devServer: {
     proxy: {
       '/api': {
-        target: 'http://localhost:57260',
+        target: 'http://192.168.6.188:5000',
         changeOrigin: true,
       },
     },