Bakery Planner

A web component built with Lit for planning bakery production schedules. It displays a grid-based timeline of production steps for baked goods (e.g., Baguettes, Croissants) and allows users to add, edit, or delete steps interactively.

Features

• Displays a time-based grid showing production steps for multiple baked goods.
• Supports interactive editing of steps (e.g., Petrissage, Autolyse, Cuisson) with a form.
• Configurable start time and production data via properties.
• Read-only mode for viewing schedules without editing.
• Responsive design with customizable styles.

Installation

1. Ensure you have a JavaScript project with a module bundler (e.g., Vite, Webpack).
2. Install the required dependencies:

npm install lit

3. Copy the bakery-planner component files (including bakery-planner.ts, lib/styles.ts, lib/form.ts, and lib/interface.ts) into your project.

4. Import and use the component in your application:

import './path/to/bakery-planner.ts';

Usage

Add the <bakery-planner> custom element to your HTML and configure it with attributes or properties.

Example

<bakery-planner startTime="04:00" readOnly></bakery-planner>

Or programmatically in JavaScript:

const planner = document.createElement('bakery-planner');
planner.startTime = '04:00';
planner.readOnly = true;
planner.productions = [
  {
    name: 'Baguettes',
    start: 2,
    steps: [
      {letter: 'P', cases: 1},
      {letter: 'A', cases: 3},
      {letter: 'C', cases: 3},
    ],
  },
  {
    name: 'Croissants',
    start: 3,
    steps: [
      {letter: 'P', cases: 1},
      {letter: 'B', cases: 1},
    ],
  },
];
document.body.appendChild(planner);

Properties

| Property | Type | Default | Description | | ------------- | -------------- | --------- | ------------------------------------------ | | readOnly | boolean | false | If true, disables editing features. | | startTime | string | '04:00' | Start time for the grid (format: HH:mm). | | productions | Production[] | See code | Array of production objects with steps. |

Production Object

Each production object in the productions array has the following structure:

interface Production {
  name: string; // Name of the baked good (e.g., "Baguettes")
  start: number; // Starting slot index
  steps: Step[]; // Array of steps
}

interface Step {
  letter: BakeryStep | null; // Step identifier (e.g., 'P' for Petrissage)
  cases: number; // Duration in 15-minute slots
}

Development

Prerequisites

• Node.js and npm
• A modern browser
• Familiarity with Lit and TypeScript

Running Locally

1. Clone the repository or copy the component files.
2. Install dependencies:

npm install

3. Start a development server (e.g., using Vite):

npm run dev

Building

To build the component for production:

npm run build

Notes

• Ensure the bakery-form component (lib/form.ts) is properly implemented, as it is referenced in the code.
• Styles are defined in lib/styles.ts and applied via Lit's static styles property.
• The grid assumes 15-minute time slots, with 7.5 hours of total duration (30 slots).

Contributing

Contributions are welcome! Please submit a pull request or open an issue for bugs, feature requests, or improvements.

License

MIT License