ui: further k/v improvements

This commit is contained in:
Jack Pearkes 2014-04-29 13:06:26 -04:00
parent 1636abd125
commit 52d8a28592
7 changed files with 119 additions and 59 deletions

View File

@ -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>

View File

@ -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)
}
}
});

View File

@ -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')
});

View File

@ -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: "/" });

View File

@ -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'));
}
});

View File

@ -47,3 +47,9 @@ App.NodesShowView = Ember.View.extend({
//
templateName: 'node'
})
App.KvListView = Ember.View.extend({
templateName: 'kv'
})

View File

@ -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'
]
}
];