ソースを参照

George - Merge fixes

master
George Williams 5年前
コミット
427a288cda

+ 54
- 0
README.md ファイルの表示

1
 # UnivateProperties
1
 # UnivateProperties
2
 
2
 
3
+## Project setup
4
+
5
+```
6
+npm install
7
+```
8
+
9
+### Compiles and hot-reloads for development
10
+
11
+```
12
+npm run serve
13
+```
14
+
15
+### Compiles and minifies for production
16
+
17
+```
18
+npm run build
19
+```
20
+
21
+### Run your tests
22
+
23
+```
24
+npm run test
25
+```
26
+
27
+### Lints and fixes files
28
+
29
+```
30
+npm run lint
31
+```
32
+
33
+### Customize configuration
34
+
35
+See [Configuration Reference](https://cli.vuejs.org/config/).
36
+
37
+### Structure
38
+
39
+├── index.html
40
+├── main.js
41
+├── assets
42
+│ └── staticData
43
+│ ├── alertTypes.js
44
+│ ├── itemsPerPage.js
45
+│ ├── maritalStatus.js
46
+│  
47
+├── components
48
+│ ├── App.vue
49
+│ └── ...
50
+└── store
51
+├── index.js # where we assemble modules and export the store
52
+├── actions.js # root actions
53
+├── mutations.js # root mutations
54
+└── modules
55
+├── cart.js # cart module
56
+└── products.js # products module

+ 6
- 0
package-lock.json ファイルの表示

817
         "to-fast-properties": "^2.0.0"
817
         "to-fast-properties": "^2.0.0"
818
       }
818
       }
819
     },
819
     },
820
+    "@fortawesome/fontawesome-free": {
821
+      "version": "5.11.2",
822
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.11.2.tgz",
823
+      "integrity": "sha512-XiUPoS79r1G7PcpnNtq85TJ7inJWe0v+b5oZJZKb0pGHNIV6+UiNeQWiFGmuQ0aj7GEhnD/v9iqxIsjuRKtEnQ==",
824
+      "dev": true
825
+    },
820
     "@hapi/address": {
826
     "@hapi/address": {
821
       "version": "2.0.0",
827
       "version": "2.0.0",
822
       "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.0.0.tgz",
828
       "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.0.0.tgz",

+ 1
- 0
package.json ファイルの表示

33
     "vuex": "^3.1.1"
33
     "vuex": "^3.1.1"
34
   },
34
   },
