google-sheets-addin/FetchDialog.html at main · OilpriceAPI/google-sheets-addin · 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
<!doctype html>
<html lang="en">
  <head>
    <base target="_top" />
    <meta charset="utf-8" />
    <style>
      * { box-sizing: border-box; }
      body {
        margin: 0;
        padding: 18px;
        color: #202124;
        font: 14px/1.4 Arial, sans-serif;
      }
      h1 { margin: 0 0 4px; font-size: 18px; letter-spacing: 0; }
      .subtle { margin-bottom: 14px; color: #5f6368; font-size: 12px; }
      .controls, .actions { display: flex; gap: 8px; }
      .controls { margin-bottom: 10px; }
      .list {
        max-height: 360px;
        overflow-y: auto;
        border: 1px solid #dadce0;
        border-radius: 4px;
      }
      label {
        display: grid;
        grid-template-columns: 20px minmax(0, 1fr) auto;
        align-items: center;
        gap: 8px;
        min-height: 40px;
        padding: 7px 10px;
        border-bottom: 1px solid #f1f3f4;
        cursor: pointer;
      }
      label:last-child { border-bottom: 0; }
      .code { color: #5f6368; font: 11px monospace; }
      button {
        min-height: 36px;
        padding: 8px 12px;
        border: 1px solid #1a73e8;
        border-radius: 4px;
        color: #fff;
        background: #1a73e8;
        font-weight: 600;
        cursor: pointer;
      }
      button.secondary { color: #1a73e8; background: #fff; border-color: #dadce0; }
      button:disabled { opacity: 0.55; cursor: wait; }
      .actions { justify-content: flex-end; margin-top: 14px; }
      .status { min-height: 20px; margin-top: 10px; font-size: 12px; }
      .error { color: #b3261e; }
      .success { color: #137333; }
    </style>
  </head>
  <body>
    <h1>Latest available prices</h1>
    <div class="subtle">
      Access and source freshness vary by dataset and account entitlement.
      Google Workspace Marketplace publication is pending.
    </div>
    <div class="controls">
      <button class="secondary" onclick="setAll(true)">Select all</button>
      <button class="secondary" onclick="setAll(false)">Clear</button>
    </div>
    <div class="list">
      <label><input type="checkbox" value="BRENT_CRUDE_USD" checked /><span>Brent crude</span><span class="code">BRENT_CRUDE_USD</span></label>
      <label><input type="checkbox" value="WTI_USD" checked /><span>WTI crude</span><span class="code">WTI_USD</span></label>
      <label><input type="checkbox" value="NATURAL_GAS_USD" checked /><span>US natural gas</span><span class="code">NATURAL_GAS_USD</span></label>
      <label><input type="checkbox" value="NATURAL_GAS_GBP" /><span>UK natural gas</span><span class="code">NATURAL_GAS_GBP</span></label>
      <label><input type="checkbox" value="DUTCH_TTF_EUR" /><span>Dutch TTF gas</span><span class="code">DUTCH_TTF_EUR</span></label>
      <label><input type="checkbox" value="COAL_USD" /><span>Coal</span><span class="code">COAL_USD</span></label>
      <label><input type="checkbox" value="HEATING_OIL_USD" /><span>Heating oil</span><span class="code">HEATING_OIL_USD</span></label>
      <label><input type="checkbox" value="DIESEL_USD" /><span>Diesel</span><span class="code">DIESEL_USD</span></label>
      <label><input type="checkbox" value="GASOLINE_USD" /><span>Gasoline</span><span class="code">GASOLINE_USD</span></label>
      <label><input type="checkbox" value="JET_FUEL_USD" /><span>Jet fuel</span><span class="code">JET_FUEL_USD</span></label>
      <label><input type="checkbox" value="PROPANE_USD" /><span>Propane</span><span class="code">PROPANE_USD</span></label>
      <label><input type="checkbox" value="URANIUM_USD" /><span>Uranium</span><span class="code">URANIUM_USD</span></label>
    </div>
    <div id="status" class="status" role="status"></div>
    <div class="actions">
      <button class="secondary" onclick="google.script.host.close()">Cancel</button>
      <button id="fetchButton" onclick="fetchPrices()">Fetch</button>
    </div>
    <script>
      function setAll(checked) {
        document.querySelectorAll('input[type="checkbox"]').forEach(function (input) {
          input.checked = checked;
        });
      }

      function selectedCodes() {
        return Array.from(document.querySelectorAll('input[type="checkbox"]:checked'))
          .map(function (input) { return input.value; });
      }

      function setStatus(message, className) {
        const status = document.getElementById("status");
        status.textContent = message;
        status.className = "status " + className;
      }

      function fetchPrices() {
        const codes = selectedCodes();
        if (!codes.length) {
          setStatus("Select at least one code.", "error");
          return;
        }
        const button = document.getElementById("fetchButton");
        button.disabled = true;
        setStatus("Requesting source records...", "");
        google.script.run
          .withSuccessHandler(function (result) {
            setStatus("Wrote " + result.count + " source records.", "success");
            setTimeout(function () { google.script.host.close(); }, 900);
          })
          .withFailureHandler(function (error) {
            setStatus(error.message, "error");
            button.disabled = false;
          })
          .fetchLatestPrices(codes);
      }
    </script>
  </body>
</html>