Add 2 files

index.html

@@ -5,8 +5,8 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
   <title>Rig Operation Procedure Builder - LEGO Style</title>
   <script src="https://cdn.tailwindcss.com"></script>
-  <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/docx/7.2.0/docx.js"></script>
   <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
   <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
   <style>
@@ -60,6 +60,9 @@
           <button id="downloadWordBtn" class="bg-purple-600 hover:bg-purple-700 text-white px-5 py-2 rounded-lg text-sm font-medium flex items-center gap-1 transition">
             <i class="fas fa-file-word"></i> Download Word
           </button>
+          <button id="downloadRTFBtn" class="bg-teal-600 hover:bg-teal-700 text-white px-5 py-2 rounded-lg text-sm font-medium flex items-center gap-1 transition">
+            <i class="fas fa-file-alt"></i> Download RTF
+          </button>
           <button id="approvalBtn" class="bg-orange-500 hover:bg-orange-600 text-white px-5 py-2 rounded-lg text-sm font-medium flex items-center gap-1 transition">
             <i class="fas fa-check-circle"></i> Submit for Approval
           </button>
@@ -332,6 +335,7 @@
     const saveBtn = document.getElementById('saveBtn');
     const printBtn = document.getElementById('printBtn');
     const downloadWordBtn = document.getElementById('downloadWordBtn');
+    const downloadRTFBtn = document.getElementById('downloadRTFBtn');
     const approvalBtn = document.getElementById('approvalBtn');
 
     // Initialize
@@ -402,9 +406,8 @@
       // Click on builder to add
       builder.addEventListener('click', (e) => {
         if (e.target === builder || e.target === placeholder) {
-          // Show quick add menu
           if (blocks.length === 0) {
-            addBlock('step'); // Default
+            addBlock('step');
           }
         }
       });
@@ -417,11 +420,9 @@
       template.id = id;
       template.style.display = 'block';
 
-      // Set step number
       const stepNumber = template.querySelector('.step-number');
       stepNumber.textContent = procedureCounter++;
 
-      // Handle dynamic content
       if (type === 'material') {
         setupMaterialBlock(template);
       } else if (type === 'personnel') {
@@ -432,7 +433,6 @@
         setupUploadArea(template);
       }
 
-      // Add event listeners to controls
       template.querySelector('.remove-block').addEventListener('click', () => {
         if (confirm('Are you sure you want to remove this block?')) {
           template.remove();
@@ -441,13 +441,9 @@
       });
 
       template.querySelector('.edit-block').addEventListener('click', () => {
-        alert('Edit mode activated for this block. You can now modify the content.');
-        // Just focus the first input/textarea
-        const firstInput = template.querySelector('input, textarea');
-        if (firstInput) firstInput.focus();
+        alert('Edit mode. Modify content directly.');
       });
 
-      // Make block draggable
       template.setAttribute('draggable', true);
       template.addEventListener('dragstart', (e) => {
         e.dataTransfer.setData('text/plain', 'move');
@@ -459,11 +455,9 @@
         template.classList.remove('dragging');
       });
 
-      // Append to builder
       builder.appendChild(template);
       placeholder.style.display = 'none';
 
-      // Save state
       blocks.push({ id, type, element: template });
     }
 
@@ -492,7 +486,7 @@
       }
 
       addButton.addEventListener('click', addMaterialItem);
-      addMaterialItem(); // Add first item by default
+      addMaterialItem();
     }
 
     function setupPersonnelBlock(block) {
@@ -520,7 +514,7 @@
       }
 
       addButton.addEventListener('click', addPersonnelItem);
-      addPersonnelItem(); // Add first item by default
+      addPersonnelItem();
     }
 
     function setupChecklistBlock(block) {
@@ -542,7 +536,7 @@
       }
 
       addButton.addEventListener('click', addChecklistItem);
-      addChecklistItem(); // Add first item by default
+      addChecklistItem();
     }
 
     function setupUploadArea(block) {
@@ -566,7 +560,6 @@
         }
       });
 
-      // Drag and drop for file
       area.addEventListener('drop', (e) => {
         e.preventDefault();
         const file = e.dataTransfer.files[0];
@@ -584,7 +577,6 @@
       });
     }
 
-    // Update step numbers sequentially
     function updateStepNumbers() {
       procedureCounter = 1;
       document.querySelectorAll('.procedure-block').forEach(block => {
@@ -595,9 +587,7 @@
       });
     }
 
-    // Setup global events
     function setupEvents() {
-      // Reorder blocks via drag and drop
       builder.addEventListener('dragover', (e) => {
         e.preventDefault();
         const afterElement = getDragAfterElement(builder, e.clientY);
@@ -609,7 +599,6 @@
         }
       });
 
-      // Save procedure
       saveBtn.addEventListener('click', () => {
         const title = prompt('Enter procedure title:', 'New Procedure') || 'Untitled';
         const id = 'PRC-' + Date.now().toString().substr(-6).toUpperCase();
@@ -629,7 +618,6 @@
           })
         };
 
-        // Save to "database" (localStorage)
         let procedures = JSON.parse(localStorage.getItem('rigProcedures') || '[]');
         procedures.push(procedure);
         localStorage.setItem('rigProcedures', JSON.stringify(procedures));
