form sent mode

master
km0 3 years ago
parent f9cf348b01
commit f7e012dd3d

@ -9,6 +9,8 @@ export default {
const logs = ref([""]); const logs = ref([""]);
const who = ref(""); const who = ref("");
const sent = ref(false);
const disabled = computed(() => { const disabled = computed(() => {
return [title, description, nature, logs, who].some((input) => input.value == ""); return [title, description, nature, logs, who].some((input) => input.value == "");
}); });
@ -25,46 +27,72 @@ export default {
who: who.value, who: who.value,
}), }),
}); });
sent.value = true;
title.value = "";
description.value = "";
nature.value = "";
logs.value = [""];
who.value = "";
}; };
return { title, description, nature, logs, who, disabled, submit }; return { title, description, nature, logs, who, disabled, submit, sent };
}, },
template: ` template: `
<section class='recipe'> <section class='recipe'>
<div class="entry">
<label for="title">Title</label>
<input type="text" v-model='title'/>
</div>
<div class="entry">
<label for="description">Description</label>
<textarea v-model="description"></textarea>
</div>
<div class="entry"> <div v-if="sent">
<label for="nature">Nature of the input</label>
<input type="text" v-model="nature" />
</div>
<div class="entry"> <div class="entry">
<label for="log">Process Log</label> Thanks for sharing!
<textarea v-model="logs[index]" v-for="(log, index) in logs" :key="index" :placeholder="index + 1"></textarea> Your entry is being added to the cookbook.
<button class="add" @click="logs.push('')">+</button> </div>
</div>
<div class="entry"> <div class="entry">
<label for="who">Who</label> <button @click="sent = false">Send another</button>
<input type="text" v-model="who" /> </div>
</div>
</div>
<div v-else>
<div class="entry">
<label for="title">Title</label>
<input type="text" v-model='title'/>
</div>
<div class="entry">
<label for="description">Description</label>
<textarea v-model="description"></textarea>
</div>
<div class="entry">
<label for="nature">Nature of the input</label>
<input type="text" v-model="nature" />
</div>
<div class="entry">
<label for="log">Process Log</label>
<textarea v-model="logs[index]" v-for="(log, index) in logs" :key="index" :placeholder="index + 1"></textarea>
<button class="add" @click="logs.push('')">+</button>
</div>
<div class="entry">
<label for="who">Who</label>
<input type="text" v-model="who" />
</div>
<div class="entry"> <div class="entry">
<button @click="submit" class="submit" :disabled="disabled">Submit</button> <button @click="submit" class="submit" :disabled="disabled">Submit</button>
</div>
</div> </div>
</section> </section>
<!-- <dl> <!-- <dl>
<dt>Title</dt> <dt>Title</dt>
<dd>{{title}}</dd> <dd>{{title}}</dd>
<dt>Description</dt> <dt>Description</dt>
<dd>{{description}}</dd> <dd>{{description}}</dd>

@ -23,16 +23,16 @@ export default {
}, },
template: ` template: `
<div class="cookbook"> <div class="cookbook">
<section class="recipe" v-for="(recipe, index) in recipes" :style="style(index)" @click="browse()"> <section class="recipe" v-for="(recipe, index) in recipes" :style="style(index)" @click="browse()" :key="recipe">
<h3>{{recipe.title}}</h3> <h3>{{recipe.title}}</h3>
<p>{{recipe.description}}</p> <p>{{recipe.description}}</p>
<div>{{recipe.nature}}</div> <div>{{recipe.nature}}</div>
<ol> <ol>
<li v-for="log in recipe.logs">{{log}}</li> <li v-for="log in recipe.logs">{{log}}</li>
</ol> </ol>
<p>{{recipe.who}}</p> <p>{{recipe.who}}</p>
</section> </section>
</div> </div>
`, `,
}; };

@ -106,4 +106,5 @@ label {
left: 0; left: 0;
background-color: #e6b0aa; background-color: #e6b0aa;
cursor: pointer; cursor: pointer;
user-select: none;
} }

@ -75,6 +75,7 @@ def get_recipes():
# post the recipe in the wiki # post the recipe in the wiki
def update_wiki(recipe): def update_wiki(recipe):
import mwclient import mwclient
site = mwclient.Site('pzwiki.wdka.nl', path='/mw-mediadesign/') site = mwclient.Site('pzwiki.wdka.nl', path='/mw-mediadesign/')
@ -106,6 +107,7 @@ def update_wiki(recipe):
# delete multiline indentation # delete multiline indentation
text += '\n'.join([line.strip() for line in content.splitlines()]) text += '\n'.join([line.strip() for line in content.splitlines()])
page.edit(text, f'Added a new recipe! {recipe["title"]}') page.edit(text, f'Added a new recipe! {recipe["title"]}')

@ -0,0 +1,110 @@
body {
font-size: 1.5rem;
margin: 0;
background: rgb(255, 244, 235);
}
.contents {
margin: 32px;
}
h1 {
color: #ecab72;
margin: 32px;
text-align: center;
}
a {
color: currentColor;
}
a.stretched-link::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
}
/* FILTERS */
.tag {
background: none;
font-size: 20px;
display: inline-block;
border: 1px solid currentColor;
padding: 0 0.5em;
border-radius: 1em;
margin: 4px;
text-transform: capitalize;
user-select: none;
cursor: pointer;
transform: translateY(0);
transition: transform 0.4s ease-in;
}
.tag.active {
background-color: white;
}
.tag.active.all {
background: none;
}
.filters .tag:focus,
.filters .tag:hover {
transform: translateY(-4px);
transition: transform 0.2s ease-out;
}
ul {
padding: 0;
}
/* TABLE */
table {
border-collapse: collapse;
}
tr {
display: none;
position: relative;
}
tr:nth-child(even) {
background-color: rgb(251, 237, 225);
}
tr.active {
display: table-row;
}
tr:hover {
background-color: rgb(250, 232, 217);
}
tr .tag {
cursor: default;
}
tr.header {
display: table-row;
text-align: left;
}
.categories {
width: 20%;
}
.overview {
font-style: italic;
width: 40%;
}
.date {
width: 14ch;
}
Loading…
Cancel
Save