https://github.com/coderofsalvation/riot-admin

generic api-agnostic admin dashboard interface, like ng-admin but less javascript-ish
https://github.com/coderofsalvation/riot-admin

Last synced: about 1 year ago
JSON representation

generic api-agnostic admin dashboard interface, like ng-admin but less javascript-ish

• Host: GitHub
• URL: https://github.com/coderofsalvation/riot-admin
• Owner: coderofsalvation
• Created: 2015-11-25T14:24:06.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2020-05-28T19:24:38.000Z (about 6 years ago)
• Last Synced: 2025-04-06T00:13:27.132Z (about 1 year ago)
• Language: CSS
• Size: 247 KB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml

Awesome Lists containing this project

README

          
generic api-agnostic admin dashboard interface, like ng-admin but less javascript-ish.

> NOTE: under construction / do not use



## Usage 

    

    

    

      <collection-header>

        <h3>{ title }</h3>

      </collection-header>

    

    

      riotadmin({

        "project":{

          "title": "riotadmin.io",

          "logo": "<i class='fa fa-fw fa-globe'/>&nbsp;",

          "url": "http://mylandingpage.com"

        },

        "menu":{

          "items":[

            .....

            { 

              "icon":"<i class='fa fa-fw fa-area-chart'></i>&nbsp;",

              "label": "Link",

              "href":"/foo",

              "target": "_blank",

              "type":"link"

            },

            .....

            },{

              "icon":"<i class='fa fa-fw fa-exchange'></i>&nbsp;",

              "label":"REST items",

              "href":"#/rest-items",

              "type":"collection",

              "data": function(cb,options){

                // replace data with an ajax/rest call (use options object to pass on query,sort,order,limit,offset etc)

                cb({

                  title: "This is a collection",

                  data:[

                    {"name":"bar","age":12,"type":"human","sex":"male","likes fishing":"no"},

                    {"name":"bar","age":13,"type":"human","sex":"male","likes fishing":"no"},

                    {"name":"bar","age":14,"type":"human","sex":"male","likes fishing":"no"},

                    {"name":"bar","age":15,"type":"human","sex":"male","likes fishing":"yes"},

                    {"name":"bar","age":16,"type":"human","sex":"male","likes fishing":"yes"},

                    {"name":"bar","age":17,"type":"human","sex":"male","likes fishing":"yes"},

                    {"name":"bar","age":18,"type":"human","sex":"male","likes fishing":"yes"}

                  ]

                });

              }

           ..... and so on

## Building 

This is optional (for those who want to fiddle with the source), but here goes:

    $ npm install riot-admin 

    // now run test/index.html in your browser

finally this will bundle everything into `dist/riot-admin.js`

    $ npm run-script compile

## Philosophy

* configure from json 

* built to re-use and extend on

* no steep javascript framework lock-in (ng-admin/ng-admin-react)

* small & minimal (no jquery) by default

* you need to provide data using ajax/rest/websocket etc

## Easily extendable

* Datatables ( see demo )

* Dashboard [Gauges](https://npmjs.com/package/justgage) and [charts](https://www.npmjs.com/package/peity)

## api

* `$_` reference to document.querySelector        

* `$$_` reference to document.querySelectorAll :