recipes

components/CookbookForm.js

@@ -1,7 +1,7 @@
 export default {
 	name: "CookbookForm",
 	setup() {
-		const { ref } = Vue;
+		const { ref, computed } = Vue;
 
 		const title = ref("");
 		const description = ref("");
@@ -9,6 +9,10 @@ export default {
 		const logs = ref([""]);
 		const who = ref("");
 
+		const disabled = computed(() => {
+			return [title, description, nature, logs, who].some((input) => input.value == "");
+		});
+
 		const submit = function () {
 			fetch("https://hub.xpub.nl/soupboat/cookbook/", {
 				method: "POST",
@@ -23,7 +27,7 @@ export default {
 			});
 		};
 
-		return { title, description, nature, logs, who, submit };
+		return { title, description, nature, logs, who, disabled, submit };
 	},
 	template: `
         <section class='recipe'> 
@@ -54,7 +58,7 @@ export default {
           </div>
 
           <div class="entry"> 
-            <button @click="submit" class="submit">Submit</button>
+            <button @click="submit" class="submit" :disabled="disabled">Submit</button>
           </div>
         </section>
 

components/CookbookRecipes.js

@@ -0,0 +1,38 @@
+export default {
+	setup() {
+		const { ref, computed } = Vue;
+
+		const recipes = ref(null);
+
+		fetch("https://hub.xpub.nl/soupboat/cookbook/get")
+			.then((res) => res.json())
+			.then((data) => (recipes.value = data));
+
+		const style = function (index) {
+			return {
+				transform: `translate(${index * 10}px, ${index * 10}px)`,
+			};
+		};
+
+		const browse = function () {
+			let recipe = recipes.value.pop();
+			recipes.value.unshift(recipe);
+		};
+
+		return { recipes, style, browse };
+	},
+
+	template: ` 
+    <div class="cookbook">
+        <section class="recipe" v-for="(recipe, index) in recipes" :style="style(index)" @click="browse()">
+			<h3>{{recipe.title}}</h3>
+			<p>{{recipe.description}}</p>
+			<div>{{recipe.nature}}</div>
+			<ol>
+				<li v-for="log in recipe.logs">{{log}}</li>
+			</ol>
+			<p>{{recipe.who}}</p>
+		</section>
+    </div>
+    `,
+};

index.html

@@ -12,18 +12,15 @@
 		<div id="app">
 			<a href="archive" class="archive">Archive</a>
 			<cookbook-form></cookbook-form>
+			<cookbook-recipes></cookbook-recipes>
 		</div>
 
 		<script type="module">
 			import CookbookForm from "./components/CookbookForm.js";
+			import CookbookRecipes from "./components/CookbookRecipes.js";
 			const { createApp } = Vue;
 			createApp({
-				components: { CookbookForm },
+				components: { CookbookForm, CookbookRecipes },
-				data() {
-					return {
-						message: "Hello Vue!",
-					};
-				},
 			}).mount("#app");
 		</script>
 	</body>

style.css

@@ -12,11 +12,17 @@ body {
 
 #app {
 	width: 100%;
+	display: flex;
+	flex-wrap: wrap;
+}
+
+#app > * {
+	flex-shrink: 0;
 }
 
 section.recipe {
-	display: block;
+	display: inline-block;
-	margin: 48px auto;
+	margin: 48px;
 	padding: 32px;
 	width: 50ch;
 	border-radius: 0.5rem;
@@ -42,6 +48,10 @@ button {
 	font-size: 1rem;
 }
 
+button {
+	cursor: pointer;
+}
+
 button.add {
 	display: block;
 	width: 48px;
@@ -52,6 +62,12 @@ button.add {
 	border-radius: 50%;
 }
 
+button:disabled {
+	border: 1px dashed currentColor;
+	cursor: default;
+	opacity: 0.5;
+}
+
 textarea + textarea {
 	margin-top: 16px;
 }
@@ -76,3 +92,18 @@ label {
 	padding: 0 0.5em;
 	text-decoration: none;
 }
+
+.cookbook {
+	display: inline-block;
+	position: relative;
+	min-width: 50ch;
+	height: 100%;
+}
+
+.cookbook .recipe {
+	position: absolute;
+	top: 0;
+	left: 0;
+	background-color: #e6b0aa;
+	cursor: pointer;
+}