DigitalDocumentLogbook-GAS/pull-out.html at main · TheSortingHash/DigitalDocumentLogbook-GAS · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE html>
<html>
<head>
  <base target="_top">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.jsdelivr.net/npm/signature_pad@4.0.0/dist/signature_pad.umd.min.js"></script>
  <style>
    body { font-family: Arial, sans-serif; background-color: #f0f2f5; margin: 0; }
    .header { background-color: #1C2790; padding: 20px; text-align: center; color: white; }
    .header h2 { margin: 0; }
    .container { max-width: 400px; margin: 20px auto; background: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); border-top: 5px solid #CDAE2C; }
    .doc-details { background-color: #f9f9f9; border-left: 4px solid #1C2790; padding: 15px; margin-bottom: 20px; }
    .doc-details p { margin: 5px 0; }
    .form-group { margin-bottom: 15px; }
    label { display: block; margin-bottom: 5px; font-weight: bold; }
    textarea { width: 95%; padding: 8px; border-radius: 4px; border: 1px solid #ccc; font-family: Arial, sans-serif; }
    .signature-pad-container { position: relative; width: 100%; height: 180px; border: 2px dashed #ccc; border-radius: 4px; margin-bottom: 10px; }
    canvas { width: 100%; height: 100%; }
    .button-group { display: flex; gap: 10px; margin-top: 10px; }
    .button-group button { width: 100%; padding: 12px; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; font-weight: bold; }
    #clearButton { background-color: #6c757d; color: white; }
    #saveButton { background-color: #dc3545; color: white; } /* Changed to red */
    #saveButton:disabled { background-color: #cccccc; cursor: not-allowed; }
    .message { padding: 15px; border-radius: 4px; text-align: center; font-weight: bold; display: none; margin-top: 20px; background-color: #e2e3e5;}
  </style>
</head>
<body>

  <div class="header">
    <h2>Pull Out Document</h2>
  </div>

  <div class="container">
    <div id="mainContent">
      <div class="doc-details">
        <p>This action will release the following document from the normal workflow:</p>
        <p><b>Reference #:</b> <span id="refDisplay"><?= referenceNumber ?></span></p>
        <p><b>Document Title:</b> <?= docDetails.DocumentTitle ?></p>
      </div>

      <div class="form-group">
        <label for="comments">Reason for Pull Out (Required):</label>
        <textarea id="comments" rows="3"></textarea>
      </div>

      <label>Please sign below to confirm:</label>
      <div class="signature-pad-container">
        <canvas id="signature-pad"></canvas>
      </div>

      <div class="button-group">
        <button id="clearButton">Clear Signature</button>
        <button id="saveButton">Confirm Pull Out</button>
      </div>
    </div>

    <div id="messageBox" class="message"></div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const canvas = document.getElementById('signature-pad');
      canvas.width = canvas.offsetWidth;
      canvas.height = canvas.offsetHeight;

      const signaturePad = new SignaturePad(canvas, {
        backgroundColor: 'rgb(255, 255, 255)'
      });

      document.getElementById('clearButton').addEventListener('click', function () {
        signaturePad.clear();
      });

      document.getElementById('saveButton').addEventListener('click', function () {
        // MODIFIED: Added check for comments
        const comments = document.getElementById('comments').value;

        if (signaturePad.isEmpty()) {
          return alert("Please provide a signature first.");
        }
        if (!comments) {
          return alert("Please provide a reason for the pull out.");
        }

        document.getElementById('mainContent').style.display = 'none';
        const messageBox = document.getElementById('messageBox');
        messageBox.textContent = 'Processing... This window will close automatically.';
        messageBox.style.display = 'block';

        // MODIFIED: Data object now includes comments
        const pullOutData = {
          referenceNumber: document.getElementById('refDisplay').textContent,
          signature: signaturePad.toDataURL('image/png'),
          comments: comments
        };

        // MODIFIED: Calls a new server function 'processPullOut'
        google.script.run.processPullOut(pullOutData);

        setTimeout(function() {
          google.script.host.close();
        }, 2000);
      });
    });
  </script>

</body>
</html>