new DATA sample

.eslintrc

@@ -12,6 +12,7 @@
  "strict": [2, "global"],
  "no-unused-vars": [2, { "args": "none" }],
  "no-labels": 0,
+ "semi": 2,
  "no-empty-label": 0,
  "no-alert": 2,
  "no-console": 1,

.gitignore

@@ -11,6 +11,9 @@ npm-debug.log
 # *Sublime
 *.sublime-*
 
+#vscode
+.vscode
+
 #jasmine-npm generate
 .grunt
 

samples/data/index.html

@@ -63,12 +63,22 @@ <h2 class="header_title">Data Sample</h2>
  <div class="panel places">
  {{#each items}}
  <section class="place_preview j-place" data-id="{{_id}}">
+ {{#if media}}
+ <div class="place_preview__preview">
+ <img class="img" src="{{getPreviewUrl media}}" alt="{{title}}">
+ </div>
+ {{/if}}
+
  <h5 class="place_preview__title">{{title}}</h5>
  <p class="rate">{{rate}}</p>
  <p class="place_preview__description">{{description}}</p>
  </section>
  {{else}}
- <p class="place_preview place_preview-inactive txt-warn">No places saved, tap somewhere on the map for creating a new place.</p>
+ <section class="empty_state">
+ <img class="empty_state__img" src="https://samples.quickblox.com/web/resources/empty_state.gif" alt="empty state of list places">
+ <h5 class="empty_state__title">No places saved.</h5>
+ <p class="empty_state__desc">Tap somewhere on the map for creating a new place.</p>
+ </section>
  {{/each}}
  </div>
  </script>
@@ -98,6 +108,15 @@ <h2 class="panel__title">Create a new place</h2>
  <input id="rate" class="inp" type="number" min="0" max="5" step="0.1" value="0" required>
  </div>
 
+ <div class="form_item" class="form_item form_item-media">
+ <p class="form_label">Add Media</p>
+
+ <div class="form_media_wrap" id="media_wrap">
+ <label for="media" class="form_label--media"></label>
+ <input id="media" class="form_media j-media" multiple type="file" accept="image/*">
+ </div>
+ </div>
+
  <div class="form_item">
  <button class="btn btn-action">Create Place</button>
  </div>
@@ -117,6 +136,17 @@ <h2 class="panel__title">{{title}}</h2>
  <div class="place__action">
  <button class="btn btn-action" id="j-checkin">Check in</button>
  </div>
+
+ {{#if media}}
+ <div class="carousel siema">
+ {{#each media}}
+ <div class="place__img_wrap">
+ <img class="place__img" src="{{getImageUrl this}}">
+ </div>
+ {{/each}}
+ </div>
+ {{/if}}
+
  <div class="place__section">
  <h4 class="h4">Description</h4>
  <p>{{description}}</p>
@@ -180,16 +210,20 @@ <h4 class="form__title">Check in</h4>
  </div>
 
  <!-- Helper libraries -->
- <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAOlglXqBHw1T0G5x1UoVD3sP7FB3wWc6I"></script>
+ <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDxg7dFxOIQWCUEBCrUAnU3qf5Xm-ejb0E"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.js"></script>
- <!-- Quickblox SDK -->
+ <script src="https://unpkg.com/siema@1.4.6"></script>
+ <!-- Quickblox SDK, uses as global variable QB -->
  <script src="../../quickblox.min.js"></script>
  <!-- APP -->
  <script src="config.js"></script>
+
+ <script src="./js/handlebars_helpers.js"></script>
  <script src="./js/user.js"></script>
- <script src="./js/map.js"></script>
  <script src="./js/places.js"></script>
+ <script src="./js/map.js"></script> 
  <script src="./js/checkin.js"></script>
+ <script src="./js/content.js"></script>
  <script src="./js/app.js"></script>
 </body>
 </html>

samples/data/js/app.js

@@ -2,34 +2,35 @@
 
 /* eslint no-alert: "off" */
 /* eslint no-console: "off" */
-/* global QB_CREDS:true, QB_CONFIG:true, User:true, Places:true, Map:true, Handlebars:true */
+/* global QB_CREDS:true, QB_CONFIG:true, User:true, Places:true, Checkin:true, WMap:true, Handlebars:true, Content:true, Siema:true */
 
 function App() {
  this.ui = {
  'map': 'j-map',
  'panel': 'j-panel',
  'header': 'j-header',
  'overlay': 'j-overlay'
- }
+ };
 
  // root el
  this.$app = document.getElementById('j-app');
 
  this.map;
+
  this.user = new User();
  this.places = new Places();
  this.checkin = new Checkin();
 
  /* Write to root element a class name of page by set activePage */
- this._activePages = ['dashboard', 'new_place', 'place_detailed', 'checkin'];
+ this._PAGES = ['dashboard', 'new_place', 'place_detailed', 'checkin'];
 
  Object.defineProperty(this, 'activePage', {
  set: function(params) {
  var self = this;
 
  // Set a class (pageName) to root el of app
  // Remove all previously options
- self._activePages.forEach(function(pName) {
+ self._PAGES.forEach(function(pName) {
  self.$app.classList.remove(pName);
  });
  // set a name of current page
@@ -48,38 +49,36 @@ App.prototype._init = function() {
 
  // init the SDK, be careful the SDK must init one time
  QB.init(QB_CREDS.appId, QB_CREDS.authKey, QB_CREDS.authSecret, QB_CONFIG);
-
  // create a session
  QB.createSession(function() {
  // sync user and places from server
  Promise.all([self.user.auth(), self.places.sync()]).then(function() {
  // render skeleton of app
  self.$app.innerHTML = document.getElementById('app-tpl').innerHTML;
+
  // render the map and set listener
- self.map = new Map({
+ self.map = new WMap({
  'el': document.getElementById(self.ui.map),
  'draftNewPlace': function() {
  self.activePage = { pageName: 'new_place' };
  }
  });
  self.map.getAndSetUserLocation();
 
- self.activePage = {
- pageName: 'dashboard'
- };
+ self.activePage = { pageName: 'dashboard' };
  }).catch(function(err) {
  console.error(err);
  alert('Something goes wrong, checkout late.');
  });
  });
-}
+};
 
 App.prototype.renderPage = function(pageName, detailed) {
  var self = this;
 
  switch(pageName) {
  case 'dashboard':
- self.renderDashboard()
+ self.renderDashboard();
  break;
  case 'new_place':
  self.renderCreatePlace();
@@ -91,14 +90,14 @@ App.prototype.renderPage = function(pageName, detailed) {
  self.renderCheckin(detailed);
  break;
  }
-}
+};
 
 App.prototype.renderView = function(idTpl, options) {
  var source = document.getElementById(idTpl).innerHTML;
  var tpl = Handlebars.compile(source);
 
  return tpl(options);
-}
+};
 
 App.prototype.renderDashboard = function() {
  var self = this;
@@ -116,7 +115,7 @@ App.prototype.renderDashboard = function() {
  self.map.removeAllPlaces();
  self.map.activePlace = null;
  self.map.setPlaces(self.places.items);
-}
+};
 
 App.prototype._setListenersHeader = function() {
  var self = this;
@@ -126,7 +125,7 @@ App.prototype._setListenersHeader = function() {
  self.user.logout();
  document.location.reload(true);
  });
-}
+};
 
 App.prototype._setListenersPlacesPreview = function() {
  var self = this;
@@ -140,15 +139,15 @@ App.prototype._setListenersPlacesPreview = function() {
  self.activePage = {
  pageName: 'place_detailed',
  detailed: $item.dataset.id
- }
+ };
  }
 
  if(placesAmount) {
  for(var i = 0, l = (placesAmount - 1); i <= l; i++) {
  $places[i].addEventListener('click', showPlace);
  }
  }
-}
+};
 
 App.prototype.renderCreatePlace = function() {
  var self = this;
@@ -164,14 +163,15 @@ App.prototype.renderCreatePlace = function() {
  var $panel = document.getElementById(self.ui.panel);
  $panel.innerHTML = self.renderView('new_place-tpl', {'latLng': JSON.stringify(latLng)});
  self._setListenersPlacesNew();
-}
+};
 
 App.prototype._setListenersPlacesNew = function() {
  var self = this;
 
  var ui = {
  backBtn: 'j-to_dashboard',
- createPlaceForm: 'j-create'
+ createPlaceForm: 'j-create',
+ uploadImage: 'j-media'
  };
 
  document.getElementById(ui.backBtn).addEventListener('click', function(e) {
@@ -184,6 +184,31 @@ App.prototype._setListenersPlacesNew = function() {
  };
  });
 
+ var uploadImageInp = document.querySelector('.' + ui.uploadImage);
+ var mediaWrap = document.getElementById('media_wrap');
+
+ uploadImageInp.addEventListener('change', function(e) {
+ e.preventDefault();
+
+ for (var i = 0; i < uploadImageInp.files.length; i++) {
+ var file = uploadImageInp.files[i];
+
+ var imgWrap = document.createElement('div');
+ imgWrap.classList.add('form__img_preview');
+
+ var img = document.createElement('img');
+ img.classList.add('form__img');
+ img.file = file;
+
+ imgWrap.appendChild(img);
+ mediaWrap.appendChild(imgWrap);
+
+ var reader = new FileReader();
+ reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
+ reader.readAsDataURL(file);
+ }
+ });
+
  document.getElementById(ui.createPlaceForm).addEventListener('submit', function(e) {
  e.preventDefault();
 
@@ -199,22 +224,40 @@ App.prototype._setListenersPlacesNew = function() {
  rate: +rate,
  };
 
- self.places.create(dataInfo).then(function(res) {
- self.map.setPlaces(res);
- self.map.removeSketchedPlace();
+ var listPromises = [];
 
- self.activePage = {
- pageName: 'place_detailed',
- detailed: res._id
- };
- }).catch(function(err) {
- // User is unauthorized
- if(err.code === 401) {
- document.location.reload(true);
+ function _createPlace(data) {
+ self.places.create(dataInfo).then(function(res) {
+ self.map.setPlaces(res);
+ self.map.removeSketchedPlace();
+
+ self.activePage = {
+ pageName: 'place_detailed',
+ detailed: res._id
+ };
+ }).catch(function(err) {
+ // User is unauthorized
+ if(err.code === 401) {
+ document.location.reload(true);
+ }
+ });
+ }
+
+ if(uploadImageInp.files.length) {
+ for (var i = 0; i < uploadImageInp.files.length; i++) {
+ var file = uploadImageInp.files[i];
+ listPromises.push(new Content(file));
  }
- });
+
+ Promise.all(listPromises).then(function(uids) {
+ dataInfo.media = uids;
+ _createPlace(dataInfo);
+ });
+ } else {
+ _createPlace(dataInfo);
+ }
  });
-}
+};
 
 App.prototype.renderPlaceDetailed = function(placeId) {
  var self = this;
@@ -230,6 +273,12 @@ App.prototype.renderPlaceDetailed = function(placeId) {
  var $panel = document.getElementById(self.ui.panel);
  $panel.innerHTML = self.renderView('place_detailed-tpl', placeInfo);
 
+ if(placeInfo.media !== null && placeInfo.media.length) {
+ var mySiema = new Siema({
+ perPage: 3
+ });
+ } 
+
  self.map.activePlace = placeId;
 
  this.checkin.get({'_parent_id': placeId}).then(function(checkins) {
@@ -253,9 +302,9 @@ App.prototype.renderPlaceDetailed = function(placeId) {
  self.activePage = {
  pageName: 'checkin',
  detailed: placeId
- }
+ };
  });
-}
+};
 
 App.prototype.renderCheckin = function(placeId) {
  var self = this;
@@ -294,7 +343,7 @@ App.prototype.renderCheckin = function(placeId) {
  pageName: 'place_detailed',
  detailed: res._id
  };
- })
+ });
  }).catch(function(err) {
  console.error(err);
  });
@@ -307,9 +356,8 @@ App.prototype.renderCheckin = function(placeId) {
  pageName: 'place_detailed',
  detailed: placeId
  };
- })
-}
-
+ });
+};
 
 // this rule only for this line
 /* eslint no-unused-vars:0 */