Closes #137 - fast component status updates.

This commit is contained in:
James Brooks
2014-12-30 13:57:38 +00:00
parent 21c266bba5
commit aa7d47b4b5
10 changed files with 445 additions and 4 deletions

View File

@@ -12,4 +12,26 @@ $(function() {
$('[data-toggle="tooltip"]').tooltip();
$('button.close').on('click', function() {
$(this).parents('div.alert').addClass('hide');
});
// Toggle inline component statuses.
$('form.component-inline').on('click', 'input[type=radio]', function() {
var $form = $(this).parents('form');
var formData = $form.serializeObject();
$.ajax({
async: true,
url: '/dashboard/api/components/' + formData['component_id'],
type: 'POST',
data: formData,
success: function(component) {
$('.alert').removeClass('hide');
},
error: function(a, b, c) {
alert('Something went wrong updating the component.');
}
});
});
});

View File

@@ -0,0 +1,23 @@
<?php
class DashAPIController extends Controller
{
/**
* Updates a component with the entered info.
* @param Component $component
* @return array
*/
public function postUpdateComponent(Component $component)
{
$componentData = Input::all();
unset($componentData['_token']);
if ($component->update($componentData))
{
return $component;
}
else
{
App::abort(500);
}
}
}

View File

@@ -10,7 +10,10 @@ class DashboardController extends Controller
public function showDashboard()
{
// TODO: Find steps needed to complete setup.
return View::make('dashboard.index');
$components = Component::all();
return View::make('dashboard.index')->with([
'components' => $components
]);
}
/**

View File

@@ -33,4 +33,10 @@ Route::group(['before' => 'auth', 'prefix' => 'dashboard'], function () {
// User Settings
Route::get('user', ['as' => 'dashboard.user', 'uses' => 'DashUserController@showUser']);
Route::post('user', 'DashUserController@postUser');
// Internal API.
// This should only be used for making requests within the dashboard.
Route::group(['prefix' => 'api'], function() {
Route::post('components/{component}', 'DashAPIController@postUpdateComponent');
});
});

View File

@@ -9,7 +9,42 @@
<div class="content-wrapper">
<div class="row">
<div class="col-md-12">
<p class='lead'>Let's put cool things here.</p>
<h4 class='sub-header'>Component Statuses</h4>
<div class='panel panel-default'>
<div class='list-group'>
@forelse($components as $component)
<div class='list-group-item'>
{{ Form::open(['class' => 'component-inline']) }}
<div class='row striped-list-item'>
<div class='col-md-4'>
<strong>{{ $component->name }}</strong>
</div>
<div class='col-md-8 text-right'>
@foreach(Lang::get('cachet.component.status') as $statusID => $status)
<div class='radio-inline'>
<label>
<input type='radio' name='status' value='{{ $statusID }}' {{ $component->status === $statusID ? "checked" : null }} />
{{ $status }}
</label>
</div>
@endforeach
</div>
</div>
<input type='hidden' name='component_id' value='{{ $component->id }}' />
{{ Form::close() }}
</div>
@empty
<div class='list-group-item text-danger'>You should add a component.</div>
@endforelse
</div>
</div>
<div class='alert alert-success alert-dismissable hide fade in out' role='alert'>
<button type='button' class='close'>
<span aria-hidden='true'>×</span>
</button>
Component updated.
</div>
</div>
</div>
</div>

View File

@@ -6,6 +6,7 @@
"chartjs": "0.2.*",
"rivets": "0.7.*",
"ionicons": "~2.0.0",
"jquery-minicolors": "2.1.10"
"jquery-minicolors": "2.1.10",
"jquery-serialize-object": "2.4.3"
}
}

View File

@@ -38,6 +38,7 @@ elixir(function (mix) {
'bower_components/bootstrap-sass-official/assets/javascripts/bootstrap.js',
// 'bower_components/chartjs/Chart.min.js',
'bower_components/jquery-minicolors/jquery.minicolors.js',
'bower_components/jquery-serialize-object/jquery.serialize-object.js',
'js/app.js',
'js/**/*.js',
], './app/assets/')

View File

