React компонент прелоадера: стили, контекст для универсального доступа из любой точки приложения, сам tsx компонент

app/Console/Commands/BaseScheduleCommand.php

@@ -1,48 +0,0 @@
-<?php
-
-namespace App\Console\Commands;
-
-use Illuminate\Console\Command;
-use Illuminate\Support\Facades\Log;
-
-/**
- * Базовый класс для описания команд по расписанию
- * Создан, в частности, чтобы предоставить универсальный функционал для всех команд, запускаемых по расписанию
- */
-abstract class BaseScheduleCommand extends Command
-{
-    /**
-     * Метод выполнения команды
-     *
-     * @param callable $execFunc функция с логикой выполнения команды
-     * @return void
-     */
-    protected function executeCommand(callable $execFunc): void
-    {
-        try {
-            $execFunc();
-            
-        } catch (\Throwable $th) {
-            $this->logExecErr($th);
-        }
-    }
-
-
-    /**
-     * Метод логирования ошибки выполнения скриптов по расписанию
-     *
-     * @param \Throwable $th
-     * @return void
-     */
-    private function logExecErr(\Throwable $th): void
-    {
-        $context = [
-            //Скрипт откуда запустилась задача
-            'command' => static::class,
-            //Скрипт, в котором произошла ошибка
-            'file' => $th->getFile(),
-            'line' => $th->getLine(),
-        ];
-        \Log::channel('schedule_err')->error($th->getMessage(), $context);
-    }
-}

app/Faceds/RedisNotifications.php

@@ -1,15 +0,0 @@
-<?php
-
-namespace App\Facades;
-
-use Illuminate\Support\Facades\Facade;
-use App\Services\RedisNotificationService;
-
-class RedisNotifications extends Facade
-{
-  protected static function getFacadeAccessor()
-  {
-    return \App\Services\RedisNotificationService::class;
-  }
-}
-

app/Job/BaseJob.php

@@ -1,39 +0,0 @@
-<?php
-
-namespace App\Job;
-
-use Illuminate\Bus\Queueable;
-use Illuminate\Queue\SerializesModels;
-use Illuminate\Queue\InteractsWithQueue;
-use Illuminate\Contracts\Queue\ShouldQueue;
-use Illuminate\Foundation\Bus\Dispatchable;
-use Illuminate\Support\Facades\Log;
-
-/**
- * Базовый класс для выполнения джобы
- */
-class BaseJob implements ShouldQueue
-{
-
-  use Dispatchable, InteractsWithQueue, Queueable, SerializesModels;
-
-  /**
-   * Метод обработки ошибки при выполнении джобы
-   *
-   * @param \Throwable $th
-   * @return void
-   */
-  public function failed(\Throwable $th): void
-  {
-    $context = [
-      //Скрипт откуда запустилась задача
-      'command' => static::class,
-      //Скрипт, в котором произошла ошибка
-      'file' => $th->getFile(),
-      'line' => $th->getLine(),
-  ];
-    \Log::channel('job_err')->error($th->getMessage(), $context);
-  }
-
-}
-

app/Providers/RedisNotificationProvider.php

@@ -1,30 +0,0 @@
-<?php
-
-namespace App\Providers;
-
-use App\Services\RedisNotificationService;
-use Illuminate\Support\ServiceProvider;
-
-/**
- * Провайдер для работы с сервисом Redis для хранения нотификаций для отображения на фронте 
- */
-class RedisNotificationProvider extends ServiceProvider
-{
-    /**
-     * Register services.
-     */
-    public function register(): void
-    {
-        $this->app->bind(RedisNotificationService::class, function($app){
-            return new RedisNotificationService;
-        });
-    }
-
-    /**
-     * Bootstrap services.
-     */
-    public function boot(): void
-    {
-        //
-    }
-}

config/cache.php

