Initial commit

ferris · ferris · commit 9d12b4408096 · 2016-08-02T17:02:32.000+02:00
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+build/
+.uno/
diff --git a/Assets/background.jpg b/Assets/background.jpg
diff --git a/Assets/nature.mp4 b/Assets/nature.mp4
diff --git a/Components/hikr.Button.ux b/Components/hikr.Button.ux
@@ -0,0 +1,14 @@
+<Panel ux:Class="hikr.Button" Alignment="VerticalCenter" Margin="10" Padding="10" FontSize="16">
+	<string ux:Property="Text" />
+	<float ux:Property="FontSize" />
+
+	<Rectangle Layer="Background" Color="#125F63" CornerRadius="4">
+		<DropShadow Angle="90" Distance="1" Spread="0.2" Size="2" Color="#00000060" />
+	</Rectangle>
+
+	<hikr.Text Value="{Property Text}" FontSize="{Property FontSize}" TextAlignment="Center" />
+
+	<WhilePressed>
+		<Scale Factor=".95" Duration=".08" Easing="QuadraticOut" />
+	</WhilePressed>
+</Panel>
diff --git a/Components/hikr.Page.ux b/Components/hikr.Page.ux
@@ -0,0 +1,3 @@
+<Page ux:Class="hikr.Page">
+	<Image Layer="Background" File="../Assets/background.jpg" StretchMode="UniformToFill" Opacity=".7" />
+</Page>
diff --git a/Components/hikr.Text.ux b/Components/hikr.Text.ux
@@ -0,0 +1 @@
+<Text ux:Class="hikr.Text" TextColor="White" />
diff --git a/Components/hikr.TextBox.ux b/Components/hikr.TextBox.ux
@@ -0,0 +1 @@
+<TextBox ux:Class="hikr.TextBox" PlaceholderColor="#fff8" TextColor="White" CaretColor="White" Padding="10,10,0,10" />
diff --git a/Components/hikr.TextView.ux b/Components/hikr.TextView.ux
@@ -0,0 +1,3 @@
+<TextView ux:Class="hikr.TextView" PlaceholderColor="#fff8" TextColor="White" CaretColor="White" Padding="5">
+	<Rectangle Layer="Background" Color="#fff2" CornerRadius="4" />
+</TextView>
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2016 Fuse
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/MainView.ux b/MainView.ux
@@ -0,0 +1,14 @@
+<App>
+	<iOS.StatusBarConfig Style="Light" />
+	<Android.StatusBarConfig Color="#022328" />
+
+	<Router ux:Name="router" />
+
+	<ClientPanel Background="#022328">
+		<Navigator DefaultTemplate="splash">
+			<SplashPage ux:Template="splash" router="router" />
+			<HomePage ux:Template="home" router="router" />
+			<EditHikePage ux:Template="editHike" router="router" />
+		</Navigator>
+	</ClientPanel>
+</App>
diff --git a/Modules/Backend.js b/Modules/Backend.js
@@ -0,0 +1,75 @@
+var hikes = [
+	{
+		id: 0,
+		name: "Tricky Trails",
+		location: "Lakebed, Utah",
+		distance: 10.4,
+		rating: 4,
+		comments: "This hike was nice and hike-like. Glad I didn't bring a bike."
+	},
+	{
+		id: 1,
+		name: "Mondo Mountains",
+		location: "Black Hills, South Dakota",
+		distance: 20.86,
+		rating: 3,
+		comments: "Not the best, but would probably do again. Note to self: don't forget the sandwiches next time."
+	},
+	{
+		id: 2,
+		name: "Pesky Peaks",
+		location: "Bergenhagen, Norway",
+		distance: 8.2,
+		rating: 5,
+		comments: "Short but SO sweet!!"
+	},
+	{
+		id: 3,
+		name: "Rad Rivers",
+		location: "Moriyama, Japan",
+		distance: 12.3,
+		rating: 4,
+		comments: "Took my time with this one. Great view!"
+	},
+	{
+		id: 4,
+		name: "Dangerous Dirt",
+		location: "Cactus, Arizona",
+		distance: 19.34,
+		rating: 2,
+		comments: "Too long, too hot. Also that snakebite wasn't very fun."
+	}
+];
+
+function getHikes() {
+	return new Promise(function(resolve, reject) {
+		setTimeout(function() {
+			resolve(hikes);
+		}, 0);
+	});
+}
+
+function updateHike(id, name, location, distance, rating, comments) {
+	return new Promise(function(resolve, reject) {
+		setTimeout(function() {
+			for (var i = 0; i < hikes.length; i++) {
+				var hike = hikes[i];
+				if (hike.id == id) {
+					hike.name = name;
+					hike.location = location;
+					hike.distance = distance;
+					hike.rating = rating;
+					hike.comments = comments;
+					break;
+				}
+			}
+
+			resolve();
+		}, 0);
+	});
+}
+
+module.exports = {
+	getHikes: getHikes,
+	updateHike: updateHike
+};
diff --git a/Modules/Context.js b/Modules/Context.js
@@ -0,0 +1,37 @@
+var Observable = require("FuseJS/Observable");
+var Backend = require("./Backend");
+
+var hikes = Observable();
+
+Backend.getHikes()
+	.then(function(newHikes) {
+		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);
+		if (hike.id == id) {
+			hike.name = name;
+			hike.location = location;
+			hike.distance = distance;
+			hike.rating = rating;
+			hike.comments = comments;
+			hikes.replaceAt(i, hike);
+			break;
+		}
+	}
+	Backend.updateHike(id, name, location, distance, rating, comments)
+		.catch(function(error) {
+			console.log("Couldn't update hike: " + id);
+		});
+}
+
+module.exports = {
+	hikes: hikes,
+
+	updateHike: updateHike
+};
diff --git a/Pages/EditHikePage.js b/Pages/EditHikePage.js
@@ -0,0 +1,36 @@
+var Observable = require("FuseJS/Observable");
+var Context = require("Modules/Context");
+
+var hike = 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; });
+
+this.onParameterChanged(function(param) {
+	hike.value = param;
+});
+
+function cancel() {
+	// Refresh hike value to reset dependent Observables' values
+	hike.value = hike.value;
+	router.goBack();
+}
+
+function save() {
+	Context.updateHike(hike.value.id, name.value, location.value, distance.value, rating.value, comments.value);
+	router.goBack();
+}
+
+module.exports = {
+	name: name,
+	location: location,
+	distance: distance,
+	rating: rating,
+	comments: comments,
+
+	cancel: cancel,
+	save: save
+};
diff --git a/Pages/EditHikePage.ux b/Pages/EditHikePage.ux
@@ -0,0 +1,45 @@
+<hikr.Page ux:Class="EditHikePage">
+	<Router ux:Dependency="router" />
+
+	<JavaScript File="EditHikePage.js" />
+
+	<DockPanel>
+		<Grid ColumnCount="2" Dock="Bottom">
+			<hikr.Button Text="Cancel" Clicked="{cancel}" />
+			<hikr.Button Text="Save" Clicked="{save}" />
+		</Grid>
+
+		<ScrollView>
+			<DockPanel>
+				<StackPanel ItemSpacing="10" Padding="10" Dock="Top">
+					<hikr.Text ux:Class="TitleText" Opacity=".6" Margin="0,0,0,5" />
+
+					<StackPanel>
+						<TitleText>Name:</TitleText>
+						<hikr.TextBox Value="{name}" />
+					</StackPanel>
+
+					<StackPanel>
+						<TitleText>Location:</TitleText>
+						<hikr.TextBox Value="{location}" />
+					</StackPanel>
+
+					<StackPanel>
+						<TitleText>Distance (km):</TitleText>
+						<hikr.TextBox Value="{distance}" InputHint="Decimal" />
+					</StackPanel>
+
+					<StackPanel>
+						<TitleText>Rating:</TitleText>
+						<hikr.TextBox Value="{rating}" InputHint="Integer" />
+					</StackPanel>
+				</StackPanel>
+
+				<DockPanel Padding="10,0">
+					<TitleText Dock="Top">Comments:</TitleText>
+					<hikr.TextView Value="{comments}" TextWrapping="Wrap" />
+				</DockPanel>
+			</DockPanel>
+		</ScrollView>
+	</DockPanel>
+</hikr.Page>
diff --git a/Pages/HomePage.js b/Pages/HomePage.js
@@ -0,0 +1,12 @@
+var Context = require("Modules/Context");
+
+function goToHike(arg) {
+	var hike = arg.data;
+	router.push("editHike", hike);
+}
+
+module.exports = {
+	hikes: Context.hikes,
+
+	goToHike: goToHike
+};
diff --git a/Pages/HomePage.ux b/Pages/HomePage.ux
@@ -0,0 +1,29 @@
+<hikr.Page ux:Class="HomePage">
+	<Router ux:Dependency="router" />
+
+	<JavaScript File="HomePage.js" />
+
+	<DockPanel>
+		<hikr.Text FontSize="30" TextAlignment="Center" Dock="Top" Margin="0,50">Recent Hikes</hikr.Text>
+
+		<ScrollView>
+			<StackPanel>
+				<Rectangle ux:Class="Separator" Height="1" Fill="#fff4" />
+
+				<Each Items="{hikes}">
+					<Separator />
+
+					<Panel HitTestMode="LocalBoundsAndChildren" Clicked="{goToHike}">
+						<hikr.Text Value="{name}" Margin="20" />
+
+						<WhilePressed>
+							<Scale Factor=".95" Duration=".08" Easing="QuadraticOut" />
+						</WhilePressed>
+					</Panel>
+				</Each>
+
+				<Separator />
+			</StackPanel>
+		</ScrollView>
+	</DockPanel>
+</hikr.Page>
diff --git a/Pages/SplashPage.js b/Pages/SplashPage.js
@@ -0,0 +1,7 @@
+function goToHomePage() {
+	router.goto("home");
+}
+
+module.exports = {
+	goToHomePage: goToHomePage
+};
diff --git a/Pages/SplashPage.ux b/Pages/SplashPage.ux
@@ -0,0 +1,22 @@
+<Page ux:Class="SplashPage">
+	<Router ux:Dependency="router" />
+
+	<JavaScript File="SplashPage.js" />
+
+	<DockPanel ClipToBounds="true">
+		<Video Layer="Background" File="../Assets/nature.mp4" IsLooping="true" AutoPlay="true" StretchMode="UniformToFill" Opacity="0.5">
+			<Blur Radius="4.75" />
+		</Video>
+
+		<hikr.Text Dock="Bottom" Margin="10" Opacity=".5" TextAlignment="Center" FontSize="12">original video by Graham Uhelski</hikr.Text>
+
+		<Grid RowCount="2">
+			<StackPanel Alignment="VerticalCenter">
+				<hikr.Text Alignment="HorizontalCenter" FontSize="70">hikr</hikr.Text>
+				<hikr.Text Alignment="HorizontalCenter" Opacity=".5">get out there</hikr.Text>
+			</StackPanel>
+
+			<hikr.Button Text="Get Started" FontSize="18" Margin="50,0" Clicked="{goToHomePage}" />
+		</Grid>
+	</DockPanel>
+</Page>
diff --git a/README.md b/README.md
@@ -0,0 +1,14 @@
+# hikr
+Pronounced "hiker" (/ˈhaɪkə(r)/), hikr is a basic hike-tracking app.
+
+![Screen cap](https://github.com/fusetools/hikr/blob/master/hikr.gif)
+
+## basic info
+hikr is an example app case to accompany an upcoming end-to-end Fuse app tutorial. This tutorial will cover many of the basics of Fuse, including creating components, routing/navigation, and customizing the look/feel of your app. It will be part of Fuse's [docs](https://www.fusetools.com/docs), and each chapter will be released one-by-one as they're written in the coming weeks. Afterwards, the tutorial will branch off into a series of "tracks", each of which will cover a more technology-specific piece of information (such as adding a specific backend with login, etc). So stay tuned for that!
+
+_Note: there have been some force-pushes on this repo, so if you've cloned it before the series went live, it's probably a good idea to delete it and clone again._
+
+## license
+This code is licensed under the MIT license (see LICENSE).
+
+The provided video file (`Assets/nature.mp4`) is a modified version of [Graham Uhelski](https://vimeo.com/mankindfilms)'s ["The Valley"](http://mazwai.com/#/videos/220). It is licensed under [CC BY 3.0](https://creativecommons.org/licenses/by/3.0/).
diff --git a/hikr.gif b/hikr.gif
diff --git a/hikr.unoproj b/hikr.unoproj
@@ -0,0 +1,11 @@
+{
+  "RootNamespace":"",
+  "Packages": [
+    "Fuse",
+    "FuseJS"
+  ],
+  "Includes": [
+    "*",
+    "Modules/*.js:Bundle"
+  ]
+}

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+<Page ux:Class="hikr.Page">`
	`2`	`+ <Image Layer="Background" File="../Assets/background.jpg" StretchMode="UniformToFill" Opacity=".7" />`
	`3`	`+</Page>`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+<Text ux:Class="hikr.Text" TextColor="White" />`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+<TextBox ux:Class="hikr.TextBox" PlaceholderColor="#fff8" TextColor="White" CaretColor="White" Padding="10,10,0,10" />`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+<TextView ux:Class="hikr.TextView" PlaceholderColor="#fff8" TextColor="White" CaretColor="White" Padding="5">`
	`2`	`+ <Rectangle Layer="Background" Color="#fff2" CornerRadius="4" />`
	`3`	`+</TextView>`