mmm.html

   1 <html>
   2 <head>
   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>
   6
   7 </head>
   8 <body>
   9
  10 <h1>Meeting Minute Minder</h1>
  11
  12 <div data-bind="visible: active()==false">
  13 <button data-bind="click: timerButtonClicked">Start Meeting</button><br/>
  14 </div>
  15 <div data-bind="visible: active()==true">
  16 <button data-bind="click: timerButtonClicked">Pause Meeting</button><br/>
  17 </div>
  18 <table>
  19     <thead>
  20       <tr>
  21         <th>Attendee</th>
  22         <th>Time Spent</th>
  23       </tr>
  24     </thead>
  25
  26     <tbody data-bind="foreach: participants" >
  27        <tr>
  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>
  31        </tr>
  32     </tbody>
  33
  34 </table>
  35
  36 <div style="display: none;" data-bind="text: currentPageTitle()"></div>
  37 <br/>
  38 <button data-bind="click: addParticipant" id="addParticipantButton">New attendee</button>
  39 <div data-bind="text: debugging"></div>
  40
  41 <script type="text/javascript">
  42 /*<![CDATA[*/
  43
  44 function seconds2UTC(seconds) {
  45     var date = new Date(null);
  46     date.setSeconds(seconds);
  47     var s_time = "";
  48
  49     hms = [date.getUTCHours(), date.getUTCMinutes(), date.getUTCSeconds()];
  50     for (var i = 0; i < hms.length; i++) {
  51         if (i != 0) {
  52             s_time += ":";
  53         }
  54         if (hms[i] < 10) {
  55             s_time += "0";
  56         }
  57         s_time += hms[i];
  58     }
  59     return s_time;
  60 }
  61
  62 /// Class to represent a meeting participant
  63 function Participant(name) {
  64     var self = this;
  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
  69
  70     self.meetingSecondsUTC = ko.computed( function() {
  71                                                      return seconds2UTC(self.meetingSeconds());
  72                                          }, this)
  73 }
  74
  75 // Overall viewmodel for this screen, along with initial state
  76 function MeetingViewModel() {
  77     var self = this;
  78     self.meetingTimer = setInterval(self.timerUpdate, 0);
  79
  80     self.active = ko.observable(false);    // true = meeting timer is active; false = meeting not started / stopped / paused
  81     clearInterval(self.meetingTimer);
  82
  83     // Editable data
  84     self.participants = ko.observableArray([
  85         new Participant("jude"),
  86         new Participant("amo"),
  87         new Participant("spec-cat-ular mr c cat")
  88     ]);
  89
  90     // Operations
  91     self.addParticipant = function() {
  92         self.participants.push(new Participant("Attendee " + (self.participants().length+1).toString()));
  93     };
  94
  95     self.totalMeetingUTC = function() {
  96         var total = 0;
  97         for (var i = 0; i < self.participants().length; i++) {
  98             total += self.participants()[i].meetingSeconds();
  99         }
 100         return seconds2UTC(total);
 101     };
 102
 103     self.currentPageTitle = ko.computed(function() {
 104         pageTitle = self.totalMeetingUTC().toString() + " meeting time";
 105         document.title = pageTitle;
 106         return pageTitle;
 107     }, this);
 108
 109     self.timerButtonClicked = function() {
 110         if (self.active() == false) {
 111            self.active(true);
 112            self.meetingTimer = setInterval(self.timerUpdate,1000);
 113         } else {
 114            self.active(false);
 115            clearInterval(self.meetingTimer);
 116         }
 117     };
 118
 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);
 126             };
 127         };
 128     };
 129
 130     self.toggleMeeting = function(participant) {
 131        rollcall = participant.present();
 132        if (rollcall) {
 133          participant.atext("Return");
 134        } else {
 135          participant.atext("Step out");
 136        }
 137        participant.present(!rollcall);
 138     };
 139
 140 };
 141
 142 ko.applyBindings(new MeetingViewModel());
 143
 144 /*]]>*/
 145 </script>
 146
 147 </body>
 148 </html>