63 lines
2.2 KiB
HTML
63 lines
2.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<title> Capire Reviews </title>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/primitive-ui/dist/css/main.css">
|
|
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
|
|
<style>
|
|
.hovering tr:hover td { color:cyan; background: #123; cursor: pointer; }
|
|
.rating-stars { color:teal }
|
|
.succeeded { color:teal }
|
|
.failed { color:red }
|
|
textarea { line-height: 1.4em;}
|
|
</style>
|
|
</head>
|
|
|
|
<body class="small-container", style="margin-top: 70px;">
|
|
<div id='app'>
|
|
|
|
<h1> Capire Reviews </h1>
|
|
|
|
<input type="text" placeholder="Search..." @input="search">
|
|
|
|
<table id='my-reviews' class="hovering">
|
|
<thead>
|
|
<th> Subject </th>
|
|
<th> Rating </th>
|
|
<th> Title </th>
|
|
<th> Date </th>
|
|
</thead>
|
|
<tr v-for="review in list" v-bind:id="review.ID" v-on:click="inspect">
|
|
<td>{{ review.subject }}</td>
|
|
<td class="rating-stars">{{ review.rating | stars }}</td>
|
|
<td>{{ review.title }}</td>
|
|
<td>{{ review.date | datetime }}</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<button v-on:click="newReview()" class="round-button muted-button">Add Review...</button>
|
|
|
|
<form v-if="review" @submit.prevent="submitReview">
|
|
<input id="subject" type="text" v-model="review.subject" style="font-weight:bold; display:inline; width:20%">
|
|
<input type="text" v-model="review.title" style="font-weight:bold; display:inline; width:60%">
|
|
<select v-model="review.rating" style="font-weight:bold; display:inline; width:17%; float: right;">
|
|
<option v-for="option in Ratings" v-bind:value="option[0]"> {{ option[1] }} </option>
|
|
</select>
|
|
<textarea v-model="review.text" rows="9"></textarea>
|
|
<input type="submit" value="Submit" class="round-button muted-button">
|
|
<span class="succeeded"> {{ message.succeeded }} </span>
|
|
<span class="failed"> {{ message.failed }} </span>
|
|
</form>
|
|
<div v-else style="margin-top: 2em;">
|
|
( click on a row to see details... )
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</body>
|
|
|
|
<script src="app.js"></script>
|
|
</html>
|