@@ -74,8 +74,8 @@ return [
 
         'redis' => [
             'driver' => 'redis',
-            'connection' => 'cache',
+            'connection' => env('REDIS_CACHE_CONNECTION', 'cache'),
-            'lock_connection' => 'default',
+            'lock_connection' => env('REDIS_CACHE_LOCK_CONNECTION', 'default'),
         ],
 
         'dynamodb' => [

config/database.php

@@ -138,7 +138,7 @@ return [
     |
     | Redis is an open source, fast, and advanced key-value store that also
     | provides a richer body of commands than a typical key-value system
-    | such as APC or Memcached. Laravel makes it easy to dig right in.
+    | such as Memcached. You may define your connection settings here.
     |
     */
 
@@ -148,9 +148,8 @@ return [
 
         'options' => [
             'cluster' => env('REDIS_CLUSTER', 'redis'),
-            //'prefix' => env('REDIS_PREFIX', Str::slug(env('APP_NAME', 'laravel'), '_').'_database_'),
+            'prefix' => env('REDIS_PREFIX', Str::slug((string) env('APP_NAME', 'laravel')).'-database-'),
-            //Нижний прочерк нужен, чтобы отделить платформу_модуль от сущность:id:значение. Если после нижнего прочерка ничего нет, значение было установлено из "корня" платформы
+            'persistent' => env('REDIS_PERSISTENT', false),
-            'prefix' => env('REDIS_PREFIX', 'uknown|'),
         ],
 
         'default' => [
@@ -160,6 +159,10 @@ return [
             'password' => env('REDIS_PASSWORD'),
             'port' => env('REDIS_PORT', '6379'),
             'database' => env('REDIS_DB', '0'),
+            'max_retries' => env('REDIS_MAX_RETRIES', 3),
+            'backoff_algorithm' => env('REDIS_BACKOFF_ALGORITHM', 'decorrelated_jitter'),
+            'backoff_base' => env('REDIS_BACKOFF_BASE', 100),
+            'backoff_cap' => env('REDIS_BACKOFF_CAP', 1000),
         ],
 
         'cache' => [
@@ -168,26 +171,13 @@ return [
             'username' => env('REDIS_USERNAME'),
             'password' => env('REDIS_PASSWORD'),
             'port' => env('REDIS_PORT', '6379'),
-            'database' => '1',
+            'database' => env('REDIS_CACHE_DB', '1'),
+            'max_retries' => env('REDIS_MAX_RETRIES', 3),
+            'backoff_algorithm' => env('REDIS_BACKOFF_ALGORITHM', 'decorrelated_jitter'),
+            'backoff_base' => env('REDIS_BACKOFF_BASE', 100),
+            'backoff_cap' => env('REDIS_BACKOFF_CAP', 1000),
         ],
 
-        'queue' => [
-            'url' => env('REDIS_URL'),
-            'host' => env('REDIS_HOST', '127.0.0.1'),
-            'username' => env('REDIS_USERNAME'),
-            'password' => env('REDIS_PASSWORD'),
-            'port' => env('REDIS_PORT', '6379'),
-            'database' => '2',
-        ],
-
-        'notifications' => [
-            'url' => env('REDIS_URL'),
-            'host' => env('REDIS_HOST', '127.0.0.1'),
-            'username' => env('REDIS_USERNAME'),
-            'password' => env('REDIS_PASSWORD'),
-            'port' => env('REDIS_PORT', '6379'),
-            'database' => '3',
-        ],
     ],
 
 ];

config/queue.php

@@ -7,24 +7,25 @@ return [
     | Default Queue Connection Name
     |--------------------------------------------------------------------------
     |
-    | Laravel's queue API supports an assortment of back-ends via a single
+    | Laravel's queue supports a variety of backends via a single, unified
-    | API, giving you convenient access to each back-end using the same
+    | API, giving you convenient access to each backend using identical
-    | syntax for every one. Here you may define a default connection.
+    | syntax for each. The default queue connection is defined below.
     |
     */
 
-    'default' => env('QUEUE_CONNECTION', 'sync'),
+    'default' => env('QUEUE_CONNECTION', 'database'),
 
     /*
     |--------------------------------------------------------------------------
     | Queue Connections
     |--------------------------------------------------------------------------
     |
-    | Here you may configure the connection information for each server that
+    | Here you may configure the connection options for every queue backend
-    | is used by your application. A default configuration has been added
+    | used by your application. An example configuration is provided for
-    | for each back-end shipped with Laravel. You are free to add more.
+    | each backend supported by Laravel. You're also free to add more.
     |
-    | Drivers: "sync", "database", "beanstalkd", "sqs", "redis", "null"
+    | Drivers: "sync", "database", "beanstalkd", "sqs", "redis",
+    |          "deferred", "background", "failover", "null"
     |
     */
 
@@ -36,17 +37,18 @@ return [
 
         'database' => [
             'driver' => 'database',
-            'table' => 'jobs',
+            'connection' => env('DB_QUEUE_CONNECTION'),
-            'queue' => 'default',
+            'table' => env('DB_QUEUE_TABLE', 'jobs'),
-            'retry_after' => 90,
+            'queue' => env('DB_QUEUE', 'default'),
+            'retry_after' => (int) env('DB_QUEUE_RETRY_AFTER', 90),
             'after_commit' => false,
         ],
 
         'beanstalkd' => [
             'driver' => 'beanstalkd',
-            'host' => 'localhost',
+            'host' => env('BEANSTALKD_QUEUE_HOST', 'localhost'),
-            'queue' => 'default',
+            'queue' => env('BEANSTALKD_QUEUE', 'default'),
-            'retry_after' => 90,
+            'retry_after' => (int) env('BEANSTALKD_QUEUE_RETRY_AFTER', 90),
             'block_for' => 0,
             'after_commit' => false,
         ],
@@ -62,17 +64,31 @@ return [
             'after_commit' => false,
         ],
 
-        #Гаврилов
-        //ЗАЧЕМ ЭТОТ КОНФИГ? В .ENV НЕТ ПАРАМЕТРА REDIS_QUEUE
         'redis' => [
             'driver' => 'redis',
-            'connection' => 'default',
+            'connection' => env('REDIS_QUEUE_CONNECTION', 'default'),
             'queue' => env('REDIS_QUEUE', 'default'),
-            'retry_after' => 90,
+            'retry_after' => (int) env('REDIS_QUEUE_RETRY_AFTER', 90),
             'block_for' => null,
             'after_commit' => false,
         ],
 
+        'deferred' => [
+            'driver' => 'deferred',
+        ],
+
+        'background' => [
+            'driver' => 'background',
+        ],
+
+        'failover' => [
+            'driver' => 'failover',
+            'connections' => [
+                'database',
+                'deferred',
+            ],
+        ],
+
     ],
 
     /*
@@ -87,7 +103,7 @@ return [
     */
 
     'batching' => [
-        'database' => env('DB_CONNECTION', 'mysql'),
+        'database' => env('DB_CONNECTION', 'sqlite'),
         'table' => 'job_batches',
     ],
 
@@ -97,14 +113,16 @@ return [
     |--------------------------------------------------------------------------
     |
     | These options configure the behavior of failed queue job logging so you
-    | can control which database and table are used to store the jobs that
+    | can control how and where failed jobs are stored. Laravel ships with
-    | have failed. You may change them to any database / table you wish.
+    | support for storing failed jobs in a simple file or in a database.
+    |
+    | Supported drivers: "database-uuids", "dynamodb", "file", "null"
     |
     */
 
     'failed' => [
         'driver' => env('QUEUE_FAILED_DRIVER', 'database-uuids'),
-        'database' => env('DB_CONNECTION', 'mysql'),
+        'database' => env('DB_CONNECTION', 'sqlite'),
         'table' => 'failed_jobs',
     ],
 

resources/css/components/preloader.css

@@ -0,0 +1,173 @@
+@import url('./../variables.css');
+
+#preloader_container {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background: rgba(0, 0, 0, 0.3);
+  z-index: 900;
+  backdrop-filter: blur(5px);
+
+  &.hide {
+    display: none;
+  }
+
+  &>#preloader{
+    width: 200px;
+    height: 200px;
+    background: none;
+    position: relative;
+    top: 30%;
+    left: 0;
+    right: 0;
+    margin-left: auto;
+    margin-right: auto;
+
+    &>.circle {
+      position: absolute;
+      border-radius: 50%;
+      box-sizing: border-box;
+      border: 10px solid transparent;
+    }
+
+    &>#circle_one {
+      width: 80%;
+      height: 80%;
+      border-top-width: 10px;
+      left: 5%;
+      top: 5%;
+      animation: roll_one 4.5s;
+      animation-fill-mode: forwards;
+      animation-iteration-count: infinite;
+      animation-timing-function: linear;
+
+      &.preloader-emerald-circle{
+        border-top-color: var(--color_emerald_light);
+      }
+      &.preloader-ruby-circle{
+        border-top-color: var(--color_ruby_main);
+      }
+      &.preloader-graphite-circle{
+        border-top-color: var(--color_graphite_main);
+      }
+    }
+
+    &>#circle_two {
+      width: 70%;
+      height: 70%;
+      left: 10%;
+      top: 10%;
+      border-right-width: 10px;
+      animation: roll_two 2.5s;
+      animation-fill-mode: forwards;
+      animation-iteration-count: infinite;
+      animation-timing-function: linear;
+
+      &.preloader-emerald-circle{
+        border-right-color: var(--color_emerald_light);
+      }
+      &.preloader-ruby-circle{
+        border-right-color: var(--color_ruby_main);
+      }
+      &.preloader-graphite-circle{
+        border-right-color: var(--color_graphite_main);
+      }
+    }
+
+    &>#circle_three {
+      width: 60%;
+      height: 60%;
+      left: 15%;
+      top: 15%;
+      border-bottom-width: 10px;
+      animation: roll_three 3s;
+      animation-fill-mode: forwards;
+      animation-iteration-count: infinite;
+      animation-timing-function: linear;
+
+      &.preloader-emerald-circle{
+        border-bottom-color: var(--color_emerald_light);
+      }
+      &.preloader-ruby-circle{
+        border-bottom-color: var(--color_ruby_main);
+      }
+      &.preloader-graphite-circle{
+        border-bottom-color: var(--color_graphite_main);
+      }
+    }
+
+    
+
+    &>#preloader_text {
+      width: 150%;
+      left: -25%;
+      font-size: 1.5rem;
+      position: absolute;
+      bottom: -50px;
+      text-align: center;
+      color: white;
+    }
+
+    &>#logo {
+      position: absolute;
+      background: none;
+      width: 40%;
+      height: 40%;
+      top: 25%;
+      left: 25%;
+
+      &>.logo_square {
+        position: absolute;
+        box-sizing: border-box;
+      }
+
+      &>#left-top {
+        width: 60%;
+        height: 70%;
+        top: 15%;
+        left: 20%;
+        border-left: 7px solid white;
+        border-top: 7px solid white;
+        border-top-left-radius: 45%;
+      }
+
+      &>#right-bottom {
+        width: 40%;
+        height: 50%;
+        top: 15%;
+        left: 40%;
+        border-right: 7px solid white;
+        border-bottom: 7px solid white;
+        border-bottom-right-radius: 45%;
+        border-bottom-left-radius: 10%;
+      }
+    }
+  }
+}
+
+@keyframes roll_one {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes roll_two {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(-360deg);
+  }
+}
+@keyframes roll_three {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(720deg);
+  }
+}

