change page

pad-bis.py

@@ -20,6 +20,7 @@ load_dotenv(dotenv_path=dotenv_path)
 load_dotenv()
 
 # prefix to add /soupboat/padliography to all the routes
+
 class PrefixMiddleware(object):
     def __init__(self, app, prefix=""):
         self.app = app
@@ -45,10 +46,10 @@ base_url = os.environ.get('BASE_URL', '')
 app.wsgi_app = PrefixMiddleware(app.wsgi_app, prefix=base_url)
 
 # Page of the wiki with the pads
-padliography = os.environ.get('PAGE', '')
+# padliography = os.environ.get('PAGE', '')
 
 
-def add_pad(link, title, overview, categories, date):
+def add_pad(padliography, link, title, overview, categories, date):
     '''Add a new pad to the wiki page'''
     
     # 1. Connect to the wiki
@@ -73,7 +74,7 @@ def add_pad(link, title, overview, categories, date):
     page.edit(text, f'New pad in the {padliography}: {title}')
 
 
-def get_pads():
+def get_pads(padliography):
     '''Retrieve pads from the wiki'''
 
     # 1. Connect to the wiki
@@ -107,6 +108,41 @@ def get_pads():
 
     return pads
 
+
+def init_page(padliography, description):
+    '''Initialize a new instance of the padliography a the given page'''
+
+    # 1. Connect to the wiki
+    site = mwclient.Site('pzwiki.wdka.nl', path='/mw-mediadesign/')
+
+    # 2. Authenticate using the credential of a bot user registered in the wiki 
+    ###  This is necesary the edit the contents of the page
+    site.login(
+        username=os.environ.get('MW_BOT'),
+        password=os.environ.get('MW_KEY')
+    )
+
+    # 3. Select the page and get the contents
+    page = site.pages[padliography]
+
+    # 4. Insert the table template and a user-provided description 
+
+    text = '''
+    {}
+
+    == Padliography == 
+    
+    {| class = "wikitable sortable padliography"
+    |-
+    !link !! title !! overview !! categories !! date
+    |-
+    |}
+    '''.format(description)
+
+    # 5. Apply the edit
+    page.edit(text, f'New padliographish page created: {padliography}')
+    
+
 # Routes
 
 @app.route('/')
@@ -115,8 +151,8 @@ def home():
     return render_template('home.html')
 
 
-@app.route('/api', methods=['GET', 'POST'])
+@app.route('/api/<padliography>', methods=['GET', 'POST'])
-def api():
+def api(padliography):
     '''Manage the interaction with the MediaWiki API'''
 
     # Add a new pad
@@ -127,13 +163,12 @@ def api():
         categories = request.json.get('categories', '')
         date = request.json.get('date', None)
 
-        add_pad(link, title, overview, categories, date)
+        add_pad(padliography, link, title, overview, categories, date)
         redirect(url_for('home'))
 
     # Return the pad list
     response = jsonify({
-        'page': padliography,
+        'pads': get_pads(padliography)
-        'pads': get_pads()
     })
     response.headers.add('Access-Control-Allow-Origin', '*')
 

static/css/style.css

@@ -235,6 +235,19 @@ td.categories {
 	border: none;
 }
 
