ui: further k/v improvements
This commit is contained in:
parent
1636abd125
commit
52d8a28592
|
@ -62,23 +62,49 @@
|
|||
{{outlet}}
|
||||
</script>
|
||||
|
||||
<script type="text/x-handlebars" data-template-name="kv">
|
||||
<script type="text/x-handlebars" data-template-name="kv/show">
|
||||
<a {{action 'linkToKey' parent }}>{{parent}}</a>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-5">
|
||||
|
||||
<ul>
|
||||
{{#each child in model.children}}
|
||||
<li {{action 'linkToKey' model.key child }}>{{ child }}</li>
|
||||
{{#each item in model }}
|
||||
<div {{action 'linkToKey' item.key }} class="panel panel-link panel-short">
|
||||
<div {{bind-attr class=":panel-bar item.isFolder:bg-gray:bg-light-gray" }}></div>
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title">
|
||||
{{item.key}}
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
{{/each}}
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-5 col-md-offset-1">
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script type="text/x-handlebars" data-template-name="kv/edit">
|
||||
<a {{action 'linkToKey' parent }}>{{parent}}</a>
|
||||
|
||||
<div class="col-md-5">
|
||||
<div class="row">
|
||||
<div {{action 'linkToKey' model.key }} class="panel panel-link panel-short">
|
||||
<div {{bind-attr class=":panel-bar model.isFolder:bg-gray:bg-light-gray" }}></div>
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title">
|
||||
{{model.key}}
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{#if model.value}}
|
||||
<div class="col-md-5 col-md-offset-1">
|
||||
<h4>{{ model.key }}</h4>
|
||||
</div>
|
||||
|
||||
<div class="col-md-5 col-md-offset-1">
|
||||
{{ input value=model.value class="form-control"}}
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
</script>
|
||||
|
||||
|
|
|
@ -70,14 +70,3 @@ App.ServicesController = Ember.ArrayController.extend({
|
|||
App.ServicesShowController = Ember.Controller.extend({
|
||||
needs: ['services']
|
||||
});
|
||||
|
||||
|
||||
// Key value controller
|
||||
App.KvController = Ember.Controller.extend({
|
||||
actions: {
|
||||
linkToKey: function(top, child) {
|
||||
var route = top + "/" + child
|
||||
this.transitionToRoute('kv.key', route)
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
@ -76,3 +76,20 @@ App.Node = Ember.Object.extend({
|
|||
}.property('hasFailingChecks')
|
||||
});
|
||||
|
||||
|
||||
//
|
||||
// A key/value object
|
||||
//
|
||||
App.Key = Ember.Object.extend({
|
||||
isFolder: function() {
|
||||
return (this.get('key').slice(-1) == "/")
|
||||
}.property('isFolder'),
|
||||
|
||||
parentKeys: function() {
|
||||
var parts = this.get('key').split('/')
|
||||
parts.pop()
|
||||
console.log(parts)
|
||||
|
||||
return parts
|
||||
}.property('parentKey')
|
||||
});
|
||||
|
|
|
@ -12,9 +12,9 @@ App.Router.map(function() {
|
|||
this.resource("nodes", { path: "/nodes" }, function() {
|
||||
this.route("show", { path: "/:name" });
|
||||
});
|
||||
this.resource("kv", { path: "/kv" }, function() {
|
||||
this.route("key", { path: "/*wildcard" });
|
||||
});
|
||||
this.resource("kv", { path: "/kv" });
|
||||
this.resource("kv.show", { path: "/kv/:key" });
|
||||
this.resource("kv.edit", { path: "/kv/:key/edit" });
|
||||
});
|
||||
|
||||
this.route("index", { path: "/" });
|
||||
|
|
|
@ -4,6 +4,17 @@
|
|||
//
|
||||
//
|
||||
App.BaseRoute = Ember.Route.extend({
|
||||
actions: {
|
||||
linkToKey: function(key) {
|
||||
key = key.replace(/\//g, "-")
|
||||
|
||||
if (key.slice(-1) === "-") {
|
||||
this.transitionTo('kv.show', key)
|
||||
} else {
|
||||
this.transitionTo('kv.edit', key)
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
//
|
||||
|
@ -19,7 +30,6 @@ App.IndexRoute = Ember.Route.extend({
|
|||
|
||||
setupController: function(controller, model) {
|
||||
controller.set('content', model);
|
||||
|
||||
controller.set('dcs', window.fixtures.dcs);
|
||||
},
|
||||
|
||||
|
@ -51,23 +61,39 @@ App.DcRoute = App.BaseRoute.extend({
|
|||
}
|
||||
});
|
||||
|
||||
//
|
||||
// The route for for browsing and editing k/v data
|
||||
//
|
||||
//
|
||||
App.KvRoute = Ember.Route.extend({
|
||||
|
||||
App.KvRoute = App.BaseRoute.extend({
|
||||
beforeModel: function() {
|
||||
this.transitionTo('kv.show', '-')
|
||||
}
|
||||
});
|
||||
|
||||
App.KvShowRoute = App.BaseRoute.extend({
|
||||
model: function(params) {
|
||||
var parts = window.location.hash.split("/").slice(3)
|
||||
var key = params.key.replace(/-/g, "/")
|
||||
objs = [];
|
||||
|
||||
var key = parts.join("/")
|
||||
window.fixtures.keys_full[key].map(function(obj){
|
||||
objs.push(App.Key.create({key: obj}));
|
||||
});
|
||||
|
||||
console.log(key);
|
||||
|
||||
return window.fixtures.keys_full[key];
|
||||
return objs
|
||||
},
|
||||
|
||||
setupController: function(controller, model) {
|
||||
controller.set('content', model);
|
||||
controller.set('parent', model[0].get('parentKeys'));
|
||||
}
|
||||
});
|
||||
|
||||
App.KvEditRoute = App.BaseRoute.extend({
|
||||
model: function(params) {
|
||||
var key = params.key.replace(/-/g, "/")
|
||||
return App.Key.create().setProperties(window.fixtures.keys_full[key]);
|
||||
},
|
||||
setupController: function(controller, model) {
|
||||
controller.set('content', model);
|
||||
controller.set('parent', model.get('parentKeys'));
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
@ -47,3 +47,9 @@ App.NodesShowView = Ember.View.extend({
|
|||
//
|
||||
templateName: 'node'
|
||||
})
|
||||
|
||||
|
||||
|
||||
App.KvListView = Ember.View.extend({
|
||||
templateName: 'kv'
|
||||
})
|
||||
|
|
|
@ -286,31 +286,27 @@ fixtures.nodes_full = {
|
|||
fixtures.dcs = ['nyc1', 'sf1', 'sg1']
|
||||
|
||||
fixtures.keys_full = {
|
||||
"/": [
|
||||
'foobar',
|
||||
'application',
|
||||
'web/'
|
||||
],
|
||||
"application": {
|
||||
'key': 'application',
|
||||
'value': '',
|
||||
'children': [
|
||||
'secrets',
|
||||
'foobar',
|
||||
'baz'
|
||||
]
|
||||
'value': 'foobarz'
|
||||
},
|
||||
"application/foobar": {
|
||||
'key': 'application/foobar',
|
||||
'value': 'baz',
|
||||
'children': []
|
||||
}
|
||||
"foobar": {
|
||||
'key': 'foobar',
|
||||
'value': 'baz'
|
||||
},
|
||||
"web/foo/bar": {
|
||||
'key': 'web/foo/bar',
|
||||
'value': 'baz'
|
||||
},
|
||||
"web/": [
|
||||
"web/foo/"
|
||||
],
|
||||
"web/foo/": [
|
||||
"web/foo/bar"
|
||||
]
|
||||
};
|
||||
|
||||
// represents the root index key '/'
|
||||
fixtures.keys = [
|
||||
{
|
||||
'key': 'application',
|
||||
'value': '',
|
||||
'children': [
|
||||
'secrets',
|
||||
'foobar',
|
||||
'baz'
|
||||
]
|
||||
}
|
||||
];
|
||||
|
|
Loading…
Reference in New Issue