0ct0pu5/Heimdall
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

added order saving, dragging and pinning

Browse source
This commit is contained in:
KodeStar 2018-02-03 00:22:42 +00:00
parent 7c859b629e
commit 25bbf6f99a
18 changed files with 283 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

65
app/Http/Controllers/ItemController.php
View file

@ -17,10 +17,73 @@ class ItemController extends Controller
*/
public function dash()
{
$data['apps'] = Item::all();
$data['apps'] = Item::pinned()->orderBy('order', 'asc')->get();
$data['all_apps'] = Item::all();
return view('welcome', $data);
}
/**
* Set order on the dashboard.
*
* @return \Illuminate\Http\Response
*/
public function setOrder(Request $request)
{
$order = array_filter($request->input('order'));
foreach($order as $o => $id) {
$item = Item::find($id);
$item->order = $o;
$item->save();
}
}
/**
* Pin item on the dashboard.
*
* @return \Illuminate\Http\Response
*/
public function pin($id)
{
$item = Item::findOrFail($id);
$item->pinned = true;
$item->save();
return redirect()->route('dash');
}
/**
* Unpin item on the dashboard.
*
* @return \Illuminate\Http\Response
*/
public function unpin($id)
{
$item = Item::findOrFail($id);
$item->pinned = false;
$item->save();
return redirect()->route('dash');
}
/**
* Unpin item on the dashboard.
*
* @return \Illuminate\Http\Response
*/
public function pinToggle($id, $ajax=false)
{
$item = Item::findOrFail($id);
$new = ((bool)$item->pinned === true) ? false : true;
$item->pinned = $new;
$item->save();
if($ajax) {
$data['apps'] = Item::pinned()->get();
$data['ajax'] = true;
return view('sortable', $data);
} else {
return redirect()->route('dash');
}
}
/**
* Display a listing of the resource.

1
app/Http/Middleware/VerifyCsrfToken.php
View file

@ -13,5 +13,6 @@ class VerifyCsrfToken extends Middleware
*/
protected $except = [
//
'order'
];
}

13
app/Item.php
View file

@ -11,7 +11,7 @@ class Item extends Model
{
//
protected $fillable = [
'title', 'url', 'colour', 'icon', 'description', 'pinned'
'title', 'url', 'colour', 'icon', 'description', 'pinned', 'order'
];
public static function supportedList()
@ -25,4 +25,15 @@ class Item extends Model
{
return array_keys(self::supportedList());
}
/**
* Scope a query to only include pinned items.
*
* @param \Illuminate\Database\Eloquent\Builder $query
* @return \Illuminate\Database\Eloquent\Builder
*/
public function scopePinned($query)
{
return $query->where('pinned', 1);
}
}

1
database/migrations/2018_01_27_155922_create_items_table.php
View file

@ -21,6 +21,7 @@ class CreateItemsTable extends Migration
$table->string('url');
$table->text('description')->nullable();
$table->boolean('pinned')->default(false);
$table->integer('order')->default(0);
$table->timestamps();
});
}

71
public/css/app.css vendored
View file

