Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

First draft of an interactive recording manager

  • Loading branch information...
commit 9e440268a2ea63a0f35de58df3623750d0d2af84 1 parent 23b2b17
@pauljz authored
Showing with 139 additions and 43 deletions.
  1. +90 −2 FARManager.js
  2. +20 −3 manage.css
  3. +29 −38 manage.html
View
92 FARManager.js
@@ -1,5 +1,93 @@
-var FARManager = {
+$(document).ready( function() {
+ ViewModel = {
+ labels: ko.observableArray([]),
+ recordings: ko.observableArray([]),
+ activeTab: ko.observable('All Recordings')
+ };
+
+ ko.applyBindings(ViewModel);
+ ViewModel.LoadRecordingsOnTabChange = ko.dependentObservable( function() {
+ FARManager.LoadRecordings();
+ return ViewModel.activeTab();
+ }, ViewModel );
+
+ ViewModel.labels( FARDB.GetLabels() );
+ FARManager.LoadRecordings();
+});
+
+FARManager = {
+ recordingsGetFn: FARDB.GetAll,
+ LoadRecordings: function() {
+ var recordings = FARManager.recordingsGetFn();
+ recordings.reverse(); // newest first - TODO make this a settnig
+ ViewModel.recordings( recordings );
+ },
-};
+ ListAll: function() {
+ FARManager.recordingsGetFn = FARDB.GetAll;
+ ViewModel.activeTab('All Recordings');
+ },
+
+ ListStarred: function() {
+ FARManager.recordingsGetFn = FARDB.GetStarred;
+ ViewModel.activeTab('Starred');
+ },
+
+ ListNamed: function() {
+ FARManager.recordingsGetFn = function() {
+ var all = FARDB.GetAll();
+ var named = [];
+ for ( i in all ) {
+ if ( all[i].Name ) {
+ named.push( all[i] );
+ }
+ }
+ return named;
+ };
+ ViewModel.activeTab('Named');
+ },
+
+ ListLabel: function(el) {
+ var attr = $(el).attr( 'data-tabname' );
+ var label = $(el).attr( 'data-labelname' );
+ FARManager.recordingsGetFn = function() {
+ return FARDB.GetLabel( label );
+ };
+ ViewModel.activeTab( attr );
+ },
+
+ ToggleStar: function(event) {
+ var el = $(event.currentTarget);
+ var id = $( el.parent() ).attr('data-key');
+
+ var recordingHolder = FARDB.Get(id);
+ if ( recordingHolder.Starred ) {
+ FARDB.RemoveStar( id );
+ } else {
+ FARDB.AddStar( id );
+ }
+
+ FARManager.LoadRecordings();
+ },
+
+ DateFormat: function( ms ) {
+ var pad = function(n){return n<10 ? '0'+n : n}
+ var date = new Date(ms);
+ var dateStr = '';
+ dateStr += date.getFullYear();
+ dateStr += '-';
+ dateStr += pad(date.getMonth()+1);
+ dateStr += '-';
+ dateStr += pad(date.getDate());
+ dateStr += ' ';
+ dateStr += pad(date.getHours());
+ dateStr += ':';
+ dateStr += pad(date.getMinutes());
+ dateStr += ':';
+ dateStr += pad(date.getSeconds());
+ return dateStr;
+ }
+
+}
View
23 manage.css
@@ -24,7 +24,7 @@ body {
border:1px #c6c9ce solid;
}
-#recordinglist li {
+#recordinglist > li {
list-style-type:none;
margin:0;
padding:0;
@@ -32,8 +32,8 @@ body {
background:#EEE;
-webkit-box-shadow: 0px 1px 0px #f7f7f7;
border-bottom: 1px solid #CCC;
-
position:relative;
+ cursor:pointer;
}
#recordinglist li > div { padding-top:8px; }
@@ -46,7 +46,24 @@ body {
#recordinglist .starbutton:hover { background-position: -40px 0px; }
#recordinglist .date { position:absolute; left:50px; top:0px; width:150px; color:#666; }
#recordinglist .link { position:absolute; left:200px; right:0; top:0; }
-#recordinglist .labels { display:inline-block; position:absolute; right:0px; top:0px; text-align:right; }
+#recordinglist .labels ul {
+ display:inline-block;
+ position:absolute;
+ right:0px;
+ top:6px;
+ text-align:right;
+}
+#recordinglist .labels li {
+ display:block;
+ float:right;
+ background:#888;
+ color:white;
+ font-size:11px;
+ margin:0px 6px 0px 0px;
+ padding:1px 4px;
+ border:1px #444 solid;
+ border-radius:4px;
+}
/* From Chrome: */
View
67 manage.html
@@ -4,8 +4,8 @@
<meta charset="utf-8">
<script src="3rdparty/jquery.js"></script>
<script src="3rdparty/knockout-1.3beta.js"></script>
- <script src="FARManager.js"></script>
<script src="FARDB.js"></script>
+ <script src="FARManager.js"></script>
<link rel="stylesheet" href="manage.css" />
<link rel="shortcut icon" href="images/icon_19_inactive.png" />
</head>
@@ -14,54 +14,45 @@
<div id="navbar-container">
<h1 id="navbar-content-title"><img src="images/header.png" alt="Fluent Automation Recorder" /></h1>
<ul>
- <li class="navbar-item">All Recordings</li>
- <li class="navbar-item">Starred</li>
- <li class="navbar-item">Named</li>
+ <li class="navbar-item" onclick="FARManager.ListAll();" data-bind="css: { 'navbar-item-selected': activeTab() == 'All Recordings' }" >All Recordings</li>
+ <li class="navbar-item" onclick="FARManager.ListStarred();" data-bind="css: { 'navbar-item-selected': activeTab() == 'Starred' }" >Starred</li>
+ <li class="navbar-item" onclick="FARManager.ListNamed();" data-bind="css: { 'navbar-item-selected': activeTab() == 'Named' }" >Named</li>
</ul>
- <ul>
- <li class="navbar-item">Custom Label 1</li>
- <li class="navbar-item navbar-item-selected">Custom Label 2</li>
- <li class="navbar-item">Custom Label 3</li>
+ <ul data-bind="foreach: labels">
+ <li class="navbar-item" onclick="FARManager.ListLabel(this);" data-bind="
+ text: $data,
+ css: { 'navbar-item-selected': $root.activeTab() == 'Label: ' + $data },
+ attr: {
+ 'data-tabname': 'Label: ' + $data,
+ 'data-labelname': $data
+ }
+ "></li>
</ul>
<ul>
- <li class="navbar-item">Settings</li>
- <li class="navbar-item">Help</li>
+ <li class="navbar-item" data-bind="css: { 'navbar-item-selected': activeTab() == 'Settings' }">Settings</li>
+ <li class="navbar-item" data-bind="css: { 'navbar-item-selected': activeTab() == 'Help' }">Help</li>
</ul>
</div>
<div id="mainview">
<div id="content">
- <h1>Custom Label 2</h1>
- <ul id="recordinglist">
- <li>
- <div class="dragbar">::</div>
- <div class="star"><div class="starbutton off"></div></div>
- <div class="date">10/31/2011 11:57 PM</div>
- <div class="link">http://www.datinix.net/fartest.html</div>
- <div class="labels"></div>
- </li>
- <li>
- <div class="dragbar">::</div>
- <div class="star"><div class="starbutton on"></div></div>
- <div class="date">10/31/2011 11:51 PM</div>
- <div class="link">http://www.datinix.net/fartest.html</div>
- <div class="labels"></div>
- </li>
- <li>
- <div class="dragbar">::</div>
- <div class="star"><div class="starbutton off"></div></div>
- <div class="date">10/31/2011 10:15 PM</div>
- <div class="link">http://www.datinix.net/fartest.html</div>
- <div class="labels"></div>
- </li>
- <li>
+ <h1 data-bind="text: activeTab"></h1>
+
+ <ul id="recordinglist" data-bind="foreach: recordings">
+ <li data-bind="attr: { 'data-key': Created, 'data-recording': JSON.stringify(Recording) }" onclick="alert( $(this).attr('data-recording') )">
<div class="dragbar">::</div>
- <div class="star"><div class="starbutton off"></div></div>
- <div class="date">10/30/2011 9:34 PM</div>
- <div class="link">http://www.datinix.net/fartest.html</div>
- <div class="labels"></div>
+ <div class="star" data-bind="click: FARManager.ToggleStar, clickBubble: false">
+ <div class="starbutton" data-bind="css: { on: Starred }"></div>
+ </div>
+ <div class="date" data-bind="text: FARManager.DateFormat( Created )"></div>
+ <div class="link" data-bind="text: ( Name || Recording[0].Arguments.Url )"></div>
+ <div class="labels">
+ <ul data-bind="foreach: Labels">
+ <li data-bind="text: $data"></li>
+ </ul>
+ </div>
</li>
</ul>
Please sign in to comment.
Something went wrong with that request. Please try again.