Optimized look and user experience; fixed errors

templates/account/list.html.ep

@@ -7,7 +7,7 @@
 % my $inter_header = begin
 % my $group = shift;
 <tr><th colspan="11"><%= $group || 'Club management accounts' %></th>
-<th colspan="2"><a href="/debit?group=<%= $group %>">Charge'm all</a></th></tr>
+<th colspan="2"><a href="/debit?group=<%= $group %>"><img class="icon" src="/add-debit.svg" alt="Charge">all</a></th></tr>
 % end
 % while ( my $account = $accounts->next ) {
 % my $bal = $account->balance;
@@ -18,24 +18,26 @@
 % }
 % my $u = $account->ID;
 <tr><th><a href="/account/<%= $u %>"><%= $u %></a></th>
-   <td class="even_until"><%= $bal->even_until // "never" %></td><td class="number"><%== money $bal->arrears %></td><td><a href="<%= $u %>/debits">list</td><td><a href="<%= $u %>/out">Charge</a></td>
+   <td class="even_until"><%= $bal->even_until // "never" %></td><td class="number"><%== money $bal->arrears %></td><td><a href="<%= $u %>/debits"><img class="icon" alt="List" src="/list.svg" alt="List"></td><td><a title="Add a debit" href="<%= $u %>/out"><img class="icon" src="/add-debit.svg" alt="Charge"></a></td>
 <td class="centered">
 % my $which = ($bal->arrears && 1) + ($bal->available && 1);
 % if ( $which == 2 ) {
-   <a class="transfer-btn" href="<%= $u %>/transfer">C&hArr;D!</a>
+   › <a href="<%= $u %>/transfer"><img class="icon" src="/transfer.svg"></a> ‹
 % }
 % elsif ( $which ) {
-   <span style="background-color:rgba(224,224,0,0.4);">&nbsp;N/A&nbsp;</span>
+   <%== $bal->arrears ? q{›} : q{&nbsp;} %>
+   <img class="icon" src="/wait.svg" style="cursor:not-allowed;">
+   <%== $bal->available ? q{‹} : q{&nbsp;} %>
 % }
 % else {
-   <span  style="background-color:rgba(0,224,0,0.4);">&nbsp;N/A&nbsp;</span>
+   <img class="icon" src="/even.svg" style="cursor:not-allowed;">
 % }
-   </td><td class="number"><%== money $bal->available %></td><td><a href="<%= $u %>/credits">list</a></td><td><a href="<%= $u %>/in">Credit</a></td><td class="number"><%== money $bal->earned %></td><td class="number"><%== money $bal->promised %></td><td><a href="<%= $u %>/history">History</a></td><td><a href="<%= $u %>/report">Report</a></td></tr>
+   </td><td class="number"><%== money $bal->available %></td><td><a href="<%= $u %>/credits"><img class="icon" alt="List" src="/list.svg" alt="List"></a></td><td><a title="Add a credit" href="<%= $u %>/in"><img class="icon" src="/add-credit.svg" alt="Credit"></a></td><td class="number"><%== money $bal->earned %></td><td class="number"><%== money $bal->promised %></td><td><a href="<%= $u %>/history">History</a></td><td><a href="<%= $u %>/report">Report</a></td></tr>
 % } # while
 </table>
 
-<p style="text-align:center;"><a href="/account/">Create account</a> &sdot; <a href="/bankStatement">Reconstructed bank statement</a></p>
-<div class="help">
+% stash links => [ '/account' => "Create account", '/bankStatement' => "Reconstructed bank statement" ];
+% my $help = begin
 <h2>Column explanation</h2>
 <dl>
 <dt>Even till:</dt>
@@ -51,4 +53,5 @@
 <dt>Promised:</dt>
 <dd><p>Unpaid or not fully paid debits targetting credits of that account.</p></dd>
 </dl>
-</div>
+% end
+% stash help => $help;

templates/account/upsert.html.ep

