Merge pull request 'service-list' (#9) from service-list into master

Reviewed-on: #9

app/Http/Controllers/ServiceLinksController.php

@@ -0,0 +1,15 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Models\ServicesLink;
+use Illuminate\Http\Request;
+
+class ServiceLinksController extends Controller
+{
+    public function index()
+    {
+        $links = new ServicesLink();
+        return $links->all();
+    }
+}

app/Models/ServicesLink.php

@@ -0,0 +1,11 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+
+class ServicesLink extends Model
+{
+    use HasFactory;
+}

database/migrations/2025_06_14_085734_create_services_links_table.php

@@ -0,0 +1,29 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::create('services_links', function (Blueprint $table) {
+            $table->id();
+            $table->string('name', 255);
+            $table->string('link', 255);
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('services_links');
+    }
+};

resources/service_links.js

@@ -0,0 +1,18 @@
+import './js/bootstrap';
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import App from './views/ServiceLinks/ServicesLinks.vue'
+import { createVuetify } from 'vuetify'
+import 'vuetify/styles'
+import * as components from 'vuetify/components'
+import * as directives from 'vuetify/directives'
+import '@mdi/font/css/materialdesignicons.css'
+
+const pinia = createPinia();
+
+const vuetify = createVuetify({
+    components,
+    directives
+});
+
+createApp(App).use(vuetify).use(pinia).mount("#app");

resources/stores/services_list.js

@@ -0,0 +1,21 @@
+import {defineStore} from "pinia";
+import axios from "axios";
+
+export const useServicesList = defineStore('services_list', {
+    state: () => ({
+        links: Object
+    }),
+    getters: {
+
+    },
+    actions: {
+        async getList(){
+            await axios
+                .get('/api/v1/services_list')
+                .then((response) => {
+                    this.links = response.data;
+                });
+        }
+
+    },
+})

resources/views/ServiceLinks/ServicesLinks.vue

@@ -0,0 +1,78 @@
+<script>
+
+import {ref} from "vue";
+import {useServicesList} from "../../stores/services_list.js";
+
+export default {
+    name: "ServicesLinks",
+    data: () => ({
+        links: ref([]),
+        servicesListStore: useServicesList(),
+        fetching: true,
+        windowHeight: document.documentElement.clientHeight,
+        windowWidth: document.documentElement.clientWidth,
+        isWide: window.innerWidth >= 654
+    }),
+    mounted() {
+        this.fetching = true;
+        this.servicesListStore.getList().then(()=>{
+            this.links = this.servicesListStore.links;
+            this.fetching = false;
+        });
+        this.myEventHandler();
+        window.addEventListener("resize", this.myEventHandler, { passive: true });
+    },
+    methods: {
+        myEventHandler(e) {
+            this.windowHeight = document.documentElement.clientHeight;
+            this.windowWidth = document.documentElement.clientWidth;
+            this.isWide = this.windowWidth >= 654;
+        }
+    },
+    created() {
+        window.addEventListener("resize", this.myEventHandler);
+    },
+}
+</script>
+
+<template>
+    <v-app>
+        <v-sheet class="bg-gradient h-100 w-100 d-flex justify-center">
+            <v-sheet class="bg-grey-darken-3 mt-5 mb-5 rounded-lg w-75 pl-3 pr-3">
+                <p class="text-xl-h3 text-lg-h3 text-md-h4 text-sm-h4 text-h5 text-center pt-3">Список сервисов и страниц</p>
+                <v-skeleton-loader v-if="fetching" class="bg-grey-darken-3" type="card"/>
+                <div class="pt-5 h-100" v-else>
+                    <v-row class="ma-0" v-for="n in Math.ceil(links.length / 3)" v-if="isWide">
+                        <v-col class="d-flex justify-center align-center" v-for="j in 3">
+                            <v-btn v-if="links[(n - 1) * 3 + j - 1]" class="w-100 h-100 pa-5 text-white mt-5 mb-5 bg-btn" :href="links[(n - 1) * 3 + j - 1].link" target="_blank">
+                                {{ links[(n - 1) * 3 + j - 1].name }}
+                            </v-btn>
+                        </v-col>
+                    </v-row>
+                    <div v-else class="ma-0">
+                        <v-btn class="w-100 h-100 pa-5 text-white mt-5 mb-5 bg-btn" v-for="link in links" :href="link.link" target="_blank">
+                            {{ link.name }}
+                        </v-btn>
+                    </div>
+                </div>
+            </v-sheet>
+        </v-sheet>
+    </v-app>
+</template>
+
+<style scoped>
+.bg-gradient {
+    --s: 50px; /* control the size */
+
+    --c: #E08E79 0 25%,#774F38 0 50%,#0000 0;
+    background:
+        conic-gradient(from 180deg,var(--c))
+        0/var(--s) var(--s),
+        repeating-conic-gradient(from 90deg,var(--c))
+        0/calc(3*var(--s)) calc(3*var(--s))
+}
+
+.bg-btn {
+    background-color: #E08E79
+}
+</style>

resources/views/ServiceLinks/links.blade.php

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <title>Services Links</title>
+        @vite('resources/service_links.js')
+        @vite('resources/css/app.css')
+    </head>
+    <body class="antialiased">
+        <div id="app"></div>
+    </body>
+</html>

routes/api_v1.php

@@ -20,3 +20,4 @@ Route::get('/schedules', 'App\Http\Controllers\SchedulesController@index')->name
 Route::get('/dates', 'App\Http\Controllers\SchedulesController@mmDate')->name('dates');
 Route::get('/phrases', 'App\Http\Controllers\BasyaPhrasesController@index')->name('phrases');
 Route::post('/rating', 'App\Http\Controllers\RatingController@index')->name('rating');
+Route::get('/services_list', 'App\Http\Controllers\ServiceLinksController@index')->name('services_list');

routes/web.php

@@ -33,6 +33,10 @@ Route::get('/friday', function () {
     return view('friday/friday');
 });
 
+Route::get('/services_list', function () {
+    return view('ServiceLinks/links');
+});
+
 Route::get('/download/{file}', 'App\Http\Controllers\DownloadController@download');
 
 

vite.config.js

@@ -12,7 +12,8 @@ export default defineConfig({
                 'resources/welcome.js',
                 'resources/caesar.js',
                 'resources/basya.js',
-                'resources/friday.js'
+                'resources/friday.js',
+                'resources/service_links.js'
             ],
             refresh: true,
         }),