resources/js/components/preloader/Preloader.tsx

@@ -0,0 +1,39 @@
+import "./../../../css/components/preloader.css";
+import React from "react";
+
+export default function Preloader ( props: {visible: boolean, text?: string | null}) {
+  const {text = 'загрузка'} = props;
+  let preloaderColorArray: string[] = ['preloader-ruby-circle', 'preloader-emerald-circle', 'preloader-graphite-circle'],
+  //Код ниже реализует возможность присваивать каждую перезагрузку разные классы с цветом полос
+  //Рандомное число, по которому получим первый класс
+  firstColorIndex: number = Math.floor(Math.random() * 3),
+  firstCircleClass: typeof preloaderColorArray[number] = preloaderColorArray[firstColorIndex],
+  secondCircleClass: typeof preloaderColorArray[number],
+  thirdCircleClass: typeof preloaderColorArray[number];
+  //Удалим уже используемый класс цвета из массива 
+  preloaderColorArray.splice(firstColorIndex, 1);
+  //Оставшиеся 2 класса распределеяем в зависимости от проостой проверки четности/нечетности
+  if (Math.floor(Math.random() * 2) % 2 === 0) {
+    secondCircleClass = preloaderColorArray[0];
+    thirdCircleClass = preloaderColorArray[1];
+  } else {
+    secondCircleClass = preloaderColorArray[1];
+    thirdCircleClass = preloaderColorArray[0];
+  }
+  return (
+    props.visible ? 
+      <div id='preloader_container'>
+        <div id='preloader'>
+          <div className={'circle ' + firstCircleClass} id='circle_one'></div>
+          <div className={'circle ' + secondCircleClass} id='circle_two'></div>
+          <div className={'circle ' + thirdCircleClass} id='circle_three'></div>
+          <div id='logo'>
+            <div className='logo_square' id='right-bottom'></div>
+            <div className='logo_square' id='left-top'></div>
+          </div>
+          <div id='preloader_text'>{ text }</div>
+        </div>
+      </div>
+      : null
+  )
+}

resources/js/contexts/PreloaderContext.tsx

@@ -0,0 +1,40 @@
+import React, { createContext, useState } from "react";
+import Preloader from "../components/preloader/Preloader";
+
+interface PreloaderProps{
+  setPreloaderVisible: (preloaderVisible: boolean) => void;
+  setPreloaderText: (preloaderText: string) => void;
+}
+
+export const PreloaderContext = createContext<PreloaderProps>({
+  setPreloaderVisible: () => {},
+  setPreloaderText: () => {},
+});
+
+export function PreloaderProvider({ children }){
+  const [visible, setVisible] = useState<boolean>(true);
+  const [text, setText] = useState<string>('Страница загружается');
+
+  function setPreloaderVisible(preloaderVisible: boolean){
+    setVisible(preloaderVisible);
+  }
+
+  function setPreloaderText(preloaderText: string){
+    setText(preloaderText);
+  }
+
+  let value = {
+    setPreloaderVisible: setPreloaderVisible,
+    setPreloaderText: setPreloaderText
+  }
+
+  return (
+    <PreloaderContext.Provider value={value}>
+      <Preloader
+        visible={visible}
+        text={text}
+      />
+      {children}
+    </PreloaderContext.Provider>
+  )
+}