kamo
/
pad-bis
1
0
Fork 0
Code Issues 2 Pull Requests Releases Wiki Activity

vue frontend

Browse Source
master
km0 2 years ago
parent 0f5eddeb59
commit 10e7400b5b
7 changed files with 190 additions and 21 deletions
Show Stats Download Patch File Download Diff File

58
client/components/PadForm.js
Unescape Escape View File

@ -0,0 +1,58 @@
export default {
setup() {
const { ref, computed } = Vue;
const title = ref("");
const link = ref("");
const overview = ref("");
const categories = ref([""]);
const date = ref(null);
const sent = ref(false);
const disabled = computed(() => {
return [title, overview, overview, categories].some((input) => input.value == "");
});
const submit = function () {
fetch("https://hub.xpub.nl/soupboat/padliography/", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
title: title.value,
link: link.value,
overview: overview.value,
categories: categories.value,
date: date.value,
}),
});
sent.value = true;
title.value = "";
link.value = "";
overview.value = "";
categories.value = [""];
date.value = null;
};
return { title, link, overview, categories, date, submit, sent, disabled };
},
template: `
<div class='app-form'>
<h2>Add a new pad</h2>
<input type="text" v-model="link" placeholder="URL" />
<input type="text" v-model="title" placeholder="Title" />
<input type="text" v-model="overview" placeholder="Description" />
<input type="text" v-model="categories[index]" placeholder="Category" v-for="(category, index) in categories" :key="index"/>
<button class="add" @click="categories.push('')">+</button>
<label for="date">date</label>
<input type="date" v-model="date" />
<button @click="submit">Insert</button>
</div>
`,
};

33
client/components/PadTable.js
Unescape Escape View File

@ -0,0 +1,33 @@
export default {
setup() {
const { ref, computed } = Vue;
const pads = ref([]);
const columns = ["title", "overview", "categories", "date"];
fetch("http://localhost:3146/")
.then((res) => res.json())
.then((data) => (pads.value = data));
return { pads, columns };
},
template: `
<table>
<tr class="header">
<th v-for="column in columns">{{column }}</th>
</tr>
<tr v-for="(pad, index) in pads" key="pad.title, index" :class="pad.category">
<td class="title">
<a :href="pad.link" target="_blank"> {{pad.title}} </a>
</td>
<td class="overview">{{pad.overview}}</td>
<td class="categories">{{pad.category}}</td>
<td class="date">{{pad.date}}</td>
</tr>
</table>
`,
};

27
client/index.html
Unescape Escape View File

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://unpkg.com/vue@3"></script>
<title>Padliography Bis</title>
</head>
<body>
<div id="app">
<pad-form></pad-form>
<pad-table></pad-table>
</div>
<script type="module">
import PadForm from "./components/PadForm.js";
import PadTable from "./components/PadTable.js";
const { createApp } = Vue;
createApp({
components: { PadForm, PadTable },
}).mount("#app");
</script>
</body>
</html>

65
pad-bis.py
Unescape Escape View File

@ -3,8 +3,9 @@ logging.basicConfig(format='%(asctime)s : %(levelname)s : %(message)s', level=lo
# Flask application to serve the web pages
from flask import Flask, request, redirect, url_for
from flask_mako import MakoTemplates, render_template
from flask import Flask, request, redirect, url_for, jsonify
from flask_cors import CORS, cross_origin
# from flask_mako import MakoTemplates, render_template
# Mediawiki client to interact with the Wiki
import mwclient
@ -46,11 +47,12 @@ class PrefixMiddleware(object):
# create flask application
app = Flask(__name__)
MakoTemplates(app)
CORS(app)
# MakoTemplates(app)
# Url prefix for the soupboat
base_url = "/soupboat/padliography"
base_url = os.environ.get('BASE_URL', '')
# Page of the wiki with the pads
padliography = 'Padliography2'
@ -89,7 +91,7 @@ def get_pads():
)
html = site.api('parse', prop='text', page=padliography)
table = BeautifulSoup(html['parse']['text']['*']).find("table", attrs={"class":"padliography"})
table = BeautifulSoup(html['parse']['text']['*'], features="html.parser").find("table", attrs={"class":"padliography"})
headers = [header.text.lower().strip() for header in table.find_all('th')]
pads = [
@ -101,30 +103,55 @@ def get_pads():
@app.route('/')
def home():
pads = get_pads()
return render_template('index.html', pads=pads)
@app.route('/', methods=['GET', 'POST'])
def home():
@app.route('/add')
def add():
if request.method == 'POST':
link = request.args.get('link', None)
title = request.args.get('title', None)
overview = request.args.get('overview', '')
categories = request.args.get('categories', '')
date = request.args.get('date', None)
link = request.json.get('link', None)
title = request.json.get('title', None)
overview = request.json.get('overview', '')
categories = request.json.get('categories', '')
date = request.json.get('date', None)
if None not in (link, title, date):
add_pad(link, title, overview, categories, date)
redirect(url_for('home'))
return render_template('index.html')
app.run(port=3146)
return jsonify(get_pads())
# pads = get_pads()
# categories = list(set([
# c.strip() for pad in pads for c in pad['category'].split(',')
# ]))
# return render_template('index.html', pads=pads, categories=categories)
# @app.route('/add')
# def add():
# link = request.args.get('link', None)
# title = request.args.get('title', None)
# overview = request.args.get('overview', '')
# categories = request.args.get('categories', '')
# date = request.args.get('date', None)
# if None not in (link, title, date):
# add_pad(link, title, overview, categories, date)
# redirect(url_for('home'))
# return render_template('index.html')
app.run(port=3146, debug=True)

6
requirements.txt
Unescape Escape View File

@ -4,9 +4,12 @@ charset-normalizer==2.0.12
click==8.1.3
colorama==0.4.4
Flask==2.1.2
Flask-Mako==0.4
idna==3.3
importlib-metadata==4.11.4
itsdangerous==2.1.2
Jinja2==3.1.2
Mako==1.2.0
MarkupSafe==2.1.1
mwclient==0.10.1
numpy==1.22.4
@ -19,4 +22,5 @@ requests-oauthlib==1.3.1
six==1.16.0
soupsieve==2.3.2.post1
urllib3==1.26.9
Werkzeug==2.1.2
Werkzeug==2.0.3
zipp==3.8.0

0
static/css/js/table.js
Unescape Escape View File

22
templates/index.html
Unescape Escape View File

@ -23,7 +23,27 @@
<input type="submit" value="Add" />
</form>
% if pads:
% if categories:
<div class="filters">
<h3>Filters</h3>
<ul class="filters-container">
<button id="active-all" class="tag active">Show All</button>
% for category in categories:
<li
class="tag active all"
data-tag="${category}"
aria-expanded="true"
role="button"
tabindex="0"
>
${category}
</li>
% endfor
</ul>
</div>
% endif %if pads:
<table>
<tr class="header">

Write Preview
Loading…
Cancel
Save