From a2f3194b4b03bc969ee70df3e51bcf36a8055a33 Mon Sep 17 00:00:00 2001 From: Connor Turland Date: Wed, 24 Aug 2016 01:39:31 +0000 Subject: [PATCH] access maps that are live --- app/assets/stylesheets/clean.css.erb | 12 +++++++++++ app/controllers/explore_controller.rb | 9 +++++++++ app/controllers/maps_controller.rb | 2 +- app/views/maps/livemaps.html.erb | 12 +++++++++++ config/routes.rb | 1 + frontend/src/Metamaps/GlobalUI/index.js | 1 + frontend/src/Metamaps/Realtime.js | 17 ++++++++++++++++ frontend/src/Metamaps/Router.js | 5 +++-- frontend/src/components/Header.js | 9 ++++++++- frontend/src/components/Maps.js | 7 +++++-- realtime/realtime-server.js | 27 +++++++++++++++++++++++-- 11 files changed, 94 insertions(+), 8 deletions(-) create mode 100644 app/views/maps/livemaps.html.erb diff --git a/app/assets/stylesheets/clean.css.erb b/app/assets/stylesheets/clean.css.erb index b41f14ca..28cc986f 100644 --- a/app/assets/stylesheets/clean.css.erb +++ b/app/assets/stylesheets/clean.css.erb @@ -751,6 +751,10 @@ background-image: url(<%= asset_data_uri 'exploremaps_sprite.png' %>); background-position: 0 0; } +.exploreMapsCenter .liveMaps .exploreMapsIcon { + background-image: url(<%= asset_data_uri 'exploremaps_sprite.png' %>); + background-position: -32px 0; +} .exploreMapsCenter .featuredMaps .exploreMapsIcon { background-image: url(<%= asset_data_uri 'exploremaps_sprite.png' %>); background-position: -96px 0; @@ -774,12 +778,20 @@ .sharedMaps:hover .exploreMapsIcon, .sharedMaps.active .exploreMapsIcon { background-position: -128px -32px; } +.liveMaps:hover .exploreMapsIcon, .liveMaps.active .exploreMapsIcon { + background-position: -32px -32px; +} .mapsWrapper { /*overflow-y: auto; */ padding: 32px 32px 56px 32px; } +.noMaps { + text-align: center; + padding-top: 40px; +} + /* end explore maps */ /* instructions */ diff --git a/app/controllers/explore_controller.rb b/app/controllers/explore_controller.rb index 59045d5d..3fce0cf9 100644 --- a/app/controllers/explore_controller.rb +++ b/app/controllers/explore_controller.rb @@ -61,6 +61,15 @@ class ExploreController < ApplicationController end end + # GET /explore/live + def live + @maps = map_scope(Map) + + respond_to do |format| + format.html + end + end + # GET /explore/mapper/:id def mapper @user = User.find(params[:id]) diff --git a/app/controllers/maps_controller.rb b/app/controllers/maps_controller.rb index 8d4c6e27..bc0d0387 100644 --- a/app/controllers/maps_controller.rb +++ b/app/controllers/maps_controller.rb @@ -71,7 +71,7 @@ class MapsController < ApplicationController end end end - + # DELETE maps/:id def destroy @map.delete diff --git a/app/views/maps/livemaps.html.erb b/app/views/maps/livemaps.html.erb new file mode 100644 index 00000000..c8ed84c8 --- /dev/null +++ b/app/views/maps/livemaps.html.erb @@ -0,0 +1,12 @@ +<% # + # @file + # Shows a list of current user's maps + # GET /explore/mine(.:format) + # %> + + diff --git a/config/routes.rb b/config/routes.rb index 13b2a5ba..81d1ca37 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -11,6 +11,7 @@ Metamaps::Application.routes.draw do get 'mine' get 'shared' get 'starred' + get 'live' get 'mapper/:id', action: 'mapper' end diff --git a/frontend/src/Metamaps/GlobalUI/index.js b/frontend/src/Metamaps/GlobalUI/index.js index 3b16375e..2cb775ff 100644 --- a/frontend/src/Metamaps/GlobalUI/index.js +++ b/frontend/src/Metamaps/GlobalUI/index.js @@ -54,6 +54,7 @@ const GlobalUI = { Metamaps.Maps.Mapper = new Metamaps.Backbone.MapsCollection(mapperCollection, mapperOptionsObj) Metamaps.Maps.Featured = new Metamaps.Backbone.MapsCollection(featuredCollection, { id: 'featured', sortBy: 'updated_at' }) Metamaps.Maps.Active = new Metamaps.Backbone.MapsCollection(activeCollection, { id: 'active', sortBy: 'updated_at' }) + Metamaps.Maps.Live = new Metamaps.Backbone.MapsCollection([], { id: 'live', sortBy: 'name' }) }, showDiv: function (selector) { $(selector).show() diff --git a/frontend/src/Metamaps/Realtime.js b/frontend/src/Metamaps/Realtime.js index 608523c8..9277a8e3 100644 --- a/frontend/src/Metamaps/Realtime.js +++ b/frontend/src/Metamaps/Realtime.js @@ -48,6 +48,7 @@ const Realtime = { console.log('connected') if (!self.disconnected) { self.startActiveMap() + self.subscribeToLiveMaps() } else self.disconnected = false }) self.socket.on('disconnect', function () { @@ -101,6 +102,21 @@ const Realtime = { $('body').prepend(self.room.chat.$container) } // if Active.Mapper }, + subscribeToLiveMaps: function () { + var self = Metamaps.Realtime + // Handles livemaps array on the UI + self.socket.emit('requestLiveMaps') + self.socket.on('receiveLiveMaps', function (maps) { + Metamaps.Maps.Live.add(maps) + }) + self.socket.on('map_went_live', function (map) { + Metamaps.Maps.Live.add(map) + }) + self.socket.on('map_no_longer_live', function (data) { + var map = Metamaps.Maps.Live.get(data.id) + Metamaps.Maps.Live.remove(map) + }) + }, addJuntoListeners: function () { var self = Realtime @@ -488,6 +504,7 @@ const Realtime = { username: Active.Mapper.get('name'), userimage: Active.Mapper.get('image'), mapid: Active.Map.id + map: Active.Map.attributes }) socket.on(myId + '-' + Active.Map.id + '-invitedToCall', self.invitedToCall) // new call diff --git a/frontend/src/Metamaps/Router.js b/frontend/src/Metamaps/Router.js index 8bcd3590..de197049 100644 --- a/frontend/src/Metamaps/Router.js +++ b/frontend/src/Metamaps/Router.js @@ -84,7 +84,8 @@ const _Router = Backbone.Router.extend({ // either 'featured', 'mapper', or 'active' var capitalize = section.charAt(0).toUpperCase() + section.slice(1) - if (section === 'shared' || section === 'featured' || section === 'active' || section === 'starred') { + const sections = ['shared', 'featured', 'active', 'starred', 'live'] + if (sections.indexOf(section) !== -1) { document.title = 'Explore ' + capitalize + ' Maps | Metamaps' } else if (section === 'mapper') { $.ajax({ @@ -131,7 +132,7 @@ const _Router = Backbone.Router.extend({ var navigateTimeout = function () { self.timeoutId = setTimeout(navigate, 300) } - if (Metamaps.Maps[capitalize].length === 0) { + if (section !== 'live' && Metamaps.Maps[capitalize].length === 0) { Metamaps.Loading.show() setTimeout(function () { Metamaps.Maps[capitalize].getMaps(navigate) // this will trigger an explore maps render diff --git a/frontend/src/components/Header.js b/frontend/src/components/Header.js index ee4184d5..a60a73fa 100644 --- a/frontend/src/components/Header.js +++ b/frontend/src/components/Header.js @@ -28,7 +28,7 @@ class Header extends Component { return forClass } - const explore = section == "mine" || section == "active" || section == "starred" || section == "shared" || section == "featured" + const explore = ["mine", "active", "starred", "shared", "featured", "live"].includes(section) const mapper = section == "mapper" return ( @@ -67,6 +67,13 @@ class Header extends Component { text="Featured Maps" /> + + {mapper ? (
diff --git a/frontend/src/components/Maps.js b/frontend/src/components/Maps.js index 7931da5d..a233457d 100644 --- a/frontend/src/components/Maps.js +++ b/frontend/src/components/Maps.js @@ -9,7 +9,10 @@ class Maps extends Component { const { maps, currentUser, section, displayStyle, user, moreToLoad, loadMore } = this.props let mapElements - if (displayStyle == 'grid') { + if (maps.models.length === 0) { + mapElements =
There are no maps to see here.
+ } + else if (displayStyle == 'grid') { mapElements = maps.models.map(function (map) { return }) @@ -28,7 +31,7 @@ class Maps extends Component { { currentUser && !user ?
Create new map...
: null } { mapElements }
- { moreToLoad ? + { moreToLoad && section !== 'live' ? [,
] : null }
diff --git a/realtime/realtime-server.js b/realtime/realtime-server.js index 6ce9aa44..82cbf6aa 100644 --- a/realtime/realtime-server.js +++ b/realtime/realtime-server.js @@ -3,14 +3,19 @@ var signalServer = require('./signal'), stunservers = [{"url": "stun:stun.l.google.com:19302"}]; -io.set('log', false); +//io.set('log', false); function start() { + var livemaps = {} signalServer(io, stunservers); io.on('connection', function (socket) { - + + socket.on('requestLiveMaps', function () { + var maps = Object.keys(livemaps).map(function(key) { return livemaps[key] }) + socket.emit('receiveLiveMaps', maps) + }) // this will ping a new person with awareness of who's already on the map socket.on('updateNewMapperList', function (data) { var existingUser = { @@ -56,6 +61,16 @@ function start() { // this will ping everyone on a map that there's a person just joined the map socket.on('newMapperNotify', function (data) { + + if (!livemaps[data.mapid] && data.map.permission === 'commons') { + livemaps[data.mapid] = data.map // { name: '', desc: '', numTopics: '' } + livemaps[data.mapid].mapper_count = 1 + io.sockets.emit('map_went_live', livemaps[data.mapid]) + } + else if (data.map.permission === 'commons') { + livemaps[data.mapid].mapper_count++ + } + socket.set('mapid', data.mapid); socket.set('userid', data.userid); socket.set('username', data.username); @@ -70,6 +85,7 @@ function start() { }); var end = function () { + var socketUserName, socketUserID; socket.get('userid', function (err, id) { socketUserID = id; @@ -82,6 +98,13 @@ function start() { userid: socketUserID }; socket.get('mapid', function (err, mapid) { + if (livemaps[mapid] && livemaps[mapid].mapper_count == 1) { + delete livemaps[mapid] + io.sockets.emit('map_no_longer_live', { id: mapid }) + } + else if (livemaps[mapid]) { + livemaps[mapid].mapper_count-- + } socket.broadcast.emit('maps-' + mapid + '-lostmapper', data); }); };