Compare commits
4 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 8a371d05b0 | |||
| ef388bfa2a | |||
| 184629d15b | |||
| 1cdc04e8ef |
@@ -0,0 +1,48 @@
|
|||||||
|
<?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);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,15 @@
|
|||||||
|
<?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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@@ -0,0 +1,39 @@
|
|||||||
|
<?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);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
@@ -0,0 +1,30 @@
|
|||||||
|
<?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
|
||||||
|
{
|
||||||
|
//
|
||||||
|
}
|
||||||
|
}
|
||||||
+2
-2
@@ -74,8 +74,8 @@ return [
|
|||||||
|
|
||||||
'redis' => [
|
'redis' => [
|
||||||
'driver' => 'redis',
|
'driver' => 'redis',
|
||||||
'connection' => env('REDIS_CACHE_CONNECTION', 'cache'),
|
'connection' => 'cache',
|
||||||
'lock_connection' => env('REDIS_CACHE_LOCK_CONNECTION', 'default'),
|
'lock_connection' => 'default',
|
||||||
],
|
],
|
||||||
|
|
||||||
'dynamodb' => [
|
'dynamodb' => [
|
||||||
|
|||||||
+22
-12
@@ -138,7 +138,7 @@ return [
|
|||||||
|
|
|
|
||||||
| Redis is an open source, fast, and advanced key-value store that also
|
| 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
|
| provides a richer body of commands than a typical key-value system
|
||||||
| such as Memcached. You may define your connection settings here.
|
| such as APC or Memcached. Laravel makes it easy to dig right in.
|
||||||
|
|
|
|
||||||
*/
|
*/
|
||||||
|
|
||||||
@@ -148,8 +148,9 @@ return [
|
|||||||
|
|
||||||
'options' => [
|
'options' => [
|
||||||
'cluster' => env('REDIS_CLUSTER', 'redis'),
|
'cluster' => env('REDIS_CLUSTER', 'redis'),
|
||||||
'prefix' => env('REDIS_PREFIX', Str::slug((string) env('APP_NAME', 'laravel')).'-database-'),
|
//'prefix' => env('REDIS_PREFIX', Str::slug(env('APP_NAME', 'laravel'), '_').'_database_'),
|
||||||
'persistent' => env('REDIS_PERSISTENT', false),
|
//Нижний прочерк нужен, чтобы отделить платформу_модуль от сущность:id:значение. Если после нижнего прочерка ничего нет, значение было установлено из "корня" платформы
|
||||||
|
'prefix' => env('REDIS_PREFIX', 'uknown|'),
|
||||||
],
|
],
|
||||||
|
|
||||||
'default' => [
|
'default' => [
|
||||||
@@ -159,10 +160,6 @@ return [
|
|||||||
'password' => env('REDIS_PASSWORD'),
|
'password' => env('REDIS_PASSWORD'),
|
||||||
'port' => env('REDIS_PORT', '6379'),
|
'port' => env('REDIS_PORT', '6379'),
|
||||||
'database' => env('REDIS_DB', '0'),
|
'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' => [
|
'cache' => [
|
||||||
@@ -171,13 +168,26 @@ return [
|
|||||||
'username' => env('REDIS_USERNAME'),
|
'username' => env('REDIS_USERNAME'),
|
||||||
'password' => env('REDIS_PASSWORD'),
|
'password' => env('REDIS_PASSWORD'),
|
||||||
'port' => env('REDIS_PORT', '6379'),
|
'port' => env('REDIS_PORT', '6379'),
|
||||||
'database' => env('REDIS_CACHE_DB', '1'),
|
'database' => '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',
|
||||||
|
],
|
||||||
],
|
],
|
||||||
|
|
||||||
];
|
];
|
||||||
|
|||||||
+22
-40
@@ -7,25 +7,24 @@ return [
|
|||||||
| Default Queue Connection Name
|
| Default Queue Connection Name
|
||||||
|--------------------------------------------------------------------------
|
|--------------------------------------------------------------------------
|
||||||
|
|
|
|
||||||
| Laravel's queue supports a variety of backends via a single, unified
|
| Laravel's queue API supports an assortment of back-ends via a single
|
||||||
| API, giving you convenient access to each backend using identical
|
| API, giving you convenient access to each back-end using the same
|
||||||
| syntax for each. The default queue connection is defined below.
|
| syntax for every one. Here you may define a default connection.
|
||||||
|
|
|
|
||||||
*/
|
*/
|
||||||
|
|
||||||
'default' => env('QUEUE_CONNECTION', 'database'),
|
'default' => env('QUEUE_CONNECTION', 'sync'),
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|--------------------------------------------------------------------------
|
|--------------------------------------------------------------------------
|
||||||
| Queue Connections
|
| Queue Connections
|
||||||
|--------------------------------------------------------------------------
|
|--------------------------------------------------------------------------
|
||||||
|
|
|
|
||||||
| Here you may configure the connection options for every queue backend
|
| Here you may configure the connection information for each server that
|
||||||
| used by your application. An example configuration is provided for
|
| is used by your application. A default configuration has been added
|
||||||
| each backend supported by Laravel. You're also free to add more.
|
| for each back-end shipped with Laravel. You are free to add more.
|
||||||
|
|
|
|
||||||
| Drivers: "sync", "database", "beanstalkd", "sqs", "redis",
|
| Drivers: "sync", "database", "beanstalkd", "sqs", "redis", "null"
|
||||||
| "deferred", "background", "failover", "null"
|
|
||||||
|
|
|
|
||||||
*/
|
*/
|
||||||
|
|
||||||
@@ -37,18 +36,17 @@ return [
|
|||||||
|
|
||||||
'database' => [
|
'database' => [
|
||||||
'driver' => 'database',
|
'driver' => 'database',
|
||||||
'connection' => env('DB_QUEUE_CONNECTION'),
|
'table' => 'jobs',
|
||||||
'table' => env('DB_QUEUE_TABLE', 'jobs'),
|
'queue' => 'default',
|
||||||
'queue' => env('DB_QUEUE', 'default'),
|
'retry_after' => 90,
|
||||||
'retry_after' => (int) env('DB_QUEUE_RETRY_AFTER', 90),
|
|
||||||
'after_commit' => false,
|
'after_commit' => false,
|
||||||
],
|
],
|
||||||
|
|
||||||
'beanstalkd' => [
|
'beanstalkd' => [
|
||||||
'driver' => 'beanstalkd',
|
'driver' => 'beanstalkd',
|
||||||
'host' => env('BEANSTALKD_QUEUE_HOST', 'localhost'),
|
'host' => 'localhost',
|
||||||
'queue' => env('BEANSTALKD_QUEUE', 'default'),
|
'queue' => 'default',
|
||||||
'retry_after' => (int) env('BEANSTALKD_QUEUE_RETRY_AFTER', 90),
|
'retry_after' => 90,
|
||||||
'block_for' => 0,
|
'block_for' => 0,
|
||||||
'after_commit' => false,
|
'after_commit' => false,
|
||||||
],
|
],
|
||||||
@@ -64,31 +62,17 @@ return [
|
|||||||
'after_commit' => false,
|
'after_commit' => false,
|
||||||
],
|
],
|
||||||
|
|
||||||
|
#Гаврилов
|
||||||
|
//ЗАЧЕМ ЭТОТ КОНФИГ? В .ENV НЕТ ПАРАМЕТРА REDIS_QUEUE
|
||||||
'redis' => [
|
'redis' => [
|
||||||
'driver' => 'redis',
|
'driver' => 'redis',
|
||||||
'connection' => env('REDIS_QUEUE_CONNECTION', 'default'),
|
'connection' => 'default',
|
||||||
'queue' => env('REDIS_QUEUE', 'default'),
|
'queue' => env('REDIS_QUEUE', 'default'),
|
||||||
'retry_after' => (int) env('REDIS_QUEUE_RETRY_AFTER', 90),
|
'retry_after' => 90,
|
||||||
'block_for' => null,
|
'block_for' => null,
|
||||||
'after_commit' => false,
|
'after_commit' => false,
|
||||||
],
|
],
|
||||||
|
|
||||||
'deferred' => [
|
|
||||||
'driver' => 'deferred',
|
|
||||||
],
|
|
||||||
|
|
||||||
'background' => [
|
|
||||||
'driver' => 'background',
|
|
||||||
],
|
|
||||||
|
|
||||||
'failover' => [
|
|
||||||
'driver' => 'failover',
|
|
||||||
'connections' => [
|
|
||||||
'database',
|
|
||||||
'deferred',
|
|
||||||
],
|
|
||||||
],
|
|
||||||
|
|
||||||
],
|
],
|
||||||
|
|
||||||
/*
|
/*
|
||||||
@@ -103,7 +87,7 @@ return [
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
'batching' => [
|
'batching' => [
|
||||||
'database' => env('DB_CONNECTION', 'sqlite'),
|
'database' => env('DB_CONNECTION', 'mysql'),
|
||||||
'table' => 'job_batches',
|
'table' => 'job_batches',
|
||||||
],
|
],
|
||||||
|
|
||||||
@@ -113,16 +97,14 @@ return [
|
|||||||
|--------------------------------------------------------------------------
|
|--------------------------------------------------------------------------
|
||||||
|
|
|
|
||||||
| These options configure the behavior of failed queue job logging so you
|
| These options configure the behavior of failed queue job logging so you
|
||||||
| can control how and where failed jobs are stored. Laravel ships with
|
| can control which database and table are used to store the jobs that
|
||||||
| support for storing failed jobs in a simple file or in a database.
|
| have failed. You may change them to any database / table you wish.
|
||||||
|
|
|
||||||
| Supported drivers: "database-uuids", "dynamodb", "file", "null"
|
|
||||||
|
|
|
|
||||||
*/
|
*/
|
||||||
|
|
||||||
'failed' => [
|
'failed' => [
|
||||||
'driver' => env('QUEUE_FAILED_DRIVER', 'database-uuids'),
|
'driver' => env('QUEUE_FAILED_DRIVER', 'database-uuids'),
|
||||||
'database' => env('DB_CONNECTION', 'sqlite'),
|
'database' => env('DB_CONNECTION', 'mysql'),
|
||||||
'table' => 'failed_jobs',
|
'table' => 'failed_jobs',
|
||||||
],
|
],
|
||||||
|
|
||||||
|
|||||||
@@ -1,173 +0,0 @@
|
|||||||
@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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,39 +0,0 @@
|
|||||||
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
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,40 +0,0 @@
|
|||||||
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>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user