mirror of
https://github.com/jcreek/PlannerGenerator.git
synced 2026-07-12 18:43:51 +00:00
feat(*): Add working version
This commit is contained in:
Josh Creek
+13
@@ -0,0 +1,13 @@
|
||||
.DS_Store
|
||||
node_modules
|
||||
/build
|
||||
/.svelte-kit
|
||||
/package
|
||||
.env
|
||||
.env.*
|
||||
!.env.example
|
||||
vite.config.js.timestamp-*
|
||||
vite.config.ts.timestamp-*
|
||||
|
||||
# Local Netlify folder
|
||||
.netlify
|
||||
@@ -1,2 +1,26 @@
|
||||
# PlannerGenerator
|
||||
|
||||
A web app to allow users to generate planner PDFs based on HTML and CSS.
|
||||
|
||||
## Developing
|
||||
|
||||
Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
|
||||
# or start the server and open the app in a new browser tab
|
||||
npm run dev -- --open
|
||||
```
|
||||
|
||||
## Building
|
||||
|
||||
To create a production version of your app:
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
|
||||
You can preview the production build with `npm run preview`.
|
||||
|
||||
> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
[build]
|
||||
command = "npm run build"
|
||||
publish = "build"
|
||||
Generated
+19089
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,30 @@
|
||||
{
|
||||
"name": "plannergenerator",
|
||||
"version": "0.0.1",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "vite dev",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview",
|
||||
"lint": "prettier --plugin-search-dir . --check . && eslint .",
|
||||
"format": "prettier --plugin-search-dir . --write ."
|
||||
},
|
||||
"devDependencies": {
|
||||
"@sveltejs/adapter-auto": "^2.0.0",
|
||||
"@sveltejs/kit": "^1.20.4",
|
||||
"eslint": "^8.28.0",
|
||||
"eslint-config-prettier": "^8.5.0",
|
||||
"eslint-plugin-svelte": "^2.30.0",
|
||||
"netlify-cli": "^15.9.0",
|
||||
"prettier": "^2.8.0",
|
||||
"prettier-plugin-svelte": "^2.10.1",
|
||||
"svelte": "^4.0.5",
|
||||
"vite": "^4.4.2"
|
||||
},
|
||||
"type": "module",
|
||||
"dependencies": {
|
||||
"@sveltejs/adapter-netlify": "^2.0.8",
|
||||
"axios": "^1.4.0",
|
||||
"puppeteer": "^20.8.2"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
%sveltekit.head%
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400&display=swap');
|
||||
body {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
}
|
||||
</style>
|
||||
<!-- Include the html2pdf library -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.3/html2pdf.bundle.min.js"></script>
|
||||
|
||||
</head>
|
||||
<body data-sveltekit-preload-data="hover">
|
||||
<div style="display: contents">%sveltekit.body%</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,165 @@
|
||||
<script>
|
||||
export let dayOfWeek;
|
||||
export let date;
|
||||
export let month;
|
||||
export let year;
|
||||
|
||||
function getOrdinalSuffix(date) {
|
||||
const suffixes = ["th", "st", "nd", "rd"];
|
||||
const v = date % 100;
|
||||
return date + (suffixes[(v - 20) % 10] || suffixes[v] || suffixes[0]);
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="day-container">
|
||||
<div class="first-row">
|
||||
<div id="date">{dayOfWeek} {getOrdinalSuffix(date)} {month} {year}</div>
|
||||
<div id="code-freeze">Code Freeze Date:</div>
|
||||
</div>
|
||||
<div class="second-row">
|
||||
<div class="double-column">
|
||||
<div>
|
||||
<h3>Priorities</h3>
|
||||
<div class="light-lines">
|
||||
{#each Array(10) as _, i}
|
||||
<div class="light-line"></div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3>Schedule</h3>
|
||||
<div class="light-lines">
|
||||
{#each Array(19) as _, i}
|
||||
<div class="light-line"></div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<h3>Tasks</h3>
|
||||
<div class="light-lines">
|
||||
{#each Array(32) as _, i}
|
||||
<div class="light-line"></div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3>Notes</h3>
|
||||
<div class="light-grid">
|
||||
{#each Array(35) as _, row}
|
||||
<div class="grid-row">
|
||||
{#each Array(18) as _, col}
|
||||
<div class="light-cell"></div>
|
||||
{/each}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.day-container {
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.first-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#date {
|
||||
text-align: left;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
#code-freeze {
|
||||
text-align: right;
|
||||
font-style: italic;
|
||||
margin-right: 95px;
|
||||
}
|
||||
|
||||
.second-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.second-row > div {
|
||||
flex: 1; /* Each column takes up equal width */
|
||||
max-width: calc(33.33% - 5px); /* Max width for each column (1/3 of the page with a 5px gap) */
|
||||
}
|
||||
|
||||
.double-column > div:first-child {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.double-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.double-column > div:nth-child(2) > div {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.double-column > div:nth-child(2) > div::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 75px; /* Adjust the distance from the left */
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
background-color: #ddd; /* Color of the vertical line */
|
||||
z-index: 1; /* Ensure the line is in front of the content */
|
||||
}
|
||||
|
||||
@media print {
|
||||
.day-container {
|
||||
page-break-before: always;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
border-bottom: 1px solid #000; /* Full-width line color */
|
||||
padding-bottom: 10px;
|
||||
margin: 10px 0 0 0;
|
||||
font-variant: small-caps;
|
||||
}
|
||||
|
||||
.light-lines {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.light-line {
|
||||
height: 1px; /* Height of each light line */
|
||||
background-color: #ddd; /* Light line color */
|
||||
margin-top: 20px; /* Spacing between light lines */
|
||||
}
|
||||
|
||||
.light-grid {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 10px; /* Adjust spacing between "Notes" section and the grid */
|
||||
}
|
||||
|
||||
.grid-row {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.light-cell {
|
||||
width: 20px; /* Adjust the width of each cell */
|
||||
height: 20px; /* Adjust the height of each cell */
|
||||
border: 1px solid #eee; /* Border color for each cell */
|
||||
margin-right: -1px; /* Negative margin to overlap adjacent borders */
|
||||
margin-bottom: -1px; /* Negative margin to overlap adjacent borders */
|
||||
box-sizing: border-box; /* Include border in the element's total width and height */
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,26 @@
|
||||
<script>
|
||||
import DayPartial from '$lib/DayPartial.svelte';
|
||||
|
||||
export let year;
|
||||
let dayOfWeek = 'test';
|
||||
let date = 'test';
|
||||
let month = 'test';
|
||||
|
||||
</script>
|
||||
|
||||
<div id="calendar" hidden>
|
||||
<div id="days-container">
|
||||
<DayPartial {dayOfWeek} {date} {month} {year} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
#calendar {
|
||||
background-color: #fff8f2; /* Beige color */
|
||||
}
|
||||
@media print {
|
||||
#calendar {
|
||||
page-break-after: always;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1 @@
|
||||
// place files you want to import through the `$lib` alias in this folder.
|
||||
@@ -0,0 +1,74 @@
|
||||
<script>
|
||||
import YearPartial from '$lib/YearPartial.svelte';
|
||||
|
||||
let year;
|
||||
async function printURLToPDF(url) {
|
||||
try {
|
||||
const response = await fetch(url);
|
||||
console.log(response);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`Failed to fetch data from ${url}`);
|
||||
}
|
||||
|
||||
const htmlContent = await response.text();
|
||||
|
||||
const element = document.createElement('div');
|
||||
element.innerHTML = htmlContent;
|
||||
|
||||
console.log(element.querySelector('.day-container'));
|
||||
|
||||
// pages => individual html blocks to print
|
||||
// select all elements marked with 'day-container' to be printed into PDF
|
||||
const pages = Array.from(element.querySelectorAll('.day-container'));
|
||||
console.log(pages[0]);
|
||||
const pdfOptions = {
|
||||
margin: 0,
|
||||
filename: 'output.pdf',
|
||||
jsPDF: {
|
||||
unit: 'mm',
|
||||
format: 'a4',
|
||||
orientation: 'landscape',
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
const downloadPDF = (elements, pdfOptions) => {
|
||||
let worker = html2pdf()
|
||||
.set(pdfOptions)
|
||||
.from(elements[0])
|
||||
|
||||
if (elements.length > 1) {
|
||||
worker = worker.toPdf() // worker is now a jsPDF instance
|
||||
|
||||
// add each element/page individually to the PDF render process
|
||||
elements.slice(1).forEach((element, index) => {
|
||||
worker = worker
|
||||
.get('pdf')
|
||||
.then(pdf => {
|
||||
pdf.addPage()
|
||||
})
|
||||
.from(element)
|
||||
.toContainer()
|
||||
.toCanvas()
|
||||
.toPdf()
|
||||
})
|
||||
}
|
||||
|
||||
worker = worker.save()
|
||||
}
|
||||
|
||||
await downloadPDF(pages, pdfOptions);
|
||||
} catch (error) {
|
||||
console.error('Error fetching or processing content:', error);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<main>
|
||||
<h1>Daily Planner Generator</h1>
|
||||
<input type="text" id="year" bind:value={year} inputmode="numeric" />
|
||||
<button on:click={async () => await printURLToPDF(`/standard-dev-planner/${year}/`)}>Generate</button>
|
||||
|
||||
<YearPartial {year} />
|
||||
</main>
|
||||
@@ -0,0 +1,3 @@
|
||||
export function load({ params }) {
|
||||
return params;
|
||||
}
|
||||
@@ -0,0 +1,71 @@
|
||||
<script>
|
||||
import DayPartial from '$lib/DayPartial.svelte';
|
||||
|
||||
export let data;
|
||||
export const year = data.year;
|
||||
|
||||
const daysInYear = getDaysInYear(year);
|
||||
export const days = generateDays(year, daysInYear);
|
||||
|
||||
function getDaysInYear(year) {
|
||||
// Check if the year is a leap year
|
||||
// Leap years are divisible by 4, but not divisible by 100 unless they are divisible by 400
|
||||
const isLeapYear = (year % 4 === 0 && year % 100 !== 0) || (year % 400 === 0);
|
||||
|
||||
// Return 366 for a leap year, otherwise return 365
|
||||
return isLeapYear ? 366 : 365;
|
||||
}
|
||||
|
||||
function generateDays(year, totalDays) {
|
||||
const startDate = new Date(`${year}-01-01`);
|
||||
const days = [];
|
||||
|
||||
// TODO - set this!
|
||||
for (let i = 0; i < totalDays; i++) {
|
||||
// for (let i = 0; i < 5; i++) {
|
||||
const currentDate = new Date(startDate);
|
||||
currentDate.setDate(startDate.getDate() + i);
|
||||
|
||||
const dayObject = {
|
||||
dayOfWeek: getDayOfWeek(currentDate.getDay()),
|
||||
date: currentDate.getDate(),
|
||||
month: getMonth(currentDate.getMonth()),
|
||||
year: currentDate.getFullYear(),
|
||||
};
|
||||
|
||||
days.push(dayObject);
|
||||
}
|
||||
|
||||
return days;
|
||||
}
|
||||
|
||||
function getDayOfWeek(dayIndex) {
|
||||
const daysOfWeek = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
|
||||
return daysOfWeek[dayIndex];
|
||||
}
|
||||
|
||||
function getMonth(monthIndex) {
|
||||
const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
|
||||
return months[monthIndex];
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<div id="calendar">
|
||||
<div id="days-container">
|
||||
{#each days as { dayOfWeek, date, month, year } (`${date}-${month}-${year}`)}
|
||||
<DayPartial {dayOfWeek} {date} {month} {year} />
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
#calendar {
|
||||
background-color: #fff8f2; /* Beige color */
|
||||
}
|
||||
@media print {
|
||||
#calendar {
|
||||
page-break-after: always;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,9 @@
|
||||
import netlify from '@sveltejs/adapter-netlify';
|
||||
|
||||
const config = {
|
||||
kit: {
|
||||
adapter: netlify()
|
||||
},
|
||||
};
|
||||
|
||||
export default config;
|
||||
@@ -0,0 +1,6 @@
|
||||
import { sveltekit } from '@sveltejs/kit/vite';
|
||||
import { defineConfig } from 'vite';
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [sveltekit()],
|
||||
});
|
||||
Reference in New Issue
Block a user