Not quite working. jquery-ui draggable isn't working.

librenms · May 26, 2017 · 5f601bb · 5f601bb
1 parent ef29260
commit 5f601bb
Show file tree

Hide file tree

Showing 11 changed files with 187 additions and 38 deletions.
diff --git a/app/Models/User.php b/app/Models/User.php
@@ -160,6 +160,6 @@ public function dashboards()
      */
     public function widgets()
     {
-        return $this->hasMany('App\Models\UserWidgets', 'user_id');
+        return $this->hasMany('App\Models\UsersWidgets', 'user_id');
     }
 }
diff --git a/package.json b/package.json
@@ -16,6 +16,7 @@
     "jquery": "^3.1.1",
     "laravel-mix": "0.*",
     "lodash": "^4.17.4",
+    "gridstack": "^0.3.0",
     "vue": "^2.1.10"
   }
 }
diff --git a/public/css/gridstack.min.css b/public/css/gridstack.min.css
diff --git a/public/js/gridstack.min.js b/public/js/gridstack.min.js
diff --git a/resources/assets/js/app.js b/resources/assets/js/app.js
@@ -13,8 +13,12 @@ require('./bootstrap');
  * or customize the JavaScript scaffolding to fit your unique needs.
  */
 
+window.Gridstack = require('gridstack');
+window.$ = $.extend(require('jquery-ui'));
+
 Vue.component('example', require('./components/Example.vue'));
+Vue.component('dashboard-widget', require('./components/DashboardWidget.vue'));
 
