<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="app">
<h1>{{ title }}</h1>
<table class="table table-hover table-sm">
<thead class="thead-dark">
<tr>
<th v-for="key in keys">{{ key }}</th>
</tr>
</thead>
<tbody>
<tr v-for="list in lists" :class="{ isComplete: list.status == 'complete', isDone: list.status == 'done' }">
<td>{{ list.id }}</td>
<template v-if="list.status">
<td><a :href="list.url" target="_blank">{{ list.title }}</a></td>
<td><a :href="list.url" target="_blank">{{ list.url }}</a></td>
</template>
<template v-else>
<td>{{ list.title }}</td>
<td>{{ list.url }}</td>
</template>
<td>{{ list.status }}</td>
<td>{{ list.etc }}</td>
</tr>
</tbody>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://www.promisejs.org/polyfills/promise-6.1.0.min.js"></script>
<script src="https://unpkg.com/axios@0.18.0/dist/axios.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
(function(global, $) {
var sid = 'AKfycbwF2jhIhPUOWjpDhEmbaAe5YPp_06pU-UAC6ZpWBmstlt1fEOQ';
var ssJsonUrl = 'https://script.google.com/macros/s/'+sid+'/exec';
var app = new Vue({
el: '#app',
data: {
title: 'サイトマップテンプレ',
lists: null,
keys: null
},
created() {
this.setData();
},
methods: {
setData() {
var that = this;
axios.get(ssJsonUrl)
.then(function (response) {
that.lists = response.data;
that.keys = Object.keys(that.lists[0]);
})
.catch(function (error) {
console.log(error);
});
}
}
});
})(window, jQuery);
table tr.isDone {
background-color: #ffc;
}
table tr.isComplete {
background-color: #ccc;
}