3 <meta http-equiv=
"Content-Type" content=
"text/html; charset=utf-8" />
4 <title>00:
00:
00 spent
</title>
5 <script type='text/javascript' src='knockout-
3.2.0.js'
></script>
10 <h1>Meeting Minute Minder
</h1>
12 <div data-bind=
"visible: active()==false">
13 <button data-bind=
"click: timerButtonClicked">Start Meeting
</button><br/>
15 <div data-bind=
"visible: active()==true">
16 <button data-bind=
"click: timerButtonClicked">Pause Meeting
</button><br/>
26 <tbody data-bind=
"foreach: participants" >
28 <td><input data-bind=
"value: name()" /></td>
29 <td data-bind=
"text: meetingSecondsUTC"></td>
30 <td><a href=
"#" data-bind=
"click: $root.toggleMeeting, text: atext">Leave
</a></td>
36 <div style=
"display: none;" data-bind=
"text: currentPageTitle()"></div>
38 <button data-bind=
"click: addParticipant" id=
"addParticipantButton">New attendee
</button>
39 <div data-bind=
"text: debugging"></div>
41 <script type=
"text/javascript">
44 function seconds2UTC(seconds) {
45 var date = new Date(null);
46 date.setSeconds(seconds);
49 hms = [date.getUTCHours(), date.getUTCMinutes(), date.getUTCSeconds()];
50 for (var i =
0; i < hms.length; i++) {
62 /// Class to represent a meeting participant
63 function Participant(name) {
65 self.name = ko.observable(name);
66 self.present = ko.observable(true); // true=
>participant is present in the meeting/timer incrementing, false=
>stepped out/timer paused
67 self.atext = ko.observable(
"Step out");
68 self.meetingSeconds = ko.observable(
0); // total time the participant has been in the meeting in seconds
70 self.meetingSecondsUTC = ko.computed( function() {
71 return seconds2UTC(self.meetingSeconds());
75 // Overall viewmodel for this screen, along with initial state
76 function MeetingViewModel() {
78 self.meetingTimer = setInterval(self.timerUpdate,
0);
80 self.active = ko.observable(false); // true = meeting timer is active; false = meeting not started / stopped / paused
81 clearInterval(self.meetingTimer);
84 self.participants = ko.observableArray([
85 new Participant(
"jude"),
86 new Participant(
"amo"),
87 new Participant(
"spec-cat-ular mr c cat")
91 self.addParticipant = function() {
92 self.participants.push(new Participant(
"Attendee " + (self.participants().length+
1).toString()));
95 self.totalMeetingUTC = function() {
97 for (var i =
0; i < self.participants().length; i++) {
98 total += self.participants()[i].meetingSeconds();
100 return seconds2UTC(total);
103 self.currentPageTitle = ko.computed(function() {
104 pageTitle = self.totalMeetingUTC().toString() +
" meeting time";
105 document.title = pageTitle;
109 self.timerButtonClicked = function() {
110 if (self.active() == false) {
112 self.meetingTimer = setInterval(self.timerUpdate,
1000);
115 clearInterval(self.meetingTimer);
119 // Timer kicked off every second
120 // when triggered, walk through all the participants and increment meetingTime if present==true
121 self.timerUpdate = function() {
122 for (var i =
0; i < self.participants().length; i++) {
123 if (self.participants()[i].present() ) {
124 ms = self.participants()[i].meetingSeconds();
125 self.participants()[i].meetingSeconds(ms+
1);
130 self.toggleMeeting = function(participant) {
131 rollcall = participant.present();
133 participant.atext(
"Return");
135 participant.atext(
"Step out");
137 participant.present(!rollcall);
142 ko.applyBindings(new MeetingViewModel());