Refined match editing

coffee/forms.coffee

@@ -30,6 +30,10 @@ $ ->
             .append($(@).parent('label').html())
         $(@).closest('.radio').replaceWith(group)
 
-$('tr').on 'click', ->
+    if /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
+        $('abbr').on 'click', ->
+            alert($(@).attr('title'))
+
+    $('tr').on 'click', ->
         href = $(this).data('href')
         document.location = href if href?

coffee/scores.coffee

@@ -43,6 +43,8 @@ $ ->
             match_total.text(sum)
             match_avg.text(Math.round(sum / count * 10) / 10)
 
+        inputs.filter('[value=""]:first').focus()
+
     $('textarea').on 'keyup', ->
         $(@).height(0).height($(@).prop('scrollHeight'))
 

routes/match.php

@@ -84,7 +84,7 @@ function filter_form($matches) {
     return $form;
 }
 
-function create_match_form() {
+function create_form() {
     global $db, $user;
 
     $disciplines = array('barebow', 'recurve', 'compound');
@@ -141,6 +141,25 @@ function create_match_form() {
     return $form;
 }
 
+function edit_form($match) {
+    $form = create_form();
+
+    $form->setAction("match/{$match->id}");
+    $form->addHidden('_METHOD', 'PUT');
+
+    $created_at = preg_replace('/^(\d{4}-\d{1,2}-\d{1,2})[T ](\d{1,2}:\d{1,2}):00$/', '\1T\2', $match->created_at);
+
+    $form['name']->setDefaultValue($match->name);
+    $form['created_at']->setDefaultValue($created_at);
+    $form['distance']->setDefaultValue($match->distance);
+    $form['discipline']->setDefaultValue($match->discipline);
+    $form['arrows']->setDefaultValue($match->arrows);
+    $form['turns']->setDefaultValue($match->turns);
+    $form['notes']->setDefaultValue($match->notes);
+
+    return $form;
+}
+
 
 $app->get('/matches', function ($filter=null) use ($app, $db, $user) {
     $matches = $db->table('match')
@@ -170,15 +189,14 @@ $app->get('/matches', function ($filter=null) use ($app, $db, $user) {
     $app->render('match/list', compact('matches', 'filter_form'));
 });
 $app->get('/match/:id', render_match_action('view'));
-$app->get('/match/:id/edit', render_match_action('edit'));
 $app->get('/match/:id/scores', render_match_action('scores'));
 $app->get('/match/:id/delete', render_match_action('delete'));
 
 $app->get('/match', function () use ($app) {
-    $app->render('match/create', array('form' => create_match_form()));
+    $app->render('match/create', array('form' => create_form()));
 });
 $app->post('/match', function () use ($app, $db, $user) {
-    $form = create_match_form();
+    $form = create_form();
     $form->validate();
 
     if (!$form->hasErrors()) {
@@ -202,11 +220,53 @@ $app->post('/match/:id/scores', function ($id) use ($app, $db) {
     $app->redirect(ROOT_URL . '/match/' . $id);
 });
 
-$app->delete('/match/:id', function ($id) {
+$app->delete('/match/:id', function ($id) use ($app, $db) {
     find_match($id)->delete();
     $app->redirect(ROOT_URL . '/matches');
 });
 
-$app->put('/match/:id', function ($id) {
-    // TODO
+$app->get('/match/:id/edit', function ($id) use ($app) {
+    $match = find_match($id);
+    $form = edit_form($match);
+   $app->render('match/edit', compact('form', 'match'));
+});
+
+$app->put('/match/:id', function ($id) use ($app) {
+    function zeropad($array, $size) {
+        return array_pad(array_slice($array, 0, $size), $size, 0);
+    }
+
+    $match = find_match($id);
+    $form = edit_form($match);
+    $form->validate();
+
+    if (!$form->hasErrors()) {
+        $values = $form->getValues();
+        $update = array(
+            'name' => $values->name,
+            'created_at' => str_replace('T', ' ', $values->created_at) . ':00',
+            'distance' => $values->distance,
+            'discipline' => $values->discipline,
+            'arrows' => $values->arrows,
+            'turns' => $values->turns,
+            'notes' => $values->notes
+        );
+
+        if ($values->arrows != $match->arrows || $values->turns != $match->turns) {
+            $scores = unpack_scores($match->scores);
+            $turns = array_chunk($scores, $match->arrows);
+
+            foreach ($turns as $i => $turn)
+                $turns[$i] = zeropad($turn, $values->arrows);
+
+            $scores = call_user_func_array('array_merge', $turns);
+            $scores = zeropad($scores, $values->turns * $values->arrows);
+            $update['scores'] = pack_scores($scores);
+        }
+
+        $match->update($update);
+        $app->redirect(ROOT_URL . "/match/{$match->id}");
+    }
+
+    $app->render('match/edit', compact('form', 'match'));
 });

sass/main.sass

@@ -51,6 +51,7 @@ $xs-width: 768px
   input
     border: none
     width: 100%
+    background-color: #fff
 
 .panel textarea
   border: none
@@ -62,8 +63,22 @@ $xs-width: 768px
   white-space: normal
 
 .actions
-  float: right
   margin-bottom: 15px
 
+  .btn
+    .glyphicon
+      display: none
+    .text
+      display: inline-block
+
+@media (max-width: $xs-width - 1)
+  .actions
+    float: right
+    .btn
+      .glyphicon
+        display: inline-block
+      .text
+        display: none
+
 .tags span
   margin-right: 4px

templates/match/create.latte

@@ -10,9 +10,11 @@
             <div class="btn-group actions">
                 <a href="matches" class="btn btn-default" title="Cancel">
                     <span class="glyphicon glyphicon-remove"></span>
+                    <span class="text">Cancel</span>
                 </a>
                 <button type="submit" name="send" class="btn btn-primary" title="Save">
                     <span class="glyphicon glyphicon-save"></span>
+                    <span class="text">Save</span>
                 </button>
             </div>
         </div>

templates/match/delete.latte

@@ -10,13 +10,17 @@
 </p>
 
 <form action="match/{$match->id}" method="post">
-    <input type="hidden" name="_METHOD" value="DELETE"/>
+    <div class="btn-group actions">
+        <a href="match/{$match->id}" class="btn btn-default" title="cancel">
+            <span class="glyphicon glyphicon-remove"></span>
+            <span class="text">Cancel</span>
+        </a>
         <button type="submit" class="btn btn-primary">
-        Yes, I'm sure
+            <span class="glyphicon glyphicon-ok"></span>
+            <span class="text">Yes, I'm sure</span>
         </button>
-    <a href="match/{$match->id}" class="btn btn-default">
-        Cancel
-    </a>
+    </div>
+    <input type="hidden" name="_METHOD" value="DELETE"/>
 </form>
 
 {/block}

templates/match/edit.latte

@@ -2,4 +2,18 @@
 
 {block content}
 <h2 class="page-header">{$match->name}</h2>
+{form $form}
+    {form errors}
+    {form controls}
+    <div class="form-group">
+        <div class="form-actions col-sm-offset-2 col-sm-10">
+            <div class="btn-group actions">
+                <button type="submit" name="send" class="btn btn-primary" title="Save">
+                    <span class="glyphicon glyphicon-ok"></span>
+                    <span class="text">Save</span>
+                </button>
+            </div>
+        </div>
+    </div>
+{/form}
 {/block}

templates/match/list.latte

@@ -4,7 +4,7 @@
 <h2 class="page-header">
     Matches
     <div class="btn-group">
-        <a href="match" title="Add new match" class="btn btn-sm btn-default">
+        <a href="match" class="btn btn-sm btn-default" title="Add new match">
             <span class="glyphicon glyphicon-plus"></span>
         </a>
         <a data-toggle="collapse" href="#filter" title="Filter"

templates/match/scores.latte

@@ -31,7 +31,8 @@
             <th class="separator">{$i + 1}</th>
             <td n:foreach="$row as $j => $arrow"
                 n:class="$j == $match->arrows - 1 ? separator">
-                <input type="number" min="0" max="10" name="scores[]" value="{$arrow ? $arrow}">
+                <input type="number" min="0" max="10" name="scores[]"
+                    value="{$arrow ? $arrow}">
             </td>
             <td class="row-total">{$sum = array_sum($row)}</td>
             <td class="total">{$total = $total + $sum}</td>
@@ -42,7 +43,9 @@
             <th colspan="{$match->arrows + 2}">Total:<br>Average:</th>
             <td>
                 <span class="match-total">{$total}</span><br>
-                <span class="match-avg">{$total / ($match->turns * $match->arrows)|number:1}</span>
+                <span class="match-avg" title="{$total / ($match->turns * $match->arrows)|number:4}">
+                    {$total / ($match->turns * $match->arrows)|number:1}
+                </span>
             </td>
         </tr>
     </tbody>
@@ -61,6 +64,7 @@
 <div class="actions">
     <button type="submit" class="btn btn-primary" title="Save">
         <span class="glyphicon glyphicon-ok"></span>
+        <span class="text">Save</span>
     </button>
 </div>
 

templates/match/view.latte

@@ -42,7 +42,9 @@
         <tr n:foreach="$rows as $i => $row">
             <th class="separator">{$i + 1}</th>
             <td n:foreach="$row as $j => $arrow"
-                n:class="$j == $match->arrows - 1 ? separator">{$arrow}</td>
+                n:class="$j == $match->arrows - 1 ? separator">
+                <input type="text" disabled value="{$arrow}">
+            </td>
             <td>{$sum = array_sum($row)}</td>
             <td>{$total = $total + $sum}</td>
         </tr>
@@ -50,7 +52,12 @@
     <tbody>
         <tr>
             <th colspan="{$match->arrows + 2}">Total:<br>Average:</th>
-            <td>{$total}<br>{$total / ($match->turns * $match->arrows)|number:1}</td>
+            <td>
+                {$total}<br>
+                <abbr title="{$total / ($match->turns * $match->arrows)|number:4}">
+                    {$total / ($match->turns * $match->arrows)|number:1}
+                </abbr>
+            </td>
         </tr>
     </tbody>
 </table>
@@ -67,12 +74,15 @@
 <div class="btn-group actions">
     <a href="match/{$match->id}/edit" class="btn btn-default" title="Edit metadata">
         <span class="glyphicon glyphicon-cog"></span>
+        <span class="text">Edit metadata</span>
     </a>
     <a href="match/{$match->id}/scores" class="btn btn-default" title="Edit scores">
         <span class="glyphicon glyphicon-pencil"></span>
+        <span class="text">Edit scores</span>
     </a>
     <a href="match/{$match->id}/delete" class="btn btn-danger" title="Delete">
         <span class="glyphicon glyphicon-trash"></span>
+        <span class="text">Delete</span>
     </a>
 </div>