Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Added flyout to allow adding new transactions #8

Merged
merged 4 commits into from

2 participants

This page is out of date. Refresh to see the latest.
View
4 src/Finances.Win8/css/transactions.css
@@ -181,3 +181,7 @@ section[role=main] .content {
section[role=main] .content .right .win-listview {
height: 100%;
}
+
+ #addTransaction {
+ float: right;
+ }
View
33 src/Finances.Win8/html/transactions.html
@@ -1,9 +1,8 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>expenses</title>
-
<link href="//Microsoft.WinJS.0.6/css/ui-dark.css" rel="stylesheet">
<script src="//Microsoft.WinJS.0.6/js/base.js"></script>
<script src="//Microsoft.WinJS.0.6/js/ui.js"></script>
@@ -24,7 +23,8 @@ <h4 class="item-amount" data-win-bind="textContent: amount"></h4>
<div class="expenses fragment">
<header aria-label="Header content" role="banner">
<button class="win-backbutton" aria-label="Back" disabled></button>
- <h1 class="titlearea win-type-ellipsis"><span class="pagetitle">transactions</span></h1>
+ <h1 class="titlearea win-type-ellipsis"><span class="pagetitle">transactions</span>
+ </h1>
</header>
<section aria-label="Main content" role="main">
<div class="content">
@@ -39,10 +39,37 @@ <h1 class="titlearea win-type-ellipsis"><span class="pagetitle">transactions</sp
</div>
</div>
<div class="right">
+ <button id="addTransaction">Add a transaction</button>
<div class="grouplist" data-win-control="WinJS.UI.ListView"></div>
</div>
</div>
</section>
</div>
+ <div>
+ <div id="addTransactionFlyout" data-win-control="WinJS.UI.Flyout" aria-label="{Add transaction flyout}">
+ <form onsubmit="return false;" class="verticalStacking">
+ <div>
+ <label>
+ Description<br />
+ <input type="text" id="transaction-flyout-content" spellcheck="true" />
+ </label>
+ </div>
+ <div>
+ <label>
+ Amount<br />
+ <input type="number" id="transaction-flyout-amount" step=".01" />
+ </label>
+ </div>
+ <div>
+ <label>
+ Category<br />
+ <select id="transaction-flyout-category"></select>
+ </label>
+ </div>
+ <button id="transaction-flyout-submit">Submit</button>
+ <button id="transaction-flyout-cancel">Cancel</button>
+ </form>
+ </div>
+ </div>
</body>
</html>
View
20 src/Finances.Win8/js/data.js
@@ -1,4 +1,4 @@
-(function () {
+(function () {
"use strict";
var dataStore = Finances.Data.localStore;
@@ -7,8 +7,23 @@
WinJS.Namespace.define("Finances.Data", {
data: {},
groupedHistory: groupedItems,
+ categories: function () {
+ return Finances.Data.data.categories;
+ },
save: function () {
return dataStore.saveObject('finances.json', Finances.Data.data);
+ },
+ getCategory: function(key) {
+ var match = Finances.Data.data.categories.filter(function (val) { return key == val.key; });
+ return match.length > 0 ? match[0] : null;
+ },
+ addTransaction: function (category, amount, content) {
+ var category = this.getCategory(category);
+ if (category == null) return;
+ var newItem = { category: category, amount: amount, content: content };
+ Finances.Data.data.history.push(newItem);
+ Finances.Data.save();
+ list.push(newItem);
}
});
@@ -37,7 +52,6 @@
}
});
-
function generateDefaultData() {
// These three strings encode placeholder images. You will want to set the
// backgroundImage property in your real data to be URLs to images.
@@ -77,4 +91,4 @@
notifications: []
};
}
-})();
+})();
View
39 src/Finances.Win8/js/transactions.js
@@ -1,6 +1,6 @@
-(function () {
+(function () {
"use strict";
-
+
var nav = WinJS.Navigation;
var ui = WinJS.UI;
var utils = WinJS.Utilities;
@@ -8,7 +8,7 @@
ui.Pages.define("/html/transactions.html", {
- ready : function(element, options) {
+ ready: function (element, options) {
items = Finances.Data.groupedHistory;
var listView = element.querySelector(".grouplist").winControl;
@@ -18,17 +18,42 @@
oniteminvoked: this.itemInvoked.bind(this)
});
+ var flyout = element.querySelector("#addTransactionFlyout");
+ element.querySelector("#addTransaction").onclick = function () {
+ flyout.winControl.show(listView);
+ };
+
+ var categories = Finances.Data.data.categories;
+ var select = element.querySelector("#transaction-flyout-category");
+ categories.forEach(function (item) {
+ var option = document.createElement("option");
+ option.text = item.title;
+ option.value = item.key;
+ select.appendChild(option);
+ });
+
+ element.querySelector("#transaction-flyout-submit").onclick = function () {
+ Finances.Data.addTransaction(
+ select.options[select.selectedIndex].value,
+ element.querySelector("#transaction-flyout-amount").value,
+ element.querySelector("#transaction-flyout-content").value
+ );
+ flyout.winControl.hide();
+ };
+
+ element.querySelector("#transaction-flyout-cancel").onclick = function () { flyout.winControl.hide(); };
+
this.updateLayout(element, Windows.UI.ViewManagement.ApplicationView.value);
},
-
- itemInvoked: function(eventObject) {
+
+ itemInvoked: function (eventObject) {
var item = items.getAt(eventObject.detail.itemIndex);
console.log('Selected item: ' + JSON.stringify(item));
// TODO: what should happen when you select an item in the list? anything?
// nav.navigate("/html/itemDetailPage.html", { item: item });
},
- updateLayout: function(element, viewState) {
+ updateLayout: function (element, viewState) {
var listView = element.querySelector(".grouplist").winControl;
if (viewState === Windows.UI.ViewManagement.ApplicationViewState.snapped) {
@@ -38,4 +63,4 @@
}
}
});
-})();
+})();
Something went wrong with that request. Please try again.