In this spiral, we will read all our Bank Account data from the local storage and display the numbers in a dropdown list. Upon selection, all the details of the bank account will be shown in a table. This is how our page will look like, at the start, upon opening the selection list:
Selecting a bank account number screen
In this spiral, we will let the code construct the web page:
void main() {
readLocalStorage(); (1)
constructPage(); (2)
sel.onChange.listen(showAccount); (3)
}In line (1), the account numbers are read from the local storage, extracted, and put into a list:
readLocalStorage() {
account_nos = [];
for (var key in window.localStorage.keys) {
account_nos.add(key.substring(12)); // extract account number
}
}The method in line (2) calls two other methods, constructSelect (line (4)) and constructTable (line (5)), to build up the select list and the empty table, respectively:
constructPage() {
// make dropdown list and fill with data:
var el = new Element.html(constructSelect()); (4)
document.body.children.add(el);
// prepare html table for account data:
var el1 = new Element.html(constructTable()); (5)
document.body.children.add(el1);
sel = querySelector('#accounts'),
table = querySelector('#accdata'),
table.classes.remove('border'),
}
String constructSelect() {
var sb = new StringBuffer(); (6)
sb.write('<select id="accounts">'),
sb.write('<option selected>Select an account no:</option>'),
account_nos.forEach( (acc) => sb.write('<option>$acc</option>')); (7)
sb.write('</select>'),
return sb.toString();
}
String constructTable() {
var sb = new StringBuffer();
sb.write('<table id="accdata" class="border">'),
sb.write('</table>'),
return sb.toString();
}Both the constructSelect and constructTable methods use a StringBuffer method for efficiency (line (6)). We use string interpolation (line (7)) to merge the data with the HTML. Upon selection, using the onChange event (line (3)), the following method will be called:
showAccount(Event e) {
// remove previous data:
table.children.clear(); (8)
table.classes.remove('border''), (9)
// get selected number:
sel = e.currentTarget;
if (sel.selectedIndex >= 1) { // an account was chosen (10)
var accountno = account_nos[sel.selectedIndex - 1];
var key = 'Bankaccount:$accountno';
String acc_json = window.localStorage[key];
bac = new BankAccount.fromJson(JSON.decode(acc_json));
// show data:
table.classes.add('border'),
constructTrows();
}
}To make sure no previous data is shown, the table is cleared in lines (8) and (9), and we also make sure that we select one of the accounts with line (10). The rest of the code is straightforward, using constructRows to fill in the table. We inserted all the <tr> tags in one Element.html; because of this, we are forced to include a <p> tag to surround all the table rows, because the HTML method needs a surrounding tag. The following screenshot shows the detail screen:
Detailed information of a selected bank account screen