changes

app/Http/Controllers/ItemController.php

@@ -7,6 +7,18 @@ use App\Item;
 
 class ItemController extends Controller
 {
+
+     /**
+     * Display a listing of the resource on the dashboard.
+     *
+     * @return \Illuminate\Http\Response
+     */
+    public function dash()
+    {
+        $data['apps'] = Item::all();
+        return view('welcome', $data);
+    }
+   
     /**
      * Display a listing of the resource.
      *
@@ -45,15 +57,10 @@ class ItemController extends Controller
             'url' => 'required',
         ]);
 
-        $item = new Item;
+        Item::create($request->all());
 
-        $item->title = $request->title;
+        return redirect()->route('items.index')
-        $item->colour = $request->colour;
+            ->with('success','Item created successfully');
-        $item->url = $request->url;
-
-        $item->save();
-
-        return redirect()->route('items.index');
     }
 
     /**
@@ -75,7 +82,12 @@ class ItemController extends Controller
      */
     public function edit($id)
     {
-        //
+        // Get the item
+        $item = Item::find($id);
+
+        // show the edit form and pass the nerd
+        return view('items.edit')
+            ->with('item', $item);    
     }
 
     /**
@@ -87,7 +99,15 @@ class ItemController extends Controller
      */
     public function update(Request $request, $id)
     {
-        //
+        $validatedData = $request->validate([
+            'title' => 'required|max:255',
+            'url' => 'required',
+        ]);
+
+        Item::find($id)->update($request->all());
+
+        return redirect()->route('items.index')
+            ->with('success','Item updated successfully');
     }
 
     /**
@@ -99,5 +119,8 @@ class ItemController extends Controller
     public function destroy($id)
     {
         //
+        Item::find($id)->delete();
+        return redirect()->route('items.index')
+            ->with('success','Item deleted successfully');
     }
 }

app/Item.php

@@ -7,4 +7,7 @@ use Illuminate\Database\Eloquent\Model;
 class Item extends Model
 {
     //
+    protected $fillable = [
+        'title', 'url', 'colour', 'icon', 'description', 'pinned'
+    ];
 }

composer.json

@@ -8,7 +8,8 @@
         "php": ">=7.0.0",
         "fideloper/proxy": "~3.3",
         "laravel/framework": "5.5.*",
-        "laravel/tinker": "~1.0"
+        "laravel/tinker": "~1.0",
+        "laravelcollective/html": "^5.5"
     },
     "require-dev": {
         "filp/whoops": "~2.0",

composer.lock

@@ -4,8 +4,8 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#composer-lock-the-lock-file",
         "This file is @generated automatically"
     ],
-    "hash": "7f1915ec708986f5c88e22e683d74275",
+    "hash": "850bc78e9043df3a1a293a403c9d5838",
-    "content-hash": "b7904d07d1e1765a0a199aa11d6301a3",
+    "content-hash": "2e42f992455e9f27258038e27b67f5a6",
     "packages": [
         {
             "name": "dnoegel/php-xdg-base-dir",
@@ -604,6 +604,71 @@
             ],
             "time": "2017-12-18 16:25:11"
         },
+        {
+            "name": "laravelcollective/html",
+            "version": "v5.5.1",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/LaravelCollective/html.git",
+                "reference": "2f6dc39ab3655724a615fe8a652d8b7f04fc9ac6"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/LaravelCollective/html/zipball/2f6dc39ab3655724a615fe8a652d8b7f04fc9ac6",
+                "reference": "2f6dc39ab3655724a615fe8a652d8b7f04fc9ac6",
+                "shasum": ""
+            },
+            "require": {
+                "illuminate/http": "5.5.*",
+                "illuminate/routing": "5.5.*",
+                "illuminate/session": "5.5.*",
+                "illuminate/support": "5.5.*",
+                "illuminate/view": "5.5.*",
+                "php": ">=7.0.0"
+            },
+            "require-dev": {
+                "illuminate/database": "5.5.*",
+                "mockery/mockery": "~0.9.4",
+                "phpunit/phpunit": "~5.4"
+            },
+            "type": "library",
+            "extra": {
+                "laravel": {
+                    "providers": [
+                        "Collective\\Html\\HtmlServiceProvider"
+                    ],
+                    "aliases": {
+                        "Form": "Collective\\Html\\FormFacade",
+                        "Html": "Collective\\Html\\HtmlFacade"
+                    }
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Collective\\Html\\": "src/"
+                },
+                "files": [
+                    "src/helpers.php"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Taylor Otwell",
+                    "email": "taylorotwell@gmail.com"
+                },
+                {
+                    "name": "Adam Engebretson",
+                    "email": "adam@laravelcollective.com"
+                }
+            ],
+            "description": "HTML and Form Builders for the Laravel Framework",
+            "homepage": "http://laravelcollective.com",
+            "time": "2017-08-31 14:46:03"
+        },
         {
             "name": "league/flysystem",
             "version": "1.0.41",

config/app.php

@@ -167,7 +167,7 @@ return [
         /*
          * Package Service Providers...
          */
-
+        Collective\Html\HtmlServiceProvider::class,
         /*
          * Application Service Providers...
          */
@@ -206,8 +206,10 @@ return [
         'Eloquent' => Illuminate\Database\Eloquent\Model::class,
         'Event' => Illuminate\Support\Facades\Event::class,
         'File' => Illuminate\Support\Facades\File::class,
+        'Form' => Collective\Html\FormFacade::class,
         'Gate' => Illuminate\Support\Facades\Gate::class,
         'Hash' => Illuminate\Support\Facades\Hash::class,
+        'Html' => Collective\Html\HtmlFacade::class,
         'Lang' => Illuminate\Support\Facades\Lang::class,
         'Log' => Illuminate\Support\Facades\Log::class,
         'Mail' => Illuminate\Support\Facades\Mail::class,

package.json

@@ -17,5 +17,8 @@
         "laravel-mix": "^1.0",
         "lodash": "^4.17.4",
         "vue": "^2.5.7"
+    },
+    "dependencies": {
+        "node-sass": "^4.7.2"
     }
 }

