From 5ac87cfe37cb935e44a536cdf4a64040abe40c3e Mon Sep 17 00:00:00 2001
From: Aditya Hase <aditya@adityahase.com>
Date: Mon, 22 Oct 2018 11:17:39 +0530
Subject: [PATCH] refactor(recorder): Render components dynamically based on
 hash

---
 .../js/frappe/recorder/PathListItem.vue       |  8 ++--
 .../js/frappe/recorder/RecorderRoot.vue       | 40 +++++++++++++++++--
 2 files changed, 41 insertions(+), 7 deletions(-)

diff --git a/frappe/public/js/frappe/recorder/PathListItem.vue b/frappe/public/js/frappe/recorder/PathListItem.vue
index 5f85038aff..9b409203bf 100644
--- a/frappe/public/js/frappe/recorder/PathListItem.vue
+++ b/frappe/public/js/frappe/recorder/PathListItem.vue
@@ -1,7 +1,9 @@
 <template>
-	<div>
-		{{ path }} {{ count }}
-	</div>
+	<a :href="'#Path/' + path ">
+		<div>
+			{{ path }} {{ count }}
+		</div>
+	</a>
 </template>
 
 <script>
diff --git a/frappe/public/js/frappe/recorder/RecorderRoot.vue b/frappe/public/js/frappe/recorder/RecorderRoot.vue
index f78fc4a7ea..40f4376593 100644
--- a/frappe/public/js/frappe/recorder/RecorderRoot.vue
+++ b/frappe/public/js/frappe/recorder/RecorderRoot.vue
@@ -1,15 +1,47 @@
 <template>
 	<div>
-		<recorder-detail/>
+		<component :is="current_component"/>
 	</div>
 </template>
 
 <script>
+
 import RecorderDetail from "./RecorderDetail.vue"
+import PathDetail from "./PathDetail.vue"
+
 export default {
 	name: "RecorderRoot",
-	components: {
-		RecorderDetail,
-	}
+	data () {
+		return {
+			current_component: RecorderDetail
+		}
+	},
+	mounted () {
+		this.set_component()
+		window.onhashchange = this.set_component
+	},
+	methods: {
+		set_component: function () {
+			var routes = {
+				"#": RecorderDetail,
+				"#Path": PathDetail,
+			}
+			var route = this.get_route()
+			this.current_component = routes[route.route]
+		},
+		get_route: function () {
+			var hash = window.location.hash
+			if (hash) {
+				var array = hash.split("/")
+				var route = array[0]
+				var param = array.slice(1).join("/")
+			}
+			else {
+				var route = "#"
+				var param = ""
+			}
+			return { route, param }
+		},
+	},
 };
 </script>