+.change {
+	opacity: 0.5;
+	border: none;
+	display: inline;
+	padding: 0;
+}
+
+.change:hover{
+	background-color: transparent;
+	color: currentColor;
+	opacity: 1;
+}
+
 @keyframes grow {
 	from {
 		transform: scale(100%);

static/js/PadForm.js

@@ -1,4 +1,4 @@
-import { PadStore } from "./PadStore.js";
+import padliographyStore from "./PadStore.js";
 
 export default {
 	setup() {
@@ -10,6 +10,8 @@ export default {
 		const categories = ref([""]);
 		const date = ref(null);
 
+		const { padStore, currentPage } = padliographyStore();
+
 		const sent = ref(false);
 		const disabled = computed(() => {
 			return [title, overview, overview, categories].some((input) => input.value == "");
@@ -34,11 +36,11 @@ export default {
 				categories: categories.value,
 				date: date.value,
 			};
-			PadStore.value.unshift(pad);
+			padStore.value.unshift(pad);
 
 			pad.categories = pad.categories.join(", ");
 
-			fetch("api", {
+			fetch(`api/${currentPage.value}`, {
 				method: "POST",
 				headers: { "Content-Type": "application/json" },
 				body: JSON.stringify(pad),
@@ -62,7 +64,7 @@ export default {
 			newPad,
 			sent,
 			disabled,
-			PadStore,
+			padStore,
 		};
 	},
 

static/js/PadStore.js

@@ -1,3 +1,8 @@
 const { ref } = Vue;
 
-export const PadStore = ref([]);
+const padStore = ref([]);
+const currentPage = ref("Pad-test");
+
+export default function padliographyStore() {
+	return { padStore, currentPage };
+}

static/js/PadTable.js

@@ -1,12 +1,16 @@
-import { PadStore } from "./PadStore.js";
+import padliographyStore from "./PadStore.js";
 
 export default {
 	setup() {
-		const { ref, computed } = Vue;
+		const { ref, computed, watchEffect } = Vue;
 		const columns = ["title", "overview", "categories", "date"];
 
 		const loaded = ref(false);
-		const currentPage = ref("");
+
+		const { padStore, currentPage } = padliographyStore();
+		const newPage = ref("");
+		const edit = ref(false);
+
 		const pads = ref([]);
 
 		const currentSort = ref("date");
@@ -18,26 +22,26 @@ export default {
 			selected.value.has(tag) ? selected.value.delete(tag) : selected.value.add(tag);
 		};
 
-		fetch("api")
+		watchEffect(() => {
-			.then((res) => res.json())
+			fetch(`api/${currentPage.value}`)
-			.then((data) => {
+				.then((res) => res.json())
-				pads.value = data.pads;
+				.then((data) => {
+					pads.value = data.pads;
 
-				pads.value.map(
+					pads.value.map(
-					(pad) =>
+						(pad) =>
-						(pad.categories = pad.categories
+							(pad.categories = pad.categories
-							.split(",")
+								.split(",")
-							.map((category) => category.trim()))
+								.map((category) => category.trim()))
-				);
+					);
 
-				categories.value = Array.from(
+					categories.value = Array.from(
-					new Set([...pads.value.map((pad) => pad.categories)].flat())
+						new Set([...pads.value.map((pad) => pad.categories)].flat())
-				).sort();
+					).sort();
-
-				currentPage.value = data.page;
-				loaded.value = true;
-			});
 
+					loaded.value = true;
+				});
+		});
 		const sortedPads = computed(() => {
 			return filteredPads.value.sort((a, b) => {
 				let modifier = 1;
@@ -71,10 +75,11 @@ export default {
 		});
 
 		const storedPads = computed(() => {
-			return [...PadStore.value, ...pads.value];
+			return [...padStore.value, ...pads.value];
 		});
 
 		const formatDate = function (date) {
+			date = new Date(date);
 			return `${String(date.getDate()).padStart(2, "0")}-${String(
 				date.getMonth() + 1
 			).padStart(2, "0")}-${date.getFullYear()}`;
@@ -94,8 +99,10 @@ export default {
 			toggle,
 			sort,
 			formatDate,
-			PadStore,
+			padStore,
 			storedPads,
+			edit,
+			newPage,
 		};
 	},
 	template: `
@@ -115,8 +122,15 @@ export default {
 
 	
 			<p class="from">
-				Fetching pads from 
+				Fetching pads from
-				<a :href="'https://pzwiki.wdka.nl/mediadesign/' + currentPage">{{currentPage}}</a>
+				<span class="editing" v-if="edit">
+
+					<input v-model="newPage">
+					<button @click="edit=false, currentPage=newPage"> confirm </button>
+					<button @click="edit=false"> x </button>
+					</span>
+
+					<a v-else :href="'https://pzwiki.wdka.nl/mediadesign/' + currentPage">{{currentPage}}</a> <button class="change" v-if="!edit" @click="edit = true">change</button>
 			</p>