Romain/portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

memos home module

Browse Source
This commit is contained in:
Romulus21
2020-05-09 13:04:15 +02:00
parent 7e3529cecf
commit 6ef804c01a
8 changed files with 109 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
app/Http/Controllers/MemosController.php
View File

@@ -54,6 +54,24 @@ class MemosController extends Controller
return response([], Response::HTTP_NO_CONTENT); return response([], Response::HTTP_NO_CONTENT);
} }
public function home()
{
$this->authorize('viewAny', Memo::class);
$memos = request()->user()->memos;
$count = $memos->count();
$created = $memos->sortByDesc('created_at')->first();
$updated = $memos->sortByDesc('updated_at')->first();
// dd($count, $created, $updated);
return response(['data' => [
'count' => $count,
'last_created' => new MemoResource($created),
'last_updated' => new MemoResource($updated),
]]);
}
private function validateData() private function validateData()
{ {
return request()->validate([ return request()->validate([

6
resources/js/components/Loader.vue
View File

@@ -1,6 +1,8 @@
<template> <template>
<div v-if="loading" class="flex items-center"> <div class="min-h-16 w-full">
<svg-vue icon="loader" class="loader"/> <div v-if="loading" class="flex justify-center text-gray-900 m-4">
<svg-vue icon="loader" class="stroke-current w-12 h-12"/>
</div>
</div> </div>
</template> </template>

12
resources/js/views/Home.vue
View File

@@ -1,17 +1,21 @@
<template> <template>
<div class="p-2"> <div class="p-4">
<h1>Home</h1> <h1 class="page-title">Home</h1>
<OpenWeatherCard /> <div class="flex flex-wrap -m-2 mt-2">
<OpenWeatherCard class="w-full sm:w-1/2 md:w-1/3 lg:w-1/4" />
<MemoHome class="w-full sm:w-1/2 md:w-1/3 lg:w-1/4" />
</div>
</div> </div>
</template> </template>
<script> <script>
import OpenWeatherCard from './Meteo/OpenWeatherCard' import OpenWeatherCard from './Meteo/OpenWeatherCard'
import MemoHome from './Memo/MemoHome'
export default { export default {
name: 'Home', name: 'Home',
components: { components: {
OpenWeatherCard OpenWeatherCard, MemoHome
} }
} }
</script> </script>

55
resources/js/views/Memo/MemoHome.vue
View File

@@ -1,11 +1,60 @@
<template> <template>
$END$ <div>
<div class="card m-2">
<div v-if="loading" class="p-2">
<h2>Memos</h2>
<Loader />
</div>
<div v-else class="p-2">
<router-link to="/memos"><h2 class="mb-4 text-gray-900">{{ memos.count }} Memos</h2></router-link>
<router-link :to="memos.last_updated.links.self" class="m-2 block">
<div class="flex justify-between text-black">
Dernier édité
<span class="inline-block bg-gray-400 text-white text-center rounded-full px-3 py-1 text-sm font-semibold">{{ memos.last_updated.data.last_updated }}</span>
</div>
<div class="text-2xl font-bold">{{ memos.last_updated.data.name }}</div>
</router-link>
<hr class="border border-gray-900">
<router-link :to="memos.last_created.links.self" class="m-2 block">
<div class="flex justify-between text-black">
Dernier créé
<span class="inline-block bg-gray-400 text-white text-center rounded-full px-3 py-1 text-sm font-semibold">{{ memos.last_created.data.last_updated }}</span>
</div>
<div class="text-2xl font-bold">{{ memos.last_created.data.name }}</div>
</router-link>
</div>
</div>
</div>
</template> </template>
<script> <script>
export default { import Loader from '../../components/Loader'
name: "MemoHome"
export default {
name: 'MemoHome',
components: {
Loader
},
data: function () {
return {
loading: true,
memos: '',
}
},
mounted() {
// eslint-disable-next-line no-undef
axios.get('/api/memos/home')
.then(response => {
this.memos = response.data.data
console.log(this.memos)
this.loading = false
})
.catch(() => {
this.loading = false
console.log('Unable to fetch memos.')
})
} }
}
</script> </script>
<style scoped> <style scoped>

43
resources/js/views/Meteo/OpenWeatherCard.vue
View File

@@ -1,24 +1,22 @@
<template> <template>
<div class="my-2"> <div>
<h2>Météo</h2> <div v-if="loading">
<p v-if="loading"></p> <Loader />
<div v-else class="my-1"> </div>
<div v-else class="m-2">
<div class="flex flex-wrap -m-2 mt-2"> <div class="card">
<div class="w-full sm:w-1/2 md:w-1/3 lg:w-1/4"> <div class="text-black m-2 p-2 flex flex-col">
<div class="bg-gray-300 rounded text-black m-2 p-2 flex flex-col"> <h2>{{ meteo.city.name }}</h2>
<h3 class="text-2xl font-bold text-center">{{ meteo.city.name }}</h3> <div class="flex">
<div class="flex"> <div class="flex flex-col justify-end">
<div class="flex flex-col justify-end"> <div>{{ dateFormat(meteo.list[0].dt_txt) }}</div>
<div>{{ dateFormat(meteo.list[0].dt_txt) }}</div> <div><strong>{{ meteo.list[0].main.temp }}</strong> °C</div>
<div><strong>{{ meteo.list[0].main.temp }}</strong> °C</div> <div><strong>{{ meteo.list[0].main.humidity }}</strong> %</div>
<div><strong>{{ meteo.list[0].main.humidity }}</strong> %</div> <div><strong>{{ meteo.list[0].main.pressure }}</strong> hPa</div>
<div><strong>{{ meteo.list[0].main.pressure }}</strong> hPa</div> </div>
</div> <div class="flex flex-col flex-1 justify-end items-end">
<div class="flex flex-col flex-1 justify-end items-end"> <i v-bind:class="'owf owf-5x owf-' + meteo.list[0].weather[0].id"></i>
<i v-bind:class="'owf owf-5x owf-' + meteo.list[0].weather[0].id"></i> <div><strong>{{ meteo.list[0].weather[0].description }}</strong></div>
<div><strong>{{ meteo.list[0].weather[0].description }}</strong></div>
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -28,8 +26,13 @@
</template> </template>
<script> <script>
import Loader from '../../components/Loader'
export default { export default {
name: 'OpenWeatherCard', name: 'OpenWeatherCard',
components: {
Loader
},
data: function () { data: function () {
return { return {
loading: true, loading: true,

3
resources/sass/components/_base.scss vendored
View File

@@ -30,3 +30,6 @@
max-width: 12rem; max-width: 12rem;
} }
.min-h-16 {
min-height: 4rem;
}

31
resources/sass/components/_elements.scss vendored
View File

@@ -1,28 +1,5 @@
// Elements // Elements
//@for $i from 1 through 9 {
//
// .bg-primary-#{$i}00 {
// @apply bg-green-#{$i}00;
// }
//
// .hover:bg-primary-#{$i}00 {
// @apply bg-green-#{$i}00;
// }
//
// .bg-secondary-#{$i}00 {
// @apply bg-blue-#{$i}00;
// }
//
// .text-primary-#{$i}00 {
// @apply text-gray-#{$i}00;
// }
//
// .hover:text-primary-#{$i}00 {
// @apply text-gray-#{$i}00;
// }
//}
.page-title { .page-title {
@apply text-3xl font-bold text-gray-900; @apply text-3xl font-bold text-gray-900;
} }
@@ -85,12 +62,4 @@ a {
h2 { h2 {
@apply text-2xl text-center font-bold; @apply text-2xl text-center font-bold;
} }
&:hover {
@apply bg-gray-500 text-gray-700;
h2 {
@apply text-gray-700;
}
}
} }

1
routes/api.php
View File

@@ -18,6 +18,7 @@ Route::middleware('auth:api')->group(function () {
Route::get('auth-user', 'AuthUserController@show'); Route::get('auth-user', 'AuthUserController@show');
Route::get('/memos/home', 'MemosController@home');
Route::apiResources([ Route::apiResources([
'/users' => 'UserController', '/users' => 'UserController',