Feature/further info

client/build/bundle.js

@@ -93,7 +93,9 @@
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
 
-eval("const BucketListView = __webpack_require__(/*! ./views/bucketListView.js */ \"./client/src/views/bucketListView.js\");\nconst CountryListView = __webpack_require__(/*! ./views/countryListView.js */ \"./client/src/views/countryListView.js\");\nconst Request = __webpack_require__(/*! ./services/request.js */ \"./client/src/services/request.js\");\n\nconst bucketListView = new BucketListView();\nconst countryListView = new CountryListView();\n\nconst countryRequest = new Request('https://restcountries.eu/rest/v2/all');\nconst bucketRequest = new Request('http://localhost:300/api/bucket_countries');\n\n\nconst getAllBucketListCountries = function(allCountries){\n  for(country of allCountries){\n    bucketListView.addCountry(country);\n  }\n}\n\nconst appStart = function(){\n  // request.get(getAllBucketListCountries);\n  request.get(countryRequest);\n  debugger;\n}\n\ndocument.addEventListener('DOMContentLoaded', appStart);\n\n\n//# sourceURL=webpack:///./client/src/app.js?");
+
+eval("const BucketListView = __webpack_require__(/*! ./views/bucketListView.js */ \"./client/src/views/bucketListView.js\");\nconst CountryListView = __webpack_require__(/*! ./views/countryListView.js */ \"./client/src/views/countryListView.js\");\nconst Request = __webpack_require__(/*! ./services/request.js */ \"./client/src/services/request.js\");\nconst MapWrapper = __webpack_require__(/*! ./views/mapWrapper.js */ \"./client/src/views/mapWrapper.js\");\n\nconst bucketListView = new BucketListView();\nconst countryListView = new CountryListView();\n\nconst countryRequest = new Request('https://restcountries.eu/rest/v2/all');\nconst bucketRequest = new Request('http://localhost:3000/api/bucket_countries');\n\nallCountries = [];\n\nconst getAllBucketListCountries = function(allCountries){\n  for(country of allCountries){\n    bucketListView.render(country);\n    const coords = [country.latlng[0], country.latlng[1]];\n\n    mainMap.addMarker(coords, country);\n  }\n}\n\n\n\nconst pullCountriesFromCountriesAPI = function(countriesAPI){\n  for(country of countriesAPI){\n    allCountries.push(country);\n  }\n  countryListView.showListOfCountries(allCountries);\n}\nconst handleSelected = function(countries){\n  let selectTag = document.getElementById('countryDropDown');\n\n  const country = allCountries[selectTag.value];\n  bucketListView.addCountry(country);\n  bucketRequest.post(country);\n\n  const coords = [country.latlng[0], country.latlng[1]];\n\n  mainMap.addMarker(coords, country);\n\n};\n\n\nconst handleDeleteAllCountriesButton = function(allCountries){\n  bucketRequest.delete(deleteAllCountriesComplete);\n};\n\nconst deleteAllCountriesComplete = function(){\n  bucketListView.clear();\n  mainMap.clearLayer\n}\n\nconst handleResetMapZoomButton = function(){\n  const coords = [55.857236, -3.166804];\n  const zoom = 2;\n  mainMap.moveMap(coords, zoom);\n}\n\n\nconst appStart = function(){\n  console.log('Hello world!')\n  bucketRequest.get(getAllBucketListCountries);\n  countryRequest.get(pullCountriesFromCountriesAPI);\n\n  const addCountryButton = document.getElementById('addCountry');\n  addCountryButton.addEventListener('click', handleSelected);\n\n\n  const deleteAllCountriesButton = document.querySelector('#deleteButton');\n  deleteAllCountriesButton.addEventListener('click', handleDeleteAllCountriesButton);\n\n  const resetMapZoomButton = document.querySelector('#resetmapzoom')\n  resetMapZoomButton.addEventListener('click', handleResetMapZoomButton);\n\n\n  const osmLayer = new L.TileLayer(\"http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\")\n  const containerID = \"mapContainer\";\n  const coords = [55.857236, -3.166804];\n  const zoom = 2;\n\n  mainMap = new MapWrapper(containerID, coords, zoom);\n  //markers = mainMap.markerClusterGroup();\n  //console.log(markers);\n\n}\n\ndocument.addEventListener('DOMContentLoaded', appStart);\n\n\n//# sourceURL=webpack:///./client/src/app.js?");
+
 
 /***/ }),
 
