riot-admin
v1.0.0
Published
generic api-agnostic admin dashboard interface, like ng-admin but less javascript-ish.
Downloads
3
Readme
generic api-agnostic admin dashboard interface, like ng-admin but less javascript-ish.
NOTE: under construction / do not use
Usage
<script type="text/javascript" src="dist/riot-admin.js"/>
<!-- customize collection header here -->
<script type="riot/tag">
<collection-header>
<h3>{ title }</h3>
</collection-header>
</script>
<script type="text/javascript">
riotadmin({
"project":{
"title": "riotadmin.io",
"logo": "<i class='fa fa-fw fa-globe'/> ",
"url": "http://mylandingpage.com"
},
"menu":{
"items":[
.....
{
"icon":"<i class='fa fa-fw fa-area-chart'></i> ",
"label": "Link",
"href":"/foo",
"target": "_blank",
"type":"link"
},
.....
},{
"icon":"<i class='fa fa-fw fa-exchange'></i> ",
"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
- built to re-use
- configure from json
- extend to own flavor
- no steep javascript learning curve (ng-admin)
- you need to provide data using ajax/rest/websocket etc