Hikr refactors

Author: petterroea

chapter-7/Components/hikr.Button.ux

@@ -2,7 +2,7 @@
 	<string ux:Property="Text" />
 
 	<Rectangle Layer="Background" Color="#125F63" CornerRadius="4">
-		<DropShadow Angle="90" Distance="1" Spread="0.2" Size="2" Color="#00000060" />
+		<Shadow Angle="90" Distance="1" Size="2" Color="#00000060" />
 	</Rectangle>
 
 	<hikr.Text Value="{ReadProperty Text}" FontSize="16" TextAlignment="Center" />

chapter-8/Components/hikr.Button.ux

@@ -3,7 +3,7 @@
 	<float ux:Property="FontSize" />
 
 	<Rectangle Layer="Background" Color="#125F63" CornerRadius="4">
-		<DropShadow Angle="90" Distance="1" Spread="0.2" Size="2" Color="#00000060" />
+		<Shadow Angle="90" Distance="1" Size="2" Color="#00000060" />
 	</Rectangle>
 
 	<hikr.Text Value="{ReadProperty Text}" FontSize="{ReadProperty FontSize}" TextAlignment="Center" />

chapter-8/Modules/Backend.js

@@ -52,14 +52,17 @@ function getHikes() {
 function updateHike(id, name, location, distance, rating, comments) {
 	return new Promise(function(resolve, reject) {
 		setTimeout(function() {
+			console.log("Updating hike in backend...");
 			for (var i = 0; i < hikes.length; i++) {
 				var hike = hikes[i];
 				if (hike.id == id) {
+					console.log("Found hike, updating");
 					hike.name = name;
 					hike.location = location;
 					hike.distance = distance;
 					hike.rating = rating;
 					hike.comments = comments;
+					console.log("New hike:" + JSON.stringify(hike));
 					break;
 				}
 			}

chapter-8/Modules/Context.js

@@ -3,18 +3,49 @@ var Backend = require("./Backend");
 
 var hikes = Observable();
 
+function CreateObservableHike(backendHike) {
+	var obj = {};
+	obj.id = Observable(backendHike.id);
+	obj.name = Observable(backendHike.name);
+	obj.location = Observable(backendHike.location);
+	obj.distance = Observable(backendHike.distance);
+	obj.rating = Observable(backendHike.rating);
+	obj.comments = Observable(backendHike.comments);
+
+	obj.save = function() {
+		Backend.updateHike(obj.id.value, obj.name.value, obj.location.value, obj.distance.value, obj.rating.value, obj.comments.value)
+		.catch(function(error) {
+			console.log("Couldn't update hike: " + obj.id.value);
+		});
+	}
+	obj.reset = function() {
+		obj.id.value = backendHike.id;
+		obj.name.value = backendHike.name;
+		obj.location.value = backendHike.location;
+		obj.distance.value = backendHike.distance;
+		obj.rating.value = backendHike.rating;
+		obj.comments.value = backendHike.comments;
+	}
+	return obj;
+}
+
 Backend.getHikes()
 	.then(function(newHikes) {
+		for(var i = 0; i < newHikes.length; i++) {
+			newHikes[i] = CreateObservableHike(newHikes[i]);
+		}
 		hikes.replaceAll(newHikes);
 	})
 	.catch(function(error) {
 		console.log("Couldn't get hikes: " + error);
 	});
-
+/*
 function updateHike(id, name, location, distance, rating, comments) {
 	for (var i = 0; i < hikes.length; i++) {
 		var hike = hikes.getAt(i);
+		console.log("Finding hike id " + id + ", current: " + hike.id);
 		if (hike.id == id) {
+			console.log("updating");
 			hike.name = name;
 			hike.location = location;
 			hike.distance = distance;
@@ -28,10 +59,11 @@ function updateHike(id, name, location, distance, rating, comments) {
 		.catch(function(error) {
 			console.log("Couldn't update hike: " + id);
 		});
-}
+}*/
 
 module.exports = {
-	hikes: hikes,
+	hikes: hikes
+
 
-	updateHike: updateHike
+	//updateHike: updateHike
 };

chapter-8/Pages/EditHikePage.js

@@ -1,30 +1,34 @@
 var Context = require("Modules/Context");
 
-var hike = this.Parameter;
+var hike = this.Parameter.map(function(x) { console.log("Fetching id " + x + ", length: " + Context.hikes.length); return Context.hikes.getAt(x)}); //TODO bug is that this isnt returning an observable?
 
+/*
 var name = hike.map(function(x) { return x.name; });
 var location = hike.map(function(x) { return x.location; });
 var distance = hike.map(function(x) { return x.distance; });
 var rating = hike.map(function(x) { return x.rating; });
 var comments = hike.map(function(x) { return x.comments; });
-
+*/
 function cancel() {
 	// Refresh hike value to reset dependent Observables' values
-	hike.value = hike.value;
+	hike.value.reset();
 	router.goBack();
 }
 
 function save() {
-	Context.updateHike(hike.value.id, name.value, location.value, distance.value, rating.value, comments.value);
+	console.log("Saving hike");
+	console.log("New name: " + hike.value.name.value);
+	hike.value.save();
 	router.goBack();
 }
 
 module.exports = {
-	name: name,
+	/*name: name,
 	location: location,
 	distance: distance,
 	rating: rating,
-	comments: comments,
+	comments: comments,*/
+	hike: hike,
 
 	cancel: cancel,
 	save: save

chapter-8/Pages/EditHikePage.ux

@@ -15,27 +15,27 @@
 
 				<StackPanel>
 					<TitleText>Name:</TitleText>
-					<hikr.TextBox Value="{name}" />
+					<hikr.TextBox Value="{hike.name}" />
 				</StackPanel>
 
 				<StackPanel>
 					<TitleText>Location:</TitleText>
-					<hikr.TextBox Value="{location}" />
+					<hikr.TextBox Value="{hike.location}" />
 				</StackPanel>
 
 				<StackPanel>
 					<TitleText>Distance (km):</TitleText>
-					<hikr.TextBox Value="{distance}" InputHint="Decimal" />
+					<hikr.TextBox Value="{hike.distance}" InputHint="Decimal" />
 				</StackPanel>
 
 				<StackPanel>
 					<TitleText>Rating:</TitleText>
-					<hikr.TextBox Value="{rating}" InputHint="Integer" />
+					<hikr.TextBox Value="{hike.rating}" InputHint="Integer" />
 				</StackPanel>
 
 				<StackPanel>
 					<TitleText>Comments:</TitleText>
-					<hikr.TextView Value="{comments}" TextWrapping="Wrap" />
+					<hikr.TextView Value="{hike.comments}" TextWrapping="Wrap" />
 				</StackPanel>
 			</StackPanel>
 		</ScrollView>

chapter-8/Pages/HomePage.js

@@ -2,7 +2,7 @@ var Context = require("Modules/Context");
 
 function goToHike(arg) {
 	var hike = arg.data;
-	router.push("editHike", hike);
+	router.push("editHike", hike.id.value);
 }
 
 module.exports = {