JSFiddle - React, Tailwind, and code Playground

by lasha

HTML

<script src="https://github.com/downloads/emberjs/ember.js/ember-latest.js"></script>
<script src="https://github.com/downloads/emberjs/data/ember-data-latest.js"></script>
<script src="https://gist.github.com/raw/92da5096b68e67ed6864/024232652ac6149f5fd33f5d84414d1efaaeba88/ember-data-ds-filter-addon.js"></script>
<form id="zipcode">
    <label for="zipcode">Zipcode</label>
    
    <script type="text/x-handlebars">
        {{#with App.QuoteController}}
            {{view Ember.TextField placeholder="zipcode" valueBinding="zipcode"}}
                
            {{#view Ember.Button target="App.QuoteController" action="generateQuote" }}
                Get Quote 
            {{/view}}
                
            {{error}}
            {{#unless error}}
                <b>Location:</b>
                {{location.name}}
                <b>County:</b>
                {{county.name}}
            {{/unless}}
        {{/with}}
    </script>
    
    <script type="text/x-handlebars">
    {{#with App.LineItemsController}}
         <h1>Carpet Cleaning {{ App.QuoteController.totalCarpet }} </h1>
         <table>
             <thead>
                 <tr>
                     <td>Select Rooms Bellow</td>
                     <td>Heavy Stain</td>
                     <td>Scotchguard Protection</td>
                     <td>Furniture Moving</td>
                     <td></td>
                 </tr>
             </thead>
            {{#collection App.TbodyView contentBinding="rooms"}}
                <td>{{view App.JobSelect 
                            selectionBinding="content.job"  
                            contentBinding="App.LineItemsController.roomTypes"}}</td>
                <td>{{view Ember.Checkbox valueBinding="content.heaving"}}</td>
                <td>{{view Ember.Checkbox valueBinding="content.scotchguard"}}</td>
                <td>{{view Ember.Checkbox valueBinding="content.move"}}</td>
                <td>{{#view Ember.Button...

CSS

table{
  margin: 2em 1em;   
}

h1,h2,h3,h4,h5,h6{
    font-weight: bold;   
}

JavaScript

window.App = Ember.Application.create();

App.FORT_WAYNE_DISCOUNT = 0.9;

App.TbodyView = Ember.CollectionView.extend({
    tagName: "tbody"
});

App.JobSelect = Ember.Select.extend({
    optionLabelPath: "content.name",
    optionValuePath: "content.id"
});

App.CreateJobSelect = App.JobSelect.extend({
    selectionBinding: "App.LineItemsController.selection"
});

App.LineItemsController = Ember.Object.create({
    rooms: [],
    furniture: [],
    ducts: [],
    all: function() {
        var rooms = this.get('rooms'),
            furniture = this.get('furniture'),
            ducts = this.get('ducts');

        return rooms.concat(furniture).concat(ducts);
    }.property('rooms.@each', 'furniture.@each', 'ducts.@each'),

    create: function() {
        var job = this.get('selection'),
            collection, lineItem;

        if (job) {
            lineItem = App.LineItem.create({
                job: job
            });

            collection = this.collectionForJob(job);

            collection.pushObject(lineItem);

            this.set('selection', null);
        }

    }.observes('selection'),

    destroy: function(event) {
        var lineItem = event.get('lineItem'),
            job = lineItem.get('job'),
            collection = this.collectionForJob(job);

        collection.removeObject(lineItem);
    },

    collectionForJob: function(job) {
        var type = job.get('type'),
            collection;

        if (type === 'room') {
            type = 'rooms';
        }else if (type === 'duct'){
            type = 'ducts'                    
        }
                
        collection = this.get(type);

        return collection;
    },

    furnitureTypes: function() {
        return this.filterByType('furniture');
    }.property().cacheable(),

    roomTypes: function() {
        return this.filterByType('room');
    }.property().cacheable(),
    
    ductTypes: function() {
        return this.filterByType('duct');
   ...