Permalink
Browse files

Loans replaced with loan collections.

This means that user can build any combination of loans into a combined loan-collection. This is useful to test the curves of real world situations where people often have multiple mortgages on a single property. The current Icelandic landscape also includes mixed loans of indexed/unindexed parts and this would be a requirement to calculating them.

This now adds the need to show collection breakdowns as small multiples.

As it turns out I am starting to regret some design decisions, it would have been much less complicated to classify the loan collection and loans into a model. The current structure made more sense when the form was static. I've added a bunch of helper methods to reduce the work of dealing with it, but I may need to refactor the whole thing if any more complexity is added.
  • Loading branch information...
borgar committed Aug 12, 2012
1 parent 5b12a6b commit b44956067551e67b17314133450824cb688a8941
Showing with 282 additions and 99 deletions.
  1. +22 −16 css/styles.less
  2. +81 −60 index.html
  3. +172 −22 js/app.js
  4. +7 −1 js/jquery.to_query.js
View
@@ -21,6 +21,7 @@ select {
input {
padding : 3px 4px;
box-shadow: 1px 1px 5px #ccc inset;
+ border-radius : 3px;
}
h1 {
margin : 0;
@@ -76,25 +77,30 @@ fieldset {
clear: both;
}
-#loan1, #loan2 {
- float : left;
- clear: none;
- width : 49.5%;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- select {
- width : 65%;
- }
- .formcontrol label {
- display: inline-block;
- width : 30%;
- text-align : right;
- }
+
+table {
+ width : 100%;
+}
+th, td {
+ text-align : left;
+ padding : 4px 0;
+ border-bottom: 1px solid #ccc;
}
-#loan2 {
- float : right;
+td.actions {
+ text-align : right;
}
+.buttons {
+ padding : 6px 0;
+ text-align : right;
+ margin-bottom: 2px;
+}
+
+tr:only-child button[data-action] {
+ visibility: hidden;
+}
+
+
fieldset.inactive {
color : #999;
input, option, select {
View
@@ -21,72 +21,93 @@ <h1> <a href=".">Lánareiknir</a> </h1>
<div id="col1">
- <fieldset class="" id="loan1">
- <legend><label><input type="checkbox" id="loan1_on" checked> Lán 1:</label></legend>
- <div class="formcontrol">
- <label for="loan1_principal">Lánsfjárhæð:</label>
- <input id="loan1_principal" name="loan1_principal" size="10"
- value="20000000" min="1000000" step="1000000" type="number" />
- <abbr class="unit" title="krónur">kr.</abbr>
- </div>
- <div class="formcontrol">
- <label for="loan1_period">Tímabil:</label>
- <input id="loan1_period" name="loan1_period" size="2"
- value="40" max="60" min="5" step="1" type="number" />
- <span class="unit">ár</span>
+ <fieldset class="" id="l1wrap">
+ <legend><label><input type="checkbox" id="l1" checked> Lánasafn 1:</label></legend>
+ <input id="l1n" name="l1n" type="hidden" value="1">
+
+ <table cellspacing="0">
+ <thead>
+ <tr>
+ <th>&nbsp;</th>
+ <th>Lánsfjárhæð</th>
+ <th>Tímabil</th>
+ <th>Tegund láns</th>
+ <th>Vextir</th>
+ <th>&nbsp;</th>
+ </tr>
+ </thead>
+ <tbody id="l1body">
+
+ <tr id="l1(1)row">
+ <td class="formcontrol formselect formcheck">
+ <label>
+ <input id="l1(1)" name="l1(1)" value="on" type="checkbox" checked />
+ </label>
+ </td>
+ <td class="formcontrol">
+ <input id="l1(1)principal" name="l1(1)principal" size="10"
+ value="20000000" min="1000000" step="1000000" type="number" />
+ <abbr class="unit" title="krónur">kr.</abbr>
+ </td>
+ <td class="formcontrol">
+ <input id="l1(1)period" name="l1(1)period" size="2"
+ value="40" max="60" min="5" step="1" type="number" />
+ <span class="unit">ár</span>
+ </td>
+ <td class="formcontrol formselect">
+ <select id="l1(1)type" name="l1(1)type">
+ <option value="idx_eq">Verðtryggt - Jafnar afborganir</option>
+ <option value="idx_pmt">Verðtryggt - Jafngreiðslur</option>
+ <option value="eq">Óverðtryggt - Jafnar afborganir</option>
+ <option value="pmt">Óverðtryggt - Jafngreiðslur</option>
+ </select>
+ </td>
+ <td class="formcontrol">
+ <input id="l1(1)interest" name="l1(1)interest" size="2"
+ value="5" max="25" min="1" step="1" type="number" />
+ <abbr class="unit" title="prósent">%</abbr>
+ </td>
+ <td class="actions">
+ <button data-action="delete-loan">✖</button>
+ </td>
+ </tr>
+
+ </tbody>
+ </table>
+
+ <div class="buttons">
+ <button data-action="add-loan">Bæta við láni</button>
</div>
- <fieldset class="">
- <div class="formcontrol formselect">
- <label for="loan1_type">Tegund láns:</label>
- <select id="loan1_type" name="loan1_type">
- <option value="idx_eq">Verðtryggt - Jafnar afborganir</option>
- <option value="idx_pmt">Verðtryggt - Jafngreiðslur</option>
- <option value="eq">Óverðtryggt - Jafnar afborganir</option>
- <option value="pmt">Óverðtryggt - Jafngreiðslur</option>
- </select>
- </div>
- <div class="formcontrol">
- <label for="loan1_interest">Vextir:</label>
- <input id="loan1_interest" name="loan1_interest" size="2"
- value="5" max="25" min="1" step="1" type="number" />
- <abbr class="unit" title="prósent">%</abbr>
- </div>
- </fieldset>
+
</fieldset>
- <fieldset class="" id="loan2">
- <legend><label><input type="checkbox" id="loan2_on"> Lán 2:</label></legend>
- <div class="formcontrol">
- <label for="loan2_principal">Lánsfjárhæð:</label>
- <input id="loan2_principal" name="loan2_principal" size="10"
- value="20000000" min="1000000" step="1000000" type="number" />
- <abbr class="unit" title="krónur">kr.</abbr>
- </div>
- <div class="formcontrol">
- <label for="loan2_period">Tímabil:</label>
- <input id="loan2_period" name="loan2_period" size="2"
- value="40" max="60" min="5" step="1" type="number" />
- <span class="unit">ár</span>
+
+ <fieldset class="" id="l2wrap">
+ <legend><label><input type="checkbox" id="l2"> Lánasafn 2:</label></legend>
+ <input id="l2n" name="l2n" type="hidden" value="1">
+
+ <table cellspacing="0">
+ <thead>
+ <tr>
+ <th>&nbsp;</th>
+ <th>Lánsfjárhæð</th>
+ <th>Tímabil</th>
+ <th>Tegund láns</th>
+ <th>Vextir</th>
+ <th>&nbsp;</th>
+ </tr>
+ </thead>
+ <tbody id="l2body"></tbody>
+ </table>
+
+ <div class="buttons">
+ <button data-action="add-loan">Bæta við láni</button>
</div>
- <fieldset class="">
- <div class="formcontrol formselect">
- <label for="loan2_type">Tegund láns:</label>
- <select id="loan2_type" name="loan2_type">
- <option value="idx_eq">Verðtryggt - Jafnar afborganir</option>
- <option selected value="idx_pmt">Verðtryggt - Jafngreiðslur</option>
- <option value="eq">Óverðtryggt - Jafnar afborganir</option>
- <option value="pmt">Óverðtryggt - Jafngreiðslur</option>
- </select>
- </div>
- <div class="formcontrol if_index">
- <label for="loan2_interest">Vextir:</label>
- <input id="loan2_interest" name="loan2_interest" size="2"
- value="5" max="25" min="1" step="1" type="number" />
- <abbr class="unit" title="prósent">%</abbr>
- </div>
- </fieldset>
+
</fieldset>
+
+
<fieldset class="" id="economy">
<legend>Verðþróun:</legend>
<div class="formcontrol">
Oops, something went wrong.

0 comments on commit b449560

Please sign in to comment.