From 0a5152074a53e58ddff08d5ab65620127a6b0e88 Mon Sep 17 00:00:00 2001
From: CyberLeo <cyberleo@cyberleo.net>
Date: Sat, 6 May 2017 04:15:02 -0500
Subject: [PATCH] Give cuepoints and phrasing their own sections

---
 app.rb               |  5 +----
 views/handler_js.erb | 53 +++++++++++++++++++++++++++++++++++---------
 views/meta_css.erb   | 48 ++++++++++++++++++++++++++-------------
 3 files changed, 76 insertions(+), 30 deletions(-)

diff --git a/app.rb b/app.rb
index 1bbf063..308fd9b 100644
--- a/app.rb
+++ b/app.rb
@@ -39,10 +39,7 @@ def load_tracklist()
   end
   $tracklist.unshift({
     index: "0",
-    title: "-",
-    length: "0",
-    bpm: "0",
-    notes: nil
+    title: "-"
   })
   $tracklist.sort! {|a,b| a[:index].to_i <=> b[:index].to_i }
 end
diff --git a/views/handler_js.erb b/views/handler_js.erb
index c990d2a..de14bbf 100644
--- a/views/handler_js.erb
+++ b/views/handler_js.erb
@@ -1,24 +1,57 @@
-function format_track(index, title, length, bpm, notes) {
-  length = Math.round(length);
+function format_length(seconds) {
+  var length = Math.round(seconds);
   var minutes = Math.floor(length / 60);
   var seconds = length % 60;
-  var length = minutes + ":" + ( "0" + seconds ).slice(-2);
-  var bpm = Math.round(bpm);
+  return minutes + ":" + ( "0" + seconds ).slice(-2);
+}
+
+function format_track(index, title, length, bpm, notes, cue_start, cue_bkdn, cue_next, cue_last, bars_in, bars_out) {
+  length = format_length(length);
+  bpm = Math.round(bpm);
+  cue_start = format_length(cue_start);
+  cue_bkdn = format_length(cue_bkdn);
+  cue_next = '-' + format_length(cue_next);
+  cue_last = '-' + format_length(cue_last);
   if ( notes == null ) notes = '-';
   entry = $('<div id="track_' + index + '" class="track" onClick="current(' + index + ');">');
   entry.append($('<span class="index">' + index + '</span>'));
-  entry.append($('<span class="title" title="' + title + '">' + title.slice(0,65) + '</span>'));
-  entry.append($('<span class="length">' + length + '</span>'));
-  entry.append($('<span class="clear"></span>'));
-  entry.append($('<span class="bpm">' + bpm + ' BPM</span>'));
-  entry.append($('<span class="notes" title="' + notes + '">' + notes.slice(0,80) + '</span>'));
+
+  tn = $('<div class="title-notes">');
+  tn.append($('<span class="title" title="' + title + '">' + title.slice(0,65) + '</span><br>'));
+  tn.append($('<span class="notes" title="' + notes + '">' + notes.slice(0,80) + '</span>'));
+  entry.append(tn);
+
+  if ( index > 0 ) {
+    lb = $('<div class="length-bpm">');
+    lb.append($('<span class="length">' + length + '</span><br>'));
+    lb.append($('<span class="bpm">' + bpm + '<span>BPM</span></span>'));
+    entry.append(lb);
+
+    cues = $('<div class="cues">');
+    cues.append($('<span class="next">Next: ' + cue_next + '</span><br>'));
+    cues.append($('<span class="last">Last: ' + cue_last + '</span><br>'));
+    cues.append($('<span class="out">(' + bars_out + ' bars)</span>'));
+    entry.append(cues);
+
+    cues = $('<div class="cues">');
+    cues.append($('<span class="start">Start: ' + cue_start + '</span><br>'));
+    cues.append($('<span class="bkdn">Bkdn: ' + cue_bkdn + '</span><br>'));
+    cues.append($('<span class="in">(' + bars_in + ' bars)</span><br>'));
+    entry.append(cues);
+  }
+
   return entry;
 }
 
 function init() {
   for (var index in tracklist) {
     track = tracklist[index];
-    entry = format_track(track['index'], track['title'], track['length'], track['bpm'], track['notes']);
+    entry = format_track(
+      track['index'], track['title'], track['length'], track['bpm'],
+      track['notes'],
+      track['start'], track['bkdn'], track['next'], track['last'],
+      track['in'], track['out']
+    );
     $('#tracks').append(entry);
   }
 }
diff --git a/views/meta_css.erb b/views/meta_css.erb
index ef2cd4a..d2599e5 100644
--- a/views/meta_css.erb
+++ b/views/meta_css.erb
@@ -50,38 +50,54 @@ body {
   background: gray;
 }
 
-.track > .title {
+.track > .title-notes {
   float: left;
+  text-align: left;
+}
+
+.track > .title-notes > .title {
   font-size: 16pt;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
-.track > .length {
-  font-size: 16pt;
-/*
-  text-transform: uppercase;
-  padding-top: 10px;
-  padding-left: 5px;
-*/
+.track > .title-notes > .notes {
+  font-size: 10pt;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.track > .length-bpm {
   float: right;
+  text-align: right;
 }
 
-.track > .clear {
-  float: left;
-  clear: both;
+.track > .length-bpm > .length {
+  font-size: 16pt;
 }
 
-.track > .bpm {
+.track > .length-bpm > .bpm {
   font-size: 12pt;
-  margin-top: -0.75em;
+}
+
+.track > .length-bpm > .bpm > span {
+  font-size: 7pt;
+}
+
+.track > .cues {
   float: right;
+  text-align: center;
+  line-height: 1.0;
 }
 
-.track > .notes {
+.track > .cues > * {
   font-size: 10pt;
+  margin: 0 5px;
+}
+
+.track > .clear {
   float: left;
-  margin-top: -0.75em;
-  padding-left: 5.5em;
+  clear: both;
 }
-- 
2.45.0