Gmail2Sheets/Sidebar.html at main · Podjisin/Gmail2Sheets · 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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <style>
      body {
        font-family: Arial, sans-serif;
        padding: 15px;
        background-color: #f9f9f9;
      }

      h3 {
        text-align: center;
        color: #333;
        margin-bottom: 20px;
      }

      label {
        font-weight: bold;
        color: #444;
        display: block;
        margin-bottom: 5px;
      }

      input[type="date"],
      input[type="text"],
      select {
        width: 100%;
        padding: 8px;
        margin-bottom: 15px;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
      }

      button {
        width: 48%;
        padding: 10px;
        margin: 5px 1%;
        border: none;
        background-color: #4CAF50;
        color: white;
        font-weight: bold;
        border-radius: 4px;
        cursor: pointer;
        transition: background-color 0.3s;
      }

      button:hover {
        background-color: #45a049;
      }

      p {
        font-size: 0.9em;
        color: #555;
        margin-top: 20px;
      }

      a {
        color: #1a73e8;
        text-decoration: none;
      }

      a:hover {
        text-decoration: underline;
      }
    </style>
  </head>
  <body>
    <h3>Email Extractor</h3>

    <label>Start Date:</label>
    <input type="date" id="start">

    <label>End Date:</label>
    <input type="date" id="end">

    <label>Date Format:</label>
    <input type="text" id="dateTimeFormat" placeholder="ddd, YYYY-MM-DD HH:mm A">

    <label>Sort By Date:</label>
    <select id="sortOrder">
      <option value="desc">Descending (Newest First)</option>
      <option value="asc">Ascending (Oldest First)</option>
    </select>


    <label>Search Scope:</label>
    <select id="scope">
      <option value="inbox">Inbox Only</option>
      <option value="anywhere">All Mail (including archived)</option>
      <option value="custom">Custom Label</option>
    </select>

    <label id="labelFilterLabel" style="display:none;">Label (if custom selected):</label>
    <input type="text" id="labelFilter" placeholder="e.g. Work/Clients" style="display:none;">

    <label>Email Whitelist (comma-separated):</label>
    <input type="text" id="whitelist" placeholder="e.g. boss@example.com, hr@company.com">

    <label>Email Blacklist (comma-separated):</label>
    <input type="text" id="blacklist" placeholder="e.g. promo@shop.com, no-reply@news.com">

    <div style="text-align: center;">
      <button onclick="runExtractor()">Start</button>
    </div>

    <p>
      Refer to this documentation for date and time formatting:
      <a href="https://day.js.org/docs/en/display/format" target="_blank" rel="noopener noreferrer">Day.js Docs</a>
    </p>

    <script>
      const scopeSelect = document.getElementById("scope");
      const labelInput = document.getElementById("labelFilter");
      const labelFilterLabel = document.getElementById("labelFilterLabel");

      scopeSelect.addEventListener("change", function () {
        if (this.value === "custom") {
          labelInput.style.display = "block";
          labelFilterLabel.style.display = "block";
        } else {
          labelInput.style.display = "none";
          labelFilterLabel.style.display = "none";
        }
      });

      function runExtractor() {
        const start = document.getElementById('start').value;
        const end = document.getElementById('end').value;
        const sortOrder = document.getElementById('sortOrder').value;
        const dateTimeFormat = document.getElementById('dateTimeFormat').value;
        const scope = document.getElementById('scope').value;
        const label = document.getElementById('labelFilter').value;
        const whitelist = document.getElementById('whitelist').value;
        const blacklist = document.getElementById('blacklist').value;

        if (!start || !end) {
          alert('Please select both dates.');
          return;
        }

        google.script.run.extractEmailsToSheet(start, end, sortOrder, dateTimeFormat, scope, label, whitelist, blacklist);
        alert('Extraction started...');
      }
    </script>
  </body>
</html>