Fixed Dialogs

They actually show now

index.html

@@ -199,7 +199,7 @@ <h1>Chest</h1>
 				</div>
 			</div>
 
-			<div class="modal model-white" v-bind:style="{ display: displayType }">
+			<div class="modal modal-white" v-bind:class="{ display: selectionModel }">
 				<div class="modal-dialog">
 					<div class="modal-content" style="background-color: #585858;">
 						<div class="modal-container">
@@ -231,8 +231,7 @@ <h1>Chest</h1>
 
 							<div class="modal-footer" style="border-top: 1px solid #484848;">
 								<slot name="footer">
-
-									<button class="btn btn-success" v-bind:click="close">
+									<button class="btn btn-success" v-on:click="selectionModel = false">
 										Close
 									</button>
 								</slot>

js/index.js

@@ -156,7 +156,34 @@ var app = new Vue({
 		outputPositions: [],
 		selected: [],
 		availablePlants: [
-			"YHYWGH",
+			"GYYGGH",
+			"XYHGHH",
+			"GYYGYX",
+			"XYGGHH",
+			"WHHGYH",
+			"HYYYGH",
+			"GGYHYH",
+			"HGHWGH",
+			"WGGYYH",
+			"GGHYWG",
+			"WHYGGH",
+			"XGYGHH",
+			"GWHGGH",
+			"WYHGYG",
+			"HGHWHH",
+			"WYGHYY",
+			"XGYHYY",
+			"XHYHGW",
+			"WGGWYH",
+			"WHGXYH",
+			"WGYHGH",
+			"XGHWYY",
+			"XHYWYG",
+			"GGYYYG",
+			"WGGYYH",
+			"XHYWYG",
+			"GGHYWG"
+			/*"YHYWGH",
 			"GYGGGW",
 			"XHGGYY",
 			"XHGYYH",
@@ -179,7 +206,7 @@ var app = new Vue({
 			"GGYWHH",
 			"XHHGYG",
 			"WYYHGH",
-			"WYHYYH",
+			"WYHYYH",*/
 		]
 	},
 	methods: {
@@ -189,7 +216,7 @@ var app = new Vue({
 			this.availablePlants.push(makeCopyOfPlant)
 		},
 		calcBestCombination: function (event) {
-			if (this.availablePlants.length < 2) {
+			if (this.availablePlants.length < 3) {
 				return
 			}
 
@@ -282,13 +309,6 @@ var app = new Vue({
 			console.log(actual);
 
 			return actual
-		},
-		displayType: function () {
-			if (this.selectionModel) {
-				return "block"
-			} else {
-				return "none"
-			}
 		}
 	}	
 })

sass/index.sass

@@ -103,5 +103,9 @@ h1
 		margin: 2px 0px
 		width: 40px
 
-.model-white
-	color: white !important
+.model
+	&.model-white
+		color: white !important
+
+		&.display 
+			display: block