Added the Link and Park functionality

app/css/app.css

@@ -20,6 +20,9 @@ html, body{
 	flex: 1;
 }
 
+.flex-1{
+	flex: 1;
+}
 
 .btn{
 	border: 1px solid #E9E9E9;
@@ -46,4 +49,30 @@ html, body{
 }
 .btn.is-red:hover{
 	box-shadow: 0px 0px 0px 2px #FB503B;
+}
+
+
+#holder{
+	display: none;
+	position: fixed;
+	top: 0px;
+	left: 0px;
+	right: 0px;
+	bottom: 0px;
+	background: #fff;
+}
+#holder div{
+	flex: 1;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+#holder div{
+	border: 2px dashed #E9E9E9;
+	font-size: 25px;
+	color: #555;
+}
+
+.activeate-filedropper #holder{
+	display: flex;
 }

app/index.html

@@ -13,19 +13,75 @@
 			></status-bar>
 		<div class="splitter">
 			<div class="section1">
-				<list-header>Valet Sites</list-header>
+				<list-header>
+					Valet Sites
+				</list-header>
 				<site-list
 					:site-list="siteList"
 					:active-site="activeSite"
 					@activate="activateSite"
 					></site-list>
 			</div>
 			<div class="section2">
-				<site-details :active-site="activeSite"></site-details>
+				<site-details v-if="activeSite" :active-site="activeSite"></site-details>
 			</div>
 		</div>
 	</div>
 
+	<div id="holder">
+		<div id="park-dir">
+			Drop here to Park
+		</div>
+		<div id="link-dir">
+			Drop here to Link
+		</div>
+	</div>
+
+	<script>
+		const body = document.querySelector('body');
+		const holder = document.querySelector('#holder');
+		const parkDir = document.querySelector('#holder #park-dir');
+		const linkDir = document.querySelector('#holder #link-dir');
+
+		body.ondragover = function(){
+			body.classList.add('activeate-filedropper');
+			return false;
+		}
+
+		holder.ondragleave = holder.ondragend = function(){
+			body.classList.remove('activeate-filedropper');
+			return false;
+		}
+
+		parkDir.ondrop = (e) => {
+			e.preventDefault()
+			for (let f of e.dataTransfer.files) {
+				console.log('Parking: ', f.path)
+				valet_park(f.path)
+					.then(r => {
+						console.log(r);
+						body.classList.remove('activeate-filedropper');
+						reloadBase();
+					});
+			}
+			return false;
+		}
+
+		linkDir.ondrop = (e) => {
+			e.preventDefault()
+			for (let f of e.dataTransfer.files) {
+				console.log('Linking: ', f.path)
+				valet_link(f.path)
+					.then(r => {
+						console.log(r);
+						body.classList.remove('activeate-filedropper');
+						reloadBase();
+					});
+			}
+			return false;
+		}
+	</script>
+
 	<script src="js/base.js"></script>
 	<script src="js/app.js"></script>
 </body>

app/js/app.js

@@ -459,12 +459,15 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_vue___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_vue__);
 
 
+var timeout = void 0;
+
 window.app = new __WEBPACK_IMPORTED_MODULE_0_vue___default.a({
 	el: "#app",
 	data: {
 		config: {},
 		siteList: [],
-		activeSite: null
+		activeSite: null,
+		dropdownOpen: false
 	},
 	components: {
 		'status-bar': __webpack_require__(19),
@@ -483,6 +486,19 @@ window.app = new __WEBPACK_IMPORTED_MODULE_0_vue___default.a({
 		},
 		updateRunning: function updateRunning(running) {
 			this.running = running;
+		},
+		toggleDropdown: function toggleDropdown() {
+			this.dropdownOpen = !this.dropdownOpen;
+		},
+		hideDropdown: function hideDropdown() {
+			var _this = this;
+
+			timeout = setTimeout(function () {
+				_this.dropdownOpen = false;
+			}, 500);
+		},
+		hoverDropdown: function hoverDropdown() {
+			clearTimeout(timeout);
 		}
 	},
 	mounted: function mounted() {
@@ -533,6 +549,9 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 //
 //
 //
+//
+//
+//
 
 /* harmony default export */ __webpack_exports__["default"] = {
 	data: function data() {
@@ -567,6 +586,33 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 		openFolder: function openFolder() {
 			console.log('Opening');
 			shell.openItem(this.activeSite.path);
+		},
+		isLinked: function isLinked() {
+			return this.activeSite.path.search('.valet/Sites') != -1;
+		},
+		isParked: function isParked() {
+			return !this.isLinked();
+		},
+		forgetOrUnlink: function forgetOrUnlink() {
+			var _this2 = this;
+
+			if (this.isLinked()) {
+				valet_unlink(this.activeSite.path).then(function () {
+					_this2.activeSite = null;
+
+					window.location.reload();
+				});
+			} else {
+				var dirPath = this.activeSite.path.split('/');
+				delete dirPath[dirPath.length - 1];
+				dirPath = dirPath.join('/');
+				if (!confirm('Are you sure you want to do this? This will remove all the sites in this folder from Valet Park.')) return;
+				valet_forget(dirPath).then(function (r) {
+					console.log(r);
+
+					window.location.reload();
+				});
+			}
 		}
 	},
 	components: {
@@ -590,6 +636,11 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 //
 //
 //
+//
+//
+//
+//
+//
 
 /* harmony default export */ __webpack_exports__["default"] = {
 	data: function data() {
@@ -792,7 +843,7 @@ exports = module.exports = __webpack_require__(0)();
 
 
 // module
-exports.push([module.i, "\n.site-list{\n\tpadding: 0px 10px;\n\theight: calc(100% - 50px);\n\toverflow-y: scroll;\n}\n", ""]);
+exports.push([module.i, "\n.site-list{\n\tpadding: 0px 10px;\n\theight: calc(100% - 50px);\n\toverflow-y: scroll;\n}\n.small{\n\tfont-size: 15px;\n\ttext-align: center;\n\tpadding-top: 20px;\n\tcolor: #666;\n}\n", ""]);
 
 // exports
 
@@ -1199,7 +1250,14 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
     on: {
       "click": _vm.openFolder
     }
-  }, [_vm._v("Reveal")])])], 1) : _vm._e()
+  }, [_vm._v("Reveal")]), _vm._v(" "), _c('button', {
+    staticClass: "btn is-red",
+    on: {
+      "click": function($event) {
+        _vm.forgetOrUnlink()
+      }
+    }
+  }, [(_vm.isLinked()) ? _c('span', [_vm._v("Un-link")]) : _vm._e(), _vm._v(" "), (_vm.isParked()) ? _c('span', [_vm._v("Forget")]) : _vm._e()])])], 1) : _vm._e()
 },staticRenderFns: []}
 module.exports.render._withStripped = true
 if (false) {
@@ -1253,7 +1311,7 @@ if (false) {
 /***/ (function(module, exports, __webpack_require__) {
 
 module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
-  return (_vm.siteList) ? _c('div', {
+  return (_vm.siteList && _vm.siteList.length) ? _c('div', {
     staticClass: "site-list"
   }, _vm._l((_vm.siteList), function(item) {
     return _c('item', {
@@ -1264,7 +1322,9 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
         }
       }
     }, [_vm._v(_vm._s(item.site))])
-  })) : _vm._e()
+  })) : _c('div', {
+    staticClass: "site-list small"
+  }, [_vm._v("\n\tYou do not have any sites yet.\n\t"), _c('br'), _vm._v("\n\tDrag your code directory to park or link a file.\n")])
 },staticRenderFns: []}
 module.exports.render._withStripped = true
 if (false) {

app/js/base.js

@@ -85,6 +85,40 @@ function valet_start(){
 	});
 }
 
