Working on Gridstack

dashboard.blade.php

@extends('layouts.app')

@section('head')

    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="https://cdn.jsdelivr.net/lodash/4.17.2/lodash.min.js"></script>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.2.6/gridstack.css"/>
    <script type="text/javascript" src='//cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.2.6/gridstack.min.js'></script>

@endsection


@section('content')


    <div id="page-wrapper">

        <div class="row">
            <div class="col-lg-12">
                <h1>Dashboard</h1>
                <div class="alert alert-dismissable alert-warning">
                    <button data-dismiss="alert" class="close" type="button">&times;</button>

                    This is a message

                </div>
            </div>
        </div>


        <div class="row">
        </div>
    </div>




    <h1>Gridstack.js and Vue.js</h1>

    {{--https://troolee.github.io/gridstack.js/--}}
    <div id="app">

    <div class="grid-stack">
        <dashboard-widget v-for="widget in widgetsList" v-bind:widget="widget"></dashboard-widget>
    </div>

    <br>
        <a class="btn btn-default" id="save-grid" v-on:click="savePositions">Save Grid</a>
    </div> {{--app--}}


@endsection

@section('js')



    <script type="text/javascript">

        /*Gridstack*/

        $(function () {
            var options = {
                cellHeight: 100,
                verticalMargin: 10
                /*disableResize: true*/
            };
            $('.grid-stack').gridstack(options);
        });


        /*Vue*/

        //setting the width here is just the initail load

        Vue.component('dashboard-widget', {
            props: ['widget'],
            template: '<div class="grid-stack-item"  ' +
            ':data-gs-width="widget.width" :data-gs-height="widget.height" :id-for-save="widget.id"' + //bind the width to widget .width
            ':data-gs-x="widget.x" :data-gs-y="widget.y">'+
            '<div class="panel panel-primary grid-stack-item-content">' +
            '<div class="panel-heading">' +
            '<h3 class="panel-title"><i class="fa fa-bar-chart-o"></i>@{{ widget.title }}</h3>' +
            '</div>' +
            '<div class="panel-body" :id="widget.chartId">' +
            '<div :id="widget.id">@{{ widget.text }} @{{widget.x}}</div>' +
            '</div>' +
            '</div>' +
            '</div>'
        });


        var app = new Vue({
            el: '#app',
            data: {
                widgetsList: [
                        @foreach($widgets as $widget)
                            {text: '{{$widget->description}}',
                            width: '{{$widget->columns}}',
                            height: '{{$widget->height}}',
                            title: '{{$widget->title}}',
                            x:{{$widget->x}},
                            y:{{$widget->y}},
                            id:"widget-id-{{$widget->id}}",
                            chartId:"chart-id-{{$widget->id}}"},
                        @endforeach
                ]
            },
            methods: {
                savePositions: function (event) {
                    //This does not seem very Vue like
                    //I really want to bind these somehow so I don't have to get them from the DOM

                    var widgetPositions = _.map($('.grid-stack .grid-stack-item:visible'), function (el) {
                        el = $(el);
                        var node = el.data('_gridstack_node');
                        return {
                            id: el.attr('id-for-save'),
                            x: node.x,
                            y: node.y,
                            width: node.width,
                            height: node.height
                        };
                    });

                    axios.post('/savePositions', {
                                params: {
                                    positions: widgetPositions
                                }
                            })
                            .then(function (response) {
                                console.log(response);
                                alert('Done');
                            })
                            .catch(function (error) {
                                console.log(error);
                            });
                }
            }
        });


    </script>



    @foreach($widgets as $widget)
        <script>


            //get all of this from the db

            FusionCharts.ready(function () {
                var revenueChart = new FusionCharts({
                    "type": "{{$widget->widgetType->description}}",
                    "renderAt": "chart-id-{{$widget->id}}",
                    "width": "100%",
                    "height": "100%",
                    "dataFormat": "json",
                    "dataSource": {
                        "chart": {
                            "caption": "{{$widget->caption}}",
                            "subCaption": "{{$widget->subCaption}}",
                            "xAxisName": "{{$widget->xAxisName}}",
                            "yAxisName": "{{$widget->yAxisName}}",
                            "theme": "fint"
                        },
                        "data": [{!! $widget->data !!}],

                    }
                });

                revenueChart.render();
            });


            //looking at this
            // FusionCharts.items['chartobject-1'].resizeTo(10, 10);


            //trigger this on resize
               /* $('#widget-id-{{$widget->id}}').updateFusionCharts({


                    'height': 10,
                    'width': 20


                });
*/

        </script>

    @endforeach

<script>
    $('.grid-stack').on('resizestop', function (event, ui) {
    console.debug(ui.element[0].attributes.getNamedItem("data-gs-width"));
        console.debug(ui.element[0].attributes.getNamedItem("data-gs-height"));
        console.debug(ui.element[0].attributes.getNamedItem("id-for-save"));
        //get the chart amd resize? -- like this http://www.fusioncharts.com/dev/using-with-javascript-libraries/jquery/updating-chart-properties-using-jquery.html#changing-the-width-and-the-height-at-run-time

        var grid = this;
        var element = event.target;

        //get these in px then I can use them to resize the chart?
        var widthInPx = event.target.style.width;
        var heightInPx =event.target.style.height;

        //id-for-save is widget-id-2

    });
</script>

@endsection