77 lines
3.2 KiB
HTML
77 lines
3.2 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>movies</title>
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
|
|
</head>
|
|
|
|
<body>
|
|
<main>
|
|
<div class="container">
|
|
<h1>movies</h1>
|
|
<div id="v-app">
|
|
<table class="table table-striped">
|
|
<tr>
|
|
<th>#</th>
|
|
<th>Title</th>
|
|
<th>Director</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
<tr v-for="movie in movies" is="movie" :movie="movie"></tr>
|
|
</table>
|
|
<template id="template-movie-raw">
|
|
<tr>
|
|
<td>
|
|
{{movie.id}}
|
|
</td>
|
|
<td class="col-md-6">
|
|
<input v-if="movie.editing" v-model="movie.title" class="form-control">
|
|
</input>
|
|
<!--in other occasions show the movie title-->
|
|
<span v-else>
|
|
{{movie.title}}
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<input v-if="movie.editing" v-model="movie.director" class="form-control">
|
|
</input>
|
|
<!--in other occasions show the movie director-->
|
|
<span v-else>
|
|
{{movie.director}}
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<div class="btn-group" v-if="!movie.editing">
|
|
<button @click="editMovie(movie)" class="btn btn-default">Edit</button>
|
|
<button @click="deleteMovie(movie)" class="btn btn-danger">Delete</button>
|
|
</div>
|
|
<div class="btn-group" v-else>
|
|
<!--If the movie is taken from the db then it will have an id-->
|
|
<button v-if="movie.id" class="btn btn-primary" @click="updateMovie(movie)">Update movie
|
|
</button>
|
|
<!--If the movie is new we want to store it-->
|
|
<button v-else class="btn btn-success" @click="storeMovie(movie)">Save New movie</button>
|
|
<!--Always show cancel-->
|
|
<button @click="movie.editing=false" class="btn btn-default">Cancel</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</template>
|
|
<p class="lead">Here's a list of all your movies.
|
|
<button @click="createMovie()" class="btn btn-primary">Add a new one?</button>
|
|
</p>
|
|
<pre>{{ $data | json }}</pre>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
|
|
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/0.7.0/vue-resource.js"></script>
|
|
<script src='/js/app.js' type="text/javascript"></script>
|
|
</body>
|
|
</html>
|