@@ -638,27 +626,178 @@
         loadProcedures();
       });
 
-      // Print
       printBtn.addEventListener('click', () => {
         window.print();
       });
 
-      // Download as Word (using HTML to DOCX approach via PDF for simplicity)
+      // Download as DOCX
       downloadWordBtn.addEventListener('click', () => {
-        const { jsPDF } = window.jspdf;
-
-        html2canvas(document.getElementById('procedureBuilder')).then(canvas => {
-          const imgData = canvas.toDataURL('image/png');
-          const pdf = new jsPDF();
-          const imgProps = pdf.getImageProperties(imgData);
-          const pdfWidth = pdf.internal.pageSize.getWidth();
-          const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
-          pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);
-          pdf.save("rig-procedure.pdf");
+        const { Document, Paragraph, TextRun, ImageRun, Packer } = docx;
+
+        const blocks = document.querySelectorAll('.procedure-block');
+        const elements = [];
+
+        blocks.forEach(block => {
+          const type = block.querySelector('.text-sm').textContent.trim();
+
+          // Extract text content
+          let content = '';
+          const textarea = block.querySelector('textarea');
+          const inputs = block.querySelectorAll('input[type="text"], input[type="number"], select');
+          const timeInputs = block.querySelectorAll('input[type="time"]');
+          const checklist = block.querySelectorAll('.checklist-items input[type="checkbox"]');
+          const img = block.querySelector('img');
+
+          // Add step title
+          elements.push(new Paragraph({
+            children: [
+              new TextRun({
+                text: `Step ${block.querySelector('.step-number').textContent}: ${type}`,
+                bold: true,
+                size: 28
+              })
+            ],
+            spacing: { after: 100 }
+          }));
+
+          if (textarea && textarea.value) {
+            elements.push(new Paragraph({
+              children: [new TextRun(textarea.value)],
+              spacing: { after: 100 }
+            }));
+          }
+
+          if (inputs.length > 0) {
+            const tableRows = Array.from(inputs).reduce((rows, input, i, arr) => {
+              if (i % 3 === 0) rows.push([]);
+              const value = input.value || input.options?.[input.selectedIndex]?.text || '';
+              rows[rows.length - 1].push(value);
+              return rows;
+            }, []).map(row => {
+              return new docx.TableRow({
+                children: row.map(cell => {
+                  return new docx.TableCell({
+                    children: [new Paragraph(cell)],
+                    width: { size: 33, type: docx.WidthType.PERCENTAGE }
+                  });
+                })
+              });
+            });
+
+            if (tableRows.length > 0) {
+              elements.push(new docx.Table({
+                rows: tableRows,
+                width: { size: 100, type: docx.WidthType.PERCENTAGE }
+              }));
+            }
+          }
+
+          if (timeInputs.length > 1) {
+            const start = timeInputs[0].value;
+            const end = timeInputs[1].value;
+            elements.push(new Paragraph({
+              children: [new TextRun(`Duration: ${start} - ${end}`)],
+              spacing: { after: 100 }
+            }));
+          }
+
+          if (checklist.length > 0) {
+            Array.from(block.querySelectorAll('.checklist-items > div')).forEach(itemDiv => {
+              const checkbox = itemDiv.querySelector('input[type="checkbox"]');
+              const label = itemDiv.querySelector('input[type="text"]');
+              elements.push(new Paragraph({
+                children: [
+                  new TextRun({
+                    text: `[${checkbox.checked ? 'x' : ' '}] ${label.value}`,
+                    size: 24
+                  })
+                ]
+              }));
+            });
+          }
+
+          if (img && !img.classList.contains('hidden')) {
+            const imgData = img.src;
+            elements.push(new Paragraph({
+              children: [
+                new ImageRun({
+                  data: atob(imgData.split(',')[1]),
+                  transformation: {
+                    width: 300,
+                    height: 200
+                  }
+                })
+              ],
+              spacing: { after: 100 }
+            }));
+          }
+
+          elements.push(new Paragraph({ spacing: { after: 100 } })); // spacer
+        });
+
+        const doc = new Document({
+          sections: [{
+            properties: {},
+            children: elements
+          }]
+        });
+
+        Packer.toBlob(doc).then(blob => {
+          saveAs(blob, 'Rig_Operation_Procedure.docx');
         });
       });
 
-      // Submit for approval
+      // Download as RTF (simplified RTF string)
+      downloadRTFBtn.addEventListener('click', () => {
+        let rtfContent = '{\\rtf1\\ansi\\deff0{\\fonttbl{\\f0 Times New Roman;}}\n';
+        rtfContent += '\\viewkind4\\uc1\\pard\\f0\\fs24\\b Rig Operation Procedure\\b0\\par\n';
+        rtfContent += '\\par\n';
+
+        document.querySelectorAll('.procedure-block').forEach(block => {
+          const stepNum = block.querySelector('.step-number').textContent;
+          const type = block.querySelector('.text-sm').textContent.trim();
+          rtfContent += `\\b Step ${stepNum}: ${type}\\b0\\par\n`;
+
+          const textarea = block.querySelector('textarea');
+          if (textarea && textarea.value) {
+            rtfContent += textarea.value.replace(/\n/g, '\\line ') + '\\par\n';
+          }
+
+          const timeInputs = block.querySelectorAll('input[type="time"]');
+          if (timeInputs.length === 2) {
+            const start = timeInputs[0].value;
+            const end = timeInputs[1].value;
+            rtfContent += `Duration: ${start} - ${end}\\par\n`;
+          }
+
+          block.querySelectorAll('.material-list > div').forEach(item => {
+            const name = item.querySelector('input[type="text"]')?.value || '';
+            const qty = item.querySelector('input[type="number"]')?.value || '';
+            const unit = item.querySelector('select')?.options?.[item.querySelector('select')?.selectedIndex]?.text || '';
+            if (name) rtfContent += `\\bullet\\t${qty} ${unit} of ${name}\\par\n`;
+          });
+
+          block.querySelectorAll('.personnel-list > div').forEach(item => {
+            const name = item.querySelector('input[type="text"]')?.value || '';
+            const role = item.querySelector('select')?.options?.[item.querySelector('select')?.selectedIndex]?.text || '';
+            if (name) rtfContent += `\\bullet\\t${name} (${role})\\par\n`;
+          });
+
+          block.querySelectorAll('.checklist-items > div').forEach(item => {
+            const label = item.querySelector('input[type="text"]')?.value || '';
+            const checked = item.querySelector('input[type="checkbox"]')?.checked ? 'x' : ' ';
+            rtfContent += `\\bullet\\t[${checked}] ${label}\\par\n`;
+          });
+
+          rtfContent += '\\par\n';
+        });
+
+        rtfContent += '}';
+
+        const blob = new Blob([rtfContent], { type: 'application/rtf' });
+        saveAs(blob, 'Rig_Operation_Procedure.rtf');
+      });
+
       approvalBtn.addEventListener('click', () => {
         if (blocks.length === 0) {
           alert('Please add at least one block before submitting.');
@@ -666,7 +805,6 @@
         }
         if (confirm('Submit this procedure for approval? It will be reviewed by the safety team.')) {
           const procedures = JSON.parse(localStorage.getItem('rigProcedures') || '[]');
-          // Update the last saved one
           if (procedures.length > 0) {
             procedures[procedures.length - 1].status = 'Pending';
             localStorage.setItem('rigProcedures', JSON.stringify(procedures));
@@ -690,7 +828,6 @@
       }, { offset: Number.NEGATIVE_INFINITY }).element;
     }
 
-    // Load procedures from localStorage
     function loadProcedures() {
       const tableBody = document.getElementById('procedureTableBody');
       tableBody.innerHTML = '';
@@ -716,7 +853,6 @@
         tableBody.appendChild(tr);
       });
 
-      // Add event listeners
       document.querySelectorAll('.edit-proc').forEach(btn => {
         btn.addEventListener('click', (e) => {
           const id = e.target.dataset.id;
@@ -737,19 +873,16 @@
       const procedure = procedures.find(p => p.id === id);
       if (!procedure) return;
 
-      // Clear current builder
       builder.innerHTML = '';
       blocks = [];
       procedureCounter = 1;
 
-      // Add blocks
       procedure.blocks.forEach(blockObj => {
         const div = document.createElement('div');
         div.innerHTML = blockObj.html;
         const block = div.firstElementChild;
         block.style.display = 'block';
 
-        // Remove events and make readonly if needed
         if (readOnly) {
           block.querySelectorAll('input, textarea, button').forEach(el => {
             if (el.type !== 'checkbox') {
@@ -761,7 +894,6 @@
           });
           block.removeAttribute('draggable');
         } else {
-          // Reattach events
           block.querySelector('.remove-block').addEventListener('click', () => {
             if (confirm('Remove this block?')) {
               block.remove();
@@ -781,11 +913,9 @@
       updateStepNumbers();
     }
 
-    // Start app
     window.addEventListener('DOMContentLoaded', init);
   </script>
 
-  <!-- Print Styling -->
   <style media="print">
     .toolbox, .toolbox-item, #placeholder, .edit-block, .remove-block {
       display: none !important;

prompts.txt

@@ -1 +1,2 @@
-buatkan rig operation procedure seperti lego dimana di dalamnya terdapat inputing procedure dimana didalamnya terdapat upload gambar , waktu procedure, material yang di butuhkan , safety concern , personel dan informasi tambahan lainnya. penyusunan procedure ada juga tambahan editing untuk memastikan beberapa variable dapat di edit untuk nilai nilai tertentu , database procedure , approval review, document download ke word atau print
+buatkan rig operation procedure seperti lego dimana di dalamnya terdapat inputing procedure dimana didalamnya terdapat upload gambar , waktu procedure, material yang di butuhkan , safety concern , personel dan informasi tambahan lainnya. penyusunan procedure ada juga tambahan editing untuk memastikan beberapa variable dapat di edit untuk nilai nilai tertentu , database procedure , approval review, document download ke word atau print
+saat download word , pastikan format document dalam doc atau rtf