-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
152 lines (148 loc) · 7.65 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css"><!--CSS-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><!--Vue.js-->
<link rel="manifest" href="site.webmanifest"><!--Importing the manifest file -->
<link rel="icon" href="favicon.ico" type="image/x-icon">
<title>SoleMate Finder</title>
</head>
<body>
<div id="app">
<div class="header"><!--Header-->
<a href="index.html" class="logo">
{{siteName}}<!--SoleMate Finder-->
</a>
<div class="header-right"><!--Search-->
<form @submit.prevent="search"><!--Search-->
<input type="text" v-model="searchForm" id="searchForm" placeholder="Find your SoleMate">
</form>
</div>
</div>
<div class="search-results-container" v-if="searchQuery"><!--Search results-->
<h1 v-if="searchCount > 0">Search results for "{{searchQuery}}"</h1><!--Search results for "searchQuery"-->
<h1 v-else-if="items.length>0">Search results</h1>
</div>
<div class="search-results-container">
<h3 v-if="items.length>0">Showing {{offset+1}}-{{offset+limit}} of {{searchCount}} Products</h3><!--Pagination for eg. Showing 1-20 of 100 Products-->
</div>
<div class="products_container" v-if="items.length>0"><!--If number of products is more than 0-->
<div v-for="item in items" class="product_card"><!--For each item in items-->
<a :href="hrefValue(item.sku_full)"><!--Link to shoes.html for the item-->
<div>
<img v-if="item.image_url" :src="item.image_url"><!--Image of the shoe-->
<img v-else src="https://via.placeholder.com/1000"><!--Placeholder image if the image doesn't exists-->
</div>
<div>
<!--Details of the shoe -->
<h3 v-text="getName(item.full_name)">{{ item.full_name }}</h3>
</div>
</a>
</div>
</div>
<div v-else class="no-results-container"><!--If number of products is 0-->
<h1>No results found</h1>
</div>
<div class="pagination" v-if="items.length>0"><!--Pagination Buttons-->
<button v-if="offset>0" @click="Previous()">Previous</button><!--Previous button-->
<button v-else disabled>Previous</button><!--Disabled previous button if offset is 0-->
<span>Page {{currentPage}} of {{maxPages}}</span><!--Page number -->
<button v-if="offset+limit<searchCount" @click="Next()">Next</button><!--Next button-->
<button v-else disabled>Next</button><!--Disabled next button if offset+limit is greater than searchCount-->
</div>
<div class="footer">
<p>{{siteName}} © {{year}} | All rights reserved</p><!--Footer-->
</div>
</div>
</body>
<script>
const app = new Vue({
el: '#app',
data: {
siteName: 'SoleMate Finder',
year: new Date().getFullYear(),//Current year
offset: 0,//Pagination offset
limit: 20,//Pagination limit
items: [],
searchQuery: '',
searchForm: '',
searchCount: 0,//Number of products
api_url:'https://n5uglm9h7l.execute-api.eu-west-2.amazonaws.com/Production/'
},
computed : {
currentPage: function() {
return this.offset/this.limit + 1;//Current page number
},
maxPages: function() {
return Math.ceil(this.searchCount/this.limit);//Maximum number of pages
}
},
created() {
if ("serviceWorker" in navigator) {
navigator.serviceWorker.register("service-worker.js");
}
const urlParams = new URLSearchParams(window.location.search);//Get searchQuery from URL
this.searchQuery = urlParams.get('searchQuery') || '';//If searchQuery is not present, set it to empty string
this.searchForm = this.searchQuery;//Set searchForm to searchQuery to show it in the search bar
this.fetchData();//Fetch data
},
watch: {
},
methods: {
fetchData: function() {//Fetch data from API using searchQuery, offset and limit
//fetch('http://localhost:3000/search/?query=' + this.searchQuery+'&offset='+this.offset+'&limit='+this.limit)
// fetch('https://solemate-finder-env.eba-49in8fbx.eu-west-2.elasticbeanstalk.com/search/?query=' + this.searchQuery+'&offset='+this.offset+'&limit='+this.limit)
fetch(this.api_url+'search/?query=' + this.searchQuery+'&offset='+this.offset+'&limit='+this.limit)
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
this.items = data;
//fetch('http://localhost:3000/search/count/?query=' + this.searchQuery)
// fetch('https://solemate-finder-env.eba-49in8fbx.eu-west-2.elasticbeanstalk.com/search/count/?query=' + this.searchQuery)
fetch(this.api_url+'search/count/?query=' + this.searchQuery)
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
this.searchCount = data.count;
})
.catch(error => {
console.error('There has been a problem with your fetch operation:', error);
});
})
.catch(error => {
console.error('There has been a problem with your fetch operation:', error);
});
},
search: function() {
window.location.href = 'index.html?searchQuery=' + this.searchForm;
},
hrefValue: function(sku) {
return 'shoes.html?sku_base=' + sku;//Link to shoes.html for the item
},
getName: function(full_name) {
if(full_name.split(' ').length >= 4) //If full_name has more than 4 words
return full_name.split(' ')[0]+ ' ' + full_name.split(' ')[1] + ' ' + full_name.split(' ')[2]+ ' ' + full_name.split(' ')[3];//Return first 4 words
return full_name;//Else return full_name
},
Next: function() {
this.offset += this.limit;//Increment offset by limit
this.fetchData();//Fetch data
},
Previous: function() {
this.offset -= this.limit;//Decrement offset by limit
this.fetchData();//Fetch data
}
}
});
</script>
</html>