Compare commits
2 Commits
42ac0a99e8
...
5ae7c7f47b
| Author | SHA1 | Date | |
|---|---|---|---|
| 5ae7c7f47b | |||
| 2ffeb53e32 |
@@ -6,6 +6,7 @@
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<link rel="shortcut icon" type="image/ico" href="/src/assets/favicon.ico" />
|
||||
<title>Solid App</title>
|
||||
<link href="/src/styles/styles.css" rel="stylesheet" />
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
|
||||
1876
Frontend/package-lock.json
generated
Normal file
1876
Frontend/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
@@ -3,6 +3,7 @@
|
||||
"version": "1.0.0",
|
||||
"main": "index.ts",
|
||||
"license": "MIT",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build"
|
||||
@@ -15,6 +16,9 @@
|
||||
"vite-plugin-solid": "^2.11.8"
|
||||
},
|
||||
"dependencies": {
|
||||
"solid-js": "^1.9.9"
|
||||
"@tailwindcss/vite": "^4.1.13",
|
||||
"daisyui": "^5.1.7",
|
||||
"solid-js": "^1.9.9",
|
||||
"tailwindcss": "^4.1.13"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,22 +1,18 @@
|
||||
import type { Component } from "solid-js";
|
||||
import { createSignal, For, onMount } from "solid-js";
|
||||
|
||||
interface Weather {
|
||||
date: string;
|
||||
temperatureC: number;
|
||||
temperatureF: number;
|
||||
summary: string;
|
||||
}
|
||||
import CalibreService from "./services/calibreservice";
|
||||
import { book } from "./types/calibretypes";
|
||||
import BookCard from "./components/BookCard";
|
||||
|
||||
const App: Component = () => {
|
||||
const [weather, setWeather] = createSignal<Weather[]>([]);
|
||||
const [books, setBooks] = createSignal<book[]>([]);
|
||||
onMount(() => {
|
||||
fetch("/api/weatherforecast")
|
||||
.then((r) => r.json())
|
||||
.then(setWeather);
|
||||
CalibreService.getBooks().then(setBooks);
|
||||
});
|
||||
return (
|
||||
<div>
|
||||
<button class="btn btn-primary">primary knapp</button>
|
||||
<button class="btn btn-blue">blå knapp</button>
|
||||
<header>
|
||||
<p>
|
||||
Edit <code>src/App.tsx</code> and save to reload.
|
||||
@@ -30,14 +26,9 @@ const App: Component = () => {
|
||||
</a>
|
||||
</header>
|
||||
|
||||
<For each={weather()}>
|
||||
{(item) => (
|
||||
<li>
|
||||
{item.date} - {item.temperatureC}°C / {item.temperatureF}°F -{" "}
|
||||
{item.summary}
|
||||
</li>
|
||||
)}
|
||||
</For>
|
||||
<div class="book-grid text-base-content mx-auto grid gap-6 pb-20 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 [&_.carbon-responsive-wrap]:flex-nowrap! [&_.carbon-responsive-wrap]:text-[11px]! [&_:is(div,button)]:[transition:background-color_0ms,border-color_100ms,box-shadow_300ms,border-radius_500ms_ease-out] [&>*]:mb-6">
|
||||
<For each={books()}>{(item) => <BookCard book={item} />}</For>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
27
Frontend/src/components/BookCard.tsx
Normal file
27
Frontend/src/components/BookCard.tsx
Normal file
@@ -0,0 +1,27 @@
|
||||
import type { Component } from "solid-js";
|
||||
import { book } from "../types/calibretypes";
|
||||
|
||||
const BookCard: Component<{ book: book }> = (props: { book: book }) => {
|
||||
return (
|
||||
<div class="card book-card bg-base-100 card-border border-base-300 card-sm">
|
||||
{/* <figure>
|
||||
<img
|
||||
src="https://img.daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.webp"
|
||||
alt="Shoes"
|
||||
/>
|
||||
</figure> */}
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">{props.book.title}</h3>
|
||||
<h4 class="author">{props.book.author}</h4>
|
||||
<p>
|
||||
Series: {props.book.seriesName} {props.book.seriesNumber}
|
||||
</p>
|
||||
{/* <div class="card-actions justify-end">
|
||||
<button class="btn btn-primary">Buy Now</button>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default BookCard;
|
||||
10
Frontend/src/services/calibreservice.ts
Normal file
10
Frontend/src/services/calibreservice.ts
Normal file
@@ -0,0 +1,10 @@
|
||||
import { book } from "../types/calibretypes";
|
||||
|
||||
const CalibreService = {
|
||||
getBooks: async (): Promise<book[]> => {
|
||||
const response = await fetch("/api/calibre/books");
|
||||
return response.json();
|
||||
},
|
||||
};
|
||||
|
||||
export default CalibreService;
|
||||
4
Frontend/src/styles/styles.css
Normal file
4
Frontend/src/styles/styles.css
Normal file
@@ -0,0 +1,4 @@
|
||||
@import "tailwindcss";
|
||||
@plugin "daisyui" {
|
||||
themes: dim --default;
|
||||
}
|
||||
15
Frontend/src/types/calibretypes.ts
Normal file
15
Frontend/src/types/calibretypes.ts
Normal file
@@ -0,0 +1,15 @@
|
||||
interface book {
|
||||
id: number;
|
||||
title: string;
|
||||
authorId: number;
|
||||
author: string;
|
||||
comments: string;
|
||||
language: string;
|
||||
path: string;
|
||||
hasCover: boolean;
|
||||
formats: Array<{ id: number; format: string; fileName: string }>;
|
||||
seriesName: string;
|
||||
seriesNumber: number;
|
||||
}
|
||||
|
||||
export type { book };
|
||||
@@ -1,12 +1,13 @@
|
||||
import { defineConfig } from "vite";
|
||||
import solidPlugin from "vite-plugin-solid";
|
||||
import tailwindcss from "@tailwindcss/vite";
|
||||
import { env } from "process";
|
||||
|
||||
const target = env.BACKEND_URL ?? "http://localhost:5084/"; //"https://localhost:7192/";
|
||||
console.log("vite backend:", target);
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [solidPlugin()],
|
||||
plugins: [solidPlugin(), tailwindcss()],
|
||||
server: {
|
||||
port: 3000,
|
||||
proxy: {
|
||||
|
||||
Reference in New Issue
Block a user