From 177e0f6b415ffebf4bdafa43abeec39eab3b76b2 Mon Sep 17 00:00:00 2001 From: "kam (from the studio)" Date: Tue, 4 Oct 2022 19:19:17 +0200 Subject: [PATCH] change page --- pad-bis.py | 51 +++++++++++++++++++++++++++++------ static/css/style.css | 13 +++++++++ static/js/PadForm.js | 10 ++++--- static/js/PadStore.js | 7 ++++- static/js/PadTable.js | 62 ++++++++++++++++++++++++++----------------- 5 files changed, 106 insertions(+), 37 deletions(-) diff --git a/pad-bis.py b/pad-bis.py index fb97e20..4e3e839 100644 --- a/pad-bis.py +++ b/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']) -def api(): +@app.route('/api/', methods=['GET', 'POST']) +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() + 'pads': get_pads(padliography) }) response.headers.add('Access-Control-Allow-Origin', '*') diff --git a/static/css/style.css b/static/css/style.css index ead13bd..08c8cae 100644 --- a/static/css/style.css +++ b/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%); diff --git a/static/js/PadForm.js b/static/js/PadForm.js index eb9590c..7be110b 100644 --- a/static/js/PadForm.js +++ b/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, }; }, diff --git a/static/js/PadStore.js b/static/js/PadStore.js index 7327dfe..444f331 100644 --- a/static/js/PadStore.js +++ b/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 }; +} diff --git a/static/js/PadTable.js b/static/js/PadTable.js index cc80a22..64888dc 100644 --- a/static/js/PadTable.js +++ b/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") - .then((res) => res.json()) - .then((data) => { - pads.value = data.pads; + watchEffect(() => { + fetch(`api/${currentPage.value}`) + .then((res) => res.json()) + .then((data) => { + pads.value = data.pads; - pads.value.map( - (pad) => - (pad.categories = pad.categories - .split(",") - .map((category) => category.trim())) - ); + pads.value.map( + (pad) => + (pad.categories = pad.categories + .split(",") + .map((category) => category.trim())) + ); - categories.value = Array.from( - new Set([...pads.value.map((pad) => pad.categories)].flat()) - ).sort(); - - currentPage.value = data.page; - loaded.value = true; - }); + categories.value = Array.from( + new Set([...pads.value.map((pad) => pad.categories)].flat()) + ).sort(); + 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 {

- Fetching pads from - {{currentPage}} + Fetching pads from + + + + + + + + {{currentPage}}