@@ -3156,6 +3156,159 @@ if(jQuery) (function($) {
});
})(jQuery);
/**
* jQuery serializeObject
* @copyright 2014, macek <paulmacek@gmail.com>
* @link https://github.com/macek/jquery-serialize-object
* @license BSD
* @version 2.4.3
*/
(function(root, factory) {
// AMD
if (typeof define === "function" && define.amd) {
define(["exports", "jquery"], function(exports, $) {
return factory(exports, $);
});
}
// CommonJS
else if (typeof exports !== "undefined") {
var $ = require("jquery");
factory(exports, $);
}
// Browser
else {
factory(root, (root.jQuery || root.Zepto || root.ender || root.$));
}
}(this, function(exports, $) {
var patterns = {
validate: /^[a-z_][a-z0-9_]*(?:\[(?:\d*|[a-z0-9_]+)\])*$/i,
key: /[a-z0-9_]+|(?=\[\])/gi,
push: /^$/,
fixed: /^\d+$/,
named: /^[a-z0-9_]+$/i
};
function FormSerializer(helper, $form) {
// private variables
var data = {},
pushes = {};
// private API
function build(base, key, value) {
base[key] = value;
return base;
}
function makeObject(root, value) {
var keys = root.match(patterns.key), k;
// nest, nest, ..., nest
while ((k = keys.pop()) !== undefined) {
// foo[]
if (patterns.push.test(k)) {
var idx = incrementPush(root.replace(/\[\]$/, ''));
value = build([], idx, value);
}
// foo[n]
else if (patterns.fixed.test(k)) {
value = build([], k, value);
}
// foo; foo[bar]
else if (patterns.named.test(k)) {
value = build({}, k, value);
}
}
return value;
}
function incrementPush(key) {
if (pushes[key] === undefined) {
pushes[key] = 0;
}
return pushes[key]++;
}
function encode(pair) {
switch ($('[name="' + pair.name + '"]', $form).attr("type")) {
case "checkbox":
return pair.value === "on" ? true : pair.value;
default:
return pair.value;
}
}
function addPair(pair) {
if (!patterns.validate.test(pair.name)) return this;
var obj = makeObject(pair.name, encode(pair));
data = helper.extend(true, data, obj);
return this;
}
function addPairs(pairs) {
if (!helper.isArray(pairs)) {
throw new Error("formSerializer.addPairs expects an Array");
}
for (var i=0, len=pairs.length; i<len; i++) {
this.addPair(pairs[i]);
}
return this;
}
function serialize() {
return data;
}
function serializeJSON() {
return JSON.stringify(serialize());
}
// public API
this.addPair = addPair;
this.addPairs = addPairs;
this.serialize = serialize;
this.serializeJSON = serializeJSON;
}
FormSerializer.patterns = patterns;
FormSerializer.serializeObject = function serializeObject() {
if (this.length > 1) {
return new Error("jquery-serialize-object can only serialize one form at a time");
}
return new FormSerializer($, this).
addPairs(this.serializeArray()).
serialize();
};
FormSerializer.serializeJSON = function serializeJSON() {
if (this.length > 1) {
return new Error("jquery-serialize-object can only serialize one form at a time");
}
return new FormSerializer($, this).
addPairs(this.serializeArray()).
serializeJSON();
};
if (typeof $.fn !== "undefined") {
$.fn.serializeObject = FormSerializer.serializeObject;
$.fn.serializeJSON = FormSerializer.serializeJSON;
}
exports.FormSerializer = FormSerializer;
return FormSerializer;
}));
$(function() {
$('.color-code').minicolors({
@@ -3170,4 +3323,26 @@ $(function() {
$('[data-toggle="tooltip"]').tooltip();
$('button.close').on('click', function() {
$(this).parents('div.alert').addClass('hide');
});
// Toggle inline component statuses.
$('form.component-inline').on('click', 'input[type=radio]', function() {
var $form = $(this).parents('form');
var formData = $form.serializeObject();
$.ajax({
async: true,
url: '/dashboard/api/components/' + formData['component_id'],
type: 'POST',
data: formData,
success: function(component) {
$('.alert').removeClass('hide');
},
error: function(a, b, c) {
alert('Something went wrong updating the component.');
}
});
});
});

View File

@@ -3156,6 +3156,159 @@ if(jQuery) (function($) {
});
})(jQuery);
/**
* jQuery serializeObject
* @copyright 2014, macek <paulmacek@gmail.com>
* @link https://github.com/macek/jquery-serialize-object
* @license BSD
* @version 2.4.3
*/
(function(root, factory) {
// AMD
if (typeof define === "function" && define.amd) {
define(["exports", "jquery"], function(exports, $) {
return factory(exports, $);
});
}
// CommonJS
else if (typeof exports !== "undefined") {
var $ = require("jquery");
factory(exports, $);
}
// Browser
else {
factory(root, (root.jQuery || root.Zepto || root.ender || root.$));
}
}(this, function(exports, $) {
var patterns = {
validate: /^[a-z_][a-z0-9_]*(?:\[(?:\d*|[a-z0-9_]+)\])*$/i,
key: /[a-z0-9_]+|(?=\[\])/gi,
push: /^$/,
fixed: /^\d+$/,
named: /^[a-z0-9_]+$/i
};
function FormSerializer(helper, $form) {
// private variables
var data = {},
pushes = {};
// private API
function build(base, key, value) {
base[key] = value;
return base;
}
function makeObject(root, value) {
var keys = root.match(patterns.key), k;
// nest, nest, ..., nest
while ((k = keys.pop()) !== undefined) {
// foo[]
if (patterns.push.test(k)) {
var idx = incrementPush(root.replace(/\[\]$/, ''));
value = build([], idx, value);
}
// foo[n]
else if (patterns.fixed.test(k)) {
value = build([], k, value);
}
// foo; foo[bar]
else if (patterns.named.test(k)) {
value = build({}, k, value);
}
}
return value;
}
function incrementPush(key) {
if (pushes[key] === undefined) {
pushes[key] = 0;
}
return pushes[key]++;
}
function encode(pair) {
switch ($('[name="' + pair.name + '"]', $form).attr("type")) {
case "checkbox":
return pair.value === "on" ? true : pair.value;
default:
return pair.value;
}
}
function addPair(pair) {
if (!patterns.validate.test(pair.name)) return this;
var obj = makeObject(pair.name, encode(pair));
data = helper.extend(true, data, obj);
return this;
}
function addPairs(pairs) {
if (!helper.isArray(pairs)) {
throw new Error("formSerializer.addPairs expects an Array");
}
for (var i=0, len=pairs.length; i<len; i++) {
this.addPair(pairs[i]);
}
return this;
}
function serialize() {
return data;
}
function serializeJSON() {
return JSON.stringify(serialize());
}
// public API
this.addPair = addPair;
this.addPairs = addPairs;
this.serialize = serialize;
this.serializeJSON = serializeJSON;
}
FormSerializer.patterns = patterns;
FormSerializer.serializeObject = function serializeObject() {
if (this.length > 1) {
return new Error("jquery-serialize-object can only serialize one form at a time");
}
return new FormSerializer($, this).
addPairs(this.serializeArray()).
serialize();
};
FormSerializer.serializeJSON = function serializeJSON() {
if (this.length > 1) {
return new Error("jquery-serialize-object can only serialize one form at a time");
}
return new FormSerializer($, this).
addPairs(this.serializeArray()).
serializeJSON();
};
if (typeof $.fn !== "undefined") {
$.fn.serializeObject = FormSerializer.serializeObject;
$.fn.serializeJSON = FormSerializer.serializeJSON;
}
exports.FormSerializer = FormSerializer;
return FormSerializer;
}));
$(function() {
$('.color-code').minicolors({
@@ -3170,4 +3323,26 @@ $(function() {
$('[data-toggle="tooltip"]').tooltip();
$('button.close').on('click', function() {
$(this).parents('div.alert').addClass('hide');
});
// Toggle inline component statuses.
$('form.component-inline').on('click', 'input[type=radio]', function() {
var $form = $(this).parents('form');
var formData = $form.serializeObject();
$.ajax({
async: true,
url: '/dashboard/api/components/' + formData['component_id'],
type: 'POST',
data: formData,
success: function(component) {
$('.alert').removeClass('hide');
},
error: function(a, b, c) {
alert('Something went wrong updating the component.');
}
});
});
});

View File

@@ -1,4 +1,4 @@
{
"css/all.css": "css/all-729d9f2f.css",
"js/all.js": "js/all-fe283b26.js"
"js/all.js": "js/all-4554a981.js"
}