Build config mockup

by amindunited

HTML

<script type="text/x-handlebars" data-template-name="application">
    <nav class="mainNav clearfix">
        {{#link-to 'config'}}Config{{/link-to}}
    </nav>
    {{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="config">
    <h2>Config</h2>
    <nav class="subNav clearfix">
        {{#link-to 'general'}}General{{/link-to}}
        {{#link-to 'platforms'}}Platforms{{/link-to}}
        {{#link-to 'servers'}}Servers{{/link-to}}
    </nav>
    {{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="general">
    <h3>Package</h3>
    {{input value=name}}
    <form name='general'>
        <label>name:</label>{{input value=name}}
        <br/>
        <label>version:</label>{{input value=version}}
        <br/>
        <label>description:</label>{{input value=description}}
        <br/>
        <label>Author:</label>{{input value=author}}
        <br/>
        <label>Main:</label>{{input value=main}}
        <br/>
        <label>License:</label>{{input value=license}}
    </form>
</script>
<script type="text/x-handlebars" data-template-name="servers">
    <h3>Server</h3>
    <nav class="subNav">
        {{#link-to 'servers.development'}}Development{{/link-to}}
        {{#link-to 'servers.staging'}}Staging{{/link-to}}
        {{#link-to 'servers.production'}}Production{{/link-to}}
    </nav>
    <br/>
    <br/>
    <form>
        {{#ember-radio-group value=radioValue}}
            <label>Local</label>{{input type='radio' name='server_location' value='local'}}
            <label>Remote</label>{{input type='radio' name='server_location' value='remote'}}
        {{/ember-radio-group}}
        <br/>
        {{#if 'content.local'}}
            <label>Hostname:</label>{{input value=hostname}}
            <label>Port:</label>{{input value=port}}
        {{else}}
            <label>Url:</label>{{input value=url}}
        {{/if}}
        <br/>
    </form>
{{outlet}}
</script>

<script type="text/x-handlebars"...

CSS

* {
    box-sizing: border-box;
}
.clearfix:after {
  content:"";
  display:table;
  clear:both;
}
.mainNav a {
    display: block;
    float: left;
    min-width: 20%; 
    height: 35px;
    color: white;
    background-color: rgba(127, 127, 127, .5);
    text-align: center;
    line-height: 35px;
}
.subNav a {
    display: block;
    float: left;
    min-width: 20%; 
    height: 35px;
    color: white;
    background-color: rgba(0, 0, 0, .5);
    text-align: center;
    line-height: 35px;
}
form label {
    display: inline-block;
    width: 33%;
}
form input {
    display: inline-block;
    width: 66%;
}

JavaScript

var App = Em.Application.create();
App.ApplicationRoute = Em.Route.extend({
    model: function(){
        console.log('application route model');
        return config;
    }
});


Em.Router.map(function(){
    this.resource('config', {path: '/config'}, function(){
        this.resource('general', {path: '/general'}, function(){
        
        });
        this.resource('platforms', {path: '/platforms'}, function(){
        
        });
        this.resource('servers', {path: '/servers'}, function(){
            this.resource('servers.development', {path: '/development'}, function(){});
            this.resource('servers.staging', {path: '/staging'}, function(){});
            this.resource('servers.production', {path: '/production'}, function(){});
        });
    });
});

App.EmberRadioGroupComponent = Em.Component.extend({
    didInsertElement: function(){
        if (this.get('value')) {
            this.$('input[value='+this.get('value')+']').attr('checked', 'checked');
        } 
    },
    click: function() {
        var val = this.$('input:checked').val();
        console.log('value', val);
        this.set('value', val);
    }
});

App.GeneralRoute = Em.Route.extend({
    model: function(){
        var pm = this.modelFor('application');
        console.log("pm", pm);
        return pm.package;
    }
});

App.ServersRoute = Em.Route.extend({
    model: function(){
        var pm = this.modelFor('application');
        console.log("Server Model", pm.project.server);
        return pm.project.server;
    }
});

App.ServersController = Em.Controller.extend({
    radioValue: function(){
        if (this.get('content.local')) {
            return 'local';
        } else {
            return 'remote';
        }
    }.property(),
    
    serverListener: function(){
        if (this.get('radioValue') == 'local') {        
            this.set('content.local', true);
        } else {
            this.set('content.local', false);
        }
   ...