@@ -0,0 +1,35 @@
+% title $name ? "Account $name" : "Create account";
+
+% my %r;
+% $r{ID} = begin
+    <input id="ID" name="ID" value="<%= $account->ID %>">
+% end
+% $r{type} = begin
+    <input id="type" name="type" value="<%= $account->type %>"> (<%= join(", ", @$types) %> or a new?)
+% end
+% $r{altId} = begin
+    <input id="altId" name="altId" value="<%= $account->altId %>">
+% end
+% $r{IBAN} = begin
+    <input id="IBAN" name="IBAN" value="<%= $account->IBAN %>">
+% end
+
+<form method="post">
+
+<dl class="upsert">
+% for my $f ( $account->result_source->columns ) {
+% my $renderer = $r{$f} // do {
+%     my $value = $account->$f // next;
+%     begin
+    <%= $value  %>
+%     end
+% };
+<dt><label for="<%= $f %>"><%= $f %>: </label></dt>
+<dd><%= $renderer->() %></dd>
+% }
+</dl>
+
+<button type="submit">Submit</button>
+</form>
+
+

templates/debit/upsert.html.ep

@@ -90,12 +90,13 @@ oops
 %    if ( $credits->count() ) {
 <p>Check credits you want to <strong>pay this debit</strong> with.</p>
 <table>
-<tr><th>S</th><th>date</th><th>purpose</th><th>to spend</th></tr>
+<tr><th>S</th><th>date</th><th>purpose</th><th>to spend</th><th>note</th></tr>
 %        while ( my $d = $credits->next ) {
 <tr><td><input type="checkbox" name="payWith" value="<%= $d->credId %>"></td>
     <td><%= $d->date %></td>
     <td><%== nl2br $d->purpose %></td>
     <td><%== money $d->difference %></td>
+    <td><input type="text" name="note[<%= $d->credId %>]"></td>
 </tr>
 %        }
 </table>

templates/layouts/default.html.ep

@@ -17,6 +17,33 @@
 % }
 <%= content %>
 
-<p style="text-align:center;"><a href="<%= url_for "home" %>">Back home – Account List</p>
-</body>
-</html>
+<p id="bottommenu"><a href="<%= url_for "home" %>">Overview</a>
+% if ( my $links = stash 'links' ) {
+%    while ( my ($link, $text) = splice @$links, 0, 2 ) {
+| <a href="<%= url_for $link %>"><%= $text %></a>
+%    }
+% }
+% my $help = stash 'help';
+% if ( defined $help ) {
+| <a href="#help">Help</a>
+% }
+% my $sql = sql_trace;
+% if ( defined $$sql ) {
+| <a href="#sql">SQL</a>
+% }
+</p>
+% if ( defined $help ) {
+<div class="targettable" id="help">
+%== $help->()
+</div>
+% }
+% if ( defined $sql ) {
+<div class="targettable" id="sql">
+<p>In case you are interested, this is what is executed in the database in order to process your request and to render this page. All essential logic and consistency checking is done on database level via triggers and views, so you could execute these SQL statements e.g. in the console and would get the same results. Note that, if any POST requests redirected here, SQL commands of those come first:</p>
+<textarea rows="5" style="width:100%;border:1px inset lightgrey;" readonly="readonly">
+%== $$sql
+</textarea></div>
+% }
+
+<p id="footer">Copyright 2016 Florian L. Heß | Treasure DB licensed under General Public License, version 3 | <a href="https://github.com/flowdy/treasuredb">Fork me on GitHub</a></p>
+</body></html>

templates/user/login.html.ep

@@ -14,6 +14,10 @@
 
     User id: <input name="user" type="text" placeholder="user id or email" value="<%= param('user') %>"><br>
     Password: <input name="password" type="password"><br>
-    <input type="submit" value="Login">
+% if ( my $token = param 'token' ) {
+    Repeat: <input name="samepassword" type="password"><br>
+    <input type="hidden" name="token" value="<%= $token %>"><br>
+% }
+    <button type="submit">Login</button>
 
 </p></form>