+
+
+
+
+
+
diff --git a/client/build/styles.css b/client/build/styles.css
index 717a79a..d43f478 100644
--- a/client/build/styles.css
+++ b/client/build/styles.css
@@ -1,5 +1,151 @@
+*{
+ /* not sure if this messes up the margin for the map? */
+ margin: 0;
+}
+
+header{
+ background-color: #276FBF;
+ font-size: 25px;
+ text-align: center;
+ color: #F6F4F3;
+ font-family: 'Amatic SC', cursive;
+}
+
+body{
+ background-color: #F6F4F3;
+ color: #183059;
+ font-family: 'Josefin Sans', sans-serif;
+}
+
+footer{
+ text-align: center;
+ font-family: 'Josefin Sans', sans-serif;
+ position: fixed;
+ z-index: 1;
+ width: 100%;
+ bottom: 0;
+ background-color: #276FBF;
+ color: #FFFFFF;
+ opacity: 0.8
+}
+
+ul{
+ padding-left: 0;
+ padding-bottom: 20px;
+ list-style: none;
+}
+
+button{
+ padding-top: 5px;
+ border: none;
+ font: inherit;
+ color: inherit;
+ background-color: transparent;
+ cursor: pointer;
+ border-radius: 3px;
+}
+
+button:hover{
+ padding-top: 5px;
+ border: none;
+ font: inherit;
+ color: inherit;
+ transition: background-color 500ms;
+ background-color: #2B7CD8;
+ cursor: pointer;
+}
+
+p{
+ font-weight: bold;
+ padding-top: 15px;
+ padding-bottom: 15px;
+}
+
+#resetmapzoom{
+ margin-left: 15px;
+}
+
+#deleteButton:hover{
+ padding-top: 5px;
+ border: none;
+ font: inherit;
+ color: inherit;
+ transition: background-color 500ms;
+ background-color: #F03A47;
+ cursor: pointer;
+ border-radius: 3px;
+}
+
+#countryListContainer{
+ display: flex;
+ justify-content: center;
+}
+
+#countryList{
+ padding-top: 20px;
+ text-align: center;
+ max-width: 375px;
+ vertical-align: middle;
+}
+
+#countryDropDown{
+ margin: 10px;
+}
+
+#country_name{
+ cursor: pointer;
+ padding: 5px;
+}
+
+#country_name:hover{
+ cursor: pointer;
+ padding: 5px;
+ transition: background-color 500ms;
+ background-color: #2B7CD8;
+ border-radius: 3px;
+}
+
+#infoPane{
+ display: flex;
+ justify-content: center;
+}
+
#mapContainer {
height: 400px;
width: auto;
- margin-bottom: 2.5%;
+ margin-top: 15px;
+ margin-left: 15px;
+ margin-right: 15px;
+}
+
+#bucketListHeader {
+font-weight: bold;
+padding-top: 15px;
+padding-bottom: 15px;
+}
+
+#bucketListContainer{
+ text-align: center;
+ margin: 15px;
+ margin-bottom: 40px;
+ height: 300px;
+ width: 400px;
+ overflow: scroll;
+ background-color: #EFEEED;
+}
+
+#countryInfoHeader{
+font-weight: bold;
+padding-top: 15px;
+padding-bottom: 15px;
+}
+
+#furtherInfo{
+ text-align: center;
+ margin: 15px;
+ margin-bottom: 40px;
+ height: 300px;
+ width: 400px;
+ overflow: scroll;
+ background-color: #EFEEED;
}
diff --git a/client/src/app.js b/client/src/app.js
index d60136c..de59c9e 100644
--- a/client/src/app.js
+++ b/client/src/app.js
@@ -1,21 +1,90 @@
const BucketListView = require('./views/bucketListView.js');
const CountryListView = require('./views/countryListView.js');
const Request = require('./services/request.js');
+const MapWrapper = require('./views/mapWrapper.js');
const bucketListView = new BucketListView();
const countryListView = new CountryListView();
const countryRequest = new Request('https://restcountries.eu/rest/v2/all');
-const bucketRequest = new Request('http://localhost:300/api/bucket_countries');
+const bucketRequest = new Request('http://localhost:3000/api/bucket_countries');
+allCountries = [];
const getAllBucketListCountries = function(allCountries){
for(country of allCountries){
- bucketListView.addCountry(country);
+ bucketListView.render(country);
+ const coords = [country.latlng[0], country.latlng[1]];
+
+ mainMap.addMarker(coords, country);
}
}
+
+
+const pullCountriesFromCountriesAPI = function(countriesAPI){
+ for(country of countriesAPI){
+ allCountries.push(country);
+ }
+ countryListView.showListOfCountries(allCountries);
+}
+const handleSelected = function(countries){
+ let selectTag = document.getElementById('countryDropDown');
+
+ const country = allCountries[selectTag.value];
+ bucketListView.addCountry(country);
+ bucketRequest.post(country);
+
+ const coords = [country.latlng[0], country.latlng[1]];
+
+ mainMap.addMarker(coords, country);
+
+};
+
+
+const handleDeleteAllCountriesButton = function(allCountries){
+ bucketRequest.delete(deleteAllCountriesComplete);
+};
+
+const deleteAllCountriesComplete = function(){
+ bucketListView.clear();
+ mainMap.clearLayer
+}
+
+const handleResetMapZoomButton = function(){
+ const coords = [55.857236, -3.166804];
+ const zoom = 2;
+ mainMap.moveMap(coords, zoom);
+}
+
+
const appStart = function(){
+
+ console.log('Hello world!')
+ bucketRequest.get(getAllBucketListCountries);
+ countryRequest.get(pullCountriesFromCountriesAPI);
+
+ const addCountryButton = document.getElementById('addCountry');
+ addCountryButton.addEventListener('click', handleSelected);
+
+
+ const deleteAllCountriesButton = document.querySelector('#deleteButton');
+ deleteAllCountriesButton.addEventListener('click', handleDeleteAllCountriesButton);
+
+ const resetMapZoomButton = document.querySelector('#resetmapzoom')
+ resetMapZoomButton.addEventListener('click', handleResetMapZoomButton);
+
+
+ const osmLayer = new L.TileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png")
+ const containerID = "mapContainer";
+ const coords = [55.857236, -3.166804];
+ const zoom = 2;
+
+ mainMap = new MapWrapper(containerID, coords, zoom);
+ //markers = mainMap.markerClusterGroup();
+ //console.log(markers);
+
+
// request.get(getAllBucketListCountries);
request.get(countryRequest);
debugger;
diff --git a/client/src/services/request.js b/client/src/services/request.js
index 8615b10..59e7f89 100644
--- a/client/src/services/request.js
+++ b/client/src/services/request.js
@@ -2,7 +2,7 @@ const Request = function(url) {
this.url = url;
}
-Request.prototype.get = function (callback) {
+Request.prototype.get = function(callback) {
const request = new XMLHttpRequest();
request.open("GET", this.url);
request.addEventListener("load", function(){
@@ -15,7 +15,7 @@ Request.prototype.get = function (callback) {
request.send();
};
-Request.prototype.post = function(callback, body){
+Request.prototype.post = function(body){
const request = new XMLHttpRequest();
request.open("POST", this.url);
request.setRequestHeader("Content-Type", "application/json");
@@ -24,7 +24,7 @@ Request.prototype.post = function(callback, body){
return;
}
const responseBody = JSON.parse(this.responseText);
- callback(responseBody);
+ // callback(responseBody);
});
request.send(JSON.stringify(body));
}
diff --git a/client/src/views/bucketListView.js b/client/src/views/bucketListView.js
index 1c1c23c..dc88634 100644
--- a/client/src/views/bucketListView.js
+++ b/client/src/views/bucketListView.js
@@ -1,21 +1,38 @@
+const FurtherInfoView = require('./furtherInfoView.js');
+
var BucketListView = function(){
this.bucketLists = [];
}
BucketListView.prototype.addCountry = function(country){
this.bucketLists.push(country);
+
this.render(country);
}
-BucketListView.prototype.clear = function(){
+BucketListView.prototype.clear = function(country) {
this.bucketLists = [];
+ const ul = document.querySelector('#countries');
+ ul.innerHTML = '';
}
BucketListView.prototype.render = function(country){
const ul = document.querySelector('#countries');
const li = document.createElement('li');
+ li.id = 'country_name'
li.innerText = country.name;
ul.appendChild(li);
+ li.addEventListener('click', function(){
+ console.log("country has been clicked");
+ let furtherInfo = new FurtherInfoView();
+ furtherInfo.clearContent();
+ furtherInfo.render(country);
+
+ const coords = [country.latlng[0], country.latlng[1]];
+ const zoom = 6;
+ mainMap.moveMap(coords, zoom);
+ });
+
}
diff --git a/client/src/views/countryListView.js b/client/src/views/countryListView.js
index 138f932..12fc843 100644
--- a/client/src/views/countryListView.js
+++ b/client/src/views/countryListView.js
@@ -5,7 +5,7 @@ var countryListView = function(){
countryListView.prototype.showListOfCountries = function(countries){
console.log(countries);
- let selectTag = document.getElementById('countriesDropDown');
+ let selectTag = document.getElementById('countryDropDown');
countries.forEach(function(country, index){
let option = document.createElement('option');
diff --git a/client/src/views/furtherInfoView.js b/client/src/views/furtherInfoView.js
new file mode 100644
index 0000000..443784e
--- /dev/null
+++ b/client/src/views/furtherInfoView.js
@@ -0,0 +1,33 @@
+var FurtherInfoView = function(){
+ this.country = [];
+}
+
+FurtherInfoView.prototype.clearContent = function(){
+ let divTag = document.querySelector('#furtherInfo');
+ while (divTag.hasChildNodes()){
+ divTag.removeChild(divTag.lastChild);
+ }
+}
+
+FurtherInfoView.prototype.render = function(country){
+ let divTag = document.querySelector('#furtherInfo');
+ let header = document.createElement('p');
+ header.innerText = 'Country Info:';
+ divTag.appendChild(header);
+ const ul = document.createElement('ul');
+ const name = document.createElement('li');
+ name.innerText = `Name: ${country.name}`;
+ ul.appendChild(name);
+ const capital = document.createElement('li');
+ capital.innerText = `Capital: ${country.capital}`;
+ ul.appendChild(capital);
+ const language = document.createElement('li');
+ language.innerText = `Main Language: ${country.languages[0].name}`;
+ ul.appendChild(language);
+ const pop = document.createElement('li');
+ pop.innerText = `Population: ${country.population}`;
+ ul.appendChild(pop);
+ divTag.appendChild(ul);
+}
+
+module.exports = FurtherInfoView;
diff --git a/client/src/views/mapWrapper.js b/client/src/views/mapWrapper.js
index f1aacf5..9de0dcf 100644
--- a/client/src/views/mapWrapper.js
+++ b/client/src/views/mapWrapper.js
@@ -1,16 +1,24 @@
const MapWrapper = function(containerID, coords, zoom) {
- const osmLayer = new L.TileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png");
- this.map = L.map(containerID).setView(coords, zoom).addLayer(osmLayer);
+ const osmLayer = new L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.{ext}', {
+ attribution: 'Map tiles by
Stamen Design,
CC BY 3.0 — Map data ©
OpenStreetMap',
+ subdomains: 'abcd',
+ minZoom: 2,
+ maxZoom: 15,
+ ext: 'png'
+});
+ this.map = L.map(containerID).addLayer(osmLayer).setView(coords, zoom);
}
-MapWrapper.prototype.currentLocation = function (coords) {
- this.map.setView(coords);
-};
+// MapWrapper.prototype.currentLocation = function (coords) {
+// this.map.setView(coords);
+// };
-MapWrapper.prototype.moveMap = function (coords) {
- this.map.flyTo(coords);
+MapWrapper.prototype.moveMap = function (coords, zoom) {
+ this.map.flyTo(coords, zoom);
};
-MapWrapper.prototype.addMarker = function(coords){
- L.marker(coords).addTo(this.map);
+MapWrapper.prototype.addMarker = function(coords, country){
+ L.marker(coords).addTo(this.map).bindPopup(country.name);
}
+
+module.exports = MapWrapper;
diff --git a/db/seed.js b/db/seed.js
new file mode 100644
index 0000000..7c7a6c1
--- /dev/null
+++ b/db/seed.js
@@ -0,0 +1,58 @@
+use bucketdb;
+
+db.bucket_countries.insert([
+ {
+ name: 'Afghanistan',
+ capital: 'Kabul',
+ currency: 'Afghan afghani',
+ flag: 'https://restcountries.eu/data/afg.svg'
+ },
+ {
+ name: 'Albania',
+ capital: 'Tirana',
+ currency: 'Albanian lek',
+ flag: 'https://restcountries.eu/data/alb.svg'
+ },
+ {
+ name: 'Czech Republic',
+ capital: 'Prague',
+ currency: 'Czech koruna',
+ flag: 'https://restcountries.eu/data/cze.svg'
+ },
+ {
+ name: 'Eritrea',
+ capital: 'Asmara',
+ currency: 'Eritrean nakfa',
+ flag: 'https://restcountries.eu/data/eri.svg'
+ },
+ {
+ name: 'Holy See',
+ capital: 'Rome',
+ currency: 'Euro',
+ flag: 'https://restcountries.eu/data/vat.svg'
+ },
+ {
+ name: 'India',
+ capital: 'New Delhi',
+ currency: 'Indian rupee',
+ flag: 'https://restcountries.eu/data/ind.svg'
+ },
+ {
+ name: 'Iran',
+ capital: 'Tehran',
+ currency: 'Iranian rial',
+ flag: 'https://restcountries.eu/data/irn.svg'
+ },
+ {
+ name: 'Isle of Man',
+ capital: 'Douglas',
+ currency: 'British pound',
+ flag: 'https://restcountries.eu/data/imn.svg'
+ },
+ {
+ name: 'Jamaica',
+ capital: 'Kingston',
+ currency: 'Jamaican dollar',
+ flag: 'https://restcountries.eu/data/jam.svg'
+ }
+])