feat(frontend): Rating

Rating is somewhat functionning.
Have to add policies so user can't vote more than once per recipe.

app/Http/Controllers/RecettesController.php

@@ -2,6 +2,7 @@
 
 namespace App\Http\Controllers;
 
+use App\Rating;
 use App\User;
 use App\Recette;
 use Illuminate\Http\Request;
@@ -18,6 +19,15 @@ class RecettesController extends Controller
      //    $this->middleware('auth');
      // }
 
+     public function recetteStar (Request $request, Recette $recette) {
+      $rating = new Rating;
+      $rating->user_id = auth()->user()->id;
+      $rating->rating = $request->input('star');
+      $recette->ratings()->save($rating);
+      return redirect()->back();
+    }
+
+
     public function index()
     {
 

app/Rating.php

@@ -0,0 +1,33 @@
+<?php
+
+namespace App;
+
+use Illuminate\Database\Eloquent\Model;
+
+class Rating extends Model
+{
+
+    protected $table = 'ratings';
+
+    public $fillable = ['rating', 'rateable_id', 'user_id'];
+
+    /**
+     * @return mixed
+     */
+    public function rateable()
+    {
+        return $this->morphTo();
+    }
+
+    public function user()
+    {
+        return $this->belongsTo(User::class);
+    }
+
+
+    public function recette()
+    {
+        return $this->belongsTo(Recette::class);
+    }
+
+}

app/Recette.php

@@ -2,14 +2,21 @@
 
 namespace App;
 
+use willvincent\Rateable\Rateable;
 use Illuminate\Database\Eloquent\Model;
 
 class Recette extends Model {
 
+    use Rateable;
+
     protected $guarded = [];
-    
+
     public function user() {
       return $this->belongsTo(User::class);
     }
 
+    public function rating() {
+      return $this->hasMany(Rating::class);
+    }
+
 }

app/helpers.php

@@ -1,7 +1,6 @@
 <?php
 
 function randomRecipe() {
-
   $recette = App\Recette::inRandomOrder()->first();
-
+  return $recette;
 }

composer.json

@@ -13,7 +13,8 @@
         "fideloper/proxy": "^4.0",
         "laravel/framework": "5.8.*",
         "laravel/tinker": "^1.0",
-        "pug-php/pug": "^3.3"
+        "pug-php/pug": "^3.3",
+        "willvincent/laravel-rateable": "1.0.9"
     },
     "require-dev": {
         "beyondcode/laravel-dump-server": "^1.0",

database/migrations/2020_02_28_162642_create_ratings_table.php

@@ -0,0 +1,32 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+
+class CreateRatingsTable extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up()
+    {
+        Schema::create('ratings', function (Blueprint $table) {
+            $table->increments('id');
+            $table->timestamps();
+            $table->integer('rating');
+            $table->morphs('rateable');
+            $table->bigInteger('user_id')->unsigned();
+            $table->index('rateable_id');
+            $table->index('rateable_type');
+            $table->foreign('user_id')->references('id')->on('users');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down()
+    {
+        Schema::drop('ratings');
+    }
+}

public/css/app.css

@@ -17302,6 +17302,64 @@ pre {
   height: calc(100vh - 80px);
 }
 
+/** rating **/
+
+/** end rating **/
+
+/** rating **/
+
+div.stars {
+  display: inline-block;
+}
+
+#addStar {
+  display: inline-block;
+  height: 32px;
+  margin-left: -10px;
+}
+
+input.star {
+  display: none;
+}
+
+label.star {
+  float: right;
+  padding: 10px;
+  font-size: 20px;
+}
+
+input.star:checked ~ label.star:before {
+  font-family: "Font Awesome 5 Free";
+  content: "\F816";
+  color: #cf0c0c;
+}
+
+input.star-5:checked ~ label.star:before {
+  color: #cf0c0c;
+}
+
+input.star-1:checked ~ label.star:before {
+  color: #cf0c0c;
+}
+
+label.star:hover {
+  -webkit-transform: rotate(-15deg) scale(1.3);
+          transform: rotate(-15deg) scale(1.3);
+}
+
+label.star:before {
+  content: "\F816";
+  font-family: "Font Awesome 5 Free";
+}
+
+.horline > li:not(:last-child):after {
+  content: " |";
+}
+
+.horline > li {
+  font-weight: bold;
+}
+
 .homepage {
   background-image: url(/images/mychili.jpg?1fd168981d3eba1f7dec319235816e67);
 }

public/js/app.js

@@ -49516,7 +49516,8 @@ window.Vue = __webpack_require__(/*! vue */ "./node_modules/vue/dist/vue.common.
 // const files = require.context('./', true, /\.vue$/i);
 // files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default));
 
-Vue.component('example-component', __webpack_require__(/*! ./components/ExampleComponent.vue */ "./resources/js/components/ExampleComponent.vue")["default"]);
+Vue.component('example-component', __webpack_require__(/*! ./components/ExampleComponent.vue */ "./resources/js/components/ExampleComponent.vue")["default"]); // Vue.component('rating', require('./components/Rating.vue').default);
+
 /**
  * Next, we will create a fresh Vue application instance and attach it to
  * the page. Then, you may begin adding components to this application

resources/js/app.js

@@ -20,6 +20,7 @@ window.Vue = require('vue');
 // files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default));
 
 Vue.component('example-component', require('./components/ExampleComponent.vue').default);
+// Vue.component('rating', require('./components/Rating.vue').default);
 
 /**
  * Next, we will create a fresh Vue application instance and attach it to

resources/js/components/Rating.vue

@@ -0,0 +1,27 @@
+
+<template>
+  <form class="form-horizontal recettestars" action="{{route('recetteStar', $recette->id)}}" :id="addStar" method="POST" style="display: inline-block;">
+    {{ csrf_field() }}
+    <div class="form-group required">
+      <div class="col-sm-12">
+        <input class="star star-5" value="5" id="star-5" type="radio" name="star"/>
+        <label class="star star-5" for="star-5"></label>
+        <input class="star star-4" value="4" id="star-4" type="radio" name="star"/>
+        <label class="star star-4" for="star-4"></label>
+        <input class="star star-3" value="3" id="star-3" type="radio" name="star"/>
+        <label class="star star-3" for="star-3"></label>
+        <input class="star star-2" value="2" id="star-2" type="radio" name="star"/>
+        <label class="star star-2" for="star-2"></label>
+        <input class="star star-1" value="1" id="star-1" type="radio" name="star"/>
+        <label class="star star-1" for="star-1"></label>
+      </div>
+    </div>
+  </form>
+</template>
+
+
+<script>
+    $('#addStar').change('.star', function(e) {
+    $(this).submit();
+    });
+</script>