35
   "devDependencies": {
35
   "devDependencies": {
36
+    "@fortawesome/fontawesome-free": "^5.11.2",
36
     "@vue/cli-plugin-babel": "^3.8.0",
37
     "@vue/cli-plugin-babel": "^3.8.0",
37
     "@vue/cli-plugin-eslint": "^3.8.0",
38
     "@vue/cli-plugin-eslint": "^3.8.0",
38
     "@vue/cli-service": "^3.8.0",
39
     "@vue/cli-service": "^3.8.0",

+ 14
- 0
src/App.vue ファイルの表示

33
 </script>
33
 </script>
34
 
34
 
35
 <style>
35
 <style>
36
+hr {
37
+  background-color: #60cbeb;
38
+}
39
+.title-img {
40
+  width: 800px;
41
+  height: 400px;
42
+  border-radius: 10px;
43
+}
44
+.title-title {
45
+  opacity: 0.7;
46
+  border: white solid 3px;
47
+  border-radius: 15px;
48
+}
36
 .myFill {
49
 .myFill {
37
   fill: #60cbeb;
50
   fill: #60cbeb;
51
+  color: #60cbeb;
38
 }
52
 }
39
 a {
53
 a {
40
   cursor: pointer;
54
   cursor: pointer;

+ 47
- 2
src/assets/Log.js ファイルの表示

1
 const items = {
1
 const items = {
2
+  setValues(item) {
3
+    localStorage.setItem('user', JSON.stringify(item.user));
4
+    localStorage.setItem('token', JSON.stringify(item.token));
5
+    localStorage.setItem('person', JSON.stringify(item.person));
6
+    localStorage.setItem('agency', JSON.stringify(item.agency));
7
+  },
8
+  tokenExpired() {
9
+    const item = this.getJSONObject('token');
10
+    if (!item && !item.expires && item.expires !== null) {
11
+      const today = new Date();
12
+      const date = `${today.getFullYear()}-${today.getMonth() + 1}-${today.getDate()}`;
13
+      const time = `${today.getHours()}:${today.getMinutes()}:${today.getSeconds()}`;
14
+      const dateTime = `${date} ${time}`;
15
+      return item.expires > dateTime;
16
+    }
17
+    return true;
18
+  },
19
+  updateTokenExpiry() {
20
+    const item = this.getJSONObject('token');
21
+    if (!item && !item.expires) {
22
+      item.expires = this.addMinutes();
23
+      localStorage.removeItem('token');
24
+      localStorage.setItem('token', JSON.stringify(item));
25
+    }
26
+  },
27
+  getJSONObject(itemString) {
28
+    const item = localStorage.getItem(itemString);
29
+    if (!item) {
30
+      return JSON.parse(item);
31
+    }
32
+    return item;
33
+  },
34
+  addMinutes() {
35
+    const today = new Date();
36
+    const date = `${today.getFullYear()}-${today.getMonth() + 1}-${today.getDate()}`;
37
+    const time = `${today.getHours()}:${today.getMinutes()}:${today.getSeconds()}`;
38
+    const dateTime = `${date} ${time}`;
39
+    return new Date(dateTime + 15 * 60000);
40
+  },
41
+  clearValues() {
42
+    localStorage.removeItem('user');
43
+    localStorage.removeItem('token');
44
+    localStorage.removeItem('person');
45
+    localStorage.removeItem('agency');
46
+  },
2
   isLoggedIn() {
47
   isLoggedIn() {
3
-    return localStorage.getItem('token') !== undefined;
48
+    return localStorage.getItem('token') !== undefined && localStorage.getItem('token') !== null;
4
   },
49
   },
5
   getUser() {
50
   getUser() {
6
-    return localStorage.getItem('User');
51
+    return localStorage.getItem('user');
7
   },
52
   },
8
 };
53
 };
9
 export default items;
54
 export default items;

+ 3
- 8
src/components/about/aboutTimeshare.vue ファイルの表示

5
       <div class="row">
5
       <div class="row">
6
         <div class="col-sm-12">
6
         <div class="col-sm-12">
7
           <div class="about-img-box">
7
           <div class="about-img-box">
8
-            <img
9
-              src="img/timeshare2.jpg"
10
-              alt="About Timeshare"
11
-              class="img-fluid"
12
-              style="width:800px;height:400px; border-radius:10px"
13
-            />
8
+            <img src="img/timeshare2.jpg" alt="About Timeshare" class="img-fluid title-img" />
14
           </div>
9
           </div>
15
-          <div class="sinse-box" style="opacity:0.7; border: white solid 3px; border-radius: 15px">
10
+          <div class="sinse-box title-title">
16
             <h3 class="sinse-title">Timeshare Resales</h3>
11
             <h3 class="sinse-title">Timeshare Resales</h3>
17
           </div>
12
           </div>
18
         </div>
13
         </div>
25
             </div>
20
             </div>
26
             <div class="col-md-6 col-lg-5 section-md-t3">
21
             <div class="col-md-6 col-lg-5 section-md-t3">
27
               <p class="color-text-a font-weight-bold" style="text-align:left;">
22
               <p class="color-text-a font-weight-bold" style="text-align:left;">
28
-                found that there was a desperate need for a reputable source for buyers and
23
+                Uni-Vate Properties found that there was a desperate need for a reputable source for buyers and
29
                 sellers to turn to with their timeshare needs in South Africa. Over the
24
                 sellers to turn to with their timeshare needs in South Africa. Over the
30
                 years, Uni-Vate has developed a treasure of networking alliances of professional
25
                 years, Uni-Vate has developed a treasure of networking alliances of professional
31
                 acquaintances and that has made timeshare resales a pleasure for both buyers and
26
                 acquaintances and that has made timeshare resales a pleasure for both buyers and

+ 2
- 7
src/components/about/aboutUsPage.vue ファイルの表示

5
       <div class="row">
5
       <div class="row">
6
         <div class="col-sm-12">
6
         <div class="col-sm-12">
7
           <div class="about-img-box">
7
           <div class="about-img-box">
8
-            <img
9
-              src="img/slide-about-1.jpg"
10
-              alt
11
-              class="img-fluid"
12
-              style="width:800px;height:400px; border-radius:10px"
13
-            />
8
+            <img src="img/slide-about-1.jpg" alt class="img-fluid title-img" />
14
           </div>
9
           </div>
15
-          <div class="sinse-box" style="opacity:0.7; border: white solid 3px; border-radius: 15px">
10
+          <div class="sinse-box title-title">
16
             <h3 class="sinse-title">About Us</h3>
11
             <h3 class="sinse-title">About Us</h3>
17
           </div>
12
           </div>
18
         </div>
13
         </div>

+ 2
- 3
src/components/misc/contactUs.vue ファイルの表示

7
           <img
7
           <img
8
             src="img/Contact-us2.jpg"
8
             src="img/Contact-us2.jpg"
9
             alt="Frequently Asked Questions"
9
             alt="Frequently Asked Questions"
10
-            class="img-fluid"
11
-            style="width:800px;height:400px; border-radius:10px"
10
+            class="img-fluid title-img"
12
           />
11
           />
13
         </div>
12
         </div>
14
-        <div class="sinse-box" style="opacity:0.7; border: white solid 3px; border-radius: 15px">
13
+        <div class="sinse-box title-title">
15
           <h3 class="sinse-title">Contact Us</h3>
14
           <h3 class="sinse-title">Contact Us</h3>
16
         </div>
15
         </div>
17
       </div>
16
       </div>

+ 2
- 7
src/components/misc/privacyPolicyPage.vue ファイルの表示

4
     <div class="row">
4
     <div class="row">
5
       <div class="col-sm-12">
5
       <div class="col-sm-12">
6
         <div class="about-img-box">
6
         <div class="about-img-box">
7
-          <img
8
-            src="img/privacy.jpg"
9
-            alt="Privacy Policy"
10
-            class="img-fluid"
11
-            style="width:800px;height:400px; border-radius:10px"
12
-          />
7
+          <img src="img/privacy.jpg" alt="Privacy Policy" class="img-fluid title-img" />
13
         </div>
8
         </div>
14
-        <div class="sinse-box" style="opacity:0.7; border: white solid 3px; border-radius: 15px">
9
+        <div class="sinse-box title-title">
15
           <h5 class="sinse-title">Privacy Policy</h5>
10
           <h5 class="sinse-title">Privacy Policy</h5>
16
         </div>
11
         </div>
17
       </div>
12
       </div>

+ 5
- 33
src/components/property/propertySearchFields.vue ファイルの表示

11
           </div>
11
           </div>
12
           <select
12
           <select
13
             class="form-control"
13
             class="form-control"
14
-            id="forSelector"
15
             v-model="propertySearch.salesType"
14
             v-model="propertySearch.salesType"
16
             @change="salesTypeSelected"
15
             @change="salesTypeSelected"
17
           >
16
           >
28
               <b>T</b>
27
               <b>T</b>
29
             </span>
28
             </span>
30
           </div>
29
           </div>
31
-          <select
32
-            class="form-control"
33
-            id="forSelector"
34
-            v-model="resType"
35
-            @change="PropertyTypeSelected"
36
-          >
30
+          <select class="form-control" v-model="resType" @change="PropertyTypeSelected">
37
             <option>All</option>
31
             <option>All</option>
38
             <option
32
             <option
39
               v-for="(propertyType, i) in propertyTypesRes"
33
               v-for="(propertyType, i) in propertyTypesRes"
55
               <b>T</b>
49
               <b>T</b>
56
             </span>
50
             </span>
57
           </div>
51
           </div>
58
-          <select
59
-            class="form-control"
60
-            id="forSelector"
61
-            v-model="comType"
62
-            @change="PropertyTypeSelected"
63
-          >
52
+          <select class="form-control" v-model="comType" @change="PropertyTypeSelected">
64
             <option>All</option>
53
             <option>All</option>
65
             <option
54
             <option
66
               v-for="(propertyType, i) in propertyTypesCom"
55
               v-for="(propertyType, i) in propertyTypesCom"
82
               <b>P</b>
71
               <b>P</b>
83
             </span>
72
             </span>
84
           </div>
73
           </div>
85
-          <select
86
-            class="form-control"
87
-            id="provinceselector"
88
-            @change="ProvinceSelected"
89
-            v-model="propertySearch.province"
90
-          >
74
+          <select class="form-control" @change="ProvinceSelected" v-model="propertySearch.province">
91
             <option>All</option>
75
             <option>All</option>
92
             <option v-for="(province, i) in provinces" :key="i">{{ province.description }}</option>
76
             <option v-for="(province, i) in provinces" :key="i">{{ province.description }}</option>
93
           </select>
77
           </select>
108
               <b>C</b>
92
               <b>C</b>
109
             </span>
93
             </span>
110
           </div>
94
           </div>
111
-          <select
112
-            class="form-control"
113
-            id="cityselector"
114
-            @change="CitySelected"
115
-            v-model="propertySearch.city"
116
-          >
95
+          <select class="form-control" @change="CitySelected" v-model="propertySearch.city">
117
             <option>All</option>
96
             <option>All</option>
118
             <option v-for="(city, i) in cities" :key="i">{{ city.description }}</option>
97
             <option v-for="(city, i) in cities" :key="i">{{ city.description }}</option>
119
           </select>
98
           </select>
134
               <b>S</b>
113
               <b>S</b>
135
             </span>
114
             </span>
136
           </div>
115
           </div>
137
-          <select
138
-            class="form-control"
139
-            id="suburbselector"
140
-            v-model="propertySearch.suburb"
141
-            @change="SuburbSeleted"
142
-          >
116
+          <select class="form-control" v-model="propertySearch.suburb" @change="SuburbSeleted">
143
             <option>All</option>
117
             <option>All</option>
144
             <option v-for="(suburb, i) in suburbs" :key="i">{{ suburb.description }}</option>
118
             <option v-for="(suburb, i) in suburbs" :key="i">{{ suburb.description }}</option>
145
           </select>
119
           </select>
166
                 class="form-control"
140
                 class="form-control"
167
                 type="number"
141
                 type="number"
168
                 step="any"
142
                 step="any"
169
-                id="minPrice"
170
                 name="minPrice"
143
                 name="minPrice"
171
                 v-model="propertySearch.minPrice"
144
                 v-model="propertySearch.minPrice"
172
               />
145
               />
189
                 class="form-control"
162
                 class="form-control"
190
                 type="number"
163
                 type="number"
191
                 step="any"
164
                 step="any"
192
-                id="maxPrice"
193
                 name="maxPrice"
165
                 name="maxPrice"
194
                 v-model="propertySearch.maxPrice"
166
                 v-model="propertySearch.maxPrice"
195
               />
167
               />

+ 0
- 1
src/components/shared/footerSection.vue ファイルの表示

45
                       <eva-icon name="slash-outline" class="myFill"></eva-icon>
45
                       <eva-icon name="slash-outline" class="myFill"></eva-icon>
46
                       <router-link to="/privacypolicy">Privacy Policy</router-link>
46
                       <router-link to="/privacypolicy">Privacy Policy</router-link>
47
                     </li>
47
                     </li>
48
-                    <br />
49
                     <li class="list-inline-item">
48
                     <li class="list-inline-item">
50
                       <a href="https://www.facebook.com/univateproperties/">
49
                       <a href="https://www.facebook.com/univateproperties/">
51
                         <eva-icon name="facebook-outline" class="myFill"></eva-icon>Facebook
50
                         <eva-icon name="facebook-outline" class="myFill"></eva-icon>Facebook

+ 41
- 31
src/components/shared/navBar.vue ファイルの表示

17
           <span></span>
17
           <span></span>
18
           <span></span>
18
           <span></span>
19
         </button>
19
         </button>
20
-        <a class="navbar-brand text-brand" @click="routerGoTo('/')">
20
+        <div class="navbar-brand text-brand" style="cursor: pointer;" @click="routerGoTo('/')">
21
           <img
21
           <img
22
             class="img-fluid"
22
             class="img-fluid"
23
             src="/img/logos/UVProp.png"
23
             src="/img/logos/UVProp.png"
26
           />
26
           />
27
           Uni-Vate
27
           Uni-Vate
28
           <span class="color-b">Properties</span>
28
           <span class="color-b">Properties</span>
29
-        </a>
29
+        </div>
30
         <button
30
         <button
31
           type="button"
31
           type="button"
32
           class="btn btn-link nav-search navbar-toggle-box-collapse d-md-none"
32
           class="btn btn-link nav-search navbar-toggle-box-collapse d-md-none"
41
       <div class="col-md-8">
41
       <div class="col-md-8">
42
         <div class="navbar-collapse collapse justify-content-center" id="navbarDefault">
42
         <div class="navbar-collapse collapse justify-content-center" id="navbarDefault">
43
           <ul class="navbar-nav">
43
           <ul class="navbar-nav">
44
-            <!-- <li class="nav-item">
45
-            <a class="nav-link active" @click="routerGoTo('/')">Home</a>
46
-            </li>-->
47
             <li class="nav-item dropdown">
44
             <li class="nav-item dropdown">
48
               <a
45
               <a
49
                 class="nav-link dropdown-toggle"
46
                 class="nav-link dropdown-toggle"
60
                   class="dropdown-item cursor-pointer"
57
                   class="dropdown-item cursor-pointer"
61
                   @click="routerGoTo('/timeshare/sell')"
58
                   @click="routerGoTo('/timeshare/sell')"
62
                 >To Sell</a>
59
                 >To Sell</a>
63
-                <a
64
-                  v-if="showLogout"
65
-                  class="dropdown-item cursor-pointer"
66
-                  @click="routerGoTo('/timeshare/sell')"
67
-                >My Timeshare Weeks</a>
68
                 <a class="dropdown-item cursor-pointer" @click="routerGoTo('/timeshare/faq')">FAQ</a>
60
                 <a class="dropdown-item cursor-pointer" @click="routerGoTo('/timeshare/faq')">FAQ</a>
61
+                <div v-if="isLoggedIn">
62
+                  <hr />
63
+                  <a
64
+                    v-if="isLoggedIn"
65
+                    class="dropdown-item cursor-pointer"
66
+                    @click="routerGoTo('/timeshare/sell')"
67
+                  >My Timeshare Weeks</a>
68
+                </div>
69
               </div>
69
               </div>
70
             </li>
70
             </li>
71
             <li class="nav-item dropdown">
71
             <li class="nav-item dropdown">
93
                 >To Rent</a>
93
                 >To Rent</a>
94
                 <hr v-if="showLogout" />
94
                 <hr v-if="showLogout" />
95
                 <a
95
                 <a
96
-                  v-if="showLogout"
96
+                  v-if="isLoggedIn"
97
                   class="dropdown-item cursor-pointer"
97
                   class="dropdown-item cursor-pointer"
98
                   @click="routerGoTo('/property/admin/list/my')"
98
                   @click="routerGoTo('/property/admin/list/my')"
99
                 >My Properties</a>
99
                 >My Properties</a>
119
               </div>
119
               </div>
120
             </li>
120
             </li>
121
 
121
 
122
-            <li v-if="showLogout" class="nav-item dropdown">
122
+            <li v-if="isLoggedIn" class="nav-item dropdown">
123
               <a
123
               <a
124
                 class="nav-link dropdown-toggle"
124
                 class="nav-link dropdown-toggle"
125
                 href="#"
125
                 href="#"
166
                 <a class="dropdown-item cursor-pointer" @click="routerGoTo('/Offers')">Offers</a>
166
                 <a class="dropdown-item cursor-pointer" @click="routerGoTo('/Offers')">Offers</a>
167
               </div>
167
               </div>
168
             </li>
168
             </li>
169
-            <li class="nav-item dropdown" v-if="hideLogin">
169
+            <li class="nav-item dropdown" v-if="!isLoggedIn">
170
               <a
170
               <a
171
                 class="nav-link"
171
                 class="nav-link"
172
                 @click="routerGoTo('/user/login')"
172
                 @click="routerGoTo('/user/login')"
177
                 aria-expanded="false"
177
                 aria-expanded="false"
178
               >Login</a>
178
               >Login</a>
179
             </li>
179
             </li>
180
-            <li class="nav-item dropdown" v-if="showLogout">
180
+            <li class="nav-item dropdown" v-if="isLoggedIn">
181
               <span>
181
               <span>
182
                 <a class="nav-link" @click="logout(routerGoTo('/user/login'))">Logout</a>
182
                 <a class="nav-link" @click="logout(routerGoTo('/user/login'))">Logout</a>
183
               </span>
183
               </span>
184
               <!-- <span v-else></span> -->
184
               <!-- <span v-else></span> -->
185
             </li>
185
             </li>
186
             <li>
186
             <li>
187
-              <span v-if="showLogout">
187
+              <span v-if="isLoggedIn">
188
                 <a>
188
                 <a>
189
                   Welcome!
189
                   Welcome!
190
                   <br />
190
                   <br />
191
-                  {{ username }}
191
+                  {{ NAME }}
192
                 </a>
192
                 </a>
193
               </span>
193
               </span>
194
               <span v-else></span>
194
               <span v-else></span>
212
 </template>
212
 </template>
213
 
213
 
214
 <script>
214
 <script>
215
-import { mapGetters, mapActions } from 'vuex';
215
+import { mapState, mapActions } from 'vuex';
216
 
216
 
217
 export default {
217
 export default {
218
-  data() {
219
-    return {
220
-      username: sessionStorage.getItem('name'),
221
-    };
222
-  },
223
   computed: {
218
   computed: {
224
-    showLogout() {
225
-      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
226
-      this.username = sessionStorage.getItem('name');
227
-      return this.$store.state.authentication.status === 'success';
219
+    ...mapState('authentication', [
220
+      'user',
221
+      'flag',
222
+      'status',
223
+      'person',
224
+      'token',
225
+    ]),
226
+    NAME() {
227
+      return this.person.fullName;
228
     },
228
     },
229
-    hideLogin() {
230
-      return this.$store.state.authentication.status !== 'success';
229
+    isLoggedIn() {
230
+      return this.token !== null && this.token !== undefined;
231
     },
231
     },
232
     // eslint-disable-next-line vue/return-in-computed-property
232
     // eslint-disable-next-line vue/return-in-computed-property
233
     Logout() {
233
     Logout() {
234
-      return this.$store.state.authentication.methods.logout;
234
+      return this.logout();
235
     },
235
     },
236
   },
236
   },
237
-
238
   methods: {
237
   methods: {
239
-    ...mapGetters('authentication', ['isLoggedIn']),
240
     ...mapActions('authentication', ['logout']),
238
     ...mapActions('authentication', ['logout']),
241
 
239
 
242
     routerGoTo(goTo) {
240
     routerGoTo(goTo) {
245
   },
243
   },
246
 };
244
 };
247
 </script>
245
 </script>
246
+<style scoped>
247
+a {
248
+  border: transparent thin solid;
249
+  padding: 5px 12px;
250
+  font-size: 110%;
251
+}
252
+a:hover {
253
+  background-color: rgba(169, 224, 255, 0.75);
254
+  border-radius: 5px;
255
+  border: silver thin solid;
256
+}
257
+</style>

+ 15
- 7
src/components/shared/searchTab.vue ファイルの表示

11
           <div class="col-md-12">
11
           <div class="col-md-12">
12
             <div class="form-group" style="text-align:left">
12
             <div class="form-group" style="text-align:left">
13
               <label for="Type">Keyword</label>
13
               <label for="Type">Keyword</label>
14
-              <input
15
-                type="text"
16
-                class="form-control"
17
-                placeholder="Keyword"
18
-                v-model="propertySearch.keyword"
19
-              />
14
+              <div class="input-group mb-3">
15
+                <div class="input-group-prepend">
16
+                  <span class="input-group-text myFill" style="font-size:75%;">
17
+                    <i class="fa fa-search"></i>
18
+                  </span>
19
+                </div>
20
+                <input type="text" class="form-control" placeholder="Keyword" v-model="keyword" />
21
+                <div class="input-group-append" @click="clearFilter('resort')">
22
+                  <span class="input-group-text cursor-pointer myFill">
23
+                    <b>X</b>
24
+                  </span>
25
+                </div>
26
+              </div>
20
             </div>
27
             </div>
21
           </div>
28
           </div>
22
           <div class="col-md-12">
29
           <div class="col-md-12">
65
                 role="tabpanel"
72
                 role="tabpanel"
66
                 aria-labelledby="pills-video-tab"
73
                 aria-labelledby="pills-video-tab"
67
               >
74
               >
68
-                <timeshareSearch />
75
+                <timeshareSearch :keyword="keyword" />
69
               </div>
76
               </div>
70
               <div
77
               <div
71
                 class="tab-pane fade"
78
                 class="tab-pane fade"
107
   data() {
114
   data() {
108
     return {
115
     return {
109
       selectedPropertyType: 'timeshare',
116
       selectedPropertyType: 'timeshare',
117
+      keyword: '',
110
       propertySearch: {
118
       propertySearch: {
111
         keyword: '',
119
         keyword: '',
112
         userName: '',
120
         userName: '',

+ 55
- 43
src/components/timeshare/buy/buyPage.vue ファイルの表示

5
       <div class="row">
5
       <div class="row">
6
         <div class="col-sm-12">
6
         <div class="col-sm-12">
7
           <div class="tobuy-img-box">
7
           <div class="tobuy-img-box">
8
-            <img
9
-              src="img/buy2.jpg"
10
-              alt="Timeshare To Buy"
11
-              class="img-fluid"
12
-              style="width:800px;height:400px; border-radius:10px"
13
-            />
8
+            <img src="img/buy2.jpg" alt="Timeshare To Buy" class="img-fluid title-img" />
14
           </div>
9
           </div>
15
-          <div class="sinse-box" style="opacity:0.7; border: white solid 3px; border-radius: 15px">
10
+          <div class="sinse-box title-title">
16
             <h3 class="sinse-title">Timeshare To Buy</h3>
11
             <h3 class="sinse-title">Timeshare To Buy</h3>
17
           </div>
12
           </div>
18
         </div>
13
         </div>
19
-
20
         <div class="container col-md-10">
14
         <div class="container col-md-10">
21
-          <br />
15
+          <hr />
22
           <div class="row">
16
           <div class="row">
23
             <div class="col-md-12 text-left">
17
             <div class="col-md-12 text-left">
24
               <p>
18
               <p>
39
               </p>
33
               </p>
40
             </div>
34
             </div>
41
           </div>
35
           </div>
42
-          <br />
36
+          <hr />
43
           <div class="row mb-4">
37
           <div class="row mb-4">
44
             <div class="container col-md-4">
38
             <div class="container col-md-4">
45
               <div class="accordion" id="accordionExample">
39
               <div class="accordion" id="accordionExample">
46
-                <div class="card" v-for="(region, r) in regions" :key="r">
40
+                <div class="card" v-for="(region, r) in availRegion" :key="r">
47
                   <a
41
                   <a
48
                     class="mb-0 color-text-a"
42
                     class="mb-0 color-text-a"
49
                     data-toggle="collapse"
43
                     data-toggle="collapse"
50
-                    :data-target="'#collapse' + region.id"
44
+                    :data-target="'#collapse' + region.regionCode"
51
                     aria-expanded="false"
45
                     aria-expanded="false"
52
-                    :aria-controls="'collapse' + region.id"
46
+                    :aria-controls="'collapse' + region.regionCode"
47
+                    @mouseover="updateMapProvince(region.regionName)"
53
                   >
48
                   >
54
-                    <div :id="'header' + region.id">
49
+                    <div :id="'header' + region.regionCode">
55
                       <h5
50
                       <h5
56
                         class="btn btn-link font-weight-bold color-b"
51
                         class="btn btn-link font-weight-bold color-b"
57
-                        @mouseover="updateMapProvince(region.regionName)"
58
-                      >{{ region.regionName }}</h5>
52
+                      >{{ region.regionName + ' (' + region.available + ')' }}</h5>
59
                     </div>
53
                     </div>
60
                   </a>
54
                   </a>
61
                   <div
55
                   <div
62
-                    :id="'collapse' + region.id"
63
-                    class="collapse"
64
-                    :aria-labelledby="'header' + region.id"
56
+                    :id="'collapse' + region.regionCode"
57
+                    class="collapse secondary"
58
+                    :aria-labelledby="'header' + region.regionCode"
65
                     data-parent="#accordionExample"
59
                     data-parent="#accordionExample"
60
+                    style="background-color:#E3E3E3"
66
                   >
61
                   >
67
                     <div class="card-body">
62
                     <div class="card-body">
68
-                      <p class="mb-0" v-for="(resort, i) in region.resorts" :key="i">
69
-                        <a
70
-                          class="cursor-pointer"
71
-                          href="#"
72
-                          @click="routerGoTo('/resort/' + resort.resortCode)"
73
-                          @mouseover="updateMap(resort.resortCode)"
74
-                        >{{resort.resortName}}</a>
75
-                        <br />
76
-                      </p>
63
+                      <div
64
+                        v-for="(resort, i) in region.resorts"
65
+                        :key="i"
66
+                        @click="routerGoTo('/resort/' + resort.resortCode)"
67
+                        @mouseover="updateMap(resort)"
68
+                      >
69
+                        <p class="mb-0 card-item">
70
+                          <a
71
+                            class="cursor-pointer"
72
+                            href="#"
73
+                          >{{resort.resortName + ' (' + resort.available + ')'}}</a>
74
+                          <br />
75
+                        </p>
76
+                      </div>
77
                     </div>
77
                     </div>
78
                   </div>
78
                   </div>
79
                 </div>
79
                 </div>
96
                     allowfullscreen
96
                     allowfullscreen
97
                   ></iframe>
97
                   ></iframe>
98
                   <br />
98
                   <br />
99
-
100
                   <small>
99
                   <small>
101
-                    <a
102
-                      :href="mapUrl"
103
-                      style="color:#60CBEB;text-align:left"
104
-                      target="_blank"
105
-                    >See map bigger</a>
100
+                    <a :href="mapUrl" class="map-url" target="_blank">See map bigger</a>
106
                   </small>
101
                   </small>
107
                 </div>
102
                 </div>
108
               </div>
103
               </div>
125
     };
120
     };
126
   },
121
   },
127
   mounted() {
122
   mounted() {
128
-    this.getRegions();
123
+    console.log(4);
124
+    this.init();
129
   },
125
   },
130
   computed: {
126
   computed: {
131
-    ...mapState('timeshareBuy', ['detailedRegion', 'resort']),
127
+    ...mapState('timeshareBuy', ['detailedRegion', 'resort', 'availRegion']),
132
     mapUrl() {
128
     mapUrl() {
133
-      // return 'http://maps.google.com/maps/place/Gauteng/';
134
       return `http://maps.google.com/maps?q=${this.myMap}&z=${this.myZoom}&output=embed`;
129
       return `http://maps.google.com/maps?q=${this.myMap}&z=${this.myZoom}&output=embed`;
135
     },
130
     },
136
     regions() {
131
     regions() {
138
     },
133
     },
139
   },
134
   },
140
   methods: {
135
   methods: {
141
-    ...mapActions('timeshareBuy', ['getRegions', 'getResort']),
136
+    ...mapActions('timeshareBuy', [
137
+      'init',
138
+      'getAvail',
139
+      'getRegions',
140
+      'getResort',
141
+    ]),
142
     routerGoTo(goTo) {
142
     routerGoTo(goTo) {
143
       this.$router.push(goTo);
143
       this.$router.push(goTo);
144
     },
144
     },
145
-    updateMap(resortCode) {
146
-      this.myMap = 'SouthAfrice';
147
-      this.getResort(resortCode);
148
-      // `http://maps.google.com/maps?q=${this.resort.prLatitude},${this.resort.prLongitude}&z=7&output=embed`;
149
-      this.myMap = `${this.resort.prLatitude},${this.resort.prLongitude}`;
145
+    updateMap(resort) {
146
+      this.myMap = 'SouthAfrica';
147
+      this.myMap = `${resort.lat},${resort.long}`;
150
       this.myZoom = 10;
148
       this.myZoom = 10;
151
     },
149
     },
152
     updateMapProvince(province) {
150
     updateMapProvince(province) {
156
   },
154
   },
157
 };
155
 };
158
 </script>
156
 </script>
157
+<style scoped>
158
+.map-url {
159
+  color: #60cbeb;
160
+  text-align: left;
161
+}
162
+.card-item {
163
+  font-size: 100%;
164
+}
165
+.card-item:hover {
166
+  background-color: rgba(255, 255, 255, 0.75);
167
+  border-radius: 5px;
168
+  cursor: pointer;
169
+}
170
+</style>

+ 16
- 6
src/components/timeshare/faqPage.vue ファイルの表示

8
             <img
8
             <img
9
               src="img/questions.jpg"
9
               src="img/questions.jpg"
10
               alt="Frequently Asked Questions"
10
               alt="Frequently Asked Questions"
11
-              class="img-fluid"
12
-              style="width:800px;height:400px; border-radius:10px"
11
+              class="img-fluid title-img"
13
             />
12
             />
14
           </div>
13
           </div>
15
-          <div class="sinse-box" style="opacity:0.7; border: white solid 3px; border-radius: 15px">
14
+          <div class="sinse-box title-title">
16
             <h3 class="sinse-title">Frequently Asked Questions</h3>
15
             <h3 class="sinse-title">Frequently Asked Questions</h3>
17
           </div>
16
           </div>
18
         </div>
17
         </div>
19
         <div class="container col-md-10">
18
         <div class="container col-md-10">
20
           <br />
19
           <br />
21
           <div id="accordion">
20
           <div id="accordion">
22
-            <!-- <div class="card"> -->
23
             <div class="card" id="heading1">
21
             <div class="card" id="heading1">
24
-              <!-- <h5 class="mb-0 color-text-a"> -->
25
               <button
22
               <button
26
                 class="btn btn-link font-weight-bold color-b text-left"
23
                 class="btn btn-link font-weight-bold color-b text-left"
27
                 data-toggle="collapse"
24
                 data-toggle="collapse"
29
                 aria-expanded="true"
26
                 aria-expanded="true"
30
                 aria-controls="collapse1"
27
                 aria-controls="collapse1"
31
               >What is timeshare vacation ownership?</button>
28
               >What is timeshare vacation ownership?</button>
32
-              <!-- </h5> -->
33
             </div>
29
             </div>
34
             <div
30
             <div
35
               id="collapse1"
31
               id="collapse1"
36
               class="collapse show color-text-a"
32
               class="collapse show color-text-a"
37
               aria-labelledby="heading1"
33
               aria-labelledby="heading1"
38
               data-parent="#accordion"
34
               data-parent="#accordion"
35
+              style="background-color:#E3E3E3"
39
             >
36
             >
40
               <div class="card-body" style="text-align:left">
37
               <div class="card-body" style="text-align:left">
41
                 Owning a timeshare means you own a portion of time in a specific unit in a resort. Most commonly the
38
                 Owning a timeshare means you own a portion of time in a specific unit in a resort. Most commonly the
61
               class="collapse"
58
               class="collapse"
62
               aria-labelledby="heading2"
59
               aria-labelledby="heading2"
63
               data-parent="#accordion"
60
               data-parent="#accordion"
61
+              style="background-color:#E3E3E3"
64
             >
62
             >
65
               <div class="card-body" style="text-align:left">
63
               <div class="card-body" style="text-align:left">
66
                 Most timeshare resorts are self-catering which means you have a ‘home away from home” holiday. You will
64
                 Most timeshare resorts are self-catering which means you have a ‘home away from home” holiday. You will
85
               class="collapse"
83
               class="collapse"
86
               aria-labelledby="heading3"
84
               aria-labelledby="heading3"
87
               data-parent="#accordion"
85
               data-parent="#accordion"
86
+              style="background-color:#E3E3E3"
88
             >
87
             >
89
               <div class="card-body" style="text-align:left">
88
               <div class="card-body" style="text-align:left">
90
                 Should the needs or lifestyle change for the timeshare owner, he may decide to sell his week. As a proud
89
                 Should the needs or lifestyle change for the timeshare owner, he may decide to sell his week. As a proud
108
               class="collapse"
107
               class="collapse"
109
               aria-labelledby="heading4"
108
               aria-labelledby="heading4"
110
               data-parent="#accordion"
109
               data-parent="#accordion"
110
+              style="background-color:#E3E3E3"
111
             >
111
             >
112
               <div class="card-body" style="text-align:left">
112
               <div class="card-body" style="text-align:left">
113
                 Uni-Vate Properties specialise in fixed weeks or flexi week timeshare but are qualified to sell and/or
113
                 Uni-Vate Properties specialise in fixed weeks or flexi week timeshare but are qualified to sell and/or
130
               class="collapse"
130
               class="collapse"
131
               aria-labelledby="heading5"
131
               aria-labelledby="heading5"
132
               data-parent="#accordion"
132
               data-parent="#accordion"
133
+              style="background-color:#E3E3E3"
133
             >
134
             >
134
               <div class="card-body" style="text-align:left">
135
               <div class="card-body" style="text-align:left">
135
                 You can complete the on-line details which you will find under the “To Sell” tab. There will be a listing
136
                 You can complete the on-line details which you will find under the “To Sell” tab. There will be a listing
153
               class="collapse"
154
               class="collapse"
154
               aria-labelledby="heading6"
155
               aria-labelledby="heading6"
155
               data-parent="#accordion"
156
               data-parent="#accordion"
157
+              style="background-color:#E3E3E3"
156
             >
158
             >
157
               <div class="card-body" style="text-align:left">
159
               <div class="card-body" style="text-align:left">
158
                 Timeshare is not an appreciating property investment but it is an investment into your vacation lifestyle.
160
                 Timeshare is not an appreciating property investment but it is an investment into your vacation lifestyle.
177
               class="collapse"
179
               class="collapse"
178
               aria-labelledby="heading7"
180
               aria-labelledby="heading7"
179
               data-parent="#accordion"
181
               data-parent="#accordion"
182
+              style="background-color:#E3E3E3"
180
             >
183
             >
181
               <div class="card-body" style="text-align:left">
184
               <div class="card-body" style="text-align:left">
182
                 Through Uni-Vate Properties your week will be marketed extensively to all of their available channels.
185
                 Through Uni-Vate Properties your week will be marketed extensively to all of their available channels.
199
               class="collapse"
202
               class="collapse"
200
               aria-labelledby="heading8"
203
               aria-labelledby="heading8"
201
               data-parent="#accordion"
204
               data-parent="#accordion"
205
+              style="background-color:#E3E3E3"
202
             >
206
             >
203
               <div class="card-body" style="text-align:left">
207
               <div class="card-body" style="text-align:left">
204
                 All available and verified weeks will be listed on the website for prospective buyers. Once you identify a
208
                 All available and verified weeks will be listed on the website for prospective buyers. Once you identify a
222
               class="collapse"
226
               class="collapse"
223
               aria-labelledby="heading9"
227
               aria-labelledby="heading9"
224
               data-parent="#accordion"
228
               data-parent="#accordion"
229
+              style="background-color:#E3E3E3"
225
             >
230
             >
226
               <div class="card-body" style="text-align:left">
231
               <div class="card-body" style="text-align:left">
227
                 By law, your money will be held in a trust account while the transfer is being processed. This trust
232
                 By law, your money will be held in a trust account while the transfer is being processed. This trust
244
               class="collapse"
249
               class="collapse"
245
               aria-labelledby="heading10"
250
               aria-labelledby="heading10"
246
               data-parent="#accordion"
251
               data-parent="#accordion"
252
+              style="background-color:#E3E3E3"
247
             >
253
             >
248
               <div class="card-body" style="text-align:left">
254
               <div class="card-body" style="text-align:left">
249
                 Most definitely! Once the week has been transferred to you, you have a choice of membership with RCI
255
                 Most definitely! Once the week has been transferred to you, you have a choice of membership with RCI
268
               class="collapse"
274
               class="collapse"
269
               aria-labelledby="heading"
275
               aria-labelledby="heading"
270
               data-parent="#accordion"
276
               data-parent="#accordion"
277
+              style="background-color:#E3E3E3"
271
             >
278
             >
272
               <div class="card-body" style="text-align:left">
279
               <div class="card-body" style="text-align:left">
273
                 Uni-Vate Properties (Pty) Ltd is affiliated to the Estate Agents Board (EAAB) as well as the Institute of
280
                 Uni-Vate Properties (Pty) Ltd is affiliated to the Estate Agents Board (EAAB) as well as the Institute of
297
               class="collapse"
304
               class="collapse"
298
               aria-labelledby="heading12"
305
               aria-labelledby="heading12"
299
               data-parent="#accordion"
306
               data-parent="#accordion"
307
+              style="background-color:#E3E3E3"
300
             >
308
             >
301
               <div class="card-body" style="text-align:left">
309
               <div class="card-body" style="text-align:left">
302
                 Both are equally viable. The difference is either the seller is the developer of a resort marketing
310
                 Both are equally viable. The difference is either the seller is the developer of a resort marketing
324
               class="collapse"
332
               class="collapse"
325
               aria-labelledby="heading13"
333
               aria-labelledby="heading13"
326
               data-parent="#accordion"
334
               data-parent="#accordion"
335
+              style="background-color:#E3E3E3"
327
             >
336
             >
328
               <div class="card-body" style="text-align:left">
337
               <div class="card-body" style="text-align:left">
329
                 The selling price is always market related determined by five factors. Resort quality, season, sleeper
338
                 The selling price is always market related determined by five factors. Resort quality, season, sleeper
348
               class="collapse"
357
               class="collapse"
349
               aria-labelledby="heading14"
358
               aria-labelledby="heading14"
350
               data-parent="#accordion"
359
               data-parent="#accordion"
360
+              style="background-color:#E3E3E3"
351
             >
361
             >
352
               <div class="card-body" style="text-align:left">
362
               <div class="card-body" style="text-align:left">
353
                 Levies are determined by the share block Board of Directors who are accountable to the shareholders. The
363
                 Levies are determined by the share block Board of Directors who are accountable to the shareholders. The

+ 28
- 0
src/components/timeshare/myWeeksPage.vue ファイルの表示

1
+<template>
2
+  <div>
3
+    <br />
4
+    <br />
5
+    <br />
6
+    <br />
7
+    <img
8
+      src="http://www.provision-sa.com:3000/Provision/UnivateProperties/src/branch/master/public/img/logos/UVProp.png"
9
+      height="200"
10
+      width="200"
11
+    />
12
+    {{getUser}}
13
+    <br />
14
+  </div>
15
+</template>
16
+<script>
17
+import { mapState } from 'vuex';
18
+import log from '../../assets/Log';
19
+
20
+export default {
21
+  computed: {
22
+    ...mapState('myWeeks', ['test']),
23
+    getUser() {
24
+      return log.getUser();
25
+    },
26
+  },
27
+};
28
+</script>

+ 76
- 0
src/components/timeshare/resort/resortImage.vue ファイルの表示

1
+<template>
2
+  <div class="outer">
3
+    <div id="mainImage">
4
+      <img class="img-fluid main-image" :src="imageX" alt="Resort Image" />
5
+    </div>
6
+    <div class="list-images">
7
+      <div class="scrolling-wrapper-flexbox row inner">
8
+        <div v-for="(image, i) in images" :key="i" :class="myClass">
9
+          <a @click="changeImage(i)">
10
+            <img class="small-image" :src="image" alt="Resort Image" />
11
+          </a>
12
+        </div>
13
+      </div>
14
+    </div>
15
+  </div>
16
+</template>
17
+
18
+<script>
19
+import { mapState } from 'vuex';
20
+
21
+export default {
22
+  props: {
23
+    images: [],
24
+  },
25
+  data() {
26
+    return {
27
+      largeImg: 0,
28
+    };
29
+  },
30
+  computed: {
31
+    myClass() {
32
+      if (this.images && this.images.length === 3) {
33
+        return 'col-md-4';
34
+      }
35
+      return 'col-md-3 nopadding';
36
+    },
37
+    imageX() {
38
+      return this.images[this.largeImg];
39
+    },
40
+    ...mapState('resort', ['resort', 'description', 'images', 'layout']),
41
+  },
42
+  methods: {
43
+    changeImage(number) {
44
+      this.largeImg = number;
45
+    },
46
+  },
47
+};
48
+</script>
49
+<style scoped>
50
+.outer {
51
+  background-color: #efefef;
52
+  padding: 10px;
53
+}
54
+.inner {
55
+  padding-left: 15px;
56
+  padding-right: 15px;
57
+}
58
+.main-image {
59
+  max-width: 80%;
60
+  max-height: 412px;
61
+}
62
+.list-images {
63
+  padding: 5px;
64
+  float: left;
65
+  border-top: 1px solid #dedede;
66
+  border-right: 1px solid #dedede;
67
+  border-bottom: 1px solid #dedede;
68
+  background-color: white;
69
+  width: 100%;
70
+  text-align: center;
71
+}
72
+.small-image {
73
+  width: 100%;
74
+  height: 125px;
75
+}
76
+</style>

+ 93
- 89
src/components/timeshare/resort/resortPage.vue ファイルの表示

1
 <template>
1
 <template>
2
   <!-- eslint-disable max-len -->
2
   <!-- eslint-disable max-len -->
3
-  <section>
4
-    <div class="container">
5
-      <br />
6
-      <br />
7
-      <br />
8
-      <br />
3
+  <section class="my-top">
4
+    <div class="my-container">
9
       <div class="row">
5
       <div class="row">
10
         <div class="col-md-12 col-lg-8">
6
         <div class="col-md-12 col-lg-8">
11
           <div class="title-box-d">
7
           <div class="title-box-d">
12
-            <h1 class="title-d" style="text-align:left; font-size: 250%">{{resort.prName}}</h1>
8
+            <h1 class="title-d my-title">{{resort.prName}}</h1>
13
           </div>
9
           </div>
14
           <br />
10
           <br />
15
         </div>
11
         </div>
16
-        <div class="row mb-4">
17
-          <div class="col-md-4">
18
-            <img class="img-fluid" :src="image1" alt="Resort Image" style="border-radius:10px" />
19
-          </div>
20
-          <div class="col-md-4">
21
-            <img class="img-fluid" :src="image2" alt="Resort Image" style="border-radius:10px" />
22
-          </div>
23
-          <div class="col-md-4">
24
-            <img class="img-fluid" :src="image3" alt="Resort Image" style="border-radius:10px" />
12
+        <div class="col-md-6 col-lg-6">
13
+          <ResortImages :images="images" />
14
+        </div>
15
+        <div class="col-md-6">
16
+          <ul class="nav nav-tabs" id="myTab" role="tablist">
17
+            <li class="nav-item">
18
+              <a
19
+                class="nav-link active"
20
+                id="directions-tab"
21
+                data-toggle="tab"
22
+                href="#directions"
23
+                role="tab"
24
+                aria-controls="directions"
25
+                aria-selected="false"
26
+              >Directions</a>
27
+            </li>
28
+            <li class="nav-item">
29
+              <a
30
+                class="nav-link"
31
+                id="resort-layout-tab"
32
+                data-toggle="tab"
33
+                href="#resort-layout"
34
+                role="tab"
35
+                aria-controls="resort-layout"
36
+                aria-selected="true"
37
+              >Resort Layout</a>
38
+            </li>
39
+          </ul>
40
+          <div class="tab-content" id="myTabContent">
41
+            <div
42
+              class="tab-pane fade show active"
43
+              id="directions"
44
+              role="tabpanel"
45
+              aria-labelledby="directions-tab"
46
+            >
47
+              <iframe
48
+                :src="mapUrl"
49
+                width="100%"
50
+                height="300"
51
+                frameborder="0"
52
+                style="border:0"
53
+                allowfullscreen
54
+              ></iframe>
55
+              <br />
56
+              <small>
57
+                <a
58
+                  :href="mapUrl"
59
+                  style="color:#60CBEB;text-align:left"
60
+                  target="_blank"
61
+                >See map bigger</a>
62
+              </small>
63
+            </div>
64
+            <div
65
+              class="tab-pane fade"
66
+              id="resort-layout"
67
+              role="tabpanel"
68
+              aria-labelledby="resort-layout-tab"
69
+            >
70
+              <img class="img-fluid" :src="layout" alt="Resort Layout" />
71
+            </div>
25
           </div>
72
           </div>
26
         </div>
73
         </div>
27
       </div>
74
       </div>
28
     </div>
75
     </div>
76
+    <hr />
29
     <div class="myMargin">
77
     <div class="myMargin">
30
       <div class="row">
78
       <div class="row">
31
-        <div class="col-md-3">
79
+        <div class="col-md-4">
32
           <h4>Filter Resort</h4>
80
           <h4>Filter Resort</h4>
33
           <FilterComponent :hideTop="true" />
81
           <FilterComponent :hideTop="true" />
34
         </div>
82
         </div>
35
-        <div class="col-md-9">
83
+        <div class="col-md-8">
36
           <WeekList :resortCode="resortCode" />
84
           <WeekList :resortCode="resortCode" />
37
           <div>
85
           <div>
38
             <div class="btn btn-b-n" @click="routerGoTo('/timeshare/buy')">Back to Region</div>
86
             <div class="btn btn-b-n" @click="routerGoTo('/timeshare/buy')">Back to Region</div>
40
           </div>
88
           </div>
41
           {{description}}
89
           {{description}}
42
           <hr />
90
           <hr />
43
-          <div class="row">
44
-            <div class="col-md-10 mb-4">
45
-              <ul class="nav nav-tabs" id="myTab" role="tablist">
46
-                <li class="nav-item">
47
-                  <a
48
-                    class="nav-link active"
49
-                    id="directions-tab"
50
-                    data-toggle="tab"
51
-                    href="#directions"
52
-                    role="tab"
53
-                    aria-controls="directions"
54
-                    aria-selected="false"
55
-                  >Directions</a>
56
-                </li>
57
-                <li class="nav-item">
58
-                  <a
59
-                    class="nav-link"
60
-                    id="resort-layout-tab"
61
-                    data-toggle="tab"
62
-                    href="#resort-layout"
63
-                    role="tab"
64
-                    aria-controls="resort-layout"
65
-                    aria-selected="true"
66
-                  >Resort Layout</a>
67
-                </li>
68
-              </ul>
69
-              <div class="tab-content" id="myTabContent">
70
-                <div
71
-                  class="tab-pane fade show active"
72
-                  id="directions"
73
-                  role="tabpanel"
74
-                  aria-labelledby="directions-tab"
75
-                >
76
-                  <iframe
77
-                    :src="mapUrl"
78
-                    width="100%"
79
-                    height="450"
80
-                    frameborder="0"
81
-                    style="border:0"
82
-                    allowfullscreen
83
-                  ></iframe>
84
-                  <br />
85
-
86
-                  <small>
87
-                    <a
88
-                      :href="mapUrl"
89
-                      style="color:#60CBEB;text-align:left"
90
-                      target="_blank"
91
-                    >See map bigger</a>
92
-                  </small>
93
-                </div>
94
-                <div
95
-                  class="tab-pane fade"
96
-                  id="resort-layout"
97
-                  role="tabpanel"
98
-                  aria-labelledby="resort-layout-tab"
99
-                >
100
-                  <img class="img-fluid" :src="layout" alt="Resort Layout" />
101
-                </div>
102
-              </div>
103
-            </div>
104
-          </div>
105
         </div>
91
         </div>
106
       </div>
92
       </div>
107
     </div>
93
     </div>
111
 import { mapState, mapActions } from 'vuex';
97
 import { mapState, mapActions } from 'vuex';
112
 import WeekList from '../buy/weekListComponent.vue';
98
 import WeekList from '../buy/weekListComponent.vue';
113
 import FilterComponent from '../searchTimeshare.vue';
99
 import FilterComponent from '../searchTimeshare.vue';
100
+import ResortImages from './resortImage.vue';
114
 
101
 
115
 export default {
102
 export default {
116
   props: {
103
   props: {
119
   components: {
106
   components: {
120
     WeekList,
107
     WeekList,
121
     FilterComponent,
108
     FilterComponent,
109
+    ResortImages,
122
   },
110
   },
123
   mounted() {
111
   mounted() {
124
     this.initResort(this.resortCode);
112
     this.initResort(this.resortCode);
125
   },
113
   },
126
   computed: {
114
   computed: {
127
-    ...mapState('resort', [
128
-      'resort',
129
-      'description',
130
-      'image1',
131
-      'image2',
132
-      'image3',
133
-      'layout',
134
-    ]),
115
+    ...mapState('resort', ['resort', 'description', 'images', 'layout']),
135
     mapUrl() {
116
     mapUrl() {
136
       return this.resort
117
       return this.resort
137
         ? `http://maps.google.com/maps?q=${this.resort.prLatitude},${this.resort.prLongitude}&z=15&output=embed`
118
         ? `http://maps.google.com/maps?q=${this.resort.prLatitude},${this.resort.prLongitude}&z=15&output=embed`
146
   },
127
   },
147
 };
128
 };
148
 </script>
129
 </script>
149
-<style>
130
+<style scoped>
131
+.my-top {
132
+  padding-top: 25px;
133
+}
134
+.my-container {
135
+  padding-left: 200px;
136
+  padding-right: 200px;
137
+}
138
+.my-title {
139
+  text-align: left;
140
+  font-size: 250%;
141
+}
142
+.scrolling-wrapper-flexbox {
143
+  display: flex;
144
+  flex-wrap: nowrap;
145
+  overflow-x: auto;
146
+}
147
+.scrolling-wrapper-flexbox .card {
148
+  flex: 0 0 auto;
149
+}
150
+.nopadding {
151
+  padding: 1px !important;
152
+  margin: 0 !important;
153
+}
150
 .myMargin {
154
 .myMargin {
151
   margin-left: 2%;
155
   margin-left: 2%;
152
   margin-right: 2%;
156
   margin-right: 2%;

+ 151
- 146
src/components/timeshare/resort/unitPage.vue ファイルの表示

1
 <template>
1
 <template>
2
   <!-- eslint-disable max-len -->
2
   <!-- eslint-disable max-len -->
3
-  <div class="container">
3
+  <div class="my-container my-top">
4
     <div class="row">
4
     <div class="row">
5
       <div class="col-md-12 col-lg-8">
5
       <div class="col-md-12 col-lg-8">
6
         <div class="title-box-d">
6
         <div class="title-box-d">
7
-          <h1
8
-            class="title-d"
9
-            style="text-align:left; font-size: 250%"
10
-          >{{week ? week.resortName : ''}}</h1>
7
+          <h1 class="title-d my-title">{{week ? week.resortName : ''}}</h1>
11
         </div>
8
         </div>
12
         <br />
9
         <br />
13
       </div>
10
       </div>
14
       <div class="row mb-4">
11
       <div class="row mb-4">
15
-        <div class="col-md-4">
16
-          <img class="img-fluid" :src="image1" alt="Resort Image" style="border-radius:10px" />
17
-        </div>
18
-        <div class="col-md-4">
19
-          <img class="img-fluid" :src="image2" alt="Resort Image" style="border-radius:10px" />
20
-        </div>
21
-        <div class="col-md-4">
22
-          <img class="img-fluid" :src="image3" alt="Resort Image" style="border-radius:10px" />
23
-        </div>
24
-      </div>
25
-    </div>
26
-    <br />
27
-    <div class="container col-md-12" style="text-align:left;">
28
-      <div class="row">
29
         <div class="col-md-6">
12
         <div class="col-md-6">
30
-          <div class="title-box-d">
31
-            <h3 class="title-d">Property Description</h3>
32
-          </div>
33
-          <p>{{description}}</p>
34
-          <div>
35
-            <div class="title-box-d">
36
-              <h3 class="title-d">Facilities</h3>
37
-            </div>
38
-            <div class="row" v-if="resort.prUnitFacilities">
39
-              <div
40
-                class="col-md-4"
41
-                v-for="(item, i) in resort.prUnitFacilities.split('\n')"
42
-                :key="i"
43
-              >{{item}}</div>
44
-            </div>
45
-          </div>
13
+          <ResortImages :images="images" />
46
         </div>
14
         </div>
47
-        <div class="col-md-6" v-if="week">
48
-          <form
49
-            id="mainForm"
50
-            method="POST"
51
-            action="/interested-timeshare/"
52
-            accept-charset="UTF-8"
53
-            enctype="multipart/form-data"
54
-          >
55
-            <div class="title-box-d">
56
-              <h3 class="title-d">Summary</h3>
57
-            </div>
58
-            <div class="form-row">
59
-              <div class="col-md-6">
60
-                <label for="resortunit">Unit</label>
61
-                <div class="input-group mb-3">
62
-                  <div class="input-group-prepend">
63
-                    <span class="input-group-text" style="color: #60CBEB">
64
-                      <b>U#</b>
65
-                    </span>
15
+        <div class="col-md-6">
16
+          <hr />
17
+          <div v-if="week">
18
+            <form
19
+              id="mainForm"
20
+              method="POST"
21
+              action="/interested-timeshare/"
22
+              accept-charset="UTF-8"
23
+              enctype="multipart/form-data"
24
+            >
25
+              <div class="title-box-d">
26
+                <h3 class="title-d">Summary</h3>
27
+              </div>
28
+              <div class="form-row">
29
+                <div class="col-md-6">
30
+                  <label for="resortunit">Unit</label>
31
+                  <div class="input-group mb-3">
32
+                    <div class="input-group-prepend">
33
+                      <span class="input-group-text" style="color: #60CBEB">
34
+                        <b>U#</b>
35
+                      </span>
36
+                    </div>
37
+                    <input
38
+                      class="form-control"
39
+                      type="text"
40
+                      id="resort"
41
+                      name="resortunit"
42
+                      :value="week ? week.unitNumber : ''"
43
+                      disabled
44
+                    />
66
                   </div>
45
                   </div>
67
-                  <input
68
-                    class="form-control"
69
-                    type="text"
70
-                    id="resort"
71
-                    name="resortunit"
72
-                    :value="week ? week.unitNumber : ''"
73
-                    disabled
74
-                  />
75
                 </div>
46
                 </div>
76
-              </div>
77
-              <div class="col-md-6">
78
-                <label for="resortWeek">Module / Week Number</label>
79
-                <div class="input-group mb-3">
80
-                  <div class="input-group-prepend">
81
-                    <span class="input-group-text" style="color: #60CBEB">
82
-                      <b>M</b>
83
-                    </span>
47
+                <div class="col-md-6">
48
+                  <label for="resortWeek">Module / Week Number</label>
49
+                  <div class="input-group mb-3">
50
+                    <div class="input-group-prepend">
51
+                      <span class="input-group-text" style="color: #60CBEB">
52
+                        <b>M</b>
53
+                      </span>
54
+                    </div>
55
+                    <input
56
+                      class="form-control"
57
+                      type="text"
58
+                      id="week"
59
+                      name="resortWeek"
60
+                      :value="week ? week.weekNumber : ''"
61
+                      disabled
62
+                    />
84
                   </div>
63
                   </div>
85
-                  <input
86
-                    class="form-control"
87
-                    type="text"
88
-                    id="week"
89
-                    name="resortWeek"
90
-                    :value="week ? week.weekNumber : ''"
91
-                    disabled
92
-                  />
93
                 </div>
64
                 </div>
94
-              </div>
95
 
65
 
96
-              <div class="col-md-6">
97
-                <label for="resortModule">Current Year Levy</label>
98
-                <div class="input-group mb-3">
99
-                  <div class="input-group-prepend">
100
-                    <span class="input-group-text" style="color: #60CBEB">
101
-                      <b>R</b>
102
-                    </span>
66
+                <div class="col-md-6">
67
+                  <label for="resortModule">Current Year Levy</label>
68
+                  <div class="input-group mb-3">
69
+                    <div class="input-group-prepend">
70
+                      <span class="input-group-text" style="color: #60CBEB">
71
+                        <b>R</b>
72
+                      </span>
73
+                    </div>
74
+                    <input
75
+                      class="form-control"
76
+                      type="text"
77
+                      id="levy"
78
+                      name="levy"
79
+                      :value="formatPrice(week ? week.levyAmount : 0)"
80
+                      disabled
81
+                    />
103
                   </div>
82
                   </div>
104
-                  <input
105
-                    class="form-control"
106
-                    type="text"
107
-                    id="levy"
108
-                    name="levy"
109
-                    :value="formatPrice(week ? week.levyAmount : 0)"
110
-                    disabled
111
-                  />
112
                 </div>
83
                 </div>
113
-              </div>
114
-              <div class="col-md-6">
115
-                <label for="price">Price</label>
116
-                <div class="property-price d-flex">
117
-                  <!-- <div class="card-header-c d-flex"> -->
118
-                  <div style="width: 260px; height: 70px; border-style: solid; color: #60CBEB;">
119
-                    <!-- <div class="card-title-c align-self-center"> -->
120
-                    <a class="justify-content-center" style="color: black; font-size: 250%">
121
-                      <b>R{{ formatPrice(week ? week.sellPrice : 0) }}</b>
122
-                    </a>
123
-                    <!-- </div> -->
84
+                <div class="col-md-6">
85
+                  <label for="price">Price</label>
86
+                  <div class="property-price d-flex">
87
+                    <div class="price-border">
88
+                      <div class="price-label">
89
+                        <b>R {{ formatPrice(week ? week.sellPrice : 0) }}</b>
90
+                      </div>
91
+                    </div>
124
                   </div>
92
                   </div>
125
-                  <!-- </div> -->
126
                 </div>
93
                 </div>
127
               </div>
94
               </div>
128
-            </div>
129
-            <br />
130
-          </form>
131
-          <br />
132
-
133
-          <!-- <a
134
-              class="btn btn-b-n even-width mr-auto"
135
-              href="/share-transfer-initiation-for-purchaser/"
136
-          >Make an Offer</a>-->
137
-          <button
138
-            type="button"
139
-            class="btn btn-b-n even-width mr-auto"
140
-            data-toggle="modal"
141
-            data-target="#myModal"
142
-          >Make an Offer</button>
143
-          <div class="col-md-12">
144
-            <div id="myModal" class="modal fade" role="dialog">
145
-              <div class="modal-dialog modal-lg">
146
-                <!-- Modal content-->
147
-                <div class="modal-content">
148
-                  <div class="modal-header">
149
-                    <button type="button" class="close" data-dismiss="modal">&times;</button>
150
-                  </div>
151
-                  <div padding-left="20px">
152
-                    <makeOffer
153
-                      name="MakeOffer"
154
-                      :isMakeOffer="true"
155
-                      :isProperty="false"
156
-                      :item="week"
157
-                    />
95
+            </form>
96
+            <hr />
97
+            <div class="d-flex justify-content-between">
98
+              <div class="p-1">
99
+                <a class="btn btn-b-c even-width mr-auto" href="javascript:history.back()">Back</a>
100
+              </div>
101
+              <div class="p-1">
102
+                <button
103
+                  type="button"
104
+                  class="btn btn-lg btn-b-n even-width mr-auto"
105
+                  data-toggle="modal"
106
+                  data-target="#myModal"
107
+                >Make an Offer</button>
108
+                <div class="col-md-12">
109
+                  <div id="myModal" class="modal fade" role="dialog">
110
+                    <div class="modal-dialog modal-lg">
111
+                      <!-- Modal content-->
112
+                      <div class="modal-content">
113
+                        <div class="modal-header">
114
+                          <button type="button" class="close" data-dismiss="modal">&times;</button>
115
+                        </div>
116
+                        <div padding-left="20px">
117
+                          <makeOffer
118
+                            name="MakeOffer"
119
+                            :isMakeOffer="true"
120
+                            :isProperty="false"
121
+                            :item="week"
122
+                          />
123
+                        </div>
124
+                      </div>
125
+                    </div>
158
                   </div>
126
                   </div>
159
                 </div>
127
                 </div>
160
               </div>
128
               </div>
161
             </div>
129
             </div>
130
+            <hr />
162
           </div>
131
           </div>
163
-
164
-          <a class="btn btn-b-c even-width mr-auto" href="javascript:history.back()">Back</a>
132
+        </div>
133
+        <hr />
134
+        <div class="col-md-12">
135
+          <hr />
136
+        </div>
137
+        <div class="col-md-6">
138
+          <div class="title-box-d">
139
+            <h3 class="title-d">Facilities</h3>
140
+          </div>
141
+          <div class="row" v-if="resort.prUnitFacilities">
142
+            <div
143
+              class="col-md-4"
144
+              v-for="(item, i) in resort.prUnitFacilities.split('\n')"
145
+              :key="i"
146
+            >{{item}}</div>
147
+          </div>
148
+        </div>
149
+        <div class="col-md-6">
150
+          <div class="title-box-d">
151
+            <h3 class="title-d">Property Description</h3>
152
+          </div>
153
+          <p>{{description}}</p>
165
         </div>
154
         </div>
166
       </div>
155
       </div>
167
     </div>
156
     </div>
171
 <script>
160
 <script>
172
 import { mapState, mapActions } from 'vuex';
161
 import { mapState, mapActions } from 'vuex';
173
 import makeOffer from '../../processFlow/makeOffer.vue';
162
 import makeOffer from '../../processFlow/makeOffer.vue';
163
+import ResortImages from './resortImage.vue';
174
 
164
 
175
 export default {
165
 export default {
176
   name: 'unit',
166
   name: 'unit',
177
   components: {
167
   components: {
178
     makeOffer,
168
     makeOffer,
169
+    ResortImages,
179
   },
170
   },
180
   props: {
171
   props: {
181
     resortCode: {},
172
     resortCode: {},
186
     this.initWeek(this.weekId);
177
     this.initWeek(this.weekId);
187
   },
178
   },
188
   computed: {
179
   computed: {
189
-    ...mapState('resort', [
190
-      'resort',
191
-      'description',
192
-      'image1',
193
-      'image2',
194
-      'image3',
195
-    ]),
180
+    ...mapState('resort', ['resort', 'description', 'images']),
196
     ...mapState('week', ['week']),
181
     ...mapState('week', ['week']),
197
   },
182
   },
198
   methods: {
183
   methods: {
209
 };
194
 };
210
 </script>
195
 </script>
211
 <style scoped>
196
 <style scoped>
197
+.my-top {
198
+  padding-top: 25px;
199
+}
200
+.my-container {
201
+  padding-left: 15%;
202
+  padding-right: 15%;
203
+}
204
+.my-title {
205
+  text-align: left;
206
+  font-size: 250%;
207
+}
212
 .btn.btn-b-c {
208
 .btn.btn-b-c {
213
   background-color: #ffffff;
209
   background-color: #ffffff;
214
   color: #60cbeb;
210
   color: #60cbeb;
215
   border-radius: 0;
211
   border-radius: 0;
216
 }
212
 }
217
-
218
 .btn.btn-b-c:hover {
213
 .btn.btn-b-c:hover {
219
   background-color: #089bf0;
214
   background-color: #089bf0;
220
   color: #ffffff;
215
   color: #ffffff;
221
 }
216
 }
217
+.price-border {
218
+  background-color: #a9e0ff;
219
+  width: 100%;
220
+  border: solid #60cbeb medium;
221
+  padding: 0px 20px;
222
+}
223
+.price-label {
224
+  color: black;
225
+  font-size: 225%;
226
+}
222
 </style>
227
 </style>

+ 16
- 17
src/components/timeshare/searchTimeshare.vue ファイルの表示

11
         <label>Province</label>
11
         <label>Province</label>
12
         <div class="input-group mb-3">
12
         <div class="input-group mb-3">
13
           <div class="input-group-prepend">
13
           <div class="input-group-prepend">
14
-            <span class="input-group-text" style="color: #60CBEB">
15
-              <b>P</b>
14
+            <span class="input-group-text myFill">
15
+              <i class="fa fa-map"></i>
16
             </span>
16
             </span>
17
           </div>
17
           </div>
18
           <select class="form-control" name="region" id="region" v-model="filter.region">
18
           <select class="form-control" name="region" id="region" v-model="filter.region">
19
             <option v-for="(item, i) in regions" :key="i" :value="item">{{item.regionName}}</option>
19
             <option v-for="(item, i) in regions" :key="i" :value="item">{{item.regionName}}</option>
20
           </select>
20
           </select>
21
           <div class="input-group-append" @click="clearFilter('region')">
21
           <div class="input-group-append" @click="clearFilter('region')">
22
-            <span class="input-group-text cursor-pointer" style="color: #60CBEB">
22
+            <span class="input-group-text cursor-pointer myFill">
23
               <b>X</b>
23
               <b>X</b>
24
             </span>
24
             </span>
25
           </div>
25
           </div>
29
         <label>Resort Name</label>
29
         <label>Resort Name</label>
30
         <div class="input-group mb-3">
30
         <div class="input-group mb-3">
31
           <div class="input-group-prepend">
31
           <div class="input-group-prepend">
32
-            <span class="input-group-text" style="color: #60CBEB">
32
+            <span class="input-group-text myFill" style="font-size:75%;">
33
               <b>RN</b>
33
               <b>RN</b>
34
             </span>
34
             </span>
35
           </div>
35
           </div>
37
             <option v-for="(item, i) in filteredResorts" :key="i" :value="item">{{item.resortName}}</option>
37
             <option v-for="(item, i) in filteredResorts" :key="i" :value="item">{{item.resortName}}</option>
38
           </select>
38
           </select>
39
           <div class="input-group-append" @click="clearFilter('resort')">
39
           <div class="input-group-append" @click="clearFilter('resort')">
40
-            <span class="input-group-text cursor-pointer" style="color: #60CBEB">
40
+            <span class="input-group-text cursor-pointer myFill">
41
               <b>X</b>
41
               <b>X</b>
42
             </span>
42
             </span>
43
           </div>
43
           </div>
47
         <label>Bedrooms</label>
47
         <label>Bedrooms</label>
48
         <div class="input-group mb-3">
48
         <div class="input-group mb-3">
49
           <div class="input-group-prepend">
49
           <div class="input-group-prepend">
50
-            <span class="input-group-text" style="color: #60CBEB">
51
-              <b>Bed</b>
50
+            <span class="input-group-text myFill">
51
+              <i class="fa fa-bed"></i>
52
             </span>
52
             </span>
53
           </div>
53
           </div>
54
           <select class="form-control" name="bedrooms" v-model="filter.bedrooms">
54
           <select class="form-control" name="bedrooms" v-model="filter.bedrooms">
55
             <option v-for="(item, i) in resortBedrooms" :key="i">{{item}}</option>
55
             <option v-for="(item, i) in resortBedrooms" :key="i">{{item}}</option>
56
           </select>
56
           </select>
57
           <div class="input-group-append" @click="clearFilter('bedrooms')">
57
           <div class="input-group-append" @click="clearFilter('bedrooms')">
58
-            <span class="input-group-text cursor-pointer" style="color: #60CBEB">
58
+            <span class="input-group-text cursor-pointer myFill">
59
               <b>X</b>
59
               <b>X</b>
60
             </span>
60
             </span>
61
           </div>
61
           </div>
62
         </div>
62
         </div>
63
       </div>
63
       </div>
64
-      <hr />
65
       <div class="form-group text-left">
64
       <div class="form-group text-left">
66
         <label>Date</label>
65
         <label>Date</label>
67
         <div class="input-group mb-3">
66
         <div class="input-group mb-3">
68
           <div class="input-group-prepend">
67
           <div class="input-group-prepend">
69
-            <span class="input-group-text" style="color: #60CBEB">
70
-              <b>D</b>
68
+            <span class="input-group-text myFill">
69
+              <i class="fa fa-calendar"></i>
71
             </span>
70
             </span>
72
           </div>
71
           </div>
73
           <input type="date" class="form-control" name="arrivaldate" v-model="filter.date" />
72
           <input type="date" class="form-control" name="arrivaldate" v-model="filter.date" />
74
           <div class="input-group-append" @click="clearFilter('date')">
73
           <div class="input-group-append" @click="clearFilter('date')">
75
-            <span class="input-group-text cursor-pointer" style="color: #60CBEB">
74
+            <span class="input-group-text cursor-pointer myFill">
76
               <b>X</b>
75
               <b>X</b>
77
             </span>
76
             </span>
78
           </div>
77
           </div>
79
         </div>
78
         </div>
80
       </div>
79
       </div>
81
-      <hr />
82
       <div class="form-group">
80
       <div class="form-group">
83
         <div class="row">
81
         <div class="row">
84
           <div class="col-md-6 text-left">
82
           <div class="col-md-6 text-left">
85
             <label>Minimum Price</label>
83
             <label>Minimum Price</label>
86
             <div class="input-group mb-3">
84
             <div class="input-group mb-3">
87
               <div class="input-group-prepend">
85
               <div class="input-group-prepend">
88
-                <span class="input-group-text" style="color: #60CBEB">
86
+                <span class="input-group-text myFill">
89
                   <b>R</b>
87
                   <b>R</b>
90
                 </span>
88
                 </span>
91
               </div>
89
               </div>
95
                 step="any"
93
                 step="any"
96
                 id="minPrice"
94
                 id="minPrice"
97
                 name="minPrice"
95
                 name="minPrice"
98
-                placeholder="Minimum Price"
96
+                placeholder="Min"
99
                 v-model="filter.minPrice"
97
                 v-model="filter.minPrice"
100
               />
98
               />
101
               <div class="input-group-append" @click="clearFilter('minPrice')">
99
               <div class="input-group-append" @click="clearFilter('minPrice')">
102
-                <span class="input-group-text cursor-pointer" style="color: #60CBEB">
100
+                <span class="input-group-text cursor-pointer myFill">
103
                   <b>X</b>
101
                   <b>X</b>
104
                 </span>
102
                 </span>
105
               </div>
103
               </div>
119
                 step="any"
117
                 step="any"
120
                 id="maxPrice"
118
                 id="maxPrice"
121
                 name="maxPrice"
119
                 name="maxPrice"
122
-                placeholder="Maximum Price"
120
+                placeholder="Max"
123
                 v-model="filter.maxPrice"
121
                 v-model="filter.maxPrice"
124
               />
122
               />
125
               <div class="input-group-append" @click="clearFilter('maxPrice')">
123
               <div class="input-group-append" @click="clearFilter('maxPrice')">
142
 export default {
140
 export default {
143
   props: {
141
   props: {
144
     hideTop: undefined,
142
     hideTop: undefined,
143
+    keyword: undefined,
145
   },
144
   },
146
   created() {
145
   created() {
147
     this.initTimeshare();
146
     this.initTimeshare();

+ 9
- 9
src/components/timeshare/sell/sellPage.vue ファイルの表示

5
       <div class="col-md-12">
5
       <div class="col-md-12">
6
         <div class="col-sm-12">
6
         <div class="col-sm-12">
7
           <div class="about-img-box">
7
           <div class="about-img-box">
8
-            <img
9
-              src="img/sell3.jpg"
10
-              alt="Timeshare To Sell"
11
-              class="img-fluid"
12
-              style="width:800px;height:400px; border-radius:10px"
13
-            />
8
+            <img src="img/sell3.jpg" alt="Timeshare To Sell" class="img-fluid title-img" />
14
           </div>
9
           </div>
15
-          <div class="sinse-box" style="opacity:0.7; border: white solid 3px; border-radius: 15px">
10
+          <div class="sinse-box title-title">
16
             <h3 class="sinse-title">Timeshare To Sell</h3>
11
             <h3 class="sinse-title">Timeshare To Sell</h3>
17
           </div>
12
           </div>
18
         </div>
13
         </div>
494
           <br />
489
           <br />
495
           <br />
490
           <br />
496
           <p style="text-align:center;">
491
           <p style="text-align:center;">
497
-            To rent your week out
498
-            <a href="https://www.tradeunipoint.com/" target="_blank">click here</a>
492
+            <strong>
493
+              To rent your week out
494
+              <a
495
+                href="https://www.tradeunipoint.com/"
496
+                target="_blank"
497
+              >click here</a>
498
+            </strong>
499
           </p>
499
           </p>
500
         </form>
500
         </form>
501
       </div>
501
       </div>

+ 43
- 44
src/components/user/loginPage.vue ファイルの表示

3
     <!-- eslint-disable max-len -->
3
     <!-- eslint-disable max-len -->
4
     <div class="login-page">
4
     <div class="login-page">
5
       <form id="signIn">
5
       <form id="signIn">
6
-        <div class="form">
6
+        <div class="form col-md-12">
7
           <div>
7
           <div>
8
             <h4>Login</h4>
8
             <h4>Login</h4>
9
-            <br />
10
           </div>
9
           </div>
11
-          <!--<alert :text="'Login successful'" :type="'SUCCESS'" />
12
-          <alert :text="'User does not exist, please register'" :type="'ERROR'" />
13
-          <alert :text="'Username is incorrect'" :type="'WARNING'" />
14
-          <alert :text="'Password is incorrect'" :type="'WARNING'" />
15
-          <alert :text="'Caps Lock is on'" :type="'INFO'" />-->
10
+          <button
11
+            @click="routerGoTo('/user/register')"
12
+            class="btn"
13
+            style="margin:2px; color: #60CBEB"
14
+          >Register</button>
15
+          <button
16
+            @click="routerGoTo('/user/registeragency')"
17
+            class="btn"
18
+            style="margin:2px; color: #60CBEB"
19
+          >Agency Registration</button>
20
+          <div v-if="this.$store.state.authentication.status === 'error'">
21
+            <alert
22
+              :text="'User doesn\'t exist or Username and Password is incorrect'"
23
+              :type="'ERROR'"
24
+            />
25
+          </div>
16
           <div class="row">
26
           <div class="row">
17
-            <div class="col-md-11" style="margin-bottom: 1em">
27
+            <div class="col-md-12" style="margin-bottom: 1em">
18
               <div class="input-group mb-3">
28
               <div class="input-group mb-3">
19
                 <div class="input-group-prepend">
29
                 <div class="input-group-prepend">
20
                   <span class="input-group-text">
30
                   <span class="input-group-text">
59
               </div>
69
               </div>
60
             </div>
70
             </div>
61
           </div>
71
           </div>
62
-          <div class="form-group row"></div>
63
           <button @click="Login()" class="btn btn-b-n" type="submit">Sign In</button>
72
           <button @click="Login()" class="btn btn-b-n" type="submit">Sign In</button>
64
-          <p v-if="user !== null">{{ user }}</p>
65
           <hr />
73
           <hr />
66
-          <button
67
-            @click="routerGoTo('/user/register')"
68
-            class="btn"
69
-            style="margin:2px"
70
-            type="button"
71
-          >Registration</button>
72
-          <button
73
-            @click="routerGoTo('/user/registeragency')"
74
-            class="btn"
75
-            style="margin:2px"
76
-          >Agency Registration</button>
77
-        </div>
78
-      </form>
79
-
80
-      <form id="forgot">
81
-        <div class="form">
82
-          <h5>Trouble signing in?</h5>
83
-          <div>
84
-            <!--<alert :text="'Username & password request email sent'" :type="'SUCCESS'" />-->
74
+          <div
75
+            @click="ToggleTrouble()"
76
+            class="btn cursor: pointer;"
77
+            style="margin:2px; color: #60CBEB; font-size:110%;"
78
+          >Trouble signing in?</div>
79
+          <br />
80
+          <div v-if="troubleToggle">
81
+            <!-- <alert :text="'Username & password request email sent'" :type="'SUCCESS'" /> -->
85
             <div class="row">
82
             <div class="row">
86
               <div class="input-group-prepend">
83
               <div class="input-group-prepend">
87
                 <span class="input-group-text">
84
                 <span class="input-group-text">
90
                 <input class="form-control" placeholder="Your Email" type="text" name="email" value />
87
                 <input class="form-control" placeholder="Your Email" type="text" name="email" value />
91
               </div>
88
               </div>
92
             </div>
89
             </div>
93
-          </div>
94
-          <div class="form-group row"></div>
95
-          <div class="offset-md-3 col-md-5">
96
-            <button @click="SendMail()" class="btn btn-b-n" type="submit">Get Help</button>
90
+            <br />
91
+            <button @click="SendMail()" class="btn btn-b-n" type="submit">Submit</button>
97
           </div>
92
           </div>
98
         </div>
93
         </div>
99
       </form>
94
       </form>
103
 
98
 
104
 <script>
99
 <script>
105
 import { mapActions, mapState } from 'vuex';
100
 import { mapActions, mapState } from 'vuex';
106
-// import alert from '../shared/alert.vue';
101
+import alert from '../shared/alert.vue';
107
 
102
 
108
 export default {
103
 export default {
109
   name: 'Login',
104
   name: 'Login',
110
   components: {
105
   components: {
111
-    // alert,
106
+    alert,
112
   },
107
   },
113
   data() {
108
   data() {
114
     return {
109
     return {
115
-      username: '',
116
-      user: null,
117
       isPasswordShown: 'password',
110
       isPasswordShown: 'password',
118
       selectItems: [{ text: 'password', value: 0 }],
111
       selectItems: [{ text: 'password', value: 0 }],
119
       selectErrors: 'Some error with the field',
112
       selectErrors: 'Some error with the field',
121
       textErrors: 'Some error with the field',
114
       textErrors: 'Some error with the field',
122
       text: '',
115
       text: '',
123
       showPassword: false,
116
       showPassword: false,
124
-      password: '',
125
       email: '',
117
       email: '',
118
+      troubleToggle: false,
126
     };
119
     };
127
   },
120
   },
128
   computed: {
121
   computed: {
129
-    ...mapState('authentication', ['token', 'status']),
122
+    ...mapState('authentication', ['token', 'status', 'username', 'password']),
130
   },
123
   },
131
   methods: {
124
   methods: {
132
-    ...mapActions('authentication', ['login']),
125
+    ...mapActions('authentication', ['login', 'init']),
126
+    ToggleTrouble() {
127
+      if (this.troubleToggle) {
128
+        this.troubleToggle = false;
129
+      } else this.troubleToggle = true;
130
+    },
133
     Login() {
131
     Login() {
134
-      this.login({ username: this.username, password: this.password })
135
-        .then(() => this.router.push('/'))
136
-        .catch(err => console.log(err));
137
-      this.$router.push('/about/us');
132
+      this.login().then(() => {
133
+        if (this.$store.state.authentication.status === 'error') {
134
+          this.$router.push('/user/login');
135
+        }
136
+      });
138
     },
137
     },
139
     togglePassword() {
138
     togglePassword() {
140
       this.showPassword = true;
139
       this.showPassword = true;

+ 6
- 0
src/router/index.js ファイルの表示

8
 import TimeshareSell from '../components/timeshare/sell/sellPage.vue';
8
 import TimeshareSell from '../components/timeshare/sell/sellPage.vue';
9
 import TimeshareFAQ from '../components/timeshare/faqPage.vue';
9
 import TimeshareFAQ from '../components/timeshare/faqPage.vue';
10
 import TimeshareSearch from '../components/timeshare/buy/weekListPage.vue';
10
 import TimeshareSearch from '../components/timeshare/buy/weekListPage.vue';
11
+import MyWeeksPage from '../components/timeshare/myWeeksPage.vue';
11
 
12
 
12
 import Login from '../components/user/loginPage.vue';
13
 import Login from '../components/user/loginPage.vue';
13
 import PrivateIndividual from '../components/user/registerPage.vue';
14
 import PrivateIndividual from '../components/user/registerPage.vue';
83
       name: 'TimeshareFAQ',
84
       name: 'TimeshareFAQ',
84
       component: TimeshareFAQ,
85
       component: TimeshareFAQ,
85
     },
86
     },
87
+    {
88
+      path: '/timeshare/myWeeks',
89
+      name: 'MyWeeks',
90
+      component: MyWeeksPage,
91
+    },
86
     {
92
     {
87
       path: '/user/login',
93
       path: '/user/login',
88
       name: 'Login',
94
       name: 'Login',

+ 2
- 0
src/store/index.js ファイルの表示

15
 import PropertyTypes from './modules/property/propertyTypes';
15
 import PropertyTypes from './modules/property/propertyTypes';
16
 import Register from './modules/user/register';
16
 import Register from './modules/user/register';
17
 import WeekList from './modules/timeshare/weekList';
17
 import WeekList from './modules/timeshare/weekList';
18
+import MyWeeks from './modules/timeshare/myWeeks';
18
 import Bid from './modules/processFlow/bid';
19
 import Bid from './modules/processFlow/bid';
19
 import Authentication from './modules/user/authentication';
20
 import Authentication from './modules/user/authentication';
20
 import PropertySearch from './modules/property/propertySearch';
21
 import PropertySearch from './modules/property/propertySearch';
24
 /* eslint no-param-reassign: ["error", { "props": false }] */
25
 /* eslint no-param-reassign: ["error", { "props": false }] */
25
 export default new Vuex.Store({
26
 export default new Vuex.Store({
26
   modules: {
27
   modules: {
28
+    myWeeks: MyWeeks,
27
     timeshare: TimeshareModule,
29
     timeshare: TimeshareModule,
28
     users: UsersModule,
30
     users: UsersModule,
29
     status: StatusModule,
31
     status: StatusModule,

+ 55
- 0
src/store/modules/timeshare/buyPage.js ファイルの表示

9
   state: {
9
   state: {
10
     regions: [],
10
     regions: [],
11
     detailedRegion: [],
11
     detailedRegion: [],
12
+    availRegion: [],
12
     resort: {},
13
     resort: {},
13
   },
14
   },
14
   mutations: {
15
   mutations: {
16
+    clearAvail(state, avail) {
17
+      state.availRegion = [];
18
+    },
19
+    addAvail(state, avail) {
20
+      state.availRegion.push(avail);
21
+    },
15
     setRegions(state, regions) {
22
     setRegions(state, regions) {
16
       state.regions = regions;
23
       state.regions = regions;
17
     },
24
     },
27
   },
34
   },
28
   getters: {},
35
   getters: {},
29
   actions: {
36
   actions: {
37
+    init({
38
+      commit,
39
+      dispatch,
40
+    }) {
41
+      commit('clearAvail');
42
+      dispatch('getAvail');
43
+      dispatch('getRegions');
44
+    },
45
+    getAvail({
46
+      commit,
47
+    }) {
48
+      axios.get('/api/timeshareweek/getAvailResort').then((r) => {
49
+        for (const reg in r.data) {
50
+          const newRegion = {};
51
+          newRegion.regionCode = r.data[reg].regionCode;
52
+          newRegion.regionName = r.data[reg].regionName;
53
+          newRegion.available = r.data[reg].available;
54
+          newRegion.resorts = [];
55
+          for (const res in r.data[reg].resorts) {
56
+            const newResort = {
57
+              resortCode: '',
58
+              resortName: '',
59
+              lat: 0,
60
+              long: 0,
61
+            };
62
+            newResort.resortCode = r.data[reg].resorts[res].resortCode;
63
+            newResort.resortName = r.data[reg].resorts[res].resortName;
64
+            newResort.available = r.data[reg].resorts[res].available;
65
+            if (r.data[reg].resorts[res]) {
66
+              axios.get(
67
+                `https://www.tradeunipoint.com/unibackend/seam/resource/rest/products/TRESORT/${
68
+                  r.data[reg].resorts[res].resortCode}`,
69
+              )
70
+                .then((result) => {
71
+                  newResort.lat = result.data.prLatitude;
72
+                  newResort.long = result.data.prLongitude;
73
+                })
74
+                .catch(console.error);
75
+            }
76
+            newRegion.resorts.push(newResort);
77
+          }
78
+          commit('addAvail', newRegion);
79
+        }
80
+      }).catch(
81
+        console
82
+          .error,
83
+      );
84
+    },
30
     getRegions({
85
     getRegions({
31
       commit,
86
       commit,
32
       dispatch,
87
       dispatch,

+ 10
- 0
src/store/modules/timeshare/myWeeks.js ファイルの表示

1
+export default {
2
+  namespaced: true,
3
+  state: {
4
+    test: 'kobus',
5
+    items: [],
6
+  },
7
+  mutations: {},
8
+  getters: {},
9
+  actions: {},
10
+};

+ 47
- 33
src/store/modules/timeshare/resort.js ファイルの表示

6
   namespaced: true,
6
   namespaced: true,
7
   state: {
7
   state: {
8
     resort: {},
8
     resort: {},
9
-    image1: '',
10
-    image2: '',
11
-    image3: '',
9
+    images: [],
12
     layout: '',
10
     layout: '',
13
     description: '',
11
     description: '',
14
   },
12
   },
19
     setDescription(state, description) {
17
     setDescription(state, description) {
20
       state.description = description;
18
       state.description = description;
21
     },
19
     },
20
+    addImage(state, image) {
21
+      state.images.push(`data:image/jpeg;base64,${image}`);
22
+    },
22
     clear(state) {
23
     clear(state) {
23
       state.resort = {};
24
       state.resort = {};
24
-      state.image1 = '';
25
-      state.image2 = '';
26
-      state.image3 = '';
25
+      state.images = [];
27
       state.layout = '';
26
       state.layout = '';
28
     },
27
     },
29
-    setImage1(state, image) {
30
-      state.image1 = `data:image/jpeg;base64,${image}`;
31
-    },
32
-    setImage2(state, image) {
33
-      state.image2 = `data:image/jpeg;base64,${image}`;
34
-    },
35
-    setImage3(state, image) {
36
-      state.image3 = `data:image/jpeg;base64,${image}`;
37
-    },
38
     setLayout(state, image) {
28
     setLayout(state, image) {
39
       state.layout = `data:image/jpeg;base64,${image}`;
29
       state.layout = `data:image/jpeg;base64,${image}`;
40
     },
30
     },
51
       dispatch('getImage1', resortCode);
41
       dispatch('getImage1', resortCode);
52
       dispatch('getImage2', resortCode);
42
       dispatch('getImage2', resortCode);
53
       dispatch('getImage3', resortCode);
43
       dispatch('getImage3', resortCode);
44
+      dispatch('getImage4', resortCode);
54
       dispatch('getLayout', resortCode);
45
       dispatch('getLayout', resortCode);
55
     },
46
     },
56
     getDescription({
47
     getDescription({
57
       commit,
48
       commit,
58
     }, resortCode) {
49
     }, resortCode) {
59
-      axios.get(
60
-        `https://www.tradeunipoint.com/unibackend/seam/resource/rest/products/${resortCode}/dsc`,
61
-      )
50
+      axios
51
+        .get(
52
+          `https://www.tradeunipoint.com/unibackend/seam/resource/rest/products/${resortCode}/dsc`,
53
+        )
62
         .then((result) => {
54
         .then((result) => {
63
           commit('setDescription', result.data);
55
           commit('setDescription', result.data);
64
         })
56
         })
67
     getResort({
59
     getResort({
68
       commit,
60
       commit,
69
     }, resortCode) {
61
     }, resortCode) {
70
-      axios.get(
71
-        `https://www.tradeunipoint.com/unibackend/seam/resource/rest/products/TRESORT/${
72
-          resortCode}`,
73
-      )
62
+      axios
63
+        .get(
64
+          `https://www.tradeunipoint.com/unibackend/seam/resource/rest/products/TRESORT/${resortCode}`,
65
+        )
74
         .then((result) => {
66
         .then((result) => {
75
           commit('setResort', result.data);
67
           commit('setResort', result.data);
76
         })
68
         })
79
     getImage1({
71
     getImage1({
80
       commit,
72
       commit,
81
     }, resortCode) {
73
     }, resortCode) {
82
-      axios.get(`https://www.tradeunipoint.com/unibackend/seam/resource/rest/products/${
83
-        resortCode}/image/1`)
84
-        .then(result => commit('setImage1', result.data))
74
+      axios
75
+        .get(
76
+          `https://www.tradeunipoint.com/unibackend/seam/resource/rest/products/${resortCode}/image/1`,
77
+        )
78
+        .then(result => commit('addImage', result.data))
85
         .catch(console.error);
79
         .catch(console.error);
86
     },
80
     },
87
     getImage2({
81
     getImage2({
88
       commit,
82
       commit,
89
     }, resortCode) {
83
     }, resortCode) {
90
-      axios.get(`https://www.tradeunipoint.com/unibackend/seam/resource/rest/products/${
91
-        resortCode}/image/2`)
92
-        .then(result => commit('setImage2', result.data))
84
+      axios
85
+        .get(
86
+          `https://www.tradeunipoint.com/unibackend/seam/resource/rest/products/${resortCode}/image/2`,
87
+        )
88
+        .then(result => commit('addImage', result.data))
93
         .catch(console.error);
89
         .catch(console.error);
94
     },
90
     },
95
     getImage3({
91
     getImage3({
96
       commit,
92
       commit,
97
     }, resortCode) {
93
     }, resortCode) {
98
-      axios.get(`https://www.tradeunipoint.com/unibackend/seam/resource/rest/products/${
99
-        resortCode}/image/3`)
100
-        .then(result => commit('setImage3', result.data))
94
+      axios
95
+        .get(
96
+          `https://www.tradeunipoint.com/unibackend/seam/resource/rest/products/${resortCode}/image/3`,
97
+        )
98
+        .then(result => commit('addImage', result.data))
99
+        .catch(console.error);
100
+    },
101
+    getImage4({
102
+      commit,
103
+    }, resortCode) {
104
+      axios
105
+        .get(
106
+          `https://www.tradeunipoint.com/unibackend/seam/resource/rest/products/${resortCode}/image/4`,
107
+        )
108
+        .then((result) => {
109
+          if (result.data && result.data.length > 0) {
110
+            commit('addImage', result.data);
111
+          }
112
+        })
101
         .catch(console.error);
113
         .catch(console.error);
102
     },
114
     },
103
     getLayout({
115
     getLayout({
104
       commit,
116
       commit,
105
     }, resortCode) {
117
     }, resortCode) {
106
-      axios.get(`https://www.tradeunipoint.com/unibackend/seam/resource/rest/products/${
107
-        resortCode}/layout`)
118
+      axios
119
+        .get(
120
+          `https://www.tradeunipoint.com/unibackend/seam/resource/rest/products/${resortCode}/layout`,
121
+        )
108
         .then(result => commit('setLayout', result.data))
122
         .then(result => commit('setLayout', result.data))
109
         .catch(console.error);
123
         .catch(console.error);
110
     },
124
     },

+ 4
- 30
src/store/modules/timeshare/weekList.js ファイルの表示

15
       date: undefined,
15
       date: undefined,
16
       minPrice: undefined,
16
       minPrice: undefined,
17
       maxPrice: undefined,
17
       maxPrice: undefined,
18
-      keyword: null,
18
+      keyword: undefined,
19
     },
19
     },
20
+    prevFilter: undefined,
21
+    difFilter: undefined,
20
   },
22
   },
21
   mutations: {
23
   mutations: {
22
     onClearFilter(state, filter) {
24
     onClearFilter(state, filter) {
34
   },
36
   },
35
   getters: {
37
   getters: {
36
     filteredWeeks: (state) => {
38
     filteredWeeks: (state) => {
39
+      console.log(JSON.stringify(state.filter));
37
       let weekList = state.weeks;
40
       let weekList = state.weeks;
38
       const {
41
       const {
39
         filter,
42
         filter,
109
     }, filter) {
112
     }, filter) {
110
       commit('onClearFilter', filter);
113
       commit('onClearFilter', filter);
111
     },
114
     },
112
-    addDummyWeek({
113
-      commit,
114
-    }) {
115
-      commit('addWeek', {
116
-        id: 1,
117
-        unit: '359',
118
-        week: 'N18',
119
-        module: '359/N18 River View',
120
-        sellingPrice: 85000,
121
-        currentLevy: 5455,
122
-        arrivalDate: '2019/09/09',
123
-        departureDate: '2019/09/16',
124
-        region: {
125
-          regionCode: 'EC',
126
-          regionName: 'Eastern Cape',
127
-          id: 1,
128
-        },
129
-        resort: {
130
-          resortName: 'Ekuthuleni Hoedspruit',
131
-          resortCode: 'EKU',
132
-          town: 'Hoedspruit',
133
-          city: 'Hoedspruit',
134
-          id: 17,
135
-        },
136
-        bedrooms: '2',
137
-        unitNumber: '18',
138
-        weekNumber: '25',
139
-      });
140
-    },
141
   },
115
   },
142
 };
116
 };

+ 60
- 23
src/store/modules/user/authentication.js ファイルの表示

1
 import Vue from 'vue';
1
 import Vue from 'vue';
2
 import Vuex from 'vuex';
2
 import Vuex from 'vuex';
3
 import axios from 'axios';
3
 import axios from 'axios';
4
+import log from '../../../assets/Log';
4
 
5
 
5
 Vue.use(Vuex);
6
 Vue.use(Vuex);
6
 export default {
7
 export default {
7
   namespaced: true,
8
   namespaced: true,
8
   state: {
9
   state: {
9
-    status: '',
10
-    token: sessionStorage.getItem('token') || '',
11
-    user: {},
12
-    individual: {},
10
+    username: 'UniVate2018',
11
+    password: 'UniVate2018',
12
+    isLoggedIn: log.isLoggedIn(),
13
+    flag: false,
14
+    status: undefined,
15
+    token: undefined,
16
+    user: undefined,
17
+    person: undefined,
18
+    agency: undefined,
13
   },
19
   },
14
   mutations: {
20
   mutations: {
15
     auth_request(state) {
21
     auth_request(state) {
16
       state.status = 'loading';
22
       state.status = 'loading';
17
     },
23
     },
18
-    auth_success(state, token, user) {
24
+    auth_success(state, user) {
19
       state.status = 'success';
25
       state.status = 'success';
20
-      state.token = token;
21
-      state.user = user;
26
+      state.token = user.token;
27
+      state.user = user.user;
28
+      state.person = user.person;
29
+      state.agency = user.agency;
22
     },
30
     },
23
     auth_error(state) {
31
     auth_error(state) {
24
       state.status = 'error';
32
       state.status = 'error';
25
     },
33
     },
26
     logout(state) {
34
     logout(state) {
27
-      state.status = '';
28
-      state.token = '';
35
+      state.status = undefined;
36
+      state.token = undefined;
37
+      state.person = undefined;
38
+      state.agency = undefined;
39
+      state.user = undefined;
40
+    },
41
+    runInit(state, item) {
42
+      state.flag = true;
43
+      state.user = item.user;
44
+      state.token = item.token;
45
+      state.person = item.person;
46
+      state.agency = item.agency;
47
+    },
48
+    updateFlag(state) {
49
+      state.flag = true;
29
     },
50
     },
30
   },
51
   },
31
   getters: {
52
   getters: {
32
-    isLoggedIn: state => !!state.token,
33
     authStatus: state => state.status,
53
     authStatus: state => state.status,
34
   },
54
   },
35
   actions: {
55
   actions: {
36
-    login({ commit }, user) {
56
+    init({
57
+      commit,
58
+    }) {
59
+      if (!log.isLoggedIn() && log.tokenExpired) {
60
+        log.clearValues();
61
+      } else log.updateTokenExpiry();
62
+      commit('runInit', {
63
+        user: log.getJSONObject('user'),
64
+        token: log.getJSONObject('token'),
65
+        person: log.getJSONObject('person'),
66
+        agency: log.getJSONObject('agency'),
67
+      });
68
+    },
69
+    login({
70
+      commit,
71
+      state,
72
+    }) {
37
       return new Promise((reject) => {
73
       return new Promise((reject) => {
38
         commit('auth_request');
74
         commit('auth_request');
75
+        const user = {
76
+          username: state.username,
77
+          password: state.password,
78
+        };
39
         axios({
79
         axios({
40
           url: '/api/register/authenticate',
80
           url: '/api/register/authenticate',
41
           data: user,
81
           data: user,
42
           method: 'POST',
82
           method: 'POST',
43
         })
83
         })
44
           .then((resp) => {
84
           .then((resp) => {
45
-            console.log(resp.data);
46
-            sessionStorage.setItem('token', resp.data.token);
47
-            sessionStorage.setItem('username', resp.data.username);
48
-            sessionStorage.setItem('name', resp.data.name);
49
-            commit('auth_success', resp.data.token, resp.data);
85
+            log.clearValues();
86
+            log.setValues(resp.data);
87
+            commit('auth_success', resp.data);
50
           })
88
           })
51
           .catch((err) => {
89
           .catch((err) => {
52
             commit('auth_error');
90
             commit('auth_error');
53
-            sessionStorage.removeItem('token');
54
-            sessionStorage.removeItem('username');
55
-            sessionStorage.removeItem('name');
91
+            log.clearValues();
56
             reject(err);
92
             reject(err);
93
+            commit('auth_error', err.data);
57
           });
94
           });
58
       });
95
       });
59
     },
96
     },
60
-    logout({ commit }) {
97
+    logout({
98
+      commit,
99
+    }) {
61
       return new Promise(() => {
100
       return new Promise(() => {
62
         commit('logout');
101
         commit('logout');
63
-        sessionStorage.removeItem('token');
64
-        sessionStorage.removeItem('username');
65
-        sessionStorage.removeItem('name');
102
+        log.clearValues();
66
         delete axios.defaults.headers.common.Authorization;
103
         delete axios.defaults.headers.common.Authorization;
67
       });
104
       });
68
     },
105
     },

読み込み中…
キャンセル
保存