CustomBoxes

components.number-count.js

import Ember from 'ember';
import hbs from 'htmlbars-inline-precompile';
import { connect } from 'ember-redux';

const stateToComputed = st => {
  const {state} = st;
  const {list} = state;
  const listString = list.map(i=>`
<div style="box-shadow: 4px 4px 8px 4px rgba(0,0,0,0.2);transition: 0.3s;width: 80%;">
  <div style="padding: 20px 16px;">
  <h4><b>Program:</b>  <a href=${i.ProgramLink} target="_blank" rel="noopener">${i.Program}</a></h4> 
  Site Coordinator E-mail: <a href="mailto:${i.CordinatorEmail}">${i.CordinatorEmail}</a> 
  </div>
</div>
</br>
`).join('');
  console.log(' \n\n\n\ stateToComputed', list.Program);
  const retState = {
    state: {
        code:listString,
    ...state
    }
  }; 
  console.log('\n\n\n list', {state}, {retState});
  return retState
};

const dispatchToActions = dispatch => {
  return {
    add: () => dispatch({type: 'ADD'}),
    new: (...args) => {
      //console.log('\n\n\n args', {args})
      dispatch({type: 'new', args})
    },
    button: () => dispatch({type: 'button'})
  };
};

const NumbersComponent = Ember.Component.extend({
    layout: hbs`
<table style="width:100%">
  <tr>
    <th>Progam</th>
    <th>Progam Link</th>
    <th>Cordinator</th>
    <th>Cordinator Email</th>
  </tr>
{{log 'state' state}}

{{#each state.list as |st index| }}  
<tr>
    <td>{{st.Program}}</td>
    <td>{{st.ProgramLink}}</td> 
    <td>{{st.Cordinator}}</td> 
    <td>{{st.CordinatorEmail}}</td> 
</tr>
{{/each}}
<tr>
    <td>
			<input id='Program' placeholder='Program' value={{state.Program}} oninput={{action "new" }} >
		</td>
    <td>
			<input id='ProgramLink' placeholder='Program Link' value={{state.ProgramLink}} oninput={{action "new" }} >
		</td>
    <td>
			<input id='Cordinator' placeholder='Cordinator' value={{state.Cordinator}} oninput=
{{action "new" }} >
		</td>
    <td>
			<input id='CordinatorEmail' placeholder='Cordinator Email' value={{state.CordinatorEmail}}  oninput={{action "new" }} >
		</td>
    <td>
			<button onclick={{action "button"}}>add</button>
		</td>
</tr>
</table>
<h2>Copy and Paste:</h2>
<pre>
{{state.code}}
</pre>
<h2>Preview:</h2>
{{#each state.list as |i index| }}  
<div style="box-shadow: 4px 4px 8px 4px rgba(0,0,0,0.2);transition: 0.3s;width: 80%;">
  <div style="padding: 20px 16px;">
    <h4><b>Program:</b>  <a href={{i.ProgramLink}} target="_blank" rel="noopener">{{i.Program}}</a></h4> 
 Site Coordinator E-mail: <a href="mailto:{{i.CordinatorEmail}}">{{i.CordinatorEmail}}</a> 
	</div>
</div>
{{/each}}

    `
});

export default connect(stateToComputed, dispatchToActions)(NumbersComponent);

reducers.index.js

import { combineReducers } from 'redux';

