RubyGems - ki - Versions diffs - 0.4.10 → 0.4.11 - Mend

ki 0.4.10 → 0.4.11

Files changed (96) hide show

data/spec/examples/json.northpole.ro/public/javascripts/realtime.coffee ADDED Viewed

@@ -0,0 +1,28 @@
+$(document).ready ->
+  receivedMessages = []
+  output = $('.realtime-output')
+  return if output.length <= 0
+  socket = jNorthPole.getNewRealtimeSocket((data) ->
+    console.log data
+    return unless data.data?
+    json = JSON.parse(data.data)
+    return unless json.messages?
+    for message in json.messages
+      if $.inArray(message.id, receivedMessages) == -1
+        receivedMessages.push(message.id)
+        output.append("#{message.content.message}<br />")
+  )
+  setTimeout ->
+    jNorthPole.subscribe(socket, 'jNorthPoleChat')
+  , 2000
+  $('.realtime-input').keypress((event) ->
+    keycode = if event.keyCode then event.keyCode else event.which
+    if (keycode == 13)
+      inptz = $(@)
+      jNorthPole.publish(socket, 'jNorthPoleChat', { message: inptz.val() })
+      inptz.val('')
+  )

data/spec/examples/json.northpole.ro/public/{javascripts/music → music}/angular-youtube-embed.js RENAMED Viewed

File without changes

data/spec/examples/json.northpole.ro/public/music/index.html ADDED Viewed