+function valet_link(path){
+	return new Promise(function(resolve, reject) {  
+		exec('sudo /usr/local/bin/valet link', {cwd: path}, function(error, stdout, stderr) {
+			console.log(error);
+			resolve(stdout);
+		});
+	});
+}
+function valet_unlink(path){
+	return new Promise(function(resolve, reject) {  
+		exec('sudo /usr/local/bin/valet unlink', {cwd: path}, function(error, stdout, stderr) {
+			console.log(error);
+			resolve(stdout);
+		});
+	});
+}
+
+function valet_park(path){
+	return new Promise(function(resolve, reject) {  
+		exec('sudo /usr/local/bin/valet park', {cwd: path}, function(error, stdout, stderr) {
+			console.log(error);
+			resolve(stdout);
+		});
+	});
+}
+function valet_forget(path){
+	return new Promise(function(resolve, reject) {  
+		exec('sudo /usr/local/bin/valet forget', {cwd: path}, function(error, stdout, stderr) {
+			console.log(error);
+			resolve(stdout);
+		});
+	});
+}
+
 function valet_running(){
 	console.log(process.env.HOME + "/.valet/valet.sock");
 	return fs.existsSync(process.env.HOME + "/.valet/valet.sock") ? true : false;

src/js/app.js

@@ -1,11 +1,14 @@
 import Vue from 'vue';
 
+let timeout;
+
 window.app = new Vue({
 	el: "#app",
 	data: {
 		config: {},
 		siteList: [],
-		activeSite: null
+		activeSite: null,
+		dropdownOpen: false,
 	},
 	components: {
 		'status-bar': require('./components/StatusBar'),
@@ -24,6 +27,17 @@ window.app = new Vue({
 		},
 		updateRunning(running){
 			this.running = running;
+		},
+		toggleDropdown(){
+			this.dropdownOpen = !this.dropdownOpen;
+		},
+		hideDropdown(){
+			timeout = setTimeout(() => {
+				this.dropdownOpen = false;
+			}, 500);
+		},
+		hoverDropdown(){
+			clearTimeout(timeout);
 		}
 	},
 	mounted(){

src/js/components/SiteDetails.vue

@@ -9,7 +9,10 @@
 		<div class="footer">
 			<button class="btn" @click="openSite">Open</button>
 			<button class="btn" @click="openFolder">Reveal</button>
-			<!-- <button class="btn is-green">Secure</button> -->
+			<button class="btn is-red" @click="forgetOrUnlink()">
+				<span v-if="isLinked()">Un-link</span>
+				<span v-if="isParked()">Forget</span>
+			</button>
 		</div>
 	</div>
 </template>
@@ -46,6 +49,33 @@
 			openFolder(){
 				console.log('Opening');
 				shell.openItem(this.activeSite.path);
+			},
+			isLinked(){
+				return this.activeSite.path.search('.valet/Sites') != -1;
+			},
+			isParked(){
+				return !this.isLinked();
+			},
+			forgetOrUnlink(){
+				if(this.isLinked()){
+					valet_unlink(this.activeSite.path)
+						.then(() => {
+							this.activeSite = null;
+							
+							window.location.reload();
+						});
+				} else {
+					let dirPath = this.activeSite.path.split('/');
+					delete dirPath[dirPath.length-1];
+					dirPath = dirPath.join('/');
+					if(!confirm('Are you sure you want to do this? This will remove all the sites in this folder from Valet Park.')) return;
+					valet_forget(dirPath)
+						.then(r => {
+							console.log(r);
+							
+							window.location.reload();
+						});
+				}
 			}
 		},
 		components: {