Initial commit of Roster

2025-06-28 01:12:46 -05:00
commit c23d3a7676
4367 changed files with 890519 additions and 0 deletions
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Roster Builder</title>
+  <link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet"/>
+  <style>body, html { height: 100%; margin: 0; } #gjs { height: 100vh; }</style>
+</head>
+<body>
+  <div class="panel__left" style="width: 200px; float: left;"></div>
+  <div id="gjs" style="margin-left: 200px;"></div>
+  <div id="gjs"></div>
+  <script src="https://unpkg.com/grapesjs"></script>
+  <script>
+    const editor = grapesjs.init({
+      container: '#gjs',
+      fromElement: false,
+      height: '100%',
+      width: 'auto',
+      storageManager: false,
+      panels: {
+        defaults: [
+          {
+            id: 'blocks',
+            el: '.panel__left',
+          },
+          {
+            id: 'commands',
+            buttons: [
+              {
+                id: 'save',
+                className: 'fa fa-save',
+                command: 'export-html',
+                attributes: { title: 'Export HTML' }
+              }
+            ]
+          }
+        ]
+      },
+      blockManager: {
+        appendTo: '.panel__left',
+      }
+    });
+  
+    // === Add your dynamic role blocks here ===
+    const roles = ['Cleaner', 'Sound', 'Projection', 'Cameras', 'Leader'];
+  
+    roles.forEach(role => {
+      editor.BlockManager.add(`block-${role}`, {
+        label: role,
+        content: `<p><strong>${role}:</strong> {{ ${role} }}</p>`,
+        category: 'Roster Roles',
+      });
+    });
+  
+    // Add save command
+    editor.Commands.add('export-html', {
+      run(editor) {
+        const html = editor.getHtml();
+        const css = editor.getCss();
+        const blob = new Blob([`<style>${css}</style>${html}`], { type: 'text/html' });
+        const a = document.createElement('a');
+        a.href = URL.createObjectURL(blob);
+        a.download = 'roster_template.html';
+        a.click();
+      }
+    });
+  </script>  
+</body>
+</html>