diff --git a/src/project-card.js b/src/project-card.js new file mode 100644 index 0000000..ca9d2d9 --- /dev/null +++ b/src/project-card.js @@ -0,0 +1,90 @@ +class ProjectCard extends HTMLElement { + constructor() { + super(); + this.attachShadow({ mode: 'open' }); + } + + connectedCallback() { + this.render(); + } + + static get observedAttributes() { + return ['title', 'percentage', 'archived']; + } + + attributeChangedCallback() { + this.render(); + } + + render() { + const title = this.getAttribute('title') || 'Untitled Project'; + const percentage = parseInt(this.getAttribute('percentage')) || 0; + const archived = this.getAttribute('archived') === 'true'; + + this.shadowRoot.innerHTML = ` + +
+
+ ${title} + ${archived ? 'Archived' : ''} +
+
+
+
+
${percentage}% complete
+
+ `; + } +} + +customElements.define('project-card', ProjectCard); diff --git a/todo.md b/todo.md index b394c27..aec2507 100644 --- a/todo.md +++ b/todo.md @@ -5,7 +5,7 @@ [x] Create a `Project` struct that corresponds to the schema definition. [x] Create a module or struct at your discretion for interfacing with the database. Create functions for the following: create a project, update a project's progress, archive a project, unarchive a project, and list of all projects. [x] Create a `main.css` file in src. Use mvp.css as a starting point. -[ ] Create a `project-card.js` file in src that creates a web component for displaying a project. +[x] Create a `project-card.js` file in src that creates a web component for displaying a project. [ ] Using a Rouille router, create `GET /main.css` and `GET /project-card.js` endpoints that returns the relevant files. Use the include_bytes! macro. [ ] Create a `GET /projects` endpoint. Using Maud for markup generation, have this endpoint return an HTML page that shows all projects. Each project should be a `project-card` web component. Keep the page simple: no title or any buttons currently. [ ] Create a `POST /projects` endpoint that accepts URL encoded data and creates a new project.