//
<?php

namespace App\Http\Controllers;
use App\Post;
use Illuminate\Http\Request;

class PostsController extends Controller
{
    //
    public function addVote($id){
        $post = Post::find($id);
        $post->increment('votes');
        return response()->json(['status'=>'ok'],200);
    }
    public function removeVote($id){
        $post = Post::find($id);
        $post->decrement('votes');
        return response()->json(['status'=>'ok'],200);
    }
}
                                                    
                                                

                                                        
                                                            //
<?php
use App\Post;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
    $posts = Post::all();
    return view('index',compact('posts'));
});

Route::post('/login','UsersController@auth');

Route::post('/register','UsersController@store');

Route::get('/logout','UsersController@logout');

Route::post('/{id}/addVote','PostsController@addVote');

Route::post('/{id}/removeVote','PostsController@removeVote');
                                                        
                                                    

                                                        
                                                            //
@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row">
        <div class="col-md-6 mx-auto mt-5">
            <vue-posts posts="{{$posts}}"></vue-posts>
        </div>
    </div>
</div>
@endsection
                                                        
                                                    

                                                        
                                                            //
<template>
    <div>
        <div class="row">
            <div class="col-md-12 posts"   
                    v-for="article in sortedData"
                    :key="article.id">
                <div class="media mb-1 p-3">                              
                    <img class="mr-3"  width="60" height="60">
                    <div class="media-body">
                        <h5 class="mt-0">{{article.title}} #{{article.id}}</h5>
                        {{article.body}}
                    </div>
                    <span class="float-right" @click="addVote(article.id)">
                        <i class="fa fa-chevron-up"></i>
                    </span > 
                    <strong class="text-info mx-1">{{article.votes}}</strong>
                    <span class="float-right" @click="deleteVote(article.id)">
                        <i class="fa fa-chevron-down"></i>
                    </span > 
                </div>
                <hr>
            </div>
        </div>
    </div>
</template>


<script>
    import axios from 'axios';
    export default{
        name : 'Posts',
        props : ['posts'],
        data(){
            return {
                articles : JSON.parse(this.posts)
            }
        },
        methods: {
            addVote(id){
                axios.post(`http://localhost/lara-vue-login/public/${id}/addVote`)
                .then(response => {
                    location.reload();
                }).catch(err => {
                    console.log(err);
                });
            },
            deleteVote(id){
                axios.post(`http://localhost/lara-vue-login/public/${id}/removeVote`)
                .then(response => {
                    location.reload();
                }).catch(err => {
                    console.log(err);
                });
            }
        },
        computed: {
            sortedData(){
                return this.articles.sort((a,b) => {
                    return b.votes - a.votes;
                });
            }
        }
    }
</script>


<style>
    span:hover{
        cursor: pointer;
    }
</style>
                                                        
                                                    

                                                        
                                                            //

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

window.Vue = require('vue');

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

Vue.component('login', require('./components/Login.vue'));
Vue.component('register', require('./components/Register.vue'));
Vue.component('vue-posts', require('./components/Posts.vue'));

const app = new Vue({
    el: '#app'
});