const initialState = {
Program: '',
ProgramLink:'',
Cordinator:'',
CordinatorEmail:'',
list:  [
{
Program:'Capitol View Elementary',
ProgramLink:'http://capitolview.dmschools.org/',
Cordinator:'[email protected]',
CordinatorEmail:'[email protected]'
},
{
Program:'Carver Community School',
ProgramLink:'https://carver.dmschools.org/',
Cordinator:'[email protected]',
CordinatorEmail:'[email protected]'
},
{
Program:'Cattell Elementary',
ProgramLink:'http://cattell.dmschools.org/',
Cordinator:'[email protected]',
CordinatorEmail:'[email protected]'
},
{
Program:'Central Presbyterian Church',
ProgramLink:'http://dmcpc.org/',
Cordinator:'[email protected]',
CordinatorEmail:'[email protected]'
},
{
Program:'Children & Family Urban Movement (Breakfast)',
ProgramLink:'http://cfum.org/',
Cordinator:'[email protected]',
CordinatorEmail:'[email protected]'
},
{
Program:'Children & Family Urban Movement (After School)',
ProgramLink:'http://cfum.org/',
Cordinator:'[email protected]',
CordinatorEmail:'[email protected]'
},
{
Program:'Crestview School of Inquiry',
ProgramLink:'https://www.wdmcs.org/schools/crestview/',
Cordinator:'[email protected]',
CordinatorEmail:'[email protected]'
},
{
Program:'Downtown School',
ProgramLink:'http://downtownschool.dmschools.org/',
Cordinator:'[email protected]',
CordinatorEmail:'[email protected]'
},
{
Program:'Edmunds Elementary',
ProgramLink:'http://edmunds.dmschools.org/',
Cordinator:'[email protected]',
CordinatorEmail:'[email protected]'
},
{
Program:'Emerson Elementary',
ProgramLink:'https://www.indianola.k12.ia.us/school/emerson-elementary/',
Cordinator:'[email protected]',
CordinatorEmail:'[email protected]'
},
{
Program:'Findley Elementary',
ProgramLink:'http://findley.dmschools.org/',
Cordinator:'[email protected]',
CordinatorEmail:'[email protected]'
},
{
Program:'Findley Elementary (John Deere Financial Power Breakfast)',
ProgramLink:'http://findley.dmschools.org/',
Cordinator:'[email protected]',
CordinatorEmail:'[email protected]'
},
{
Program:'Greenwood Elementary',
ProgramLink:'https://greenwood.dmschools.org/',
Cordinator:'[email protected]',
CordinatorEmail:'[email protected]'
},
{
Program:'Hillside Elementary',
ProgramLink:'http://www.wdmcs.org/schools/hillside/',
Cordinator:'[email protected]',
CordinatorEmail:'[email protected]'
},
{
Program:'Hubbell Elementary',
ProgramLink:'https://hubbell.dmschools.org/',
Cordinator:'[email protected]',
CordinatorEmail:'[email protected]'
},
{
Program:'King Elementary',
ProgramLink:'http://king.dmschools.org/',
Cordinator:'[email protected]',
CordinatorEmail:'[email protected]'
},
{
Program:'Lakewood Elementary',
ProgramLink:'https://www.norwalkschools.org/schools/lakewood-elementary-school/',
Cordinator:'[email protected]',
CordinatorEmail:'[email protected]'
},
{
Program:'Lincoln Elementary',
ProgramLink:'http://www.pellaschools.org/schools/lincoln-elementary',
Cordinator:'[email protected]',
CordinatorEmail:'[email protected]'
},
{
Program:'Lovejoy Elementary',
ProgramLink:'http://lovejoy.dmschools.org/',
Cordinator:'[email protected]',
CordinatorEmail:'[email protected]'
},
{
Program:'McKinley Elementary',
ProgramLink:'http://mckinley.dmschools.org/',
Cordinator:'http://mckinley.dmschools.org',
CordinatorEmail:'http://mckinley.dmschools.org'
},
{
Program:'Monroe Elementary',
ProgramLink:'http://monroe.dmschools.org/',
Cordinator:'[email protected]',
CordinatorEmail:'[email protected]'
},
{
Program:'Moore Elementary (Lunch)',
ProgramLink:'https://moore.dmschools.org/',
Cordinator:'[email protected]',
CordinatorEmail:'[email protected]'
},
{
Program:'Moore Elementary (After School)',
ProgramLink:'https://moore.dmschools.org/',
Cordinator:'[email protected]',
CordinatorEmail:'[email protected]'
},
{
Program:'Oakridge Neighborhood',
ProgramLink:'http://oakridgeneighborhood.org/',
Cordinator:'[email protected]',
CordinatorEmail:'[email protected]'
},
{
Program:'Oviatt Elementary School',
ProgramLink:'https://www.norwalkschools.org/schools/oviatt-elementary-school/',
Cordinator:'[email protected]',
CordinatorEmail:'[email protected]'
},
{
Program:'Pella Christian Grade School',
ProgramLink:'http://www.pellachristian.net/',
Cordinator:'[email protected]',
CordinatorEmail:'[email protected]'
},
{
Program:'Perry Elementary',
ProgramLink:'http://www.perry.k12.ia.us/',
Cordinator:'[email protected]',
CordinatorEmail:'[email protected]'
},
{
Program:'River Woods Elementary',
ProgramLink:'http://riverwoods.dmschools.org/',
Cordinator:'[email protected]',
CordinatorEmail:'[email protected]'
},
{
Program:'St. Theresa Catholic School',
ProgramLink:'http://sainttheresaiowa.org/school/',
Cordinator:'[email protected]',
CordinatorEmail:'[email protected]'
},
{
Program:'South Union Elementary',
ProgramLink:'http://southunion.dmschools.org/',
Cordinator:'[email protected]',
CordinatorEmail:'[email protected]'
},
{
Program:'Terrace Elementary',
ProgramLink:'https://www.ankenyschools.org/terrace',
Cordinator:'[email protected]',
CordinatorEmail:'[email protected]'
},
{
Program:'Urban Dreams',
ProgramLink:'https://urbandreams.org/',
Cordinator:'[email protected]',
CordinatorEmail:'[email protected]'
},
{
Program:'Walnut Street School',
ProgramLink:'http://walnutstreet.dmschools.org/',
Cordinator:'[email protected]',
CordinatorEmail:'[email protected]'
},
{
Program:'Whittier Elementary',
ProgramLink:'http://www.indianola.k12.ia.us/elementary/Whittier/',
Cordinator:'[email protected]',
CordinatorEmail:'[email protected]'
},
{
Program:'Wilder Elementary',
ProgramLink:'https://www.indianola.k12.ia.us/school/wilder-elementary/',
Cordinator:'[email protected]',
CordinatorEmail:'[email protected]'
},
{
Program:'Willard Elementary',
ProgramLink:'https://willard.dmschools.org/',
Cordinator:'[email protected]',
CordinatorEmail:'[email protected]'
},
{
Program:'Windsor Elementary',
ProgramLink:'http://windsor.dmschools.org/',
Cordinator:'[email protected]',
CordinatorEmail:'[email protected]'
},

]
}

const state = ((state, action) => {
    if(action.type === 'ADD') {
        return state + 1;
    }
    if(action.type === 'new') {
      const {args} = action;
      const input = args[0];
      const id = input.target.id;
      const value = input.target.value;
      console.log('\n\n\nnew', {state}, {input}, {id}, {value})  
      
      const retState = {
        ...state,
        ...{[id]:value}
      }
      console.log('\n\n\nnew', {retState}, {input}, {id}, {value}); 
      return retState;
    }
    if(action.type === 'button') {
      const retState = {
        list: [
          ...state.list, 
          {
            Program: state.Program, 
            ProgramLink: state.ProgramLink, 
            Cordinator: state.Cordinator, 
            CordinatorEmail: state.CordinatorEmail
          }
        ],
        Program: '',
        ProgamLink:'',
        Cordinator:'',
        CordinatorEmail:'',
      };
      console.log('\n\n\n button', {retState}, {action})  
      return retState;
    }
    return state || initialState;
});

export default combineReducers({
    state
});

templates.application.hbs

<h1>Programs Builder</h1>
<br>
<br>
{{number-count}}

twiddle.json

{
  "version": "0.12.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-redux": "3.0.0"
  }
}