JavaScript HTML CSS Shell
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
app
scripts
test
.bowerrc
.eslint.json
.gitignore
.travis.yml
CONTRIBUTING.md
Gruntfile.js
LICENSE
README.md
bower.json
package.json

README.md

Build Status devDependency Status

Dashboard

Demo

http://synyx.github.io/dashboard/

Installation

It is very easy to setup this dashboard. All you need is node installed (https://nodejs.org/)

Then you just go to the /dashboard directory, execute npm install and type grunt. This will run all the tests and will create a directory dist/ with the fully functional javascript application.

If you are not familiar with grunt then take your time and get some information about it on http://gruntjs.com/

Grunt Tasks

There are several grunt tasks pre defined.

  • grunt [default]
    • will run linting, test and build task
  • grunt test
    • run mocha tests flavoured with chai of every test defined in test/spec/runner.js in the console
  • grunt build
    • will create the dist directory with the fully functional javascript application in it
  • grunt serve
    • will run a server over the files of app/
    • will watch for changes to reload the server
    • very helpful while adding new features or fixing bugs
  • grunt serve:dist
    • will execute the build task and run a server over the files in dist/
    • with this task you can check if your generated application is correct
    • will not watch for changes
  • grunt serve:test
    • will run the tests of test/ in the browser
    • will watch for changes to restart the tests

Content

This application does only consume json files and will display them. All JSON files have to be provided in a listing.json in the root directory.

Listing.json

[
    "content/table.json",
    "content/centered-div.json",
    "content/responsive-image.json",
    "content/long-text.json",
    "content/fifth.json"
]

JSON Format

For example the content/table.json

{
    "name": "Name of the slide",
    "content": "Content if the slide"
    "importance": 1,
    "tags": ["awesome", "slide"],
}
  • name
    • represents the title on the top of the page
  • content
    • holds the information which will be shown on the dashboard
    • html, css, ... is allowed
  • importance (optional, default: 1)
    • provides the information on how long should this information be displayed
  • tags
    • is there to create specific dashboard with a custom selection of content

Tags

As mentioned in the JSON Format section you can create your own custom dashboard show by tags.

For example these three json files are available.

{
    "name": "First",
    "content": "first"
    "tags": ["first", "information"],
}
{
    "name": "Second",
    "content": "second"
    "tags": ["second", "information"],
}
{
    "name": "Third",
    "content": "third"
    "tags": ["information"],
}

OR -

You can specify a custom dashboard show with the slides that have the tag first or second by

http://localhost:9000/?first-second

Now you get displayed a dashboard show with the two slides first and second.

AND +

Now we want a dashboard show with all slides they got both tags. first and information

http://localhost:9000/?first+information

Now you get displayed a dashboard show with only the first slide.

Contribution

If you want to contribute you are very welcome, see our contribution guidelines

License

synyx/dashboard is licensed under the Apache License 2.0

All logos, brands and trademarks are not under the Apache License 2.0 and may not be used without permission from synyx.