remoll/coss_archiving
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

few bugs in news_fetch left, news_chek wip

Browse Source
This commit is contained in:
Remy Moll
2022-09-06 22:15:26 +02:00
parent 2e65828bbb
commit 713406dc67
15 changed files with 537 additions and 267 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
news_check/client/src/App.svelte
View File

@@ -2,16 +2,38 @@
import PDFView from './PDFView.svelte';
import ArticleStatus from './ArticleStatus.svelte';
import ArticleOperations from './ArticleOperations.svelte';
let current_id = 0;
const updateInterface = (async () => {
let url = '';
if (current_id == 0) {
url = '/api/article/first';
} else {
url = '/api/article/' + current_id + '/next';
}
const response = await fetch(url)
const data = await response.json()
current_id = data.id;
let article_url = '/api/article/' + current_id + '/get';
const article_response = await fetch(article_url);
const article_data = await article_response.json();
return article_data;
})()
</script>
<div class="flex w-full h-full gap-5 p-5">
<div class="w-3/5"><PDFView/></div>
<div class="divider divider-horizontal"></div>
<div class="w-2/5">
<ArticleStatus article_id={42}/>
<div class="divider divider-vertical"></div>
<ArticleOperations/>
{#await updateInterface}
...
{:then article_data}
<div class="flex w-full h-screen gap-5 p-5">
<div class="w-3/5"><PDFView article_data={article_data}/></div>
<div class="divider divider-horizontal"></div>
<div class="w-2/5">
<ArticleStatus article_data={article_data}/>
<div class="divider divider-vertical"></div>
<ArticleOperations article_data={article_data}/>
</div>
</div>
</div>
{/await}

111
news_check/client/src/ArticleOperations.svelte
View File

@@ -1,28 +1,93 @@
<div class="toast">
<div class="alert alert-info">
<div>
<span>New message arrived.</span>
</div>
<script>
import {fade} from 'svelte/transition';
export let article_data;
const actions = [
{name: 'Mark as good (and skip to next)', kbd: 'A'},
{name: 'Mark as bad (and skip to next)', kbd: 'B'},
{name: 'Upload related file', kbd: 'R'},
{name: 'Skip', kbd: 'ctrl'},
]
const toast_states = {
'success' : {class: 'alert-success', text: 'Article updated successfully'},
'error' : {class: 'alert-error', text: 'Article update failed'},
}
let toast_state = {};
let toast_visible = false;
function onKeyDown(e) {apiAction(e.key)}
function apiAction(key) {
if (actions.map(d => d.kbd.toLowerCase()).includes(key.toLowerCase())){ // ignore other keypresses
const updateArticle = (async() => {
const response = await fetch('/api/article/' + article_data.id + '/set', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({
'action': key.toLowerCase(),
})
})
const success = response.status == 200;
if (success){
showToast('success');
} else {
showToast('error');
}
})()
}
}
function showToast(state){
toast_visible = true;
toast_state = toast_states[state];
setTimeout(() => {
toast_visible = false;
}, 1000)
}
</script>
<div class="card bg-neutral-300 shadow-xl">
<div class="card-body">
<h2 class="card-title">Your options: (click on action or use keyboard)</h2>
<div class="overflow-x-auto">
<table class="table w-full table-compact">
<!-- head -->
<thead>
<tr>
<th>Action</th>
<th>Keyboard shortcut</th>
</tr>
</thead>
<tbody>
{#each actions as action}
<tr>
<td><button on:click={() => apiAction(action.kbd)}>{ action.name }</button></td>
<td><kbd class="kbd">{ action.kbd }</kbd></td>
</tr>
{/each}
</tbody>
</table>
</div>
</div>
</div>
<div class="grid grid-cols-3 gap-4">
<div class="highlight">01</div>
<div class="highlight">01</div>
<div class="highlight">01</div>
<div class="highlight">01</div>
<div class="highlight">01</div>
<div class="highlight">01</div>
<div class="highlight">01</div>
<div class="highlight">01</div>
<div class="highlight">01</div>
<svelte:window on:keydown|preventDefault={onKeyDown} />
{#if toast_visible}
<div class="toast" transition:fade>
<div class="alert { toast_state.class }">
<div>
<span>{ toast_state.text }.</span>
</div>
</div>
</div>
<style>
.highlight {
background-color: #f5f5f5;
border-radius: 5px;
padding: 10px;
margin: 10px;
}
</style>
{/if}

53
news_check/client/src/ArticleStatus.svelte
View File

@@ -1,25 +1,38 @@
<script>
export let article_id;
const Article = (async () => {
const response = await fetch('/api/article/' + article_id + '/get')
return await response.json()
})()
console.log(Article)
export let article_data;
const status_items = [
{name: 'Title', value: article_data.title},
{name: 'Filename', value: article_data.file_name},
{name: 'Language', value: article_data.language},
{name: 'Authors', value: article_data.authors},
{name: "Related", value: article_data.related},
]
</script>
<div class="mockup-window border bg-base-300">
<h1 class="center">Article overview</h1>
<ul tabindex="0" class="menu p-2 shadow bg-base-100 rounded-box w-52">
{#await Article}
<li>...waiting</li>
{:then data}
<li><a href="#">{data.value}</a></li>
<li><a href="#">Item 2</a></li>
{:catch error}
<li>An error occurred!</li>
{/await}
</ul>
<div class="card bg-neutral-300 shadow-xl overflow-x-auto">
<div class="card-body">
<h2 class="card-title">Article overview:</h2>
<table class="table w-full table-compact" style="table-layout: fixed">
<thead>
<tr>
<th>Attribute</th>
<th>Value</th>
</tr>
</thead>
<tbody>
{#each status_items as item}
<tr>
<td>{ item.name }</td>
<!-- <td>Quality Control Specialist</td> -->
{#if item.value != ""}
<td class='bg-emerald-200' style="white-space: normal">{ item.value }</td>
{:else}
<td class='bg-red-200'>{ item.value }</td>
{/if}
</tr>
{/each}
</tbody>
</table>
</div>
</div>

60
news_check/client/src/PDFView.svelte
View File

@@ -1,64 +1,10 @@
<!--
<script>
var myState = {
pdf: null,
currentPage: 1,
zoom: 1
}
pdfjsLib.getDocument('test.pdf').then((pdf) => {
myState.pdf = pdf;
render();
});
function render() {
myState.pdf.getPage(myState.currentPage).then((page) => {
var canvas = document.getElementById("pdf_renderer");
var ctx = canvas.getContext('2d');
var viewport = page.getViewport(myState.zoom);
canvas.width = viewport.width;
canvas.height = viewport.height;
page.render({
canvasContext: ctx,
viewport: viewport
});
});
}
</script>
-->
<!-- <div id="my_pdf_viewer">
<div class="mockup-window border bg-base-300">
<div id="canvas_container" class="flex justify-center">
<canvas id="pdf_renderer"></canvas>
</div>
</div>
<div id="navigation_controls">
<button id="go_previous">Previous</button>
<input id="current_page" value="1" type="number"/>
<button id="go_next">Next</button>
</div>
<div id="zoom_controls">
<button id="zoom_in">+</button>
<button id="zoom_out">-</button>
</div>
</div> -->
<script>
let pdf_file = 'test.pdf';
export let article_data;
</script>
<div class="mockup-window border bg-base-300 h-full w-full">
<object class="pdf-view" data="{pdf_file}" title="Article PDF"> </object>
<div class="h-full w-full shadow-xl">
<object class="pdf-view" data="{article_data.save_path + article_data.file_name}" title="Article PDF"> </object>
</div>
<style>