Start fetchdata kql

This commit is contained in:
isUnknown 2024-07-10 18:43:46 +02:00
parent 3ed204123a
commit 90c998fa41
13 changed files with 109 additions and 34 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 534 KiB

View file

@ -0,0 +1,5 @@
Uuid: qHw8nu1sgsbs0G6q
----
Template: blocks/image

View file

@ -2,4 +2,20 @@ Title: Home
----
Testimages: - file://4xs4UNZhQf3jLvsG
----
Testtext: test
----
Testblocks: [{"content":{"location":"kirby","image":["file://qHw8nu1sgsbs0G6q"],"src":"","alt":"","caption":"","link":"","ratio":"","crop":"false"},"id":"9f5c767f-0b50-471c-85de-5c3d18fb596a","isHidden":false,"type":"image"}]
----
Testimage: - file://4xs4UNZhQf3jLvsG
----
Uuid: 6yh1yt2Sk45Y2sOl

Binary file not shown.

After

Width:  |  Height:  |  Size: 379 KiB

View file

@ -0,0 +1 @@
Uuid: 4xs4UNZhQf3jLvsG

View file

@ -0,0 +1,7 @@
fields:
testImages:
type: files
testText:
type: text
testBlocks:
type: blocks

View file

@ -0,0 +1,8 @@
<script>
const kirbyData = {
pageUri: '<?= $page->uri() ?>',
pageTemplate: '<?= $page->template() ?>',
}
</script>
</body>
</html>

View file

@ -7,3 +7,4 @@
<script type="module" src="http://localhost:5173/@vite/client" defer></script>
<script type="module" src="http://localhost:5173/src/main.js" defer></script>
</head>
<body>

View file

@ -1,4 +1,3 @@
<?php snippet('header') ?>
<body>
<div id="app"></div>
</body>
<?php snippet('footer') ?>

View file

@ -1,35 +1,23 @@
<script>
fetchData();
<script setup>
import Home from "./views/Home.vue";
import { useApiStore } from "./stores/api";
function fetchData() {
const api = "/api/query";
const username = import.meta.env.VITE_USERNAME;
const password = "Ap&216991";
const token = btoa(`${username}:${password}`);
const headers = {
Authorization: `Basic ${token}`,
const templates = {
home: {
component: Home,
query: {
title: true,
},
},
};
const request = {
method: "post",
body: JSON.stringify({
query: "site.title",
}),
headers,
};
const api = useApiStore();
const pageTemplate = kirbyData.pageTemplate;
const pageUri = kirbyData.pageUri;
fetch(api, request)
.then((response) => response.json())
.then((response) => {
console.log(response);
})
.catch((error) => {
console.log(error);
});
}
api.fetchData();
</script>
<template>test</template>
<template>
<component :is="templates[pageTemplate].component" />
</template>

View file

@ -6,4 +6,5 @@ import { createPinia } from "pinia";
const app = createApp(App);
const pinia = createPinia();
app.use(pinia).mount("#app");
app.use(pinia);
app.mount("#app");

46
src/stores/api.js Normal file
View file

@ -0,0 +1,46 @@
import { defineStore } from "pinia";
export const useApiStore = defineStore("counter", () => {
function fetchData() {
const api = "/api/query";
const username = import.meta.env.VITE_USERNAME;
const password = import.meta.env.VITE_PASSWORD;
const token = btoa(`${username}:${password}`);
const headers = {
Authorization: `Basic ${token}`,
};
const request = {
method: "post",
body: JSON.stringify({
query: `page('home')`,
select: {
testImages: {
query: "page.testImages.toFiles",
select: {
url: true,
},
},
blocks: {
query: "page.testBlocks.toBlocks",
},
},
}),
headers,
};
fetch(api, request)
.then((response) => response.json())
.then((response) => {
console.log(response);
})
.catch((error) => {
console.log(error);
});
}
return { fetchData };
});

3
src/views/Home.vue Normal file
View file

@ -0,0 +1,3 @@
<script setup></script>
<template></template>
<style scoped></style>