-const app = new Vue({
-    el: '#app'
-});
+// const app = new Vue({
+//     el: '#app'
+// });
diff --git a/resources/views/dashboard.blade.php b/resources/views/dashboard.blade.php
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <!--[if lt IE 9]>
+    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="csrf-token" content="{{ csrf_token() }}">
+    <title>Float grid demo</title>
+
+    <link rel="stylesheet" href="{{ mix('/css/vendor.css') }}">
+    <link rel="stylesheet" href="{{ mix('/css/app.css') }}">
+    {{--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">--}}
+    {{--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.3.0/gridstack.min.css"/>--}}
+
+    {{--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>--}}
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.0/jquery-ui.js"></script>
+    {{--<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>--}}
+    {{--<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js"></script>--}}
+    {{--<script src="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.3.0/gridstack.min.js"></script>--}}
+    {{--<script src="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.3.0/gridstack.jQueryUI.min.js"></script>--}}
+    <script src="{{ mix('/js/manifest.js') }}"></script>
+    <script src="{{ mix('/js/vendor.js') }}"></script>
+    <script src="{{ mix('/js/app.js') }}"></script>
+
+
+    <style type="text/css">
+        .grid-stack {
+            background: lightgoldenrodyellow;
+        }
+        .grid-stack-item-content {
+            color: #2c3e50;
+            text-align: center;
+            background-color: #18bc9c;
+        }
+    </style>
+</head>
+<body>
+<div class="container-fluid">
+    <h1>Float grid demo</h1>
+
+    <div>
+        <a class="btn btn-default" id="add-new-widget" href="#">Add Widget</a>
+    </div>
+
+    <br/>
+
+    <div class="grid-stack">
+    </div>
+</div>
+
+
+<script type="text/javascript">
+    $(function () {
+        var options = {
+            float: true
+        };
+        $('.grid-stack').gridstack(options);
+        new function () {
+            this.items = [
+                {x: 0, y: 0, width: 2, height: 2},
+                {x: 3, y: 1, width: 1, height: 2},
+                {x: 4, y: 1, width: 1, height: 1},
+                {x: 2, y: 3, width: 3, height: 1},
+//                    {x: 1, y: 4, width: 1, height: 1},
+//                    {x: 1, y: 3, width: 1, height: 1},
+//                    {x: 2, y: 4, width: 1, height: 1},
+                {x: 2, y: 5, width: 1, height: 1}
+            ];
+            this.grid = $('.grid-stack').data('gridstack');
+            this.addNewWidget = function () {
+                var node = this.items.pop() || {
+                        x: 12 * Math.random(),
+                        y: 5 * Math.random(),
+                        width: 1 + 3 * Math.random(),
+                        height: 1 + 3 * Math.random()
+                    };
+                this.grid.addWidget($('<div><div class="grid-stack-item-content" /><div/>'),
+                    node.x, node.y, node.width, node.height);
+                return false;
+            }.bind(this);
+            $('#add-new-widget').click(this.addNewWidget);
+        };
+    });
+</script>
+</body>
+</html>
diff --git a/resources/views/home.blade.php b/resources/views/home.blade.php
@@ -1,17 +1,17 @@
 @extends('layouts.app')
 
-@section('pagecss')
-    @parent
-    <link href="{{ url('css/gridstack.min.css') }}" rel="stylesheet"/>
-@endsection
+{{--@section('pagecss')--}}
+    {{--@parent--}}
+    {{--<link href="{{ url('css/gridstack.min.css') }}" rel="stylesheet"/>--}}
+{{--@endsection--}}
 
 @include('includes.datatables')
 
-@section('pagejs')
-    @parent
-    <script src="{{ url('js/lodash.min.js') }}"></script>
-    <script src="{{ url('js/gridstack.min.js') }}"></script>
-@endsection
+{{--@section('pagejs')--}}
+    {{--@parent--}}
+    {{--<script src="{{ url('js/lodash.min.js') }}"></script>--}}
+    {{--<script src="{{ url('js/gridstack.min.js') }}"></script>--}}
+{{--@endsection--}}
 
 @section('title', trans('nav.overview.dashboard'))
 

diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
@@ -10,8 +10,9 @@
         <!-- Tell the browser to be responsive to screen width -->
         <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
         <!-- Bootstrap 3.3.5 -->
-        <link rel="stylesheet" href="{{ url('css/bootstrap.min.css') }}">
+        {{--<link rel="stylesheet" href="{{ url('css/bootstrap.min.css') }}">--}}
         <!-- Laravel Mix compiled css -->
+        <link rel="stylesheet" href="{{ mix('/css/vendor.css') }}">
         <link rel="stylesheet" href="{{ mix('/css/app.css') }}">
         <!-- Font Awesome -->
         <link rel="stylesheet" href="{{ url('css/font-awesome.min.css') }}">
@@ -82,13 +83,6 @@
             @yield('content')
         @endif
 
-        <!-- jQuery 2.1.4 -->
-        <script src="{{ url('js/plugins/jQuery/jQuery-2.1.4.min.js') }}"></script>
-
-        <script src="{{ url('js/plugins/jQueryUI/jquery-ui.min.js') }}"></script>
-        <!-- Bootstrap 3.3.5 -->
-        <script src="{{ url('js/bootstrap.min.js') }}"></script>
-
         <!-- Laravel Mix compiled js -->
         <script src="{{ mix('/js/manifest.js') }}"></script>
         <script src="{{ mix('/js/vendor.js') }}"></script>

diff --git a/resources/views/vue.blade.php b/resources/views/vue.blade.php
@@ -1,7 +1,71 @@
 @extends('layouts.app')
 
 @section('content')
+
     <div id="app"><!-- include this in app layout? -->
         <example></example>
     </div>
+
+
+    <h1>Gridstack.js and Vue.js</h1>
+
+    {{--https://troolee.github.io/gridstack.js/--}}
+    <div class="grid-stack" id="app2">
+
+        <dashboard-widget v-for="widget in widgetsList" v-bind:widget="widget"></dashboard-widget>
+
+    </div>
+
+
+    </div>
+
+
+
+
+@endsection
+
+@section('pagejs')
+    @parent
+    {{--$.fn.size = function(){--}}
+    {{--return this.length;--}}
+    {{--};--}}
+    {{--<script src="{{ url('js/lodash.min.js') }}"></script>--}}
+    {{--<script src="{{ url('js/gridstack.min.js') }}"></script>--}}
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.0/jquery-ui.js"></script>
+
+    <script type="text/javascript">
+        /*Gridstack*/
+
+        $(function () {
+            var options = {
+                cellHeight: 80,
+                verticalMargin: 10
+            };
+            $('.grid-stack').gridstack(options);
+        });
+
+//        $('.grid-stack').gridstack({
+//            cellHeight: 80,
+//            verticalMargin: 10,
+//            draggable: {
+//                handle: '.draggable',
+//                scroll: true,
+//                appendTo: 'body'
+//            },
+//            animate: true
+//        });
+
+
+        var app2 = new Vue({
+            el: '#app2',
+            data: {
+                widgetsList: [
+                    {text: 'Vegetables', width: '2', height: '2', title: 'one'},
+                    {text: 'Cheese', width: '2', height: '4', title: 'two'},
+                    {text: 'Whatever else humans are supposed to eat', width: '4', height: '2', title: 'three'}
+                ]
+            }
+        })
+    </script>
+
 @endsection
diff --git a/routes/web.php b/routes/web.php
@@ -18,7 +18,10 @@
 
     // test vue.js route
     Route::get('/vue', function () {
-        return view('vue');
+        return view('vue', ['widgets' => Auth::user()->widgets->all()]);
+    });
+    Route::get('/dash', function () {
+        return view('dashboard', ['widgets' => Auth::user()->widgets->all()]);
     });
 
     Route::get('/', 'HomeController@redirect')->name('home');

diff --git a/webpack.mix.js b/webpack.mix.js
@@ -13,5 +13,8 @@ const {mix} = require('laravel-mix');
 
 mix.js('resources/assets/js/app.js', 'public/js')
     .sass('resources/assets/sass/app.scss', 'public/css')
-    .extract(['vue','bootstrap-sass'])
+    .styles([
+        'node_modules/gridstack/dist/gridstack.css'
+    ], 'public/css/vendor.css')
+    .extract(['vue','jquery','jquery-ui','gridstack','bootstrap-sass'])
     .version();