React server table

melkor217 · Jun 1, 2016 · b4392ac · b4392ac
1 parent b5f4f5f
commit b4392ac
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 77 deletions.
diff --git a/app/assets/javascripts/application.coffee b/app/assets/javascripts/application.coffee
@@ -17,8 +17,9 @@
 #= require bootstrap-table-fixed-columns
 #= require react
 #= require react_ujs
+#= require react_bootstrap
 #= require components
 #= require_tree .
-
+#
 # ---
-# generated by js2coffee 2.2.0
+# generated by js2coffee 2.2.0
diff --git a/app/assets/javascripts/components/player.coffee.erb b/app/assets/javascripts/components/player.coffee.erb
@@ -1,4 +1,3 @@
-
 @PlayerHeader = React.createClass
   componentDidMount: ->
     if @props.url
@@ -18,17 +17,17 @@
               className: "panel-heading clearfix"
               children: [
                 img
-                  style: {'vertical-align': 'middle'}
+                  style: {verticalAlign: 'middle'}
                   src: @state.player.avatarIcon
                   width: 30
                   height: 30
-                React.DOM.h2 {style: {display: 'inline', 'margin-left': '0.3em', 'vertical-align': 'middle'}},
+                React.DOM.h2 {style: {display: 'inline', marginLeft: '0.3em', verticalAlign: 'middle'}},
                     @state.player.lastName
                 if @state.player.steamUrl
                   a {href: @state.player.steamUrl, className: "btn-link"},
                     img
                      src: "<%= asset_path('misc/steam.png') %>"
-                     style: {'vertical-align': 'middle', 'margin-left': '0.3em'}
+                     style: {verticalAlign: 'middle', 'margin-left': '0.3em'}
               ]
             div
               className: "panel-body"

diff --git a/app/assets/javascripts/components/server.coffee.erb b/app/assets/javascripts/components/server.coffee.erb
@@ -1,50 +1,55 @@
+{tbody, thead, table, tr, td, th, a} = React.DOM
+
 @ServerList = React.createClass
   componentDidMount: ->
     if @props.url
       @serverRequest = $.get @props.url, (data) =>
         @setState servers: data
   getInitialState: ->
     servers: []
+  row: (data) ->
+    tr
+      children: [
+        td {}, data.name
+        td null, a
+          className: "btn btn-info"
+          href: "steam://connect/#{data.publicaddress}", 'Connect'
+        td {style: {fontFamily: 'monospace'}}, data.publicaddress
+        td null, "#{data.livestats_players} (#{data.act_players}) / #{data.max_players}"
+        td null, data.kills
+        td null, data.headshots
+        td null, data.act_map
+        td null, data.map_started
+      ]
   render: ->
-    {tbody, thead, table, tr, td, th} = React.DOM
+    {tbody, thead, table, tr, td, th, a} = React.DOM
     table
       className: "table fixed table-bordered"
       children: [
         thead
           children: [
             tr
               children: [
-                th null, ''
-                th null, 'Name'
-                th null, 'IP Address'
-                th null, 'Players'
-                th null, 'Kills'
-                th null, 'Headshots'
-                th null, 'Current map'
+                th
+                  className: 'col-md-2', 'Name'
+                th {}, 'Link'
+                th
+                  className: 'col-md-2', 'IP Address'
+                th
+                  className: 'col-sm-1', 'Players'
+                th
+                  className: 'col-sm-1', 'Kills'
+                th
+                  className: 'col-sm-1', 'Headshots'
+                th
+                  className: 'col-md-2', 'Current map'
+                th
+                  className: 'col-md-2', 'Map time'
               ]
           ]
         tbody
           children: [
-            @state.servers.map (data) -> React.createElement(Server, data)
+            @row(server) for server in @state.servers
           ]
       ]
 
-
-@Server = React.createClass
-  getDefaultProps: ->
-    name: ''
-  render: ->
-    {tr, td, a} = React.DOM
-    tr
-      children: [
-        td null, a
-          className: "btn btn-info"
-          href: "steam://connect/#{@props.publicaddress}"
-          'Connect'
-        td null, @props.name
-        td {style: {'font-family': 'monospace'}}, @props.publicaddress
-        td null, "#{@props.livestats_players} (#{@props.act_players}) / #{@props.max_players}"
-        td null, @props.kills
-        td null, @props.headshots
-        td null, @props.act_map
-      ]
diff --git a/app/assets/stylesheets/application.css.sass b/app/assets/stylesheets/application.css.sass
@@ -20,7 +20,6 @@
 @import "bootstrap-table"
 @import "bootstrap-table-fixed-columns"
 
-
 .progress
   position: relative
   span

diff --git a/app/views/servers/index.html.erb b/app/views/servers/index.html.erb
@@ -1,41 +1,5 @@
-<p id="notice"><%= notice %></p>
-
-<%= react_component 'ServerList', {url: servers_path(format: :json)} %>
-
-<h1>Listing Servers</h1>
-<br/>
-<table data-toggle="table" class="fixed">
-  <thead>
-    <tr>
-      <th></th>
-      <th class="col-md-3" data-field="name" data-sortable="true">Name</th>
-      <th class="col-md-2" data-field="ip" data-sortable="true">IP address</th>
-      <th class="col-md-2" data-field="online" data-sortable="false">Players</th>
-      <th class="col-md-2" data-field="players" data-sortable=true">Total players</th>
-      <th class="col-md-1" data-field="kills" data-sortable="true">Kills</th>
-      <th class="col-md-1" data-field="headshots" data-sortable="true">Headshots</th>
-      <th class="col-md-2" data-field="map" data-sortable="true">Map</th>
-      <th class="col-md-1" data-field="kpp" data-sortable="true">Kills per player</th>
-    </tr>
-  </thead>
-
-  <tbody>
-    <% @servers.each do |server| %>
-      <% act_players =  Livestats.where(server_id: server.serverId).where.not(steam_id: 'BOT').count %>
-      <tr>
-        <td><a class="btn btn-info" role="button" href="steam://connect/<%= server.publicaddress  %>">Connect</a></td>
-        <td>
-          <%= link_to(server.name, server, {:class=>"btn-link"}) %>
-        </td>
-        <td><%= server.publicaddress %></td>
-        <td><%= "#{act_players} (#{server.act_players}) / #{server.max_players}" %></td>
-        <td><%= server.players %></td>
-        <td><%= server.kills %></td>
-        <td><%= server.headshots %></td>
-        <td><%= server.act_map %></td>
-        <td><%= (server.kills.to_f / server.players).round(2) %></td>
-      </tr>
-    <% end %>
-  </tbody>
-</table>
-<br/>
+<div class="row">
+  <div class="col-md-6">
+    <%= react_component 'ServerList', {url: servers_path(format: :json)} %>
+  </div>
+</div>
diff --git a/config/application.rb b/config/application.rb
@@ -26,7 +26,9 @@ class Application < Rails::Application
     config.action_controller.perform_caching = true
     config.autoload_paths << Rails.root.join('lib')
     config.eager_load_paths << Rails.root.join('lib')
-
+    if defined? config.browserify_rails
+      config.browserify_rails.commandline_options = "-t coffeeify --extension=\".coffee\""
+    end
     config.default_game = :csgo
   end
 end