| @@ -0,0 +1,68 @@ | ||
| <style lang='scss'> | ||
| </style> | ||
| <template> | ||
| <div> | ||
| <div class="row"> | ||
| <div class="alert alert-success" role="alert" v-if="showSuccess"> | ||
| <p> {{ elephpant }} was added </p> | ||
| </div> | ||
| <div class="col-xs-12 col-md-8 col-md-offset-2"> | ||
| <h2>Add Elephpant</h2> | ||
| <form method="post" action="" @submit.prevent="addElephpant"> | ||
| <div class="form-group"> | ||
| <label for="elephpant">Elephpant</label> | ||
| <input type="text" class="form-control" id="elephpant" placeholder="elephpant" v-model="elephpant"> | ||
| </div> | ||
| <div class="form-group"> | ||
| <label for="wantLevel">How much do you want this elephpant? (1 is lowest, 5 is highest)</label> | ||
| <select id="wantLevel" class="form-control" v-model="desireLevel"> | ||
| <option selected>Pick One</option> | ||
| <option value="1">One</option> | ||
| <option value="2">Two</option> | ||
| <option value="3">Three</option> | ||
| <option value="4">Four</option> | ||
| <option value="5">Five</option> | ||
| </select> | ||
| </div> | ||
| <button class="btn btn-success">Submit</button> | ||
| </form> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </template> | ||
| <script> | ||
| import axios from 'axios'; | ||
| import auth from '../../auth.js'; | ||
| export default { | ||
| data() { | ||
| return { | ||
| auth: auth, | ||
| user: auth.user, | ||
| elephpant: '', | ||
| desireLevel: '', | ||
| showSuccess: false, | ||
| }; | ||
| }, | ||
| methods: { | ||
| addElephpant() { | ||
| let token = localStorage.getItem('id_token'); | ||
| axios.post('/api/elephpants/wishlist?token=' + token, { | ||
| elephpant: this.elephpant, | ||
| desireLevel: this.desireLevel, | ||
| }).then(response => { | ||
| this.showSuccess = true; | ||
| setTimeout(() => { | ||
| this.showSuccess = false; | ||
| }, 5000); | ||
| }).catch(error => { | ||
| console.error(error); | ||
| }); | ||
| }, | ||
| }, | ||
| }; | ||
| </script> |
| @@ -0,0 +1,86 @@ | ||
| <style lang='scss'> | ||
| .fa-times { | ||
| color: red; | ||
| } | ||
| .add { | ||
| padding-top: 3rem; | ||
| button.btn { | ||
| float: right; | ||
| } | ||
| } | ||
| </style> | ||
| <template> | ||
| <div> | ||
| <div class="row"> | ||
| <div class="col-xs-12"> | ||
| <div class="col-xs-12 col-md-9"> | ||
| <h2> {{ user.profile.name }}</h2> | ||
| <h4>Wishlist</h4> | ||
| </div> | ||
| <div class="col-xs-12 col-md-3 add"> | ||
| <button class="btn btn-success"><router-link to="/profile/elephpant/wishlist/add">Add Elephpant</router-link></button> | ||
| </div> | ||
| <hr> | ||
| <table class="table table-striped"> | ||
| <thead> | ||
| <tr> | ||
| <th>Elephpant</th> | ||
| <th>Desire</th> | ||
| <th>Date Added</th> | ||
| <th>Actions</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <tr v-for="item in user.profile.wishlist.data"> | ||
| <td>{{ item.elephpant }}</td> | ||
| <td>{{ item.desire }}</td> | ||
| <td>{{ item.posted | date }}</td> | ||
| <td @click.prevent="removeElephpant(item.id)"><i class="fa fa-times" aria-hidden="true"></i> Remove</td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </template> | ||
| <script> | ||
| import axios from 'axios'; | ||
| import { remove } from 'lodash'; | ||
| import auth from '../../auth.js'; | ||
| import Moment from 'moment'; | ||
| export default { | ||
| data() { | ||
| return { | ||
| auth: auth, | ||
| user: auth.user, | ||
| showAddModal: false, | ||
| }; | ||
| }, | ||
| created() { | ||
| this.checkAuth(); | ||
| }, | ||
| methods: { | ||
| checkAuth() { | ||
| return auth.check(); | ||
| }, | ||
| removeElephpant(id) { | ||
| axios.delete('/api/elephpants/wishlist/' + id).then(response => { | ||
| return auth.check(); | ||
| }).catch(error => { | ||
| console.error(error); | ||
| }); | ||
| }, | ||
| }, | ||
| filters: { | ||
| date(value) { | ||
| return new Moment(value.date).format('MM/DD/YYYY'); | ||
| } | ||
| }, | ||
| }; | ||
| </script> |
| @@ -17,6 +17,12 @@ footer { | ||
| bottom: 0; | ||
| height: 100px; | ||
| left: 0; | ||
| position: relative; | ||
| width: 100%; | ||
| a { | ||
| color: #1f648b; | ||
| &:hover { | ||
| color: #1f648b; | ||
| } | ||
| } | ||
| } | ||
| @@ -80,5 +80,6 @@ | ||
|
|
||
| <!-- Scripts --> | ||
| <script src="{{ asset('js/app.js') }}"></script> | ||
| <script src="//use.fontawesome.com/8213b5e9ce.js"></script> | ||
| </body> | ||
| </html> | ||