A dynamic planning component that displays a schedule with clickable slots. This package is designed to be easily integrated into your projects.
To install the package, run:
npm install planning-package<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Planning</title>
<link rel="stylesheet" href="node_modules/planning-package/dist/styles.css">
</head>
<body>
<div class="container">
<div class="arrow" id="prev"><</div>
<div id="planning"></div>
<div class="arrow" id="next">></div>
</div>
<script src="node_modules/planning-package/dist/index.js"></script>
</body>
</html>If you are using a module bundler (like Webpack or Rollup), you can import the styles and script:
import 'planning-package/dist/styles.css';
import 'planning-package/dist/index.js';Place a data.json file in the same directory as your HTML file. The data.json should have the following format:
[
{
"date": "2021-05-21T01:01:00.000Z",
"slots": [
{
"slot": "AM"
},
{
"slot": "PM"
}
]
},
{
"date": "2021-05-22T01:01:00.000Z",
"slots": [
{
"slot": "PM"
}
]
}
]To run a local server to test the component, create a server.js file with the following content:
const http = require('http');
const fs = require('fs');
const path = require('path');
const PORT = process.env.PORT || 3000;
const server = http.createServer((req, res) => {
const { method, url } = req;
if (method === 'GET') {
if (url === '/') {
fs.readFile(path.join(__dirname, 'dist/index.html'), (err, data) => {
if (err) {
res.writeHead(500);
res.end(err.toString());
return;
}
res.writeHead(200, { 'Content-Type': 'text/html' });
res.end(data);
});
} else if (url === '/data.json') {
fs.readFile(path.join(__dirname, 'data.json'), (err, data) => {
if (err) {
res.writeHead(500);
res.end(err.toString());
return;
}
res.writeHead(200, { 'Content-Type': 'application/json' });
res.end(data);
});
} else if (url.endsWith('.css')) {
fs.readFile(path.join(__dirname, url), (err, data) => {
if (err) {
res.writeHead(404);
res.end(err.toString());
return;
}
res.writeHead(200, { 'Content-Type': 'text/css' });
res.end(data);
});
} else if (url.endsWith('.js')) {
fs.readFile(path.join(__dirname, url), (err, data) => {
if (err) {
res.writeHead(404);
res.end(err.toString());
return;
}
res.writeHead(200, { 'Content-Type': 'text/javascript' });
res.end(data);
});
} else {
res.writeHead(404);
res.end('Not Found');
}
} else if (method === 'POST' && url === '/testurl') {
let body = '';
req.on('data', chunk => {
body += chunk.toString();
});
req.on('end', () => {
console.log('Received POST data:', body);
res.writeHead(200, { 'Content-Type': 'application/json' });
res.end(JSON.stringify({ message: 'Success', data: JSON.parse(body) }));
});
} else {
res.writeHead(405);
res.end(`${method} method not allowed`);
}
});
server.listen(PORT, () => {
console.log(`Server is running on http://localhost:${PORT}`);
});To start the server, run:
node server.jsTo build the project, run:
npm run buildTo start the development server, run:
npm startThis project is licensed under the MIT License.