Compare commits
5 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 469ebc8aaf | |||
| d53a9e6274 | |||
| ec04ae8d69 | |||
| feb2b840eb | |||
| 9766a1afad |
@@ -0,0 +1,30 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
namespace App\Exceptions;
|
||||||
|
|
||||||
|
use Illuminate\Foundation\Exceptions\Handler as ExceptionHandler;
|
||||||
|
use Throwable;
|
||||||
|
|
||||||
|
class Handler extends ExceptionHandler
|
||||||
|
{
|
||||||
|
/**
|
||||||
|
* The list of the inputs that are never flashed to the session on validation exceptions.
|
||||||
|
*
|
||||||
|
* @var array<int, string>
|
||||||
|
*/
|
||||||
|
protected $dontFlash = [
|
||||||
|
'current_password',
|
||||||
|
'password',
|
||||||
|
'password_confirmation',
|
||||||
|
];
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Register the exception handling callbacks for the application.
|
||||||
|
*/
|
||||||
|
public function register(): void
|
||||||
|
{
|
||||||
|
$this->reportable(function (Throwable $e) {
|
||||||
|
//
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,40 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
namespace App\Providers;
|
||||||
|
|
||||||
|
use Illuminate\Cache\RateLimiting\Limit;
|
||||||
|
use Illuminate\Foundation\Support\Providers\RouteServiceProvider as ServiceProvider;
|
||||||
|
use Illuminate\Http\Request;
|
||||||
|
use Illuminate\Support\Facades\RateLimiter;
|
||||||
|
use Illuminate\Support\Facades\Route;
|
||||||
|
|
||||||
|
class RouteServiceProvider extends ServiceProvider
|
||||||
|
{
|
||||||
|
/**
|
||||||
|
* The path to your application's "home" route.
|
||||||
|
*
|
||||||
|
* Typically, users are redirected here after authentication.
|
||||||
|
*
|
||||||
|
* @var string
|
||||||
|
*/
|
||||||
|
public const HOME = '/home';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Define your route model bindings, pattern filters, and other route configuration.
|
||||||
|
*/
|
||||||
|
public function boot(): void
|
||||||
|
{
|
||||||
|
RateLimiter::for('api', function (Request $request) {
|
||||||
|
return Limit::perMinute(60)->by($request->user()?->id ?: $request->ip());
|
||||||
|
});
|
||||||
|
|
||||||
|
$this->routes(function () {
|
||||||
|
Route::middleware('api')
|
||||||
|
->prefix('api')
|
||||||
|
->group(base_path('routes/api.php'));
|
||||||
|
|
||||||
|
Route::middleware('web')
|
||||||
|
->group(base_path('routes/web.php'));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -123,11 +123,4 @@ return [
|
|||||||
'store' => env('APP_MAINTENANCE_STORE', 'database'),
|
'store' => env('APP_MAINTENANCE_STORE', 'database'),
|
||||||
],
|
],
|
||||||
|
|
||||||
//Типы всплывающих уведомлений, использующихся на фронте. От типа зависит внешний вид уведомления и некоторые другие параметры. Прописаны в resources/js/components/MagicPopup.tsx
|
|
||||||
'FRONT_notification_types' => [
|
|
||||||
'info',
|
|
||||||
'success',
|
|
||||||
'error',
|
|
||||||
'attention'
|
|
||||||
]
|
|
||||||
];
|
];
|
||||||
|
|||||||
@@ -0,0 +1,71 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
return [
|
||||||
|
|
||||||
|
/*
|
||||||
|
|--------------------------------------------------------------------------
|
||||||
|
| Default Broadcaster
|
||||||
|
|--------------------------------------------------------------------------
|
||||||
|
|
|
||||||
|
| This option controls the default broadcaster that will be used by the
|
||||||
|
| framework when an event needs to be broadcast. You may set this to
|
||||||
|
| any of the connections defined in the "connections" array below.
|
||||||
|
|
|
||||||
|
| Supported: "pusher", "ably", "redis", "log", "null"
|
||||||
|
|
|
||||||
|
*/
|
||||||
|
|
||||||
|
'default' => env('BROADCAST_DRIVER', 'null'),
|
||||||
|
|
||||||
|
/*
|
||||||
|
|--------------------------------------------------------------------------
|
||||||
|
| Broadcast Connections
|
||||||
|
|--------------------------------------------------------------------------
|
||||||
|
|
|
||||||
|
| Here you may define all of the broadcast connections that will be used
|
||||||
|
| to broadcast events to other systems or over websockets. Samples of
|
||||||
|
| each available type of connection are provided inside this array.
|
||||||
|
|
|
||||||
|
*/
|
||||||
|
|
||||||
|
'connections' => [
|
||||||
|
|
||||||
|
'pusher' => [
|
||||||
|
'driver' => 'pusher',
|
||||||
|
'key' => env('PUSHER_APP_KEY'),
|
||||||
|
'secret' => env('PUSHER_APP_SECRET'),
|
||||||
|
'app_id' => env('PUSHER_APP_ID'),
|
||||||
|
'options' => [
|
||||||
|
'cluster' => env('PUSHER_APP_CLUSTER'),
|
||||||
|
'host' => env('PUSHER_HOST') ?: 'api-'.env('PUSHER_APP_CLUSTER', 'mt1').'.pusher.com',
|
||||||
|
'port' => env('PUSHER_PORT', 443),
|
||||||
|
'scheme' => env('PUSHER_SCHEME', 'https'),
|
||||||
|
'encrypted' => true,
|
||||||
|
'useTLS' => env('PUSHER_SCHEME', 'https') === 'https',
|
||||||
|
],
|
||||||
|
'client_options' => [
|
||||||
|
// Guzzle client options: https://docs.guzzlephp.org/en/stable/request-options.html
|
||||||
|
],
|
||||||
|
],
|
||||||
|
|
||||||
|
'ably' => [
|
||||||
|
'driver' => 'ably',
|
||||||
|
'key' => env('ABLY_KEY'),
|
||||||
|
],
|
||||||
|
|
||||||
|
'redis' => [
|
||||||
|
'driver' => 'redis',
|
||||||
|
'connection' => 'default',
|
||||||
|
],
|
||||||
|
|
||||||
|
'log' => [
|
||||||
|
'driver' => 'log',
|
||||||
|
],
|
||||||
|
|
||||||
|
'null' => [
|
||||||
|
'driver' => 'null',
|
||||||
|
],
|
||||||
|
|
||||||
|
],
|
||||||
|
|
||||||
|
];
|
||||||
@@ -0,0 +1,34 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
return [
|
||||||
|
|
||||||
|
/*
|
||||||
|
|--------------------------------------------------------------------------
|
||||||
|
| Cross-Origin Resource Sharing (CORS) Configuration
|
||||||
|
|--------------------------------------------------------------------------
|
||||||
|
|
|
||||||
|
| Here you may configure your settings for cross-origin resource sharing
|
||||||
|
| or "CORS". This determines what cross-origin operations may execute
|
||||||
|
| in web browsers. You are free to adjust these settings as needed.
|
||||||
|
|
|
||||||
|
| To learn more: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
|
||||||
|
|
|
||||||
|
*/
|
||||||
|
|
||||||
|
'paths' => ['api/*', 'sanctum/csrf-cookie'],
|
||||||
|
|
||||||
|
'allowed_methods' => ['*'],
|
||||||
|
|
||||||
|
'allowed_origins' => ['*'],
|
||||||
|
|
||||||
|
'allowed_origins_patterns' => [],
|
||||||
|
|
||||||
|
'allowed_headers' => ['*'],
|
||||||
|
|
||||||
|
'exposed_headers' => [],
|
||||||
|
|
||||||
|
'max_age' => 0,
|
||||||
|
|
||||||
|
'supports_credentials' => false,
|
||||||
|
|
||||||
|
];
|
||||||
@@ -0,0 +1,20 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
return [
|
||||||
|
|
||||||
|
/*
|
||||||
|
|--------------------------------------------------------------------------
|
||||||
|
| Authentication Language Lines
|
||||||
|
|--------------------------------------------------------------------------
|
||||||
|
|
|
||||||
|
| The following language lines are used during authentication for various
|
||||||
|
| messages that we need to display to the user. You are free to modify
|
||||||
|
| these language lines according to your application's requirements.
|
||||||
|
|
|
||||||
|
*/
|
||||||
|
|
||||||
|
'failed' => 'These credentials do not match our records.',
|
||||||
|
'password' => 'The provided password is incorrect.',
|
||||||
|
'throttle' => 'Too many login attempts. Please try again in :seconds seconds.',
|
||||||
|
|
||||||
|
];
|
||||||
@@ -0,0 +1,19 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
return [
|
||||||
|
|
||||||
|
/*
|
||||||
|
|--------------------------------------------------------------------------
|
||||||
|
| Pagination Language Lines
|
||||||
|
|--------------------------------------------------------------------------
|
||||||
|
|
|
||||||
|
| The following language lines are used by the paginator library to build
|
||||||
|
| the simple pagination links. You are free to change them to anything
|
||||||
|
| you want to customize your views to better match your application.
|
||||||
|
|
|
||||||
|
*/
|
||||||
|
|
||||||
|
'previous' => '« Previous',
|
||||||
|
'next' => 'Next »',
|
||||||
|
|
||||||
|
];
|
||||||
@@ -0,0 +1,22 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
return [
|
||||||
|
|
||||||
|
/*
|
||||||
|
|--------------------------------------------------------------------------
|
||||||
|
| Password Reset Language Lines
|
||||||
|
|--------------------------------------------------------------------------
|
||||||
|
|
|
||||||
|
| The following language lines are the default lines which match reasons
|
||||||
|
| that are given by the password broker for a password update attempt
|
||||||
|
| has failed, such as for an invalid token or invalid new password.
|
||||||
|
|
|
||||||
|
*/
|
||||||
|
|
||||||
|
'reset' => 'Your password has been reset.',
|
||||||
|
'sent' => 'We have emailed your password reset link.',
|
||||||
|
'throttled' => 'Please wait before retrying.',
|
||||||
|
'token' => 'This password reset token is invalid.',
|
||||||
|
'user' => "We can't find a user with that email address.",
|
||||||
|
|
||||||
|
];
|
||||||
@@ -0,0 +1,191 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
return [
|
||||||
|
|
||||||
|
/*
|
||||||
|
|--------------------------------------------------------------------------
|
||||||
|
| Validation Language Lines
|
||||||
|
|--------------------------------------------------------------------------
|
||||||
|
|
|
||||||
|
| The following language lines contain the default error messages used by
|
||||||
|
| the validator class. Some of these rules have multiple versions such
|
||||||
|
| as the size rules. Feel free to tweak each of these messages here.
|
||||||
|
|
|
||||||
|
*/
|
||||||
|
|
||||||
|
'accepted' => 'The :attribute field must be accepted.',
|
||||||
|
'accepted_if' => 'The :attribute field must be accepted when :other is :value.',
|
||||||
|
'active_url' => 'The :attribute field must be a valid URL.',
|
||||||
|
'after' => 'The :attribute field must be a date after :date.',
|
||||||
|
'after_or_equal' => 'The :attribute field must be a date after or equal to :date.',
|
||||||
|
'alpha' => 'The :attribute field must only contain letters.',
|
||||||
|
'alpha_dash' => 'The :attribute field must only contain letters, numbers, dashes, and underscores.',
|
||||||
|
'alpha_num' => 'The :attribute field must only contain letters and numbers.',
|
||||||
|
'array' => 'The :attribute field must be an array.',
|
||||||
|
'ascii' => 'The :attribute field must only contain single-byte alphanumeric characters and symbols.',
|
||||||
|
'before' => 'The :attribute field must be a date before :date.',
|
||||||
|
'before_or_equal' => 'The :attribute field must be a date before or equal to :date.',
|
||||||
|
'between' => [
|
||||||
|
'array' => 'The :attribute field must have between :min and :max items.',
|
||||||
|
'file' => 'The :attribute field must be between :min and :max kilobytes.',
|
||||||
|
'numeric' => 'The :attribute field must be between :min and :max.',
|
||||||
|
'string' => 'The :attribute field must be between :min and :max characters.',
|
||||||
|
],
|
||||||
|
'boolean' => 'The :attribute field must be true or false.',
|
||||||
|
'can' => 'The :attribute field contains an unauthorized value.',
|
||||||
|
'confirmed' => 'The :attribute field confirmation does not match.',
|
||||||
|
'current_password' => 'The password is incorrect.',
|
||||||
|
'date' => 'The :attribute field must be a valid date.',
|
||||||
|
'date_equals' => 'The :attribute field must be a date equal to :date.',
|
||||||
|
'date_format' => 'The :attribute field must match the format :format.',
|
||||||
|
'decimal' => 'The :attribute field must have :decimal decimal places.',
|
||||||
|
'declined' => 'The :attribute field must be declined.',
|
||||||
|
'declined_if' => 'The :attribute field must be declined when :other is :value.',
|
||||||
|
'different' => 'The :attribute field and :other must be different.',
|
||||||
|
'digits' => 'The :attribute field must be :digits digits.',
|
||||||
|
'digits_between' => 'The :attribute field must be between :min and :max digits.',
|
||||||
|
'dimensions' => 'The :attribute field has invalid image dimensions.',
|
||||||
|
'distinct' => 'The :attribute field has a duplicate value.',
|
||||||
|
'doesnt_end_with' => 'The :attribute field must not end with one of the following: :values.',
|
||||||
|
'doesnt_start_with' => 'The :attribute field must not start with one of the following: :values.',
|
||||||
|
'email' => 'The :attribute field must be a valid email address.',
|
||||||
|
'ends_with' => 'The :attribute field must end with one of the following: :values.',
|
||||||
|
'enum' => 'The selected :attribute is invalid.',
|
||||||
|
'exists' => 'The selected :attribute is invalid.',
|
||||||
|
'extensions' => 'The :attribute field must have one of the following extensions: :values.',
|
||||||
|
'file' => 'The :attribute field must be a file.',
|
||||||
|
'filled' => 'The :attribute field must have a value.',
|
||||||
|
'gt' => [
|
||||||
|
'array' => 'The :attribute field must have more than :value items.',
|
||||||
|
'file' => 'The :attribute field must be greater than :value kilobytes.',
|
||||||
|
'numeric' => 'The :attribute field must be greater than :value.',
|
||||||
|
'string' => 'The :attribute field must be greater than :value characters.',
|
||||||
|
],
|
||||||
|
'gte' => [
|
||||||
|
'array' => 'The :attribute field must have :value items or more.',
|
||||||
|
'file' => 'The :attribute field must be greater than or equal to :value kilobytes.',
|
||||||
|
'numeric' => 'The :attribute field must be greater than or equal to :value.',
|
||||||
|
'string' => 'The :attribute field must be greater than or equal to :value characters.',
|
||||||
|
],
|
||||||
|
'hex_color' => 'The :attribute field must be a valid hexadecimal color.',
|
||||||
|
'image' => 'The :attribute field must be an image.',
|
||||||
|
'in' => 'The selected :attribute is invalid.',
|
||||||
|
'in_array' => 'The :attribute field must exist in :other.',
|
||||||
|
'integer' => 'The :attribute field must be an integer.',
|
||||||
|
'ip' => 'The :attribute field must be a valid IP address.',
|
||||||
|
'ipv4' => 'The :attribute field must be a valid IPv4 address.',
|
||||||
|
'ipv6' => 'The :attribute field must be a valid IPv6 address.',
|
||||||
|
'json' => 'The :attribute field must be a valid JSON string.',
|
||||||
|
'lowercase' => 'The :attribute field must be lowercase.',
|
||||||
|
'lt' => [
|
||||||
|
'array' => 'The :attribute field must have less than :value items.',
|
||||||
|
'file' => 'The :attribute field must be less than :value kilobytes.',
|
||||||
|
'numeric' => 'The :attribute field must be less than :value.',
|
||||||
|
'string' => 'The :attribute field must be less than :value characters.',
|
||||||
|
],
|
||||||
|
'lte' => [
|
||||||
|
'array' => 'The :attribute field must not have more than :value items.',
|
||||||
|
'file' => 'The :attribute field must be less than or equal to :value kilobytes.',
|
||||||
|
'numeric' => 'The :attribute field must be less than or equal to :value.',
|
||||||
|
'string' => 'The :attribute field must be less than or equal to :value characters.',
|
||||||
|
],
|
||||||
|
'mac_address' => 'The :attribute field must be a valid MAC address.',
|
||||||
|
'max' => [
|
||||||
|
'array' => 'The :attribute field must not have more than :max items.',
|
||||||
|
'file' => 'The :attribute field must not be greater than :max kilobytes.',
|
||||||
|
'numeric' => 'The :attribute field must not be greater than :max.',
|
||||||
|
'string' => 'The :attribute field must not be greater than :max characters.',
|
||||||
|
],
|
||||||
|
'max_digits' => 'The :attribute field must not have more than :max digits.',
|
||||||
|
'mimes' => 'The :attribute field must be a file of type: :values.',
|
||||||
|
'mimetypes' => 'The :attribute field must be a file of type: :values.',
|
||||||
|
'min' => [
|
||||||
|
'array' => 'The :attribute field must have at least :min items.',
|
||||||
|
'file' => 'The :attribute field must be at least :min kilobytes.',
|
||||||
|
'numeric' => 'The :attribute field must be at least :min.',
|
||||||
|
'string' => 'The :attribute field must be at least :min characters.',
|
||||||
|
],
|
||||||
|
'min_digits' => 'The :attribute field must have at least :min digits.',
|
||||||
|
'missing' => 'The :attribute field must be missing.',
|
||||||
|
'missing_if' => 'The :attribute field must be missing when :other is :value.',
|
||||||
|
'missing_unless' => 'The :attribute field must be missing unless :other is :value.',
|
||||||
|
'missing_with' => 'The :attribute field must be missing when :values is present.',
|
||||||
|
'missing_with_all' => 'The :attribute field must be missing when :values are present.',
|
||||||
|
'multiple_of' => 'The :attribute field must be a multiple of :value.',
|
||||||
|
'not_in' => 'The selected :attribute is invalid.',
|
||||||
|
'not_regex' => 'The :attribute field format is invalid.',
|
||||||
|
'numeric' => 'The :attribute field must be a number.',
|
||||||
|
'password' => [
|
||||||
|
'letters' => 'The :attribute field must contain at least one letter.',
|
||||||
|
'mixed' => 'The :attribute field must contain at least one uppercase and one lowercase letter.',
|
||||||
|
'numbers' => 'The :attribute field must contain at least one number.',
|
||||||
|
'symbols' => 'The :attribute field must contain at least one symbol.',
|
||||||
|
'uncompromised' => 'The given :attribute has appeared in a data leak. Please choose a different :attribute.',
|
||||||
|
],
|
||||||
|
'present' => 'The :attribute field must be present.',
|
||||||
|
'present_if' => 'The :attribute field must be present when :other is :value.',
|
||||||
|
'present_unless' => 'The :attribute field must be present unless :other is :value.',
|
||||||
|
'present_with' => 'The :attribute field must be present when :values is present.',
|
||||||
|
'present_with_all' => 'The :attribute field must be present when :values are present.',
|
||||||
|
'prohibited' => 'The :attribute field is prohibited.',
|
||||||
|
'prohibited_if' => 'The :attribute field is prohibited when :other is :value.',
|
||||||
|
'prohibited_unless' => 'The :attribute field is prohibited unless :other is in :values.',
|
||||||
|
'prohibits' => 'The :attribute field prohibits :other from being present.',
|
||||||
|
'regex' => 'The :attribute field format is invalid.',
|
||||||
|
'required' => 'The :attribute field is required.',
|
||||||
|
'required_array_keys' => 'The :attribute field must contain entries for: :values.',
|
||||||
|
'required_if' => 'The :attribute field is required when :other is :value.',
|
||||||
|
'required_if_accepted' => 'The :attribute field is required when :other is accepted.',
|
||||||
|
'required_unless' => 'The :attribute field is required unless :other is in :values.',
|
||||||
|
'required_with' => 'The :attribute field is required when :values is present.',
|
||||||
|
'required_with_all' => 'The :attribute field is required when :values are present.',
|
||||||
|
'required_without' => 'The :attribute field is required when :values is not present.',
|
||||||
|
'required_without_all' => 'The :attribute field is required when none of :values are present.',
|
||||||
|
'same' => 'The :attribute field must match :other.',
|
||||||
|
'size' => [
|
||||||
|
'array' => 'The :attribute field must contain :size items.',
|
||||||
|
'file' => 'The :attribute field must be :size kilobytes.',
|
||||||
|
'numeric' => 'The :attribute field must be :size.',
|
||||||
|
'string' => 'The :attribute field must be :size characters.',
|
||||||
|
],
|
||||||
|
'starts_with' => 'The :attribute field must start with one of the following: :values.',
|
||||||
|
'string' => 'The :attribute field must be a string.',
|
||||||
|
'timezone' => 'The :attribute field must be a valid timezone.',
|
||||||
|
'unique' => 'The :attribute has already been taken.',
|
||||||
|
'uploaded' => 'The :attribute failed to upload.',
|
||||||
|
'uppercase' => 'The :attribute field must be uppercase.',
|
||||||
|
'url' => 'The :attribute field must be a valid URL.',
|
||||||
|
'ulid' => 'The :attribute field must be a valid ULID.',
|
||||||
|
'uuid' => 'The :attribute field must be a valid UUID.',
|
||||||
|
|
||||||
|
/*
|
||||||
|
|--------------------------------------------------------------------------
|
||||||
|
| Custom Validation Language Lines
|
||||||
|
|--------------------------------------------------------------------------
|
||||||
|
|
|
||||||
|
| Here you may specify custom validation messages for attributes using the
|
||||||
|
| convention "attribute.rule" to name the lines. This makes it quick to
|
||||||
|
| specify a specific custom language line for a given attribute rule.
|
||||||
|
|
|
||||||
|
*/
|
||||||
|
|
||||||
|
'custom' => [
|
||||||
|
'attribute-name' => [
|
||||||
|
'rule-name' => 'custom-message',
|
||||||
|
],
|
||||||
|
],
|
||||||
|
|
||||||
|
/*
|
||||||
|
|--------------------------------------------------------------------------
|
||||||
|
| Custom Validation Attributes
|
||||||
|
|--------------------------------------------------------------------------
|
||||||
|
|
|
||||||
|
| The following language lines are used to swap our attribute placeholder
|
||||||
|
| with something more reader friendly such as "E-Mail Address" instead
|
||||||
|
| of "email". This simply helps us make our message more expressive.
|
||||||
|
|
|
||||||
|
*/
|
||||||
|
|
||||||
|
'attributes' => [],
|
||||||
|
|
||||||
|
];
|
||||||
@@ -1,8 +0,0 @@
|
|||||||
#popup-parent-container{
|
|
||||||
padding: 10px;
|
|
||||||
top: 150px;
|
|
||||||
z-index: 901;
|
|
||||||
position: fixed;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, -50px);
|
|
||||||
}
|
|
||||||
@@ -1,104 +0,0 @@
|
|||||||
@import url('./../variables.css');
|
|
||||||
@import '@fortawesome/fontawesome-free/css/all.css';
|
|
||||||
|
|
||||||
/* Анимация таймера popup, по истечению которого он скроется */
|
|
||||||
@keyframes popupTimer {
|
|
||||||
from{
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
width: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.magic-popup-container{
|
|
||||||
padding: 5px;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
border-radius: 5px;
|
|
||||||
display: flex;
|
|
||||||
box-shadow: 0px 3px 4px 1px #918787;
|
|
||||||
background: var(--color_graphite_main);
|
|
||||||
width: 500px;
|
|
||||||
transition: 0.3s;
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateY(-10px);
|
|
||||||
|
|
||||||
&.hide{
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.show{
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateY(0px);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.hidePopup{
|
|
||||||
transform: translateY(10px);
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&>.popup__icon-block{
|
|
||||||
flex-basis: 10%;
|
|
||||||
align-self: center;
|
|
||||||
|
|
||||||
&>i{
|
|
||||||
font-size: 4rem;
|
|
||||||
color: var(--color_purple_main);
|
|
||||||
|
|
||||||
&.fa-circle-check{
|
|
||||||
color: var(--color_emerald_main);
|
|
||||||
}
|
|
||||||
&.fa-circle-xmark{
|
|
||||||
color: var(--color_ruby_main);
|
|
||||||
}
|
|
||||||
&.fa-circle-exclamation{
|
|
||||||
color: orange;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&>.popup__content-block{
|
|
||||||
flex-basis: 90%;
|
|
||||||
border-left: 2px solid white;
|
|
||||||
|
|
||||||
&>.popup__content__text-block{
|
|
||||||
color: white;
|
|
||||||
padding: 5px;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 1.2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
&>.popup__button-block{
|
|
||||||
margin: 10px 0;
|
|
||||||
|
|
||||||
&>button{
|
|
||||||
font-size: 1rem;
|
|
||||||
margin: auto;
|
|
||||||
opacity: 0.5;
|
|
||||||
background: var(--color_purple_main);
|
|
||||||
transition: 0.3s;
|
|
||||||
|
|
||||||
&:hover{
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.popup__timer-block__timer{
|
|
||||||
|
|
||||||
&.popup__timer-block__timer {
|
|
||||||
height: 5px;
|
|
||||||
margin: 0 5px;
|
|
||||||
border-radius: 10px;
|
|
||||||
|
|
||||||
&.timerProgress{
|
|
||||||
background: #63707a;
|
|
||||||
animation: popupTimer;
|
|
||||||
animation-duration: 3s;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
animation-timing-function: linear;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,108 +0,0 @@
|
|||||||
import React, { useEffect, useState } from "react";
|
|
||||||
import './../../css/components/magicPopup.css';
|
|
||||||
import { Button } from '@SharePoint/rencredit_uikit';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Компонент всплывающего окна
|
|
||||||
*/
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Варианты типов для всплывающих окон: info - стандартный вид, error - произошла ошибка, attention - обратить внимание, success - успешное событие
|
|
||||||
*/
|
|
||||||
type PopupType = 'info' | 'success' | 'error' | 'attention';
|
|
||||||
|
|
||||||
//Интерфейс для передаваемых пропсов объекта всплывающего окна
|
|
||||||
interface MagicPopupProps {
|
|
||||||
key: number,
|
|
||||||
id: number, //Уникальный идентификатор, по котором всплывающее окно будет в том числе размонтироваться
|
|
||||||
message: string, //Текст всплывающего окна
|
|
||||||
renderIndex: number, //Индекс рендеринга компонента. Так как может отрисовываться сразу несколько popup, чтобы корректно их отрисовывать с анимацией с задержкой по времени, нужно передавать индекс компонента в наборе. Передавать "вручную" не нужно, он сам рассчитывается в компоненте MagicPopupContainer
|
|
||||||
type: PopupType, //Тип всплывающего окна, определяющий его внешний вид
|
|
||||||
timeOut?: boolean, //Если передается true, для элемента будет запущен стандартный таймер исчезновения. ВАЖНО! для всплывающих окон типа error таймер не будет активироваться, даже если передается. Пользователь должен гарантированно ознакомиться с сообщением и сам его закрыть
|
|
||||||
onClose?: (id: number) => void //Колбэк для полного размонтирования компонента со страницы
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Компонент всплывающих окон
|
|
||||||
* @param props
|
|
||||||
* @returns
|
|
||||||
*/
|
|
||||||
export default function MagicPopup (props: MagicPopupProps)
|
|
||||||
{
|
|
||||||
//Объект с классами для иконок font-awesome в зависимости от переданного типа всплывающего окна. При изменении, необходимо поменять названия классов в magicPopup.css!
|
|
||||||
const iconNameObj = {
|
|
||||||
info: 'fa-circle-info',
|
|
||||||
success: 'fa-circle-check',
|
|
||||||
error: 'fa-circle-xmark',
|
|
||||||
attention: 'fa-circle-exclamation'
|
|
||||||
}
|
|
||||||
//С помощью деструктуризации указываем значение типа окна по умолчанию
|
|
||||||
const {message, timeOut = true, onClose} = props;
|
|
||||||
//Задержка исчезновения popup
|
|
||||||
const popupDelay = 300;
|
|
||||||
//Итоговая длительность таймера перед закрытием конкретного popup, учитывая его положение в наборе передаваемых попапов
|
|
||||||
const hideTimeOut: number = 3000 + popupDelay;
|
|
||||||
//Стейт для размонтирования попапа
|
|
||||||
const [popupVisible, setPopupVisible] = useState<boolean>(true)
|
|
||||||
//Стейт для плавного сокрытия popup. Класс плавного сокрытия присваивается за пол секунды до полного исчезновения через popupVisible, чтобы сначала плавно сокрыть блок из интерфейса, а затем полностью удалить его из DOM
|
|
||||||
const [popupHideClass, setPopupHideClass] = useState<string>('popup-visible')
|
|
||||||
//Стейт плавного появления popup. Каждый следующий popup в передаваемом наборе должен появляться с небольшой задержкой
|
|
||||||
const [popupShowClass, setPopupFadeinClass] = useState<string>('');
|
|
||||||
//Стейт запуска анимированного таймера исчезновения popup
|
|
||||||
const [popupTimer, setPopupTimer] = useState<string>('');
|
|
||||||
//Функция сокрытия popup. Сначала присваиваем класс, который анимированно скрывает popup, а через небольшую задержку размонтируем компонент
|
|
||||||
function hidePopupBlock (): void
|
|
||||||
{
|
|
||||||
setPopupHideClass('hidePopup');
|
|
||||||
setTimeout ( () => {
|
|
||||||
setPopupVisible(false);
|
|
||||||
}, 300)
|
|
||||||
//Вызываем метод удаления экземпляра компонента из набора. Так как попапы отрисовываются на основе компонента PopupContainer с набором компонентов MagicPopup, то после их размонтирования, их необходимо и удалить из набора в PopupContainer. Без их удаления, при вызове новых попапов, весь набор с уже просмотренными попапами будет снова отрисовываться.
|
|
||||||
onClose && onClose(props.id)
|
|
||||||
};
|
|
||||||
|
|
||||||
//При рендеринге сразу же запускается таймер сокрытия popup, если аргумент timeOut = true и тип окна != error
|
|
||||||
useEffect( () => {
|
|
||||||
if (timeOut && props.type !== 'error') {
|
|
||||||
setTimeout( () => {
|
|
||||||
//Задержка для отображения таймера нужна, так как при вызове рендеринга нескольких окон, каждое последующее появляется с задержкой. Без задержки ниже, таймер будет запускаться для всех popup одновременно и когда появится последний popup, его таймер уже может закончиться
|
|
||||||
setPopupTimer('timerProgress')
|
|
||||||
}, popupDelay)
|
|
||||||
//Через небольшую задержку после сокрытия компонента срабатывает таймер на размонтирование компонента и удаления его из набора
|
|
||||||
setTimeout( () => {
|
|
||||||
hidePopupBlock()
|
|
||||||
}, hideTimeOut)
|
|
||||||
}
|
|
||||||
//Появление popup при рендеринге
|
|
||||||
setTimeout ( () => {
|
|
||||||
setPopupFadeinClass('show')
|
|
||||||
}, popupDelay)
|
|
||||||
}, [])
|
|
||||||
|
|
||||||
return (
|
|
||||||
popupVisible ?
|
|
||||||
// <div onClick = {hidePopupBlock}>Раз</div>
|
|
||||||
<div className = {`magic-popup-container ${popupHideClass} ${popupShowClass}`} >
|
|
||||||
<div className = 'popup__icon-block'>
|
|
||||||
<i className = {`fa-solid ${iconNameObj[props.type]}`}></i>
|
|
||||||
</div>
|
|
||||||
<div className = "popup__content-block">
|
|
||||||
<div className = 'popup__content__text-block'>
|
|
||||||
{message}
|
|
||||||
</div>
|
|
||||||
<div className = "popup__button-block">
|
|
||||||
<Button
|
|
||||||
type = "button"
|
|
||||||
className = "popup__button-block__button"
|
|
||||||
onClick = {hidePopupBlock}
|
|
||||||
text = "OK"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className = "popup__timer-block">
|
|
||||||
<div className = {`popup__timer-block__timer ${popupTimer}`}></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
: null
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@@ -1,45 +0,0 @@
|
|||||||
import React, { useContext, ComponentProps } from "react";
|
|
||||||
import MagicPopup from "./MagicPopup";
|
|
||||||
import './../../css/components/magicPopupContainer.css';
|
|
||||||
import { PopupContext } from "../contexts/PopupContext";
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Компонент контейнера для всплывающих окон, который вызывается на странице и куда передается массив всплывающих окон
|
|
||||||
*/
|
|
||||||
|
|
||||||
//ГАВРИЛОВ. ЛОГИЧНЕЕ ЭКСПОРТИРОВАТЬ ТИП С ПРОПСАМИ КОМПОНЕНТА ИЗ САМОГО КОМПОНЕНТА MAGICPOPUP?
|
|
||||||
/**
|
|
||||||
* Дополнительный экспорт типа MagicPopup из компонента всплывающего окна для возможности его импорта, в свою очередь, из компонента, собирающего страницу, например TaxiPage TaxiPage
|
|
||||||
*/
|
|
||||||
export type MagicPopupType = ComponentProps<typeof MagicPopup>;
|
|
||||||
/**
|
|
||||||
* Метод рендеринга контейнара для всплывающих окон
|
|
||||||
* @param {array} magicPopupArr массив объектов типа MagicPopup с информацией о всплывающем окне: текст, таймер и т.д.
|
|
||||||
* @param {callable} delHiddenPopupFunc колбэк для закрытия конкретного всплывающего окна по его уникальному идентификатору
|
|
||||||
* @returns ReactNode
|
|
||||||
*/
|
|
||||||
export default function MagicPopupContainer ()
|
|
||||||
{
|
|
||||||
const popupArr = useContext(PopupContext);
|
|
||||||
|
|
||||||
return (
|
|
||||||
//Родительский контейнер для всех всплывающих окон
|
|
||||||
<div id = "popup-parent-container">
|
|
||||||
{/* { magicPopupArr.map( (propsObj: MagicPopupType, index: number) => ( */}
|
|
||||||
{ popupArr.popupArrTest.map( (propsObj: MagicPopupType, index: number) => (
|
|
||||||
<MagicPopup
|
|
||||||
//Подробнее описание пропсов компонента смотри в MagicPopup.tsx
|
|
||||||
id = {propsObj.id}
|
|
||||||
key = {propsObj.id}
|
|
||||||
message = {propsObj.message}
|
|
||||||
timeOut = {propsObj.timeOut}
|
|
||||||
type = {propsObj.type}
|
|
||||||
renderIndex = {index}
|
|
||||||
//onClose = {delHiddenPopupFunc}
|
|
||||||
onClose = {popupArr.delPopupTest}
|
|
||||||
/>
|
|
||||||
))
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,41 +0,0 @@
|
|||||||
import React, { createContext, useState } from "react";
|
|
||||||
import { MagicPopupType } from "../components/MagicPopupContainer";
|
|
||||||
import MagicPopupContainer from "../components/MagicPopupContainer";
|
|
||||||
|
|
||||||
//гаврилов. передай значением по умолчанию null и спроси у ChatGPT (deepseek не справляется) почему при указании null возникает ошибка в аргументе value
|
|
||||||
export const PopupContext = createContext('');
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Контекст для компонента всплывающих окон
|
|
||||||
*/
|
|
||||||
export const PopupProvider = ({ children }) => {
|
|
||||||
const [popupArrTestVar, setPopupArrTestVar] = useState<MagicPopupType[] | []>( [] );
|
|
||||||
|
|
||||||
function addPopupTest (newPopupArrData: MagicPopupType[]) {
|
|
||||||
setPopupArrTestVar(prev => {
|
|
||||||
//Конкатенируем предыдущее состояние набора попапов и новые попапы, присваивая новому попапу параметр id с уникальным рандомным значением
|
|
||||||
return [...prev, ...newPopupArrData].map(popup => popup.id ? popup : {...popup, id: getRandomId()})
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
//Колбэк для удаления попапа из набора
|
|
||||||
function delPopupTest (popupDelKey: number) {
|
|
||||||
setPopupArrTestVar(prev => {
|
|
||||||
return prev.filter(popup => popup.id !== popupDelKey);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
function getRandomId(): number { return Date.now() - Math.random() };
|
|
||||||
|
|
||||||
const value = {
|
|
||||||
popupArrTest: popupArrTestVar,
|
|
||||||
//ГАВРИЛОВ. переименуй
|
|
||||||
addPopupArrTest: addPopupTest,
|
|
||||||
delPopupArrTest: delPopupTest,
|
|
||||||
};
|
|
||||||
|
|
||||||
return <PopupContext.Provider value={value}>
|
|
||||||
{children}
|
|
||||||
<MagicPopupContainer />
|
|
||||||
</PopupContext.Provider>
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user