Gridstack project (https://gridstackjs.com)
Budget: $10 – $200 USD
This project is a gridstack project. The project is about to configure a dashboard that includes the gridstack. I would prefer answers from persons that have worked with the gridstack (https://gridstackjs.com) components. If you are interested in the project please state what you bid is.
The requirements for the project are:
Requirements Code
==========================================
1) Use gridstack.js (https://gridstackjs.com) (Use javascript/JQuery)
2) Addtional code should be written in javascript/JQuery
Requirements Dashboard
==========================================
1) The dashboard should be as in the pictures (dashboard1, dashboard2, dashboard3, dashboard4)
a) The size of the dashboard should be fixed and not rezized if the window is resized
2) Header on top of the gridstack dashboard (maked in black) should be sticky when scrolling horizontal
3) The hedaer to the left of the gridstack dashboard (marked in black) should be sticky when scrolling vertical
4) Save gridstack dashboard to a textfile with json format when the button "Save dashboard" is pressed
5) Load gridstack dashboard from a saved gridstack dashboard when the button "Load dashboard" is pressed
6) Clear all widgets from the gridstack dashboard when the button "Clear dashboard" is pressed.
7) Enable add, remove, move and resize widget when the button "Enable add .." is pressed
8) Disable add, remove, move and resize widget when the button "Disable add .." is pressed
Requirements Widget
==========================================
1) Add widgets to the gridstack dashboard by drag from the add widget button to the gridstack dashboard.
a) The default size of the widget should be 3x2. Header height should always be 1. Default header color
should be black.
b) The widget should move to the closest position where you drop it and where it will fit.
c) Save gridstack dashboard when a widget is added (textfile with json format)
d) Not possible to drag to the areas marked as "Not Available".
e) Widgets should not be overlapping.
2) Remove widget by drag the widget from gridstack dashboard the buttons with the trash can icon.
a) Save gridstack dashboard when a widget is removed (textfile with json format).
3) By dubbelclick on a widget on the gridstack dashboard, a pop-up should be visable.
a) It should be possible to change widget header and color.
b) It should be possible to change widget data1, widget data2, widget data3.
c) Save gridstack dashboard when a widget is changed (textfile with json format).
4) Widgets should have overflow horizontel and vertical and show scrollers if the text does not fit within the
widget.
5) It should be possible to move and rezize a widget on the gridstack dashboard
a) It should only be possible to move/resize to a area where the widget will fit.
b) Save gridstack dashboard when a widget is moved/rezized (textfile with json format).
c) Not possible to drag/rezize to the areas marked as "Not Available".
d) No other widget should be moved/resized other than the widget that is moved or rezized.
e) Widgets should not be overlapping.
The requirements for the project are:
Requirements Code
==========================================
1) Use gridstack.js (https://gridstackjs.com) (Use javascript/JQuery)
2) Addtional code should be written in javascript/JQuery
Requirements Dashboard
==========================================
1) The dashboard should be as in the pictures (dashboard1, dashboard2, dashboard3, dashboard4)
a) The size of the dashboard should be fixed and not rezized if the window is resized
2) Header on top of the gridstack dashboard (maked in black) should be sticky when scrolling horizontal
3) The hedaer to the left of the gridstack dashboard (marked in black) should be sticky when scrolling vertical
4) Save gridstack dashboard to a textfile with json format when the button "Save dashboard" is pressed
5) Load gridstack dashboard from a saved gridstack dashboard when the button "Load dashboard" is pressed
6) Clear all widgets from the gridstack dashboard when the button "Clear dashboard" is pressed.
7) Enable add, remove, move and resize widget when the button "Enable add .." is pressed
8) Disable add, remove, move and resize widget when the button "Disable add .." is pressed
Requirements Widget
==========================================
1) Add widgets to the gridstack dashboard by drag from the add widget button to the gridstack dashboard.
a) The default size of the widget should be 3x2. Header height should always be 1. Default header color
should be black.
b) The widget should move to the closest position where you drop it and where it will fit.
c) Save gridstack dashboard when a widget is added (textfile with json format)
d) Not possible to drag to the areas marked as "Not Available".
e) Widgets should not be overlapping.
2) Remove widget by drag the widget from gridstack dashboard the buttons with the trash can icon.
a) Save gridstack dashboard when a widget is removed (textfile with json format).
3) By dubbelclick on a widget on the gridstack dashboard, a pop-up should be visable.
a) It should be possible to change widget header and color.
b) It should be possible to change widget data1, widget data2, widget data3.
c) Save gridstack dashboard when a widget is changed (textfile with json format).
4) Widgets should have overflow horizontel and vertical and show scrollers if the text does not fit within the
widget.
5) It should be possible to move and rezize a widget on the gridstack dashboard
a) It should only be possible to move/resize to a area where the widget will fit.
b) Save gridstack dashboard when a widget is moved/rezized (textfile with json format).
c) Not possible to drag/rezize to the areas marked as "Not Available".
d) No other widget should be moved/resized other than the widget that is moved or rezized.
e) Widgets should not be overlapping.