@ -318,7 +318,8 @@ body {
padding: 20px;
}
#app main {
#app main,
#app #sortable {
padding: 10px;
display: -webkit-box;
display: -ms-flexbox;
@ -337,9 +338,12 @@ body {
flex-wrap: wrap;
-ms-flex-line-pack: center;
align-content: center;
list-style: none;
margin: 0;
}
#app main .config {
#app main .config,
#app #sortable .config {
position: absolute;
bottom: 0;
right: 0;
@ -351,12 +355,6 @@ body {
color: white;
}
.item-container {
width: 340px;
-webkit-transition: all .35s ease-in-out;
transition: all .35s ease-in-out;
}
.message-container {
width: 100%;
}
@ -370,15 +368,12 @@ body {
top: 0;
}
#app.header .item-container {
width: 280px;
}
#app.header .item,
#app.header .add-item {
-webkit-transform: scale(0.8);
transform: scale(0.8);
opacity: 0.7;
margin: 20px 0;
}
#app.sidebar nav {
@ -404,6 +399,10 @@ body {
outline: 1px solid transparent;
}
.add-item.active {
display: block;
}
.add-item a {
display: block;
width: 100%;
@ -436,9 +435,9 @@ body {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.item:after {
@ -482,7 +481,8 @@ body {
margin: 0 40px;
}
.module-container header {
.module-container header,
.module-container footer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
@ -500,12 +500,17 @@ body {
position: relative;
}
.module-container header .section-title {
.module-container header .section-title,
.module-container footer .section-title {
font-size: 18px;
color: #5b5b5b;
margin-left: 25px;
}
.module-container footer {
border-top: 1px solid #dbdce3;
}
.module-container .table {
width: 100%;
margin: 0;
@ -649,7 +654,37 @@ div.create .input input {
}
.app-icon {
max-width: 50px;
max-width: 60px;
margin-right: 10px;
}
.sidenav h2 {
font-weight: 300;
padding: 20px;
}
.sidenav ul {
list-style: none;
margin: 0;
padding: 20px;
}
.sidenav ul li {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 5px;
}
.sidenav ul li a {
color: #2b3542;
}
.sidenav ul li a.active {
color: #46b0e6;
}
/*! Huebee v2.0.0

32
public/js/app.js vendored
View file

File diff suppressed because one or more lines are too long

4
public/mix-manifest.json
View file

@ -1,4 +1,4 @@
{
"/css/app.css": "/css/app.css?id=6ca0518736a7940b1f8a",
"/js/app.js": "/js/app.js?id=04ddfaaf5e66ed51b426"
"/css/app.css": "/css/app.css?id=9826be622435e2ba23ee",
"/js/app.js": "/js/app.js?id=c40626c00c299e2aeed0"
}

32
resources/assets/js/app.js vendored
View file

@ -1,4 +1,23 @@
$.when( $.ready ).then(function() {
$( "#sortable" ).sortable({
stop: function (event, ui) {
var idsInOrder = $("#sortable").sortable('toArray', {
attribute: 'data-id'
});
$.post(
'/order',
{ order:idsInOrder }
);
}
});
$("#sortable").sortable("disable");
$('.color-picker').each( function( i, elem ) {
var hueb = new Huebee( elem, {
// options
@ -12,7 +31,9 @@ $.when( $.ready ).then(function() {
if(active) {
$('.add-item').hide();
$('#app').removeClass('sidebar');
$("#sortable").sortable("disable")
} else {
$("#sortable").sortable("enable")
setTimeout(
function()
{
@ -27,4 +48,15 @@ $.when( $.ready ).then(function() {
app.toggleClass('sidebar');
});
$('#pinlist').on('click', 'a', function(e) {
e.preventDefault();
var current = $(this);
var id = current.data('id');
$.get('items/pintoggle/'+id+'/true', function(data) {
var inner = $(data).filter('#sortable').html();
$('#sortable').html(inner);
current.toggleClass('active');
});
});
});

7
resources/assets/js/jquery-ui.min.js vendored Normal file
View file

File diff suppressed because one or more lines are too long

47
resources/assets/sass/_app.scss vendored
View file

@ -66,7 +66,7 @@ body {
}
}
main {
main, #sortable {
padding: 10px;
display: flex;
justify-content: center;
@ -75,6 +75,8 @@ body {
position: relative;
flex-wrap: wrap;
align-content: center;
list-style: none;
margin: 0;
.config {
position: absolute;
bottom: 0;
@ -89,8 +91,8 @@ body {
}
}
.item-container {
width: 340px;
transition: all .35s ease-in-out;
//width: 340px;
//transition: width .35s ease-in-out;
}
.message-container {
width: 100%;
@ -105,11 +107,12 @@ body {
top: 0;
}
.item-container {
width: 280px;
//width: 240px;
}
.item, .add-item {
transform: scale(0.8);
opacity: 0.7;
margin: 20px 0;
}
}
&.sidebar {
@ -132,6 +135,9 @@ body {
position: relative;
display: none;
outline: 1px solid transparent;
&.active {
display: block;
}
a {
display: block;
width: 100%;
@ -158,7 +164,7 @@ body {
transition: all .35s ease-in-out;
outline: 1px solid transparent;
display: flex;
align-items: flex-start;
align-items: center;
&:after {
content: "";
position: absolute;
@ -194,7 +200,7 @@ body {
max-width: 1000px;
width: 100%;
margin: 0 40px;
header {
header, footer {
display: flex;
justify-content: space-between;
align-items: center;
@ -210,6 +216,9 @@ body {
margin-left: 25px;
}
}
footer {
border-top: 1px solid #dbdce3;
}
.table {
width: 100%;
margin:0;
@ -329,5 +338,29 @@ div.create {
}
.app-icon {
max-width: 50px;
max-width: 60px;
margin-right: 10px;
}
.sidenav {
h2 {
font-weight: 300;
padding: 20px;
}
ul {
list-style: none;
margin: 0;
padding: 20px;
li {
display: flex;
justify-content: space-between;
padding: 5px;
a {
color: #2b3542;
&.active {
color: #46b0e6;
}
}
}
}
}

3
resources/views/add.blade.php
View file

@ -1,3 +1,4 @@
<section class="add-item">
<?php $addclass = (isset($ajax)) ? ' active' : ''; ?>
<section class="add-item{{ $addclass }}">
<a id="add-item" href="">Pin item to dash</a>
</section>

19
resources/views/app.blade.php
View file

@ -12,12 +12,19 @@
</head>
<body>
<div id="app">
<nav>
<ul>
<li><a href=""><i class="fa fa-dash"></i></a></li>
<li><a href=""><i class="fa fa-dash"></i></a></li>
<li><a href=""><i class="fa fa-dash"></i></a></li>
<nav class="sidenav">
@if(isset($all_apps))
<h2>Pinned Items</h2>
<ul id="pinlist">
@foreach($all_apps as $app)
<?php
$active = ((bool)$app->pinned === true) ? 'active' : '';
?>
<li>{{ $app->title }}<a class="{{ $active }}" data-id="{{ $app->id }}" href="{{ route('items.pintoggle', $app->id) }}"><i class="fas fa-thumbtack"></i></a></li>
@endforeach
</ul>
@endif
</nav>
<div class="content">
<header class="appheader">
@ -54,6 +61,8 @@
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>!window.jQuery && document.write('<script src="/js/jquery-3.3.1.min.js"><\/script>')</script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="/js/app.js"></script>
</body>
</html>

4
resources/views/item.blade.php
View file

@ -1,4 +1,4 @@
<section class="item-container">
<section class="item-container" data-id="{{ $app->id }}">
<div class="item" style="background-color: {{ $app->colour }}">
@if($app->icon)
<img class="app-icon" src="{{ asset('storage/'.$app->icon) }}" />
@ -6,7 +6,7 @@
<i class="fas fa-app-store-ios"></i>
@endif
{{ $app->title }}
Item
<a class="link" href="{{ $app->url }}"><i class="fas fa-arrow-alt-to-right"></i></a>
</div>
</section>

9
resources/views/items/form.blade.php
View file

@ -2,8 +2,8 @@
<header>
<div class="section-title">Add application</div>
<div class="module-actions">
<a href="{{ route('items.index') }}" class="button"><i class="fa fa-ban"></i><span>Cancel</span></a>
<button type="submit"class="button"><i class="fa fa-save"></i><span>Save</span></button>
<a href="{{ route('items.index') }}" class="button"><i class="fa fa-ban"></i><span>Cancel</span></a>
</div>
</header>
<div class="create">
@ -49,5 +49,12 @@
</div>
<footer>
<div class="section-title">&nbsp;</div>
<div class="module-actions">
<button type="submit"class="button"><i class="fa fa-save"></i><span>Save</span></button>
<a href="{{ route('items.index') }}" class="button"><i class="fa fa-ban"></i><span>Cancel</span></a>
</div>
</footer>
</section>

6
resources/views/sortable.blade.php Normal file
View file

@ -0,0 +1,6 @@
<div id="sortable">
@foreach($apps as $app)
@include('item')
@endforeach
@include('add')
</div>

5
resources/views/welcome.blade.php
View file

@ -2,10 +2,7 @@
@section('content')
@if($apps->first())
@foreach($apps as $app)
@include('item')
@endforeach
@include('add')
@include('sortable')
@else
There are currently no Applications, <a href="{{ route('items.create') }}">add one here</a>
@include('add')

6
routes/web.php
View file

@ -15,4 +15,8 @@ Route::get('/', 'ItemController@dash')->name('dash');
Route::resources([
'items' => 'ItemController',
]);
]);
Route::get('items/pin/{id}', 'ItemController@pin')->name('items.pin');
Route::get('items/unpin/{id}', 'ItemController@unpin')->name('items.unpin');
Route::get('items/pintoggle/{id}/{ajax?}', 'ItemController@pinToggle')->name('items.pintoggle');
Route::post('order', 'ItemController@setOrder')->name('items.order');

1
webpack.mix.js vendored
View file

@ -12,6 +12,7 @@ let mix = require('laravel-mix');
*/
mix.scripts([
//'resources/assets/js/jquery-ui.min.js',
'resources/assets/js/huebee.js',
'resources/assets/js/app.js'
], 'public/js/app.js')