public/css/app.css

@@ -220,6 +220,18 @@ th {
   padding: 0;
 }
 
+html {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+
+*,
+*:before,
+*:after {
+  -webkit-box-sizing: inherit;
+          box-sizing: inherit;
+}
+
 body {
   background: #cfd2d4;
 }
@@ -287,11 +299,31 @@ body {
 
 .item {
   width: 300px;
-  height: 200px;
+  height: 130px;
   margin: 20px;
-  background: #76b8bf;
+  background-image: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0.25)));
+  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.25));
   border-radius: 6px;
   padding: 20px;
+  -webkit-box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.3);
+          box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.3);
+  color: white;
+  overflow: hidden;
+  position: relative;
+}
+
+.item:after {
+  content: "";
+  position: absolute;
+  width: 130px;
+  height: 134px;
+  border-radius: 50%;
+  position: absolute;
+  right: -78px;
+  top: -2px;
+  background: rgba(255, 255, 255, 0.1);
+  -webkit-box-shadow: 0 0 40px 0px rgba(0, 0, 0, 0.2);
+          box-shadow: 0 0 40px 0px rgba(0, 0, 0, 0.2);
 }
 
 .module-container {
@@ -330,6 +362,8 @@ body {
 
 .module-container .table {
   width: 100%;
+  margin: 0;
+  background: #fff;
 }
 
 .module-container .table thead th {
@@ -342,11 +376,34 @@ body {
   padding: 15px 25px;
 }
 
-.module-container .table td.form-error {
+.module-container .table tbody tr:hover {
+  background: #fefbf2;
+}
+
+.module-container .table tbody tr:hover td:first-child {
+  position: relative;
+}
+
+.module-container .table tbody tr:hover td:first-child:before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: 5px;
+  background: #0eb584;
+}
+
+.module-container .table tbody td {
+  padding: 20px 25px;
+  font-size: 13px;
+  color: #2f313a;
+}
+
+.module-container .table tbody td.form-error {
   background: #e69191;
   color: white;
   text-align: center;
-  padding: 20px;
 }
 
 .module-actions {
@@ -441,3 +498,97 @@ div.create .input input {
   border-radius: 6px;
 }
 
+/*! Huebee v2.0.0
+http://huebee.buzz
+---------------------------------------------- */
+
+.huebee {
+  position: absolute;
+  z-index: 1;
+  -webkit-transform: translateY(0px);
+          transform: translateY(0px);
+  -webkit-transition: opacity 0.15s, -webkit-transform 0.15s;
+  transition: opacity 0.15s, -webkit-transform 0.15s;
+  transition: opacity 0.15s, transform 0.15s;
+  transition: opacity 0.15s, transform 0.15s, -webkit-transform 0.15s;
+}
+
+.huebee.is-hidden {
+  opacity: 0;
+  -webkit-transform: translateY(10px);
+          transform: translateY(10px);
+}
+
+.huebee.is-static-open {
+  position: relative;
+  z-index: auto;
+}
+
+.huebee__container {
+  position: absolute;
+  left: 0;
+  top: 5px;
+  padding: 10px;
+  background: #EEE;
+  border-radius: 5px;
+  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
+          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
+}
+
+.huebee.is-static-open .huebee__container {
+  position: relative;
+  display: inline-block;
+  left: auto;
+  top: auto;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
+.huebee__canvas {
+  display: block;
+  cursor: pointer;
+}
+
+.huebee__cursor {
+  width: 15px;
+  height: 15px;
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  -webkit-box-sizing: content-box;
+          box-sizing: content-box;
+  border: 3px solid white;
+  border-radius: 5px;
+  pointer-events: none;
+}
+
+.huebee__cursor.is-hidden {
+  opacity: 0;
+}
+
+.huebee__close-button {
+  display: block;
+  position: absolute;
+  width: 24px;
+  height: 24px;
+  top: -9px;
+  right: -9px;
+  border-radius: 12px;
+  background: #222;
+}
+
+.huebee__close-button__x {
+  stroke: white;
+  stroke-width: 3;
+  stroke-linecap: round;
+}
+
+.huebee__close-button:hover {
+  background: white;
+  cursor: pointer;
+}
+
+.huebee__close-button:hover .huebee__close-button__x {
+  stroke: #222;
+}
+

public/mix-manifest.json

@@ -1,4 +1,4 @@
 {
-    "/js/app.js": "/js/app.js?id=068e51303377c8c7b893",
+    "/css/app.css": "/css/app.css?id=b9e76574bf93ad55c746",
-    "/css/app.css": "/css/app.css?id=e2a8c3c0352639070f5c"
+    "/js/app.js": "/js/app.js?id=b9bd881783c66c420371"
 }

resources/assets/js/app.js

@@ -1,22 +1,7 @@
-
+$.when( $.ready ).then(function() {
-/**
+    $('.color-picker').each( function( i, elem ) {
- * First we will load all of this project's JavaScript dependencies which
+        var hueb = new Huebee( elem, {
- * includes Vue and other libraries. It is a great starting point when
+          // options
- * building robust, powerful web applications using Vue and Laravel.
+        });
- */
+      });
-
+});
-require('./bootstrap');
-
-window.Vue = require('vue');
-
-/**
- * Next, we will create a fresh Vue application instance and attach it to
- * the page. Then, you may begin adding components to this application
- * or customize the JavaScript scaffolding to fit your unique needs.
- */
-
-Vue.component('example-component', require('./components/ExampleComponent.vue'));
-
-const app = new Vue({
-    el: '#app'
-});

resources/assets/sass/_app.scss

@@ -1,3 +1,9 @@
+html {
+	box-sizing: border-box;
+  }
+  *, *:before, *:after {
+	box-sizing: inherit;
+  }
 body {
 	background: $body-bg;
 }
@@ -38,11 +44,28 @@ body {
 
 .item {
 	width: 300px;
-	height: 200px;
+	height: 130px;
 	margin: 20px;
-	background: #76b8bf;
+	background-image:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.25));
 	border-radius: 6px;
 	padding: 20px;
+	//border: 2px solid rgba(0,0,0,0.4);
+	box-shadow: 0 0 20px 2px rgba(0,0,0,0.3);
+	color: white;
+	overflow: hidden;
+	position: relative;
+	&:after {
+		content: "";
+		position: absolute;
+		width: 130px;
+		height: 134px;
+		border-radius: 50%;
+		position: absolute;
+		right: -78px;
+		top: -2px;
+		background: rgba(255,255,255,0.1);
+		box-shadow: 0 0 40px 0px rgba(0,0,0,0.2);
+	}
 }
 .module-container {
 	box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.4);
@@ -69,6 +92,9 @@ body {
 	}
 	.table {
 		width: 100%;
+		margin:0;
+		background:#fff;
+	
 		thead {
 			th {
     			background: #f2f3f6;
@@ -80,14 +106,36 @@ body {
 			    padding: 15px 25px;
 			}
 		}
+		tbody {
+			tr {
+				&:hover {
+					background: #fefbf2;
+					td:first-child {
+						position: relative;
+						&:before {
+							content: "";
+							position: absolute;
+							top: 0;
+							left: 0;
+							bottom: 0;
+							width: 5px;
+							background: $app-green;
+						}
+				   
+					}
+				}
+			}
 			td {
+				padding: 20px 25px;
+				font-size: 13px;
+				color: $app-text;
 				&.form-error {
 					background: #e69191;
 					color: white;
-					text-align: center;
+					text-align: center;					
-					padding: 20px;
 				}
 			}
+		}
 	}
 }
 .module-actions {
@@ -111,7 +159,7 @@ body {
         min-width: 65px;
         height: 60px;
         text-decoration: none;
-           box-sizing: border-box;
+        box-sizing: border-box;
         &:after {
             position: absolute;
             content: "";

resources/assets/sass/_huebee.scss

@@ -0,0 +1,83 @@
+/*! Huebee v2.0.0
+http://huebee.buzz
+---------------------------------------------- */
+
+.huebee {
+    position: absolute;
+    z-index: 1;
+    transform: translateY(0px);
+    transition: opacity 0.15s, transform 0.15s;
+  }
+  
+  .huebee.is-hidden {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  
+  .huebee.is-static-open {
+    position: relative;
+    z-index: auto;
+  }
+  
+  .huebee__container {
+    position: absolute;
+    left: 0;
+    top: 5px;
+    padding: 10px;
+    background: #EEE;
+    border-radius: 5px;
+    box-shadow: 0 5px 10px hsla(0, 0%, 0%, 0.3);
+  }
+  
+  .huebee.is-static-open .huebee__container {
+    position: relative;
+    display: inline-block;
+    left: auto;
+    top: auto;
+    box-shadow: none;
+  }
+  
+  .huebee__canvas {
+    display: block;
+    cursor: pointer;
+  }
+  
+  .huebee__cursor {
+    width: 15px;
+    height: 15px;
+    position: absolute;
+    left: 0px;
+    top: 0px;
+    box-sizing: content-box;
+    border: 3px solid white;
+    border-radius: 5px;
+    pointer-events: none;
+  }
+  
+  .huebee__cursor.is-hidden { opacity: 0; }
+  
+  .huebee__close-button {
+    display: block;
+    position: absolute;
+    width: 24px;
+    height: 24px;
+    top: -9px;
+    right: -9px;
+    border-radius: 12px;
+    background: #222;
+  }
+  
+  .huebee__close-button__x {
+    stroke: white;
+    stroke-width: 3;
+    stroke-linecap: round;
+  }
+  
+  .huebee__close-button:hover {
+    background: white;
+    cursor: pointer;
+  }
+  
+  .huebee__close-button:hover .huebee__close-button__x {
+    stroke: #222;
+  }

resources/assets/sass/app.scss

@@ -10,3 +10,6 @@
 
 // Bootstrap
 @import "app";
+
+// Huebee
+@import "huebee";

resources/views/app.blade.php

@@ -24,6 +24,21 @@
                     test
                 </header>
                 <main>
+                    @if ($message = Session::get('success'))
+                        <div class="alert alert-success">
+                            <p>{{ $message }}</p>
+                        </div>
+                    @endif
+                    @if (count($errors) < 0)
+                        <div class="alert alert-danger">
+                            <ul>
+                                @foreach ($errors->all() as $error)
+                                    <li>{{ $error }}</li>
+                                @endforeach
+                            </ul>
+                        </div>
+                    @endif
+                    
                     @yield('content')
                 </main>
 
@@ -32,5 +47,8 @@
                 </footer>
             </div>
         </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="/js/app.js"></script>
     </body>
 </html>

resources/views/items/create.blade.php

@@ -1,31 +1,9 @@
 @extends('app')
 
 @section('content')
-    <form action="{{ route('items.store') }}" class="create" method="post" />
-        <section class="module-container">
-            <header>
-                <div class="section-title">Add application</div>
-                <div class="module-actions">
-                    <button type="submit"class="button"><i class="fa fa-plus"></i><span>Save</span></button>
-                </div>
-            </header>
-            <div class="create">
-                {!! csrf_field() !!}
-                <div class="input">
-                    <label>Application name</label>
-                    <input type="text" name="title" value="{{ old('title') }}" />
-                </div>
-                <div class="input">
-                    <label>Colour</label>
-                    <input type="text" name="colour" value="{{ old('colour') }}" />
-                </div>
-                <div class="input">
-                    <label>URL</label>
-                    <input type="text" name="url" value="{{ old('url') }}" />
-                </div>
-            </div>
 
-        </section>
+    {!! Form::open(array('route' => 'items.store','method'=>'POST')) !!}
+    @include('items.form')
+    {!! Form::close() !!}
 
-</form>
 @endsection

resources/views/items/edit.blade.php

@@ -0,0 +1,9 @@
+@extends('app')
+
+@section('content')
+
+    {!! Form::model($item, ['method' => 'PATCH','route' => ['items.update', $item->id]]) !!}
+    @include('items.form')
+    {!! Form::close() !!}
+
+@endsection

resources/views/items/form.blade.php

@@ -0,0 +1,24 @@
+    <section class="module-container">
+        <header>
+            <div class="section-title">Add application</div>
+            <div class="module-actions">
+                <button type="submit"class="button"><i class="fa fa-plus"></i><span>Save</span></button>
+            </div>
+        </header>
+        <div class="create">
+            {!! csrf_field() !!}
+            <div class="input">
+                <label>Application name</label>
+                {!! Form::text('title', null, array('placeholder' => 'Title','class' => 'form-control')) !!}
+            </div>
+            <div class="input">
+                <label>Colour</label>
+                {!! Form::text('colour', null, array('placeholder' => 'Hex Colour','class' => 'form-control color-picker')) !!}
+            </div>
+            <div class="input">
+                <label>URL</label>
+                {!! Form::text('url', null, array('placeholder' => 'Url','class' => 'form-control')) !!}
+            </div>
+        </div>
+
+    </section>

resources/views/items/list.blade.php

@@ -26,9 +26,9 @@
                                 <td>{{ $app->title }}</td>
                                 <td>{{ $app->description }}</td>
                                 <td>{{ $app->url }}</td>
-                                <td class="text-center"><a href="{!! route('items.edit', $app->id) !!}" title="Edit {!! $app->title !!}"><i class="fa fa-pencil"></i></a></td>
+                                <td class="text-center"><a href="{!! route('items.edit', $app->id) !!}" title="Edit {!! $app->title !!}"><i class="fa fa-pencil"></i>Edit</a></td>
                                 <td class="text-center">
-                                        <a href="{!! route('items.destroy', $app->id) !!}" title="Delete {!! $app->title !!}" class="confirm-delete"><i class="fa fa-trash-o"></i></a>
+                                        <a href="{!! route('items.destroy', $app->id) !!}" title="Delete {!! $app->title !!}" class="confirm-delete"><i class="fa fa-trash-o"></i>Delete</a>
                                 </td>
                             </tr>
                         @endforeach

resources/views/welcome.blade.php

@@ -1,10 +1,16 @@
 @extends('app')
 
 @section('content')
-
+    @if($apps->first())
-                    <section class="item">
+        @foreach($apps as $app)
+                    <section class="item" style="background-color: {{ $app->colour }}">
+                        {{ $app->title }}
                         Item
                     </section>
+        @endforeach
+    @else
+        There are currently no Applications, add one here
+    @endif
 
 
 @endsection

routes/web.php

@@ -11,9 +11,7 @@
 |
 */
 
-Route::get('/', function () {
+Route::get('/', 'ItemController@dash');
-    return view('welcome');
-});
 
 Route::resources([
     'items' => 'ItemController',

webpack.mix.js

@@ -11,5 +11,8 @@ let mix = require('laravel-mix');
  |
  */
 
-mix.js('resources/assets/js/app.js', 'public/js')
+mix.scripts([
+    'resources/assets/js/huebee.js',
+    'resources/assets/js/app.js'
+    ], 'public/js/app.js')
    .sass('resources/assets/sass/app.scss', 'public/css').version();