Em Db Design

by amindunited

HTML

<!-- icon classes from: http://jsfiddle.net/amindunited/5tsZ2/ -->
<!--<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>-->
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ember.js/1.5.1/ember.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ember-data.js/1.0.0-beta.7/ember-data.min.js"></script>

<script type="text/x-handlebars" data-template-name="application">
    <nav class="applicationNav">
        <ul>
            <li>
                {{#link-to "database"}}
                    Database
                {{/link-to}}
            </li>
        </ul>
    </nav>
    {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="database">
    <nav class="subNav">
        <span class="leftPad"></span>
        <ul>
            <li class="icon-cog">
                {{#link-to "dbDesigner"}}
                    Designer
                {{/link-to}}
            </li>
        </ul>
        <span class="rightPad"></span>
    </nav>
    {{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="database/index">
    <h1>DbIndex</h1>
    {{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="dbDesigner">
    <nav>
        <ul>
            <li {{action "showNav" target="view"}}>
                <div class="icon-cog"></div>
            </li>
        </ul>
    </nav>
    <nav class="popoutNav">
        <ul>
            <li {{action "add_table"}}>
                Add Table
            </li>
        </ul>
    </nav>
    {{outlet}}
    <hr>
        {{view App.DesignerTablesView content=controller.content.tables}}
    <hr>
</script>
<script type="text/x-handlebars" data-template-name="designerTable">
    <div...

CSS

html, body {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;
    font-size: 10px;
    font-family: sans-serif;
    background-image: url('http://subtlepatterns.com/patterns/fresh_snow.png');
}

.templates {
    display: none;
}
.per_50 {
    width: 50%;
}
.table {
    border: solid 1px #999999;
    border-radius: 5px;
    max-width: 32%;
    display: inline-block;
}
.table .handle {
    background-color: #ededed;
    padding: 5px;
    background: #eeeeee; /* Old browsers */
background: -moz-linear-gradient(top,  #eeeeee 0%, #cccccc 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#cccccc)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #eeeeee 0%,#cccccc 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #eeeeee 0%,#cccccc 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #eeeeee 0%,#cccccc 100%); /* IE10+ */
background: linear-gradient(to bottom,  #eeeeee 0%,#cccccc 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */

}
.table li {
    padding: 5px;
    background-color: #efefef;
    background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top,  #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); /* IE10+ */
background: linear-gradient(to bottom,  #ffffff 0%,#e5e5e5 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff',...

JavaScript

// icon classes from: http://jsfiddle.net/amindunited/5tsZ2/
App = Em.Application.create();
App.Router.map(function(){
    this.resource('database', {path:'database'}, function(){
        this.route('index');
        this.resource('dbDesigner', {path:'dbDesigner'}, function(){
        
        });
    });
});

App.DatabaseRoute = Em.Route.extend({
    model: function () {
        return App.Database.create();
    }
});
App.Database = Em.Object.extend();
App.DatabaseController = Em.Controller.extend();
App.DatabaseView = Em.View.extend({
    classNames: ['databaseView']
});

App.DbDesignerRoute = Em.Route.extend({
    model: function () {
        var tableObj = App.DesignerTables.create();
        return App.DbDesigner.create({
            tables: tableObj.get('tables')
        });
    }
});
App.DbDesigner = Em.Object.extend({});
App.DbDesignerController = Em.Controller.extend({
    actions: {
        add_table: function(){
            console.log("add table", this.get('content.tables'));
            
            this.get('content.tables')
            .pushObject(App.DesignerTable.create());
            
        }
    }
});
App.DbDesignerView = Em.View.extend({
    classNames: ['dbDesignerView'],
    actions: {
        showNav: function(){
            console.log("show nav ");
            this.$('.popoutNav').show();
        }
    }
});


App.DesignerTables = Em.Object.extend({
    tables: []
});
App.DesignerTablesController = Em.Controller.extend();
App.DesignerTablesView = Em.CollectionView.extend({
    contentBinding: "App.DbDesigner.tables",
    itemViewClass: "App.DesignerTableView",
    didInsertElement: function(){
        console.log("mooop", this);
    }
});


App.DesignerTable = Em.Object.extend({
    name: "Unnamed Table",
    columns: []
});
App.DesignerTableController = Em.Controller.extend();
App.DesignerTableView = Em.View.extend({
    templateName: "designerTable",
    classNames: ['table', 'draggable'],
    actions: {
        remove: function(){
 ...