topaLE
/
Heimdall
1
0
Fork 0
Code Issues 163 Pull Requests 18 Projects Releases 47 Wiki Activity
Browse Source

added order saving, dragging and pinning

pull/11/head
KodeStar 7 years ago
parent
7c859b629e
commit
25bbf6f99a
18 changed files with 283 additions and 43 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 65
      app/Http/Controllers/ItemController.php
  2. 1
      app/Http/Middleware/VerifyCsrfToken.php
  3. 13
      app/Item.php
  4. 1
      database/migrations/2018_01_27_155922_create_items_table.php
  5. 71
      public/css/app.css
  6. 32
      public/js/app.js
  7. 4
      public/mix-manifest.json
  8. 32
      resources/assets/js/app.js
  9. 7
      resources/assets/js/jquery-ui.min.js
  10. 47
      resources/assets/sass/_app.scss
  11. 3
      resources/views/add.blade.php
  12. 19
      resources/views/app.blade.php
  13. 4
      resources/views/item.blade.php
  14. 9
      resources/views/items/form.blade.php
  15. 6
      resources/views/sortable.blade.php
  16. 5
      resources/views/welcome.blade.php
  17. 6
      routes/web.php
  18. 1
      webpack.mix.js

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
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
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
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
View File

File diff suppressed because one or more lines are too long

47
resources/assets/sass/_app.scss
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
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
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')

Write Preview
Loading…
Cancel
Save