@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<html ng-app="app">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width">
+    <title>music</title>
+    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
+    <!-- Include roboto.css to use the Roboto web font, material.css to include the theme and ripples.css to style the ripple effect -->
+    <link href="/bootstrap-material-design/dist/css/roboto.min.css" rel="stylesheet">
+    <link href="/bootstrap-material-design/dist/css/material.min.css" rel="stylesheet">
+    <link href="/bootstrap-material-design/dist/css/ripples.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
+    <link rel="stylesheet" href="/music/music.css">
+  </head>
+  <body ng-controller="MainCtrl">
+    <div class="container">
+      <div class="row" ng-hide="!loggedIn">
+        <div class="col-md-12 well" style="display: flex; align-items: center;">
+          <div class="col-xs-4 col-md-2 col-md-offset-6">
+            <div class="form-group has-warning">
+              <input type="text" class="form-control" ng-model="search" placeholder="search"/>
+            </div>
+          </div>
+          <div class="col-xs-2 col-sm-1 col-sm-offset-6 col-md-offset-2 col-xs-offset-4">
+            <a ng-click="playRandom()" class="btn btn-danger btn-fab btn-raised fa fa-random"></a>
+          </div>
+          <div class="col-xs-2 col-sm-1">
+            <a ng-click="refresh()" class="btn btn-danger btn-fab btn-raised fa" ng-class="{ 'fa-sign-in': !loggedIn, 'fa-sign-out': loggedIn}"></a>
+          </div>
+        </div>
+      </div>
+      <div class="row" ng-show="!loggedIn">
+        <div class="well col-xs-8 col-xs-offset-2 col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4">
+          <form class="form-horizontal">
+            <fieldset>
+              <!-- <legend>Sign in</legend> -->
+              <div class="form-group has-warning">
+                <!-- <label for="inputApiKey" class="col-lg-2 control-label">api_key</label> -->
+                <div class="col-lg-12">
+                  <input type="text" class="form-control input-lg" ng-model="json.api_key" id="inputApiKey" placeholder="api_key">
+                </div>
+                <!-- <label for="inputSecret" class="col-lg-2 control-label">secret</label> -->
+                <div class="col-lg-12">
+                  <input type="password" class="form-control input-lg" ng-model="json.secret" id="inputSecret" placeholder="secret">
+                </div>
+              </div>
+              <div class="form-group">
+                <div class="col-lg-10 col-lg-offset-2 text-center">
+                  <button type="submit" class="btn btn-danger" ng-click="refresh()">login</button>
+                </div>
+              </div>
+            </fieldset>
+          </form>
+        </div>
+      </div>
+      <div class="row" ng-show="loggedIn">
+        <div class="col-md-6">
+          <div class="embed-responsive embed-responsive-16by9 well">
+            <youtube-video class="embed-responsive-item" video-url="ytVideoUrl" player="bestPlayer" player-vars="playerVars"></youtube-video>
+          </div>
+        </div>
+        <div class="col-md-6">
+          <div class="list-group well">
+            <div ng-repeat="result in results | filter: search">
+              <div class="list-group-item vertical-center" ng-class="{ selected: isSelected(result) }">
+                <div class="row-action-primary">
+                  <i class="fa fa-edit" ng-click="select(result)" data-toggle="modal" data-target="#complete-dialog"></i>
+                </div>
+                <div class="row-content" style="display: flex; align-items: center;">
+                  <div class="least-content row-action-primary">
+                  </div>
+                  <div ng-click="play(result)">
+                    <h4 class="list-group-item-heading no-wrap">{{ result.name || result}}</h4>
+                    <p class="disabled list-group-item-text no-wrap disabled">{{ result.url }}</p>
+                  </div>
+                </div>
+              </div>
+              <div class="list-group-separator"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div ng-show="loggedIn">
+        <a ng-click="newSong()" data-toggle="modal" data-target="#complete-dialog" class="btn btn-danger btn-fab btn-raised fa fa-plus add-button"></a>
+      </div>
+      <div id="complete-dialog" class="modal fade" tabindex="-1">
+        <div class="modal-dialog modal-sm">
+          <div class="modal-content">
+            <div class="modal-header">
+              <!-- <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> -->
+              <div class="form-group has-warning">
+              </div>
+            </div>
+            <div class="modal-body">
+              <div class="form-group has-warning">
+                <input class="form-control" ng-model="selected.name" placeholder="title" />
+                <input class="form-control" ng-model="selected.url" placeholder="url" />
+                <input class="form-control" ng-model="selected.moods" placeholder="moods" ng-list required>
+              </div>
+            </div>
+            <div class="modal-footer">
+              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+              <button type="button" class="btn btn-danger" ng-click="save(selected)">Save changes</button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
+      <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
+      <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
+      <script src="/bootstrap-material-design/dist/js/ripples.min.js"></script>
+      <script src="/bootstrap-material-design/dist/js/material.min.js"></script>
+      <script src="//www.youtube.com/iframe_api"></script>
+      <script src="/music/angular-youtube-embed.js"></script>
+      <script src="/javascripts/jnorthpole.js"></script>
+      <script src="/music/music.js"></script>
+    </body>
+  </html>

data/spec/examples/json.northpole.ro/public/music/music.coffee ADDED Viewed

