SpreadAPI demo

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css">
<div class="section" id="app">
  <form class="field has-addons" @submit.prevent="onSubmit">
    <div class="control">
      <input :disabled="isSubmitting" class="input" type="number" placeholder="Temperatura" v-model="temp" step="0.01">
    </div>
    <div class="control">
      <button class="button is-primary" :disabled="isSubmitting" :class="{ 'is-loading': isSubmitting }">
        Add
      </button>      
    </div>
  </form>

  <div class="notification is-success" v-if="showConfirmation">
    Added an entry to the spreadsheet.
  </div>
  
  <a class="button" href="https://docs.google.com/spreadsheets/d/1Pdm9DGIrwK0yOxsBxcC3sY8d28BP2jCqOMkFZ1zYfmg" target="_blank"> 
    Open spreadsheet
  </a>
  
  <h4 style="margin: 10px 0 5px; font-size: 20px">Entries in the spreadsheet</h4>
  <ul>
  <li v-for="entry in entries"><b>{{ entry.Time }}</b>: {{ entry.Temperature }}</li>
  </ul>
</div>

JavaScript

const url = "https://script.google.com/macros/s/AKfycbxAamdj9rstUOQYTNtLEMVQmhrRBzRv59KWA2SNIebghDYA-lOZwu4T15UKQgncYTC5vA/exec";
const key = "!p5kESGfR*J2";
const sheet = "Temperature";

new Vue({
  el: '#app',
  data: {
    temp: 0,
    isSubmitting: false,
    showConfirmation: false,
    entries: [],
  },
  mounted() {
  	this.loadEntries();
  },
  methods: {
  	async onSubmit(event) {
    	this.showConfirmation = false;
    	this.isSubmitting = true;
      
      // Sample request to the SpreaAPI
      const response = await fetch(url, {
        method: "POST",
        body: JSON.stringify({
        	key,
          sheet,
          method: "POST",
          payload: {
            Time: new Date().toISOString(),
            Temperature: this.temp
          }
        })
      });     
      
      this.isSubmitting = false;
      this.showConfirmation = true;
      this.temp = 0;
      this.loadEntries();
    },
    
    async loadEntries() {
    	// Sample request to the SpreaAPI
      const response = await fetch(url, {
        method: "POST",
        body: JSON.stringify({
        	key,
          sheet,
          method: "GET",
        })
      }); 
      
      const { data } = await response.json();
      console.log(data)
      this.entries = data.toReversed();
    }
  }
})