mirror of
https://github.com/arabine/open-story-teller.git
synced 2025-12-06 08:59:35 +01:00
fetch stories list from libraryes ok
This commit is contained in:
anthony@rabine.fr
parent
0ad614699c
commit
c23176796f
5 changed files with 143 additions and 41 deletions
47
story-player-web/app-context.js
Normal file
47
story-player-web/app-context.js
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
import { createContext } from "preact";
|
||||
import { useState } from 'preact/hooks';
|
||||
import { html } from 'htm/preact';
|
||||
|
||||
const AppContext = createContext();
|
||||
|
||||
const AppProvider = ({ children }) => {
|
||||
const [state, setState] = useState({
|
||||
stories: [
|
||||
{ uuid: "9339d121-ea93-4cc4-9738-9979d43505d0", title: 'Lorem Ipsum', cover: "https://picsum.photos/200/300", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mattis est lectus, scelerisque lobortis neque cursus id. Vestibulum id mollis magna. Etiam vitae est ut mi rutrum congue. Vestibulum a finibus orci. Nunc mattis, risus quis venenatis sagittis, nulla sem sagittis lectus, nec luctus eros neque ut lorem. Nam porttitor a augue vitae venenatis. Vivamus orci nunc, scelerisque ut lacus a, lobortis efficitur nunc. " },
|
||||
{ uuid: "9339d121-ea93-4cc4-9738-9979d43505d0", title: 'Lorem Ipsum', cover: "https://picsum.photos/200/300", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mattis est lectus, scelerisque lobortis neque cursus id. Vestibulum id mollis magna. Etiam vitae est ut mi rutrum congue. Vestibulum a finibus orci. Nunc mattis, risus quis venenatis sagittis, nulla sem sagittis lectus, nec luctus eros neque ut lorem. Nam porttitor a augue vitae venenatis. Vivamus orci nunc, scelerisque ut lacus a, lobortis efficitur nunc. " },
|
||||
{ uuid: "9339d121-ea93-4cc4-9738-9979d43505d0", title: 'Lorem Ipsum', cover: "https://picsum.photos/200/300", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mattis est lectus, scelerisque lobortis neque cursus id. Vestibulum id mollis magna. Etiam vitae est ut mi rutrum congue. Vestibulum a finibus orci. Nunc mattis, risus quis venenatis sagittis, nulla sem sagittis lectus, nec luctus eros neque ut lorem. Nam porttitor a augue vitae venenatis. Vivamus orci nunc, scelerisque ut lacus a, lobortis efficitur nunc. " },
|
||||
{ uuid: "9339d121-ea93-4cc4-9738-9979d43505d0", title: 'Lorem Ipsum', cover: "https://picsum.photos/200/300", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mattis est lectus, scelerisque lobortis neque cursus id. Vestibulum id mollis magna. Etiam vitae est ut mi rutrum congue. Vestibulum a finibus orci. Nunc mattis, risus quis venenatis sagittis, nulla sem sagittis lectus, nec luctus eros neque ut lorem. Nam porttitor a augue vitae venenatis. Vivamus orci nunc, scelerisque ut lacus a, lobortis efficitur nunc. " },
|
||||
{ uuid: "9339d121-ea93-4cc4-9738-9979d43505d0", title: 'Lorem Ipsum', cover: "https://picsum.photos/200/300", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mattis est lectus, scelerisque lobortis neque cursus id. Vestibulum id mollis magna. Etiam vitae est ut mi rutrum congue. Vestibulum a finibus orci. Nunc mattis, risus quis venenatis sagittis, nulla sem sagittis lectus, nec luctus eros neque ut lorem. Nam porttitor a augue vitae venenatis. Vivamus orci nunc, scelerisque ut lacus a, lobortis efficitur nunc. " },
|
||||
{ uuid: "9339d121-ea93-4cc4-9738-9979d43505d0", title: 'Lorem Ipsum', cover: "https://picsum.photos/200/300", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mattis est lectus, scelerisque lobortis neque cursus id. Vestibulum id mollis magna. Etiam vitae est ut mi rutrum congue. Vestibulum a finibus orci. Nunc mattis, risus quis venenatis sagittis, nulla sem sagittis lectus, nec luctus eros neque ut lorem. Nam porttitor a augue vitae venenatis. Vivamus orci nunc, scelerisque ut lacus a, lobortis efficitur nunc. " },
|
||||
{ uuid: "9339d121-ea93-4cc4-9738-9979d43505d0", title: 'Lorem Ipsum', cover: "https://picsum.photos/200/300", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mattis est lectus, scelerisque lobortis neque cursus id. Vestibulum id mollis magna. Etiam vitae est ut mi rutrum congue. Vestibulum a finibus orci. Nunc mattis, risus quis venenatis sagittis, nulla sem sagittis lectus, nec luctus eros neque ut lorem. Nam porttitor a augue vitae venenatis. Vivamus orci nunc, scelerisque ut lacus a, lobortis efficitur nunc. " },
|
||||
{ uuid: "9339d121-ea93-4cc4-9738-9979d43505d0", title: 'Lorem Ipsum', cover: "https://picsum.photos/200/300", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mattis est lectus, scelerisque lobortis neque cursus id. Vestibulum id mollis magna. Etiam vitae est ut mi rutrum congue. Vestibulum a finibus orci. Nunc mattis, risus quis venenatis sagittis, nulla sem sagittis lectus, nec luctus eros neque ut lorem. Nam porttitor a augue vitae venenatis. Vivamus orci nunc, scelerisque ut lacus a, lobortis efficitur nunc. " },
|
||||
{ uuid: "9339d121-ea93-4cc4-9738-9979d43505d0", title: 'Lorem Ipsum', cover: "https://picsum.photos/200/300", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mattis est lectus, scelerisque lobortis neque cursus id. Vestibulum id mollis magna. Etiam vitae est ut mi rutrum congue. Vestibulum a finibus orci. Nunc mattis, risus quis venenatis sagittis, nulla sem sagittis lectus, nec luctus eros neque ut lorem. Nam porttitor a augue vitae venenatis. Vivamus orci nunc, scelerisque ut lacus a, lobortis efficitur nunc. " },
|
||||
{ uuid: "9339d121-ea93-4cc4-9738-9979d43505d0", title: 'Lorem Ipsum', cover: "https://picsum.photos/200/300", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mattis est lectus, scelerisque lobortis neque cursus id. Vestibulum id mollis magna. Etiam vitae est ut mi rutrum congue. Vestibulum a finibus orci. Nunc mattis, risus quis venenatis sagittis, nulla sem sagittis lectus, nec luctus eros neque ut lorem. Nam porttitor a augue vitae venenatis. Vivamus orci nunc, scelerisque ut lacus a, lobortis efficitur nunc. " },
|
||||
{ uuid: "9339d121-ea93-4cc4-9738-9979d43505d0", title: 'Lorem Ipsum', cover: "https://picsum.photos/200/300", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mattis est lectus, scelerisque lobortis neque cursus id. Vestibulum id mollis magna. Etiam vitae est ut mi rutrum congue. Vestibulum a finibus orci. Nunc mattis, risus quis venenatis sagittis, nulla sem sagittis lectus, nec luctus eros neque ut lorem. Nam porttitor a augue vitae venenatis. Vivamus orci nunc, scelerisque ut lacus a, lobortis efficitur nunc. " },
|
||||
|
||||
]
|
||||
});
|
||||
|
||||
const setStories = (stories) => {
|
||||
setState(prevState => ({
|
||||
...prevState,
|
||||
stories: [...stories ],
|
||||
}));
|
||||
};
|
||||
|
||||
// // Fonction pour changer les paramètres
|
||||
// const updateSettings = (newSettings) => {
|
||||
// setState(prevState => ({
|
||||
// ...prevState,
|
||||
// settings: { ...prevState.settings, ...newSettings },
|
||||
// }));
|
||||
// };
|
||||
|
||||
return html`
|
||||
<${AppContext.Provider} value=${{ state, setStories }}>
|
||||
${children}
|
||||
</${AppContext.Provider}>
|
||||
`;
|
||||
};
|
||||
|
||||
export { AppProvider, AppContext };
|
||||
|
|
@ -1,46 +1,46 @@
|
|||
// Preact
|
||||
import { useContext, useEffect } from 'preact/hooks';
|
||||
import { render } from 'preact';
|
||||
import { html } from 'htm/preact';
|
||||
|
||||
// Classes
|
||||
import apiClient from './classes/api-client.js'
|
||||
import eventBus from './classes/event-bus.js';
|
||||
import storage from './classes/storage.js';
|
||||
|
||||
|
||||
import { render } from 'preact';
|
||||
import { createContext } from "preact";
|
||||
import { html } from 'htm/preact';
|
||||
// Components
|
||||
import TopMenu from './components/TopMenu.js'
|
||||
import ParametersDialog from './components/ParametersDialog.js';
|
||||
import StoryPlayer from './components/StoryPlayer.js';
|
||||
import StoriesList from './components/StoriesList.js';
|
||||
|
||||
export const AppContext = createContext("appContext");
|
||||
// Project
|
||||
import { AppProvider, AppContext } from './app-context.js';
|
||||
|
||||
export function App() {
|
||||
|
||||
const DefaultContext = {
|
||||
stories: []
|
||||
};
|
||||
// const { setStories } = useContext(AppContext);
|
||||
|
||||
this.params = storage.getItem('server') || {
|
||||
serverUrl: '127.0.0.1',
|
||||
serverPort: 8081,
|
||||
};
|
||||
|
||||
storage.setItem('server', this.params);
|
||||
|
||||
// try to connect to the server
|
||||
apiClient.setBaseUrl(`http://${this.params.serverUrl}:${this.params.serverPort}/api/v1`);
|
||||
apiClient.get('/library/list')
|
||||
.then(data => {
|
||||
console.log('Server is up and running', data);
|
||||
eventBus.publish('server-state-changed', {connected: true});
|
||||
})
|
||||
.catch(error => {
|
||||
console.log('Server is down');
|
||||
eventBus.publish('server-state-changed', {connected: false});
|
||||
});
|
||||
// The useEffect hook with an empty dependency array simulates the componentDidMount lifecycle method.
|
||||
// It runs the provided function after the component is first rendered.
|
||||
// This is a good place to perform data fetching or initial setup.
|
||||
useEffect(() => {
|
||||
console.log("App ready");
|
||||
return () => {
|
||||
console.log("App unmount");
|
||||
}
|
||||
}, []);
|
||||
|
||||
|
||||
storage.setItem('server', this.params);
|
||||
apiClient.setBaseUrl(`http://${this.params.serverUrl}:${this.params.serverPort}/api/v1`);
|
||||
|
||||
return html`
|
||||
<AppContext.Provider value="${DefaultContext}">
|
||||
<${AppProvider}>
|
||||
<${TopMenu} />
|
||||
<${ParametersDialog} />
|
||||
|
||||
|
|
@ -48,7 +48,7 @@ export function App() {
|
|||
<${StoryPlayer} />
|
||||
<${StoriesList} />
|
||||
</div>
|
||||
</AppContext.Provider>
|
||||
</${AppProvider}>
|
||||
`;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,22 +1,60 @@
|
|||
import { html } from 'htm/preact';
|
||||
|
||||
// Classes
|
||||
import eventBus from '../classes/event-bus.js';
|
||||
import { useState } from 'preact/hooks';
|
||||
import apiClient from '../classes/api-client.js';
|
||||
|
||||
import { AppContext } from '../app-context.js';
|
||||
import { useContext, useEffect } from 'preact/hooks'
|
||||
|
||||
|
||||
function StoriesList() {
|
||||
|
||||
const { state, setStories } = useContext(AppContext);
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
console.log("Fetch stories");
|
||||
getStories();
|
||||
|
||||
return () => {
|
||||
console.log("Component will unmount");
|
||||
}
|
||||
}, []);
|
||||
|
||||
|
||||
function getStories() {
|
||||
|
||||
// try to connect to the server
|
||||
|
||||
apiClient.get('/library/list')
|
||||
.then(data => {
|
||||
console.log('Server is up and running', data);
|
||||
eventBus.publish('server-state-changed', {connected: true});
|
||||
setStories(data);
|
||||
})
|
||||
.catch(error => {
|
||||
console.log('Api error: ' + error);
|
||||
eventBus.publish('server-state-changed', {connected: false});
|
||||
});
|
||||
}
|
||||
|
||||
function handleClickOnStory() {
|
||||
console.log("Clicked")
|
||||
}
|
||||
|
||||
return html`
|
||||
<style>
|
||||
.card-container {
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
padding: 20px;
|
||||
padding: 4px;
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
.card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
|
||||
.card-content {
|
||||
|
|
@ -33,6 +71,12 @@ function StoriesList() {
|
|||
.card-description {
|
||||
font-size: 0.9em;
|
||||
margin: 0;
|
||||
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
width: 220px;
|
||||
|
||||
}
|
||||
|
||||
.card-image {
|
||||
|
|
@ -42,16 +86,18 @@ function StoriesList() {
|
|||
border-radius: 10px;
|
||||
}
|
||||
</style>
|
||||
<div>
|
||||
<div class="card-container">
|
||||
<div class="block card">
|
||||
<div class="card-content">
|
||||
<h2 class="card-title">Titre de la Carte 1</h2>
|
||||
<p class="card-description">Description de la carte 1. Voici une brève description pour cette carte.</p>
|
||||
<div style="max-height: 400px; overflow-y: auto; border: 1px solid #ccc; ">
|
||||
${state.stories.map(story => html`
|
||||
<div class="card-container" onClick="${handleClickOnStory}">
|
||||
<div class="block card">
|
||||
<div class="card-content">
|
||||
<h2 class="card-title">${story.title}</h2>
|
||||
<p class="card-description">${story.description}</p>
|
||||
</div>
|
||||
<img src="https://placehold.co/100x75" alt="Image de la carte 1" class="card-image" />
|
||||
</div>
|
||||
<img src="https://placehold.co/100x75" alt="Image de la carte 1" class="card-image" />
|
||||
</div>
|
||||
</div>
|
||||
`)}
|
||||
</div>
|
||||
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -33,6 +33,18 @@
|
|||
margin: 0;
|
||||
padding: 0;
|
||||
line-height: 1.6;
|
||||
--block-accent-color: #3a5ec5;
|
||||
|
||||
/* --block-text-color: #f8f8f8;
|
||||
--block-background-color: #222;
|
||||
--block-accent-color: #f2d12e;
|
||||
--block-shadow-color: #555; */
|
||||
|
||||
background: #abcdef;
|
||||
/* margin: 4px auto;
|
||||
max-width: 800px;
|
||||
color: #222;
|
||||
--block-accent-color: #3a5ec5; */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
|
@ -42,4 +54,4 @@
|
|||
<script src="storyvm.js"></script>
|
||||
<script src="app.js" type="module"></script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,6 @@
|
|||
/* Extra styles to make the demo look nicer.
|
||||
* Feel free to look around! */
|
||||
|
||||
main {
|
||||
margin: 4px auto;
|
||||
max-width: 800px;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 824px) {
|
||||
main {
|
||||
|
|
@ -52,3 +47,5 @@ a {
|
|||
input {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue