-
![Article Thumbnail]()
+
{{props.url}}
+
+
+
@@ -239,7 +114,7 @@ function showVideo() {
-
![Video Thumbnail]()
+
@@ -261,13 +136,13 @@ article {
align-items: flex-start;
}
-.article-thumb-container {
+.images-container {
width: 100%;
margin-top: 20px;
margin-bottom: 20px;
}
-.article-thumb-container img {
+.images-container img {
width: 100%;
height: auto;
max-width: 100%;
@@ -298,9 +173,6 @@ article {
.non-yt-container, .non-yt-container>div {
width: 100%;
- /* padding-bottom: 56.25%;
- margin-top: 20px;
- margin-bottom: 20px; */
}
.thumbnail-container {
diff --git a/ui/src/views/RemarkView.vue b/ui/src/views/RemarkView.vue
index 6bdbf85..a6ac289 100644
--- a/ui/src/views/RemarkView.vue
+++ b/ui/src/views/RemarkView.vue
@@ -2,10 +2,74 @@
import CommentComponent from '@/components/CommentComponent.vue'
import OpenGraphComponent from '@/components/OpenGraphComponent.vue'
-import { ref } from 'vue'
+import { onMounted, ref, watch } from 'vue'
+const BACKEND_URL = 'http://localhost:8080';
+
+interface Comment {
+ id: string;
+ content: string;
+ commenter: string;
+ parent_id: string;
+ webpage_id: string;
+ created_at: string;
+}
// const url = ref('https://www.youtube.com/watch?v=iedMwhLrFQQ');
-const url = ref('https://vimeo.com/867950660');
+// const url = ref('https://vimeo.com/867950660');
+const url = ref('');
+const comment = ref('');
+const comments = ref([]);
+
+onMounted(() => {
+ // get target url from query param 'url'
+ const urlParams = new URLSearchParams(window.location.search);
+ const urlParam = urlParams.get('url');
+ if (urlParam) {
+ url.value = urlParam;
+ }
+});
+
+watch(url, (newVal) => {
+ if (newVal) {
+ getComments();
+ }
+});
+
+function getComments() {
+ fetch(`${BACKEND_URL}/api/v1/comments?url=${url.value}`)
+ .then((res) => res.json())
+ .then((data) => {
+ if (!!data) {
+ comments.value = data;
+ }
+ console.log(data);
+ });
+}
+
+function handleSubmit(e: Event) {
+ e.preventDefault();
+ fetch(`${BACKEND_URL}/api/v1/comment`, {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({
+ url: url.value,
+ comment: comment.value,
+ user_id: 'u_12345'
+ }),
+ })
+ .then((res) => {
+ if (res.ok) {
+ console.log('Comment submitted');
+ comment.value = '';
+ getComments();
+ }
+ }).catch((err) => {
+ console.error('Error:', err);
+ });
+ console.log('submit');
+}
@@ -18,13 +82,17 @@ const url = ref('https://vimeo.com/867950660');
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi.
+{{props.content}}