@@ -0,0 +1,99 @@
+$(() ->
+  $.material.init()
+)
+app = angular.module('app', [ 'youtube-embed' ])
+app.controller 'MainCtrl', ($scope, youtubeEmbedUtils) ->
+  $scope.refresh = ->
+    if $scope.loggedIn
+      $scope.loggedIn = false
+      $scope.results = []
+      localStorage.clear()
+      $scope.json =
+        'api_key': 'guest'
+        'secret': 'guest'
+        'category': 'music'
+    else
+      $scope.loggedIn = false
+      jNorthPole.getStorage $scope.json, (data) ->
+        if $scope.json.apiKey != 'guest' and !data.error?
+          localStorage.json = angular.toJson($scope.json)
+        unless data.error? and data.api_key != 'guest'
+          $scope.apiKey = $scope.json.apiKey
+          $scope.results = data
+          $scope.loggedIn = true
+          $scope.$apply()
+        return
+    return
+  jNorthPole.BASE_URL = 'https://json.northpole.ro/'
+  $scope.results = []
+  $scope.playerVars =
+    controls: 1
+    autoplay: 1
+  if localStorage.json == undefined
+    $scope.json =
+      'api_key': 'guest'
+      'secret': 'guest'
+      'category': 'music'
+  else
+    $scope.json = angular.fromJson(localStorage.json)
+    $scope.refresh()
+  $scope.play = (video) ->
+    return unless video?
+    if $scope.ytVideoUrl == video.url and $scope.bestPlayer? and $scope.bestPlayer.getPlayerState() == 1
+      $scope.bestPlayer.pauseVideo()
+    else
+      $scope.ytVideoUrl = video.url
+      $scope.bestPlayer.playVideo() if $scope.bestPlayer?
+      # console.log youtubeEmbedUtils.getIdFromURL($scope.ytVideoUrl)
+    return
+  $scope.edit = (video) ->
+    $scope.selected = video
+    return
+  $scope.save = (video) ->
+    $scope.selected.secret = $scope.json.secret
+    json = angular.copy($scope.selected)
+    log = (data) ->
+      console.log data
+      return
+    if video.id?
+      jNorthPole.putStorage json, log
+    else
+      json.api_key = $scope.json.api_key
+      json.category = 'music'
+      jNorthPole.createStorage json, log
+    $('#complete-dialog').modal('hide')
+    $scope.selected = undefined
+    return
+  $scope.newSong = ->
+    $scope.selected = {}
+    return
+  $scope.select = (json) ->
+    $scope.selected = json
+    return
+  $scope.isSelected = (video) ->
+    $scope.ytVideoUrl == video.url
+  $scope.playRandom = ->
+    item = $scope.results[Math.floor(Math.random() * $scope.results.length)]
+    $scope.play item
+    if player?
+      player.seekTo 0
+    return
+  $scope.$on 'youtube.player.ended', ($event, player) ->
+    $scope.playRandom player
+    return
+  return

data/spec/examples/json.northpole.ro/public/music/music.sass ADDED Viewed

@@ -0,0 +1,63 @@
+$size: 56px
+html, body
+  height: 100%
+.bear
+  background: url(/images/bear.png) no-repeat center center
+.embed-responsive
+  position: relative
+  display: block
+  height: 0
+  padding: 0
+  overflow: hidden
+.embed-responsive.embed-responsive-16by9
+  padding-bottom: 56.25%
+.embed-responsive-item
+  @extend .bear
+  position: absolute
+  top: 0
+  bottom: 0
+  left: 0
+  width: 100%
+  height: 100%
+  border: 0
+.container
+  z-index: 10
+.content-container
+  padding-top: $size + 10px
+  padding-bottom: $size - 10px
+.add-button
+  margin-bottom: 10px !important
+  margin-right: 10px !important
+  position: fixed
+  right: 0
+  bottom: 0
+.no-wrap
+  white-space: nowrap
+  overflow: hidden
+  text-overflow: ellipsis
+.vertical-center
+  display: flex
+  align-items: center
+p.disabled
+  color: #bdbdbd
+.selected
+  background-color: red !important
+  p
+    color: #f5f5f5
+  h4
+    color: #f5f5f5 !important
+  .list-group-separator
+    background-color: white

data/spec/examples/json.northpole.ro/public/stylesheets/app.sass CHANGED Viewed

@@ -45,3 +45,6 @@ input[type="text"], textarea
 .form-control:focus
   border-color: #ccc
+.realtime-input
+  background-color: #f5f5f5

data/spec/examples/json.northpole.ro/views/faq.haml CHANGED Viewed

@@ -8,6 +8,8 @@
 %br
 %a{href: '#register'} How do I register?
 %br
+%a{href: '#realtime'} Is there an experimental realtime module?
+%br
 %h3#what What is json.northpole.ro?
 %p
   json.northpole.ro is a JSON cloud storage service.
@@ -36,3 +38,8 @@
   %a{href: '/playground'} playground
   \. If you can't do that, there is a good chance you don't understand
   how the API works. Think of it as a tutorial.
+%h3#realtime Is there an experimental realtime module?
+%p
+  Yes. Go to
+  %a{href: '/websocket'} /websocket
+  to give it a spin.

