Embedded Files
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//static.codepen.io/assets/editor/live/console_runner-1df7d3399bdc1f40995a35209755dcfd8c7547da127f6469fd81e5fba982f6af.js'></script><script src='//static.codepen.io/assets/editor/live/css_reload-5619dc0905a68b2e6298901de54f73cefe4e079f65a75406858d92924b4938bf.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//static.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//static.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/ceterio/pen/ZVBqXq" />
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css'>
<style class="cp-pen-styles">#spreadsheet-data ul {
-webkit-column-count: 3;
column-count: 3;
}
#spreadsheet-data div.is-loading {
border: none;
height: 100vh;
}
#spreadsheet-data div.is-loading:after {
border-color: transparent transparent #209cee #209cee !important;
border: 2px solid #fff;
height: 2em;
width: 2em;
}
#control {
position: fixed;
margin: 24px;
right: 0;
bottom: 0;
background-color: #eee;
border-radius: 6px;
}
#control:hover {
background-color: #ddd;
}
#control a {
display: inline-block;
padding: 10px 17px;
}
#control .arrow-up {
border: solid black;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
color: #444;
}
</style></head><body>
<a name="top"></a>
<div id="spreadsheet-data" class="container">
<div class="button is-loading is-large is-fullwidth"></div>
</div>
<div id="control" class="is-hidden"><a href="#top"><i class="arrow-up"></i></a></div>
<script type="text/template" id="tpl-data">
<section class="section content">
<h1 class="is-size-1 is-uppercase has-text-weight-light">Summary</h1>
<ul>
<% _.each(_.keys(data).sort(), sheet => { %>
<li><a href="#${sheet}">${sheet}</a></li>
<% }) %>
</ul>
<hr />
<% _.each(_.keys(data).sort(), sheet => { %>
<h2 class="is-size-2 has-text-weight-light"><a name="${sheet}">${sheet}</a></h1>
<% if (_.size(data[sheet])) { %>
<table class="table is-striped is-hoverable is-fullwidth">
<thead>
<tr>
<% _.each(_.keys(data[sheet][0]), (key, i) => { %>
<th>${key}</th>
<% }) %>
</tr>
</thead>
<tbody>
<% _.each(data[sheet], (items, i) => { %>
<tr>
<% _.each(_.keys(data[sheet][i]), j => { %>
<td>${data[sheet][i][j]}</td>
<% }) %>
</tr>
<% }) %>
</tbody>
</table>
<% } else { %>
<div class="has-text-danger">No items for ${sheet}</div>
<% } %>
<% }) %>
</section>
</script>
<script src='//static.codepen.io/assets/common/stopExecutionOnTimeout-de7e2ef6bfefd24b79a3f68b414b87b8db5b08439cac3f1012092b2290c719cd.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js'></script>
<script >var SPREADSHEET_ID = "1gV6GevWaLHKgp6hCjiPmB1m5AxeVcJop_Um_xECBF4k";
var data = {},
render = void 0,
ctrl = void 0;
render = function render(data) {
var template = _.template(document.getElementById("tpl-data").innerHTML);
document.getElementById("spreadsheet-data").innerHTML = template({
data: data });
};
ctrl = document.getElementById("control");
axios.
get("https://spreadsheets.google.com/feeds/worksheets/" +
SPREADSHEET_ID + "/public/full?alt=json").
then(function (r) {
var sheets = _.map(_.get(r, "data.feed.entry"), "content.$t"),
counter = void 0;
counter = _.size(sheets);
_.each(sheets, function (sheet, i) {
axios.
get("https://spreadsheets.google.com/feeds/list/" +
SPREADSHEET_ID + "/" + (i +
1) + "/public/values?alt=json").
then(function (r) {
var entries = _.get(r, "data.feed.entry"),
prefix = "gsx$",
items = [],
c = void 0;
c = entries.length - 1;
_.each(entries, function (e, j) {
var a = {},
keys = void 0;
keys = _.filter(_.keys(e), function (key) {
return key.indexOf(prefix) === 0;
});
keys.forEach(function (k, ii) {
keys[ii] = k.slice(prefix.length);
a[k.slice(prefix.length)] = _.get(entries[j][k], "$t");
});
items[j] = a;
_.set(data, sheet, items);
j === c && --counter === 0 && render(data);
});
}).
catch(function () {
console.log("unable to load Google sheet " + sheet);
--counter === 0 && render(data);
});
});
}).
catch(function () {return (
console.log("unable to load Google spreadsheet " + SPREADSHEET_ID));});
window.onscroll = function () {
var offset = document.body.scrollTop || document.documentElement.scrollTop;
ctrl.classList[offset < 70 ? "add" : "remove"]("is-hidden");
};
//# sourceURL=pen.js
</script>
</body></html>
Google Sites
Report abuse