@@ -104,7 +106,7 @@ eval("const BucketListView = __webpack_require__(/*! ./views/bucketListView.js *
 /*! no static exports found */
 /***/ (function(module, exports) {
 
-eval("const Request = function(url) {\n  this.url = url;\n}\n\nRequest.prototype.get = function (callback) {\n  const request = new XMLHttpRequest();\n  request.open(\"GET\", this.url);\n  request.addEventListener(\"load\", function(){\n    if(this.status !== 200){\n      return;\n    }\n    const responseBody = JSON.parse(this.responseText);\n    callback(responseBody);\n  });\n  request.send();\n};\n\nRequest.prototype.post = function(callback, body){\n  const request = new XMLHttpRequest();\n  request.open(\"POST\", this.url);\n  request.setRequestHeader(\"Content-Type\", \"application/json\");\n  request.addEventListener(\"load\", function(){\n    if(this.status !== 201){\n      return;\n    }\n    const responseBody = JSON.parse(this.responseText);\n    callback(responseBody);\n  });\n  request.send(JSON.stringify(body));\n}\n\nRequest.prototype.delete = function(callback){\n  const request = new XMLHttpRequest();\n  request.open(\"DELETE\", this.url);\n  request.addEventListener(\"load\", function(){\n    if(this.status !== 204){\n      return;\n    }\n    callback();\n  })\n  request.send();\n}\n\nmodule.exports = Request;\n\n\n//# sourceURL=webpack:///./client/src/services/request.js?");
+eval("const Request = function(url) {\n  this.url = url;\n}\n\nRequest.prototype.get = function(callback) {\n  const request = new XMLHttpRequest();\n  request.open(\"GET\", this.url);\n  request.addEventListener(\"load\", function(){\n    if(this.status !== 200){\n      return;\n    }\n    const responseBody = JSON.parse(this.responseText);\n    callback(responseBody);\n  });\n  request.send();\n};\n\nRequest.prototype.post = function(body){\n  const request = new XMLHttpRequest();\n  request.open(\"POST\", this.url);\n  request.setRequestHeader(\"Content-Type\", \"application/json\");\n  request.addEventListener(\"load\", function(){\n    if(this.status !== 201){\n      return;\n    }\n    const responseBody = JSON.parse(this.responseText);\n    // callback(responseBody);\n  });\n  request.send(JSON.stringify(body));\n}\n\nRequest.prototype.delete = function(callback){\n  const request = new XMLHttpRequest();\n  request.open(\"DELETE\", this.url);\n  request.addEventListener(\"load\", function(){\n    if(this.status !== 204){\n      return;\n    }\n    callback();\n  })\n  request.send();\n}\n\nmodule.exports = Request;\n\n\n//# sourceURL=webpack:///./client/src/services/request.js?");
 
 /***/ }),
 
@@ -113,9 +115,9 @@ eval("const Request = function(url) {\n  this.url = url;\n}\n\nRequest.prototype
   !*** ./client/src/views/bucketListView.js ***!
   \********************************************/
 /*! no static exports found */
-/***/ (function(module, exports) {
+/***/ (function(module, exports, __webpack_require__) {
 
-eval("var BucketListView = function(){\n  this.bucketLists = [];\n}\n\nBucketListView.prototype.addCountry = function(country){\n  this.bucketLists.push(country);\n  this.render(country);\n}\n\nBucketListView.prototype.clear = function(){\n  this.bucketLists = [];\n}\n\nBucketListView.prototype.render = function(country){\n  const ul = document.querySelector('#countries');\n  const li = document.createElement('li');\n  li.innerText = country.name;\n  ul.appendChild(li);\n}\n\n\nmodule.exports = BucketListView;\n\n\n//# sourceURL=webpack:///./client/src/views/bucketListView.js?");
+eval("const FurtherInfoView = __webpack_require__(/*! ./furtherInfoView.js */ \"./client/src/views/furtherInfoView.js\");\n\nvar BucketListView = function(){\n  this.bucketLists = [];\n}\n\nBucketListView.prototype.addCountry = function(country){\n  this.bucketLists.push(country);\n\n  this.render(country);\n}\n\nBucketListView.prototype.clear = function(country) {\n  this.bucketLists = [];\n  const ul = document.querySelector('#countries');\n  ul.innerHTML = '';\n}\n\nBucketListView.prototype.render = function(country){\n  const ul = document.querySelector('#countries');\n  const li = document.createElement('li');\n  li.id = 'country_name'\n  li.innerText = country.name;\n  ul.appendChild(li);\n  li.addEventListener('click', function(){\n    console.log(\"country has been clicked\");\n    let furtherInfo = new FurtherInfoView();\n    furtherInfo.clearContent();\n    furtherInfo.render(country);\n\n    const coords = [country.latlng[0], country.latlng[1]];\n    const zoom = 6;\n    mainMap.moveMap(coords, zoom);\n  });\n\n}\n\n\nmodule.exports = BucketListView;\n\n\n//# sourceURL=webpack:///./client/src/views/bucketListView.js?");
 
 /***/ }),
 
@@ -126,7 +128,29 @@ eval("var BucketListView = function(){\n  this.bucketLists = [];\n}\n\nBucketLis
 /*! no static exports found */
 /***/ (function(module, exports) {
 
-eval("var countryListView = function(){\n  this.countries = [];\n}\n\ncountryListView.prototype.showListOfCountries = function(countries){\n  console.log(countries);\n\n  let selectTag = document.getElementById('countriesDropDown');\n\n  countries.forEach(function(country, index){\n    let option = document.createElement('option');\n    option.value = index;\n    option.innerText = country.name;\n    selectTag.appendChild(option);\n  });\n};\n\n\n//Copy to app.js\n// countryListView.prototype.handleSelected = function(countries){\n//   let selectTag = document.getElementById('countriesDropDown');\n//   selectTag.addEventListener('change', function(){\n//     const country = countries[this.value];\n//     console.log(country);\n//     bucketLists.render(country);\n//\n//     const coords = [country.latlng[0], country.latlng[1]];\n//     map.addMarker(coords);\n//   });\n// };\n\nmodule.exports = countryListView;\n\n\n//# sourceURL=webpack:///./client/src/views/countryListView.js?");
+eval("var countryListView = function(){\n  this.countries = [];\n}\n\ncountryListView.prototype.showListOfCountries = function(countries){\n  console.log(countries);\n\n  let selectTag = document.getElementById('countryDropDown');\n\n  countries.forEach(function(country, index){\n    let option = document.createElement('option');\n    option.value = index;\n    option.innerText = country.name;\n    selectTag.appendChild(option);\n  });\n};\n\n\n//Copy to app.js\n// countryListView.prototype.handleSelected = function(countries){\n//   let selectTag = document.getElementById('countriesDropDown');\n//   selectTag.addEventListener('change', function(){\n//     const country = countries[this.value];\n//     console.log(country);\n//     bucketLists.render(country);\n//\n//     const coords = [country.latlng[0], country.latlng[1]];\n//     map.addMarker(coords);\n//   });\n// };\n\nmodule.exports = countryListView;\n\n\n//# sourceURL=webpack:///./client/src/views/countryListView.js?");
+
+/***/ }),
+
+/***/ "./client/src/views/furtherInfoView.js":
+/*!*********************************************!*\
+  !*** ./client/src/views/furtherInfoView.js ***!
+  \*********************************************/
+/*! no static exports found */
+/***/ (function(module, exports) {
+
+eval("var FurtherInfoView = function(){\n  this.country = [];\n}\n\nFurtherInfoView.prototype.clearContent = function(){\n  let divTag = document.querySelector('#furtherInfo');\n  while (divTag.hasChildNodes()){\n    divTag.removeChild(divTag.lastChild);\n  }\n}\n\nFurtherInfoView.prototype.render = function(country){\n  let divTag = document.querySelector('#furtherInfo');\n  let header = document.createElement('p');\n  header.innerText = 'Country Info:';\n  divTag.appendChild(header);\n  const ul = document.createElement('ul');\n  const name = document.createElement('li');\n  name.innerText = `Name: ${country.name}`;\n  ul.appendChild(name);\n  const capital = document.createElement('li');\n  capital.innerText = `Capital: ${country.capital}`;\n  ul.appendChild(capital);\n  const language = document.createElement('li');\n  language.innerText = `Main Language: ${country.languages[0].name}`;\n  ul.appendChild(language);\n  const pop = document.createElement('li');\n  pop.innerText = `Population: ${country.population}`;\n  ul.appendChild(pop);\n  divTag.appendChild(ul);\n}\n\nmodule.exports = FurtherInfoView;\n\n\n//# sourceURL=webpack:///./client/src/views/furtherInfoView.js?");
+
+/***/ }),
+
+/***/ "./client/src/views/mapWrapper.js":
+/*!****************************************!*\
+  !*** ./client/src/views/mapWrapper.js ***!
+  \****************************************/
+/*! no static exports found */
+/***/ (function(module, exports) {
+
+eval("const MapWrapper = function(containerID, coords, zoom) {\n  const osmLayer = new L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.{ext}', {\n\tattribution: 'Map tiles by <a href=\"http://stamen.com\">Stamen Design</a>, <a href=\"http://creativecommons.org/licenses/by/3.0\">CC BY 3.0</a> &mdash; Map data &copy; <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a>',\n\tsubdomains: 'abcd',\n\tminZoom: 2,\n\tmaxZoom: 15,\n\text: 'png'\n});\n  this.map = L.map(containerID).addLayer(osmLayer).setView(coords, zoom);\n}\n\n// MapWrapper.prototype.currentLocation = function (coords) {\n//   this.map.setView(coords);\n// };\n\nMapWrapper.prototype.moveMap = function (coords, zoom) {\n this.map.flyTo(coords, zoom);\n};\n\nMapWrapper.prototype.addMarker = function(coords, country){\n  L.marker(coords).addTo(this.map).bindPopup(country.name);\n}\n\nmodule.exports = MapWrapper;\n\n\n//# sourceURL=webpack:///./client/src/views/mapWrapper.js?");
 
 /***/ })
 

client/build/index.html

@@ -3,36 +3,45 @@
 <head>
   <meta charset="utf-8">
   <title>Countries Project</title>
+  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
+  integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
+  crossorigin=""/>
+  <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
+  integrity="sha512-tAGcCfR4Sc5ZP5ZoVz0quoZDYX5aCtEm/eu1KhSLj2c9eFrylXZknQYmxUssFaVJKvvc0dJQixhGjG2yXWiV9Q=="
+  crossorigin=""></script>
+  <link href="https://fonts.googleapis.com/css?family=Amatic+SC|Josefin+Sans" rel="stylesheet">
   <link rel="stylesheet" href="styles.css">
   <script src="bundle.js"></script>
 </head>
-<body>
-  <h1>Bucketlist</h1>
 
-  <div id="countryList">
-    <p>
-      Select a country to add to your Bucketlist:
-    </p>
-    <select id= 'countryDropDown'></select>
-    <button id='addCountry' type="submit">Add Country</button>
-  </div>
+<header><h1>Bucket List</h1>
+</header>
 
-  <div id="bucketListContainer">
-    <p>
-      Countries you wish to visit:
-    </p>
-    <ul id="countries">
-      country name
-      <br />
-      country capital
-      <br />
-      country currency
-      <br />
-      delete button
-    </ul>
+<body>
+  <div id ='countryListContainer'>
+    <div id="countryList">
+      <p>
+        Please select a country to add to your Bucketlist!
+      </p>
+      <select id= 'countryDropDown'></select>
+      <button id='addCountry' type="submit">Add Country</button>
+    </div>
   </div>
-  <div id="mapContainer">
 
+  <div id="mapContainer"></div>
+<button id="resetmapzoom" type="submit">Reset Zoom</button>
+  <div id= "infoPane">
+
+    <div id="bucketListContainer">
+      <p id = "bucketListHeader">Countries List:</p>
+      <ul id="countries"></ul>
+      <button id="deleteButton" type="submit">Delete List</button></div>
+    <div id='furtherInfo'>
+      <p id ='countryInfoHeader'>Country Info:</p>
+    </div>
   </div>
+
 </body>
+
+<footer><p>Created by Angelina Blyth, Roddy Daly and Peter Whittle.</p></footer>
 </html>

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;
 }