data/spec/examples/json.northpole.ro/views/layout.haml CHANGED Viewed

@@ -41,4 +41,5 @@
     = js "https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"
     = js "//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"
     = js "/javascripts/jnorthpole.js"
+    = js "/javascripts/realtime.js"
     = js "/javascripts/app.js"

data/spec/examples/json.northpole.ro/views/music.haml ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ :javascript
2	+ window.location.href = "/music/index.html";

data/spec/examples/json.northpole.ro/views/websocket.haml ADDED Viewed

@@ -0,0 +1,7 @@
+%p
+  You are subscribed to the
+  %b jNorthPoleChat
+  channel. Everybody in this channel will be able to view your messages.
+%input.realtime-input.form-control{ type: 'text', placeholder: 'write your message and press enter' }
+%br
+%pre.realtime-output

data/spec/lib/ki/channel_manager_spec.rb ADDED Viewed

@@ -0,0 +1,82 @@
+require 'spec_helper'
+describe Ki::ChannelManager do
+  let(:cm) { Ki::ChannelManager }
+  let(:db) { Ki::Orm::Db.instance }
+  it 'returns the db connection' do
+    expect(cm.db).to eq db
+  end
+  it 'stores a socket on connection' do
+    expect {
+      cm.connect
+    }.to change { db.count 'realtime_channel_sockets' }.by(1)
+  end
+  it 'removes a channel socket on disconnect' do
+    socket = cm.connect
+    expect {
+      cm.disconnect(socket)
+    }.to change { db.count 'realtime_channel_sockets' }.by(-1)
+  end
+  it 'removes all the channel subscriptions on disconnect' do
+    socket = cm.connect
+    cm.subscribe(socket_id: socket['id'], type: 'subscribe', 'channel_name' => 'test-channel')
+    cm.subscribe(socket_id: socket['id'], type: 'subscribe', 'channel_name' => 'test-channel-2')
+    expect {
+      cm.disconnect(socket)
+    }.to change { db.count 'realtime_channel_subscriptions' }.by(-2)
+  end
+  it 'returns the list of channel sockets' do
+    cm.cleanup
+    expect(cm.sockets).to be_empty
+    cm.connect
+    expect(cm.sockets).to_not be_empty
+  end
+  it 'subscribes to a channel' do
+    socket = cm.connect
+    expect {
+      cm.subscribe(socket_id: socket['id'], type: 'subscribe', 'channel_name' => 'test-channel')
+    }.to change { db.count 'realtime_channel_subscriptions' }.by(1)
+  end
+  it 'does not subscribe to the same channel twice' do
+    socket = cm.connect
+    expect {
+      cm.subscribe(socket_id: socket['id'], type: 'subscribe', 'channel_name' => 'test-channel')
+      cm.subscribe(socket_id: socket['id'], type: 'subscribe', 'channel_name' => 'test-channel')
+    }.to change { db.count 'realtime_channel_subscriptions' }.by(1)
+  end
+  it 'unsubscribes fom a channel' do
+    socket = cm.connect
+    cm.subscribe(socket_id: socket['id'], type: 'subscribe', 'channel_name' => 'test-channel')
+    expect {
+      cm.unsubscribe(socket_id: socket['id'], 'type' => 'unsubscribe', 'channel_name' => 'test-channel')
+    }.to change { db.count 'realtime_channel_subscriptions' }.by(-1)
+  end
+  it 'returns messages from a tick'
+  it 'publishes a message' do
+    expect {
+      item = cm.publish(hello: 'world')
+      expect(item['created_at']).to_not be_nil # TODO: might need present?
+    }.to change { db.count 'realtime_channel_messages' }.by(1)
+  end
+  it 'cleans up the data' do
+    cm.cleanup
+    expect(db.count('realtime_channel_sockets')).to eq 0
+    expect(db.count('realtime_channel_subscriptions')).to eq 0
+    expect(db.count('realtime_channel_messages')).to eq 0
+  end
+end