Skip to content

Instantly share code, notes, and snippets.

@validkeys
Last active January 25, 2019 17:33
Show Gist options
  • Select an option

  • Save validkeys/890487ae2de9fd956c3295ac71b2b674 to your computer and use it in GitHub Desktop.

Select an option

Save validkeys/890487ae2de9fd956c3295ac71b2b674 to your computer and use it in GitHub Desktop.
Mom Schedule App
import Controller from "@ember/controller";
import { computed } from "@ember/object";
export default Controller.extend({
queryParams: ["currentStudent"],
currentStudent: null,
times: computed(function() {
return ["8:00", "8:30", "9:00", "9:30","10:00","10:30","11:00","11:30","12:00","12:30","1:00","1:30","2:00","2:30","3:00","3:30","4:00","4:30","5:00"];
}),
days: computed(function() {
return ["monday","tuesday","wednesday","thursday","friday","saturday","sunday"]
}),
timeData: `type,name,day,time
student,austen,monday,8:00
student,austen,wednesday,9:30
school,ISD,wednesday,9:30
school,SAS,wednesday,9:30
student,karen,friday,8:30
school,SAS,friday,8:30`,
data: computed("timeData", function() {
const timeData = this.get("timeData");
if (timeData !== "") {
const rows = timeData.split("\n");
const heading = rows.splice(0, 1)[0].split(",");
return rows.map(item => {
const cells = item.split(",");
return heading.reduce((obj, key, idx) => {
obj[key] = (cells[idx] || "no data available").trim();
return obj;
}, {});
});
} else {
return [];
}
}),
students: computed("data", function() {
return this.get("data")
.filter(item => item.type === "student")
.reduce((arr, item) => {
if (arr.indexOf(item.name) === -1) {
arr.push(item.name);
}
return arr;
}, []);
}),
schools: computed("data", function() {
return this.get("data")
.filter(item => item.type === "school")
.reduce((arr, item) => {
if (arr.indexOf(item.name) === -1) {
arr.push(item.name);
}
return arr;
}, []);
}),
currentStudentTimes: computed("currentStudent", "data", function() {
return this.get("data").filter(row => {
return row.name === this.get("currentStudent") && row.type === "student";
});
}),
schoolTimes: computed("data", function() {
return this.get("data").filter(row => row.type === "school");
}),
schedule: computed(
"currentStudent",
"currentStudentTimes.[]",
"schoolTimes.[]",
"data",
function() {
const studentTimes = this.get("currentStudentTimes");
const times = this.get("times");
const days = this.get("days");
const schoolTimes = this.get("schoolTimes");
return times.map(time => {
return {
time: time,
days: days.map(day => {
const studentAvailable = studentTimes.find(st => {
return st.day === day && st.time === time
})
const schools = schoolTimes.filter(schoolTime => {
return schoolTime.day === day && schoolTime.time === time
}).map(schoolTime => schoolTime.name)
return {
studentAvailable,
hasSchools: studentAvailable && schools.length,
schools: schools.length ? schools.join(",") : null
}
})
}
})
}
)
});
@import url('https://fonts.googleapis.com/css?family=Roboto');
* {
box-sizing: border-box;
}
html, body {
margin: 0;
font-family: 'Roboto', sans-serif;
}
div.text-entry {
background: #fafafa;
padding: 20px;
}
textarea {
display: block;
width: 100%;
padding: 5px;
}
.student-listing {
padding: 20px;
}
.student-listing ul {
display: block;
margin-top: 20px;
list-style-type: none;
margin: 0;
padding: 0;
}
.student-listing ul li {
display: inline-block;
}
.student-listing a {
background: #fafafa;
padding: 5px;
color: #000;
text-decoration: none;
}
.student-listing a:hover,
.student-listing a.active {
background: blue;
color: white;
}
.data-table {
padding: 20px;
}
table tr td {
padding: 5px;
border: #fafafa 1px solid;
}
<div class="text-entry">
{{textarea value=timeData placeholder="Enter CSV data"}}
</div>
<div class="student-listing">
<h3>Students</h3>
{{#each students as |student|}}
{{#link-to "application" (query-params currentStudent=student)}}{{student}}{{/link-to}}
{{/each}}
</div>
<div class="data-table">
<table cellspacing="0" cellpadding="0">
<tr>
<td>&nbsp;</td>
<td>Monday</td>
<td>Tuesday</td>
<td>Wednesday</td>
<td>Thursday</td>
<td>Friday</td>
<td>Saturday</td>
<td>Sunday</td>
</tr>
{{#each schedule as |row|}}
<tr>
<td>{{row.time}}</td>
{{#each row.days as |day|}}
{{#if day.hasSchools}}
<td>{{day.schools}}</td>
{{else}}
<td class="unavailable">-</td>
{{/if}}
{{/each}}
</tr>
{{/each}}
</table>
</div>
{{outlet}}
{
"version": "0.15.1",
"EmberENV": {
"FEATURES": {}
},
"options": {
"use_pods": false,
"enable-testing": false
},
"dependencies": {
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
"ember": "3.4.3",
"ember-template-compiler": "3.4.3",
"ember-testing": "3.4.3"
},
"addons": {
"ember-data": "3.4.2"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment