Deck view

client/src/routes.ts

@@ -5,13 +5,16 @@
 module rpgcards {
     
     export function setupRoutes(actions: Actions) {
-        page('/', () => {
+        page('/', (ctx) => {
             actions.setView(ViewState.MainMenu, []);
         });
-        page('/decks', () => {
+        page('/decks/:deckid', (ctx) => {
+            actions.setView(ViewState.DeckEdit, [ctx.params.deckid]);
+        });
+        page('/decks', (ctx) => {
             actions.setView(ViewState.DeckList, []);
         });
-        page('*', () => {
+        page('*', (ctx) => {
             actions.setView(ViewState.Unknown, []);
         });
         

client/src/views/deck.ts

@@ -0,0 +1,36 @@
+/// <reference path="../external/react/react.d.ts"/>
+/// <reference path="../stores/store.ts"/>
+/// <reference path="./header.ts"/>
+
+module rpgcards {
+
+	function deckInfo(deck: Deck): React.ReactElement<any> {
+		return React.DOM.div({}
+            , "Name: " + deck.name
+			, "Description: " + deck.description
+			, "Datasets: " + deck.datasetIds.join(", ")
+		);
+	}
+	
+	var loading = React.DOM.div({ className: "error" }
+            , "Loading..."
+		);
+	
+	var error = React.DOM.div({ className: "error" }
+            , "Could not load deck."
+		);
+	 
+    export function renderDeck(id: EntityId, store: Store): React.ReactElement<any> {
+		var deck = store.getDeck(id).caseOf({
+			just: (deck) => deckInfo(deck),
+			nothing: (e) => error,
+			pending: () => loading
+		});
+		
+        return React.DOM.div({}
+            , renderHeader(store)
+            , React.DOM.div({}
+                , deck
+            ));
+    }
+}

client/src/views/ui.ts

@@ -1,15 +1,17 @@
 /// <reference path="./view.ts"/>
 /// <reference path="./decks.ts"/>
+/// <reference path="./deck.ts"/>
 /// <reference path="./notfound.ts"/>
 /// <reference path="./main.ts"/>
 
 module rpgcards {
 	
 	export function renderUI(store: Store): React.ReactElement<any> {
+		var ids = store.getViewParams();
 		switch(store.getViewState()) {
 			case ViewState.MainMenu: return renderMain(store);
 			case ViewState.DeckList: return renderDecks(store);
-			case ViewState.DeckEdit: return renderNotFound(store);
+			case ViewState.DeckEdit: return renderDeck(ids[0], store);
 			case ViewState.DeckAddDataset: return renderNotFound(store);
 			case ViewState.TemplateList: return renderNotFound(store);
 			case ViewState.TemplateEdit: return renderNotFound(store);

client/tsconfig.json

@@ -38,6 +38,7 @@
         "./src/views/components/deck.ts",
         "./src/views/view.ts",
         "./src/views/decks.ts",
+        "./src/views/deck.ts",
         "./src/views/header.ts",
         "./src/views/notfound.ts",
         "./src/views/main.ts",