WIP: Article checker with svelte

news_check/client/src/App.svelte

@@ -0,0 +1,17 @@
+<script>
+	import PDFView from './PDFView.svelte';
+	import ArticleStatus from './ArticleStatus.svelte';
+	import ArticleOperations from './ArticleOperations.svelte';
+</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/>
+	</div>
+</div>
+

news_check/client/src/ArticleOperations.svelte

@@ -0,0 +1,28 @@
+<div class="toast">
+	<div class="alert alert-info">
+	    <div>
+            <span>New message arrived.</span>
+        </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>
+
+</div>
+<style>
+    .highlight {
+        background-color: #f5f5f5;
+        border-radius: 5px;
+        padding: 10px;
+        margin: 10px;
+    }
+</style>

news_check/client/src/ArticleStatus.svelte

@@ -0,0 +1,25 @@
+<script>
+    export let article_id;
+    const Article = (async () => {
+    const response = await fetch('/api/article/' + article_id + '/get')
+    return await response.json()
+	})()
+    console.log(Article)
+</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>

news_check/client/src/PDFView.svelte

@@ -0,0 +1,69 @@
+<!-- 
+<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';
+</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>
+
+<style>
+	.pdf-view {
+		width: 100%;
+		height: 100%;
+	}
+</style>

news_check/client/src/main.js

@@ -0,0 +1,10 @@
+import App from './App.svelte';
+
+const app = new App({
+	target: document.body,
+	props: {
+		name: 'world'
+	}
+});
+
+export default app;