first commit
This commit is contained in:
work-sklizkiygad
commit
ec014db3f9
23
.gitignore
vendored
Normal file
23
.gitignore
vendored
Normal file
@ -0,0 +1,23 @@
|
||||
.DS_Store
|
||||
node_modules
|
||||
/dist
|
||||
|
||||
|
||||
# local env files
|
||||
.env.local
|
||||
.env.*.local
|
||||
|
||||
# Log files
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
|
||||
# Editor directories and files
|
||||
.idea
|
||||
.vscode
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
24
README.md
Normal file
24
README.md
Normal file
@ -0,0 +1,24 @@
|
||||
# hookah
|
||||
|
||||
## Project setup
|
||||
```
|
||||
npm install
|
||||
```
|
||||
|
||||
### Compiles and hot-reloads for development
|
||||
```
|
||||
npm run serve
|
||||
```
|
||||
|
||||
### Compiles and minifies for production
|
||||
```
|
||||
npm run build
|
||||
```
|
||||
|
||||
### Lints and fixes files
|
||||
```
|
||||
npm run lint
|
||||
```
|
||||
|
||||
### Customize configuration
|
||||
See [Configuration Reference](https://cli.vuejs.org/config/).
|
||||
101
android/.gitignore
vendored
Normal file
101
android/.gitignore
vendored
Normal file
@ -0,0 +1,101 @@
|
||||
# Using Android gitignore template: https://github.com/github/gitignore/blob/HEAD/Android.gitignore
|
||||
|
||||
# Built application files
|
||||
*.apk
|
||||
*.aar
|
||||
*.ap_
|
||||
*.aab
|
||||
|
||||
# Files for the ART/Dalvik VM
|
||||
*.dex
|
||||
|
||||
# Java class files
|
||||
*.class
|
||||
|
||||
# Generated files
|
||||
bin/
|
||||
gen/
|
||||
out/
|
||||
# Uncomment the following line in case you need and you don't have the release build type files in your app
|
||||
# release/
|
||||
|
||||
# Gradle files
|
||||
.gradle/
|
||||
build/
|
||||
|
||||
# Local configuration file (sdk path, etc)
|
||||
local.properties
|
||||
|
||||
# Proguard folder generated by Eclipse
|
||||
proguard/
|
||||
|
||||
# Log Files
|
||||
*.log
|
||||
|
||||
# Android Studio Navigation editor temp files
|
||||
.navigation/
|
||||
|
||||
# Android Studio captures folder
|
||||
captures/
|
||||
|
||||
# IntelliJ
|
||||
*.iml
|
||||
.idea/workspace.xml
|
||||
.idea/tasks.xml
|
||||
.idea/gradle.xml
|
||||
.idea/assetWizardSettings.xml
|
||||
.idea/dictionaries
|
||||
.idea/libraries
|
||||
# Android Studio 3 in .gitignore file.
|
||||
.idea/caches
|
||||
.idea/modules.xml
|
||||
# Comment next line if keeping position of elements in Navigation Editor is relevant for you
|
||||
.idea/navEditor.xml
|
||||
|
||||
# Keystore files
|
||||
# Uncomment the following lines if you do not want to check your keystore files in.
|
||||
#*.jks
|
||||
#*.keystore
|
||||
|
||||
# External native build folder generated in Android Studio 2.2 and later
|
||||
.externalNativeBuild
|
||||
.cxx/
|
||||
|
||||
# Google Services (e.g. APIs or Firebase)
|
||||
# google-services.json
|
||||
|
||||
# Freeline
|
||||
freeline.py
|
||||
freeline/
|
||||
freeline_project_description.json
|
||||
|
||||
# fastlane
|
||||
fastlane/report.xml
|
||||
fastlane/Preview.html
|
||||
fastlane/screenshots
|
||||
fastlane/test_output
|
||||
fastlane/readme.md
|
||||
|
||||
# Version control
|
||||
vcs.xml
|
||||
|
||||
# lint
|
||||
lint/intermediates/
|
||||
lint/generated/
|
||||
lint/outputs/
|
||||
lint/tmp/
|
||||
# lint/reports/
|
||||
|
||||
# Android Profiling
|
||||
*.hprof
|
||||
|
||||
# Cordova plugins for Capacitor
|
||||
capacitor-cordova-android-plugins
|
||||
|
||||
# Copied web assets
|
||||
app/src/main/assets/public
|
||||
|
||||
# Generated Config files
|
||||
app/src/main/assets/capacitor.config.json
|
||||
app/src/main/assets/capacitor.plugins.json
|
||||
app/src/main/res/xml/config.xml
|
||||
2
android/app/.gitignore
vendored
Normal file
2
android/app/.gitignore
vendored
Normal file
@ -0,0 +1,2 @@
|
||||
/build/*
|
||||
!/build/.npmkeep
|
||||
53
android/app/build.gradle
Normal file
53
android/app/build.gradle
Normal file
@ -0,0 +1,53 @@
|
||||
apply plugin: 'com.android.application'
|
||||
|
||||
android {
|
||||
compileSdkVersion rootProject.ext.compileSdkVersion
|
||||
defaultConfig {
|
||||
applicationId "ho.ooo.ka"
|
||||
minSdkVersion rootProject.ext.minSdkVersion
|
||||
targetSdkVersion rootProject.ext.targetSdkVersion
|
||||
versionCode 1
|
||||
versionName "1.0"
|
||||
testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
|
||||
aaptOptions {
|
||||
// Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.
|
||||
// Default: https://android.googlesource.com/platform/frameworks/base/+/282e181b58cf72b6ca770dc7ca5f91f135444502/tools/aapt/AaptAssets.cpp#61
|
||||
ignoreAssetsPattern '!.svn:!.git:!.ds_store:!*.scc:.*:!CVS:!thumbs.db:!picasa.ini:!*~'
|
||||
}
|
||||
}
|
||||
buildTypes {
|
||||
release {
|
||||
minifyEnabled false
|
||||
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
repositories {
|
||||
flatDir{
|
||||
dirs '../capacitor-cordova-android-plugins/src/main/libs', 'libs'
|
||||
}
|
||||
}
|
||||
|
||||
dependencies {
|
||||
implementation fileTree(include: ['*.jar'], dir: 'libs')
|
||||
implementation "androidx.appcompat:appcompat:$androidxAppCompatVersion"
|
||||
implementation "androidx.coordinatorlayout:coordinatorlayout:$androidxCoordinatorLayoutVersion"
|
||||
implementation "androidx.core:core-splashscreen:$coreSplashScreenVersion"
|
||||
implementation project(':capacitor-android')
|
||||
testImplementation "junit:junit:$junitVersion"
|
||||
androidTestImplementation "androidx.test.ext:junit:$androidxJunitVersion"
|
||||
androidTestImplementation "androidx.test.espresso:espresso-core:$androidxEspressoCoreVersion"
|
||||
implementation project(':capacitor-cordova-android-plugins')
|
||||
}
|
||||
|
||||
apply from: 'capacitor.build.gradle'
|
||||
|
||||
try {
|
||||
def servicesJSON = file('google-services.json')
|
||||
if (servicesJSON.text) {
|
||||
apply plugin: 'com.google.gms.google-services'
|
||||
}
|
||||
} catch(Exception e) {
|
||||
logger.info("google-services.json not found, google-services plugin not applied. Push Notifications won't work")
|
||||
}
|
||||
19
android/app/capacitor.build.gradle
Normal file
19
android/app/capacitor.build.gradle
Normal file
@ -0,0 +1,19 @@
|
||||
// DO NOT EDIT THIS FILE! IT IS GENERATED EACH TIME "capacitor update" IS RUN
|
||||
|
||||
android {
|
||||
compileOptions {
|
||||
sourceCompatibility JavaVersion.VERSION_11
|
||||
targetCompatibility JavaVersion.VERSION_11
|
||||
}
|
||||
}
|
||||
|
||||
apply from: "../capacitor-cordova-android-plugins/cordova.variables.gradle"
|
||||
dependencies {
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
if (hasProperty('postBuildExtras')) {
|
||||
postBuildExtras()
|
||||
}
|
||||
21
android/app/proguard-rules.pro
vendored
Normal file
21
android/app/proguard-rules.pro
vendored
Normal file
@ -0,0 +1,21 @@
|
||||
# Add project specific ProGuard rules here.
|
||||
# You can control the set of applied configuration files using the
|
||||
# proguardFiles setting in build.gradle.
|
||||
#
|
||||
# For more details, see
|
||||
# http://developer.android.com/guide/developing/tools/proguard.html
|
||||
|
||||
# If your project uses WebView with JS, uncomment the following
|
||||
# and specify the fully qualified class name to the JavaScript interface
|
||||
# class:
|
||||
#-keepclassmembers class fqcn.of.javascript.interface.for.webview {
|
||||
# public *;
|
||||
#}
|
||||
|
||||
# Uncomment this to preserve the line number information for
|
||||
# debugging stack traces.
|
||||
#-keepattributes SourceFile,LineNumberTable
|
||||
|
||||
# If you keep the line number information, uncomment this to
|
||||
# hide the original source file name.
|
||||
#-renamesourcefileattribute SourceFile
|
||||
@ -0,0 +1,26 @@
|
||||
package com.getcapacitor.myapp;
|
||||
|
||||
import static org.junit.Assert.*;
|
||||
|
||||
import android.content.Context;
|
||||
import androidx.test.ext.junit.runners.AndroidJUnit4;
|
||||
import androidx.test.platform.app.InstrumentationRegistry;
|
||||
import org.junit.Test;
|
||||
import org.junit.runner.RunWith;
|
||||
|
||||
/**
|
||||
* Instrumented test, which will execute on an Android device.
|
||||
*
|
||||
* @see <a href="http://d.android.com/tools/testing">Testing documentation</a>
|
||||
*/
|
||||
@RunWith(AndroidJUnit4.class)
|
||||
public class ExampleInstrumentedTest {
|
||||
|
||||
@Test
|
||||
public void useAppContext() throws Exception {
|
||||
// Context of the app under test.
|
||||
Context appContext = InstrumentationRegistry.getInstrumentation().getTargetContext();
|
||||
|
||||
assertEquals("com.getcapacitor.app", appContext.getPackageName());
|
||||
}
|
||||
}
|
||||
42
android/app/src/main/AndroidManifest.xml
Normal file
42
android/app/src/main/AndroidManifest.xml
Normal file
@ -0,0 +1,42 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
|
||||
package="ho.ooo.ka">
|
||||
|
||||
<application
|
||||
android:allowBackup="true"
|
||||
android:icon="@mipmap/ic_launcher"
|
||||
android:label="@string/app_name"
|
||||
android:roundIcon="@mipmap/ic_launcher_round"
|
||||
android:supportsRtl="true"
|
||||
android:theme="@style/AppTheme">
|
||||
|
||||
<activity
|
||||
android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|smallestScreenSize|screenLayout|uiMode"
|
||||
android:name="ho.ooo.ka.MainActivity"
|
||||
android:label="@string/title_activity_main"
|
||||
android:theme="@style/AppTheme.NoActionBarLaunch"
|
||||
android:launchMode="singleTask"
|
||||
android:exported="true">
|
||||
|
||||
<intent-filter>
|
||||
<action android:name="android.intent.action.MAIN" />
|
||||
<category android:name="android.intent.category.LAUNCHER" />
|
||||
</intent-filter>
|
||||
|
||||
</activity>
|
||||
|
||||
<provider
|
||||
android:name="androidx.core.content.FileProvider"
|
||||
android:authorities="${applicationId}.fileprovider"
|
||||
android:exported="false"
|
||||
android:grantUriPermissions="true">
|
||||
<meta-data
|
||||
android:name="android.support.FILE_PROVIDER_PATHS"
|
||||
android:resource="@xml/file_paths"></meta-data>
|
||||
</provider>
|
||||
</application>
|
||||
|
||||
<!-- Permissions -->
|
||||
|
||||
<uses-permission android:name="android.permission.INTERNET" />
|
||||
</manifest>
|
||||
5
android/app/src/main/java/ho/ooo/ka/MainActivity.java
Normal file
5
android/app/src/main/java/ho/ooo/ka/MainActivity.java
Normal file
@ -0,0 +1,5 @@
|
||||
package ho.ooo.ka;
|
||||
|
||||
import com.getcapacitor.BridgeActivity;
|
||||
|
||||
public class MainActivity extends BridgeActivity {}
|
||||
BIN
android/app/src/main/res/drawable-land-hdpi/splash.png
Normal file
BIN
android/app/src/main/res/drawable-land-hdpi/splash.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.5 KiB |
BIN
android/app/src/main/res/drawable-land-mdpi/splash.png
Normal file
BIN
android/app/src/main/res/drawable-land-mdpi/splash.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
BIN
android/app/src/main/res/drawable-land-xhdpi/splash.png
Normal file
BIN
android/app/src/main/res/drawable-land-xhdpi/splash.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.0 KiB |
BIN
android/app/src/main/res/drawable-land-xxhdpi/splash.png
Normal file
BIN
android/app/src/main/res/drawable-land-xxhdpi/splash.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
android/app/src/main/res/drawable-land-xxxhdpi/splash.png
Normal file
BIN
android/app/src/main/res/drawable-land-xxxhdpi/splash.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
BIN
android/app/src/main/res/drawable-port-hdpi/splash.png
Normal file
BIN
android/app/src/main/res/drawable-port-hdpi/splash.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.7 KiB |
BIN
android/app/src/main/res/drawable-port-mdpi/splash.png
Normal file
BIN
android/app/src/main/res/drawable-port-mdpi/splash.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
BIN
android/app/src/main/res/drawable-port-xhdpi/splash.png
Normal file
BIN
android/app/src/main/res/drawable-port-xhdpi/splash.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.6 KiB |
BIN
android/app/src/main/res/drawable-port-xxhdpi/splash.png
Normal file
BIN
android/app/src/main/res/drawable-port-xxhdpi/splash.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
android/app/src/main/res/drawable-port-xxxhdpi/splash.png
Normal file
BIN
android/app/src/main/res/drawable-port-xxxhdpi/splash.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
@ -0,0 +1,34 @@
|
||||
<vector xmlns:android="http://schemas.android.com/apk/res/android"
|
||||
xmlns:aapt="http://schemas.android.com/aapt"
|
||||
android:width="108dp"
|
||||
android:height="108dp"
|
||||
android:viewportHeight="108"
|
||||
android:viewportWidth="108">
|
||||
<path
|
||||
android:fillType="evenOdd"
|
||||
android:pathData="M32,64C32,64 38.39,52.99 44.13,50.95C51.37,48.37 70.14,49.57 70.14,49.57L108.26,87.69L108,109.01L75.97,107.97L32,64Z"
|
||||
android:strokeColor="#00000000"
|
||||
android:strokeWidth="1">
|
||||
<aapt:attr name="android:fillColor">
|
||||
<gradient
|
||||
android:endX="78.5885"
|
||||
android:endY="90.9159"
|
||||
android:startX="48.7653"
|
||||
android:startY="61.0927"
|
||||
android:type="linear">
|
||||
<item
|
||||
android:color="#44000000"
|
||||
android:offset="0.0" />
|
||||
<item
|
||||
android:color="#00000000"
|
||||
android:offset="1.0" />
|
||||
</gradient>
|
||||
</aapt:attr>
|
||||
</path>
|
||||
<path
|
||||
android:fillColor="#FFFFFF"
|
||||
android:fillType="nonZero"
|
||||
android:pathData="M66.94,46.02L66.94,46.02C72.44,50.07 76,56.61 76,64L32,64C32,56.61 35.56,50.11 40.98,46.06L36.18,41.19C35.45,40.45 35.45,39.3 36.18,38.56C36.91,37.81 38.05,37.81 38.78,38.56L44.25,44.05C47.18,42.57 50.48,41.71 54,41.71C57.48,41.71 60.78,42.57 63.68,44.05L69.11,38.56C69.84,37.81 70.98,37.81 71.71,38.56C72.44,39.3 72.44,40.45 71.71,41.19L66.94,46.02ZM62.94,56.92C64.08,56.92 65,56.01 65,54.88C65,53.76 64.08,52.85 62.94,52.85C61.8,52.85 60.88,53.76 60.88,54.88C60.88,56.01 61.8,56.92 62.94,56.92ZM45.06,56.92C46.2,56.92 47.13,56.01 47.13,54.88C47.13,53.76 46.2,52.85 45.06,52.85C43.92,52.85 43,53.76 43,54.88C43,56.01 43.92,56.92 45.06,56.92Z"
|
||||
android:strokeColor="#00000000"
|
||||
android:strokeWidth="1" />
|
||||
</vector>
|
||||
170
android/app/src/main/res/drawable/ic_launcher_background.xml
Normal file
170
android/app/src/main/res/drawable/ic_launcher_background.xml
Normal file
@ -0,0 +1,170 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<vector xmlns:android="http://schemas.android.com/apk/res/android"
|
||||
android:width="108dp"
|
||||
android:height="108dp"
|
||||
android:viewportHeight="108"
|
||||
android:viewportWidth="108">
|
||||
<path
|
||||
android:fillColor="#26A69A"
|
||||
android:pathData="M0,0h108v108h-108z" />
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:pathData="M9,0L9,108"
|
||||
android:strokeColor="#33FFFFFF"
|
||||
android:strokeWidth="0.8" />
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:pathData="M19,0L19,108"
|
||||
android:strokeColor="#33FFFFFF"
|
||||
android:strokeWidth="0.8" />
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:pathData="M29,0L29,108"
|
||||
android:strokeColor="#33FFFFFF"
|
||||
android:strokeWidth="0.8" />
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:pathData="M39,0L39,108"
|
||||
android:strokeColor="#33FFFFFF"
|
||||
android:strokeWidth="0.8" />
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:pathData="M49,0L49,108"
|
||||
android:strokeColor="#33FFFFFF"
|
||||
android:strokeWidth="0.8" />
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:pathData="M59,0L59,108"
|
||||
android:strokeColor="#33FFFFFF"
|
||||
android:strokeWidth="0.8" />
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:pathData="M69,0L69,108"
|
||||
android:strokeColor="#33FFFFFF"
|
||||
android:strokeWidth="0.8" />
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:pathData="M79,0L79,108"
|
||||
android:strokeColor="#33FFFFFF"
|
||||
android:strokeWidth="0.8" />
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:pathData="M89,0L89,108"
|
||||
android:strokeColor="#33FFFFFF"
|
||||
android:strokeWidth="0.8" />
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:pathData="M99,0L99,108"
|
||||
android:strokeColor="#33FFFFFF"
|
||||
android:strokeWidth="0.8" />
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:pathData="M0,9L108,9"
|
||||
android:strokeColor="#33FFFFFF"
|
||||
android:strokeWidth="0.8" />
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:pathData="M0,19L108,19"
|
||||
android:strokeColor="#33FFFFFF"
|
||||
android:strokeWidth="0.8" />
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:pathData="M0,29L108,29"
|
||||
android:strokeColor="#33FFFFFF"
|
||||
android:strokeWidth="0.8" />
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:pathData="M0,39L108,39"
|
||||
android:strokeColor="#33FFFFFF"
|
||||
android:strokeWidth="0.8" />
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:pathData="M0,49L108,49"
|
||||
android:strokeColor="#33FFFFFF"
|
||||
android:strokeWidth="0.8" />
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:pathData="M0,59L108,59"
|
||||
android:strokeColor="#33FFFFFF"
|
||||
android:strokeWidth="0.8" />
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:pathData="M0,69L108,69"
|
||||
android:strokeColor="#33FFFFFF"
|
||||
android:strokeWidth="0.8" />
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:pathData="M0,79L108,79"
|
||||
android:strokeColor="#33FFFFFF"
|
||||
android:strokeWidth="0.8" />
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:pathData="M0,89L108,89"
|
||||
android:strokeColor="#33FFFFFF"
|
||||
android:strokeWidth="0.8" />
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:pathData="M0,99L108,99"
|
||||
android:strokeColor="#33FFFFFF"
|
||||
android:strokeWidth="0.8" />
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:pathData="M19,29L89,29"
|
||||
android:strokeColor="#33FFFFFF"
|
||||
android:strokeWidth="0.8" />
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:pathData="M19,39L89,39"
|
||||
android:strokeColor="#33FFFFFF"
|
||||
android:strokeWidth="0.8" />
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:pathData="M19,49L89,49"
|
||||
android:strokeColor="#33FFFFFF"
|
||||
android:strokeWidth="0.8" />
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:pathData="M19,59L89,59"
|
||||
android:strokeColor="#33FFFFFF"
|
||||
android:strokeWidth="0.8" />
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:pathData="M19,69L89,69"
|
||||
android:strokeColor="#33FFFFFF"
|
||||
android:strokeWidth="0.8" />
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:pathData="M19,79L89,79"
|
||||
android:strokeColor="#33FFFFFF"
|
||||
android:strokeWidth="0.8" />
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:pathData="M29,19L29,89"
|
||||
android:strokeColor="#33FFFFFF"
|
||||
android:strokeWidth="0.8" />
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:pathData="M39,19L39,89"
|
||||
android:strokeColor="#33FFFFFF"
|
||||
android:strokeWidth="0.8" />
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:pathData="M49,19L49,89"
|
||||
android:strokeColor="#33FFFFFF"
|
||||
android:strokeWidth="0.8" />
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:pathData="M59,19L59,89"
|
||||
android:strokeColor="#33FFFFFF"
|
||||
android:strokeWidth="0.8" />
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:pathData="M69,19L69,89"
|
||||
android:strokeColor="#33FFFFFF"
|
||||
android:strokeWidth="0.8" />
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:pathData="M79,19L79,89"
|
||||
android:strokeColor="#33FFFFFF"
|
||||
android:strokeWidth="0.8" />
|
||||
</vector>
|
||||
BIN
android/app/src/main/res/drawable/splash.png
Normal file
BIN
android/app/src/main/res/drawable/splash.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
12
android/app/src/main/res/layout/activity_main.xml
Normal file
12
android/app/src/main/res/layout/activity_main.xml
Normal file
@ -0,0 +1,12 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
|
||||
xmlns:app="http://schemas.android.com/apk/res-auto"
|
||||
xmlns:tools="http://schemas.android.com/tools"
|
||||
android:layout_width="match_parent"
|
||||
android:layout_height="match_parent"
|
||||
tools:context=".MainActivity">
|
||||
|
||||
<WebView
|
||||
android:layout_width="match_parent"
|
||||
android:layout_height="match_parent" />
|
||||
</androidx.coordinatorlayout.widget.CoordinatorLayout>
|
||||
@ -0,0 +1,5 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
|
||||
<background android:drawable="@color/ic_launcher_background"/>
|
||||
<foreground android:drawable="@mipmap/ic_launcher_foreground"/>
|
||||
</adaptive-icon>
|
||||
@ -0,0 +1,5 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
|
||||
<background android:drawable="@color/ic_launcher_background"/>
|
||||
<foreground android:drawable="@mipmap/ic_launcher_foreground"/>
|
||||
</adaptive-icon>
|
||||
BIN
android/app/src/main/res/mipmap-hdpi/ic_launcher.png
Normal file
BIN
android/app/src/main/res/mipmap-hdpi/ic_launcher.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
BIN
android/app/src/main/res/mipmap-hdpi/ic_launcher_foreground.png
Normal file
BIN
android/app/src/main/res/mipmap-hdpi/ic_launcher_foreground.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
BIN
android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png
Normal file
BIN
android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
BIN
android/app/src/main/res/mipmap-mdpi/ic_launcher.png
Normal file
BIN
android/app/src/main/res/mipmap-mdpi/ic_launcher.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
BIN
android/app/src/main/res/mipmap-mdpi/ic_launcher_foreground.png
Normal file
BIN
android/app/src/main/res/mipmap-mdpi/ic_launcher_foreground.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
BIN
android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png
Normal file
BIN
android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
BIN
android/app/src/main/res/mipmap-xhdpi/ic_launcher.png
Normal file
BIN
android/app/src/main/res/mipmap-xhdpi/ic_launcher.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
BIN
android/app/src/main/res/mipmap-xhdpi/ic_launcher_foreground.png
Normal file
BIN
android/app/src/main/res/mipmap-xhdpi/ic_launcher_foreground.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.9 KiB |
BIN
android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png
Normal file
BIN
android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.4 KiB |
BIN
android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png
Normal file
BIN
android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.6 KiB |
BIN
android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png
Normal file
BIN
android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
BIN
android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png
Normal file
BIN
android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png
Normal file
BIN
android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
@ -0,0 +1,4 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<resources>
|
||||
<color name="ic_launcher_background">#FFFFFF</color>
|
||||
</resources>
|
||||
7
android/app/src/main/res/values/strings.xml
Normal file
7
android/app/src/main/res/values/strings.xml
Normal file
@ -0,0 +1,7 @@
|
||||
<?xml version='1.0' encoding='utf-8'?>
|
||||
<resources>
|
||||
<string name="app_name">hookah</string>
|
||||
<string name="title_activity_main">hookah</string>
|
||||
<string name="package_name">ho.ooo.ka</string>
|
||||
<string name="custom_url_scheme">ho.ooo.ka</string>
|
||||
</resources>
|
||||
22
android/app/src/main/res/values/styles.xml
Normal file
22
android/app/src/main/res/values/styles.xml
Normal file
@ -0,0 +1,22 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<resources>
|
||||
|
||||
<!-- Base application theme. -->
|
||||
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
|
||||
<!-- Customize your theme here. -->
|
||||
<item name="colorPrimary">@color/colorPrimary</item>
|
||||
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
|
||||
<item name="colorAccent">@color/colorAccent</item>
|
||||
</style>
|
||||
|
||||
<style name="AppTheme.NoActionBar" parent="Theme.AppCompat.DayNight.NoActionBar">
|
||||
<item name="windowActionBar">false</item>
|
||||
<item name="windowNoTitle">true</item>
|
||||
<item name="android:background">@null</item>
|
||||
</style>
|
||||
|
||||
|
||||
<style name="AppTheme.NoActionBarLaunch" parent="Theme.SplashScreen">
|
||||
<item name="android:background">@drawable/splash</item>
|
||||
</style>
|
||||
</resources>
|
||||
5
android/app/src/main/res/xml/file_paths.xml
Normal file
5
android/app/src/main/res/xml/file_paths.xml
Normal file
@ -0,0 +1,5 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<paths xmlns:android="http://schemas.android.com/apk/res/android">
|
||||
<external-path name="my_images" path="." />
|
||||
<cache-path name="my_cache_images" path="." />
|
||||
</paths>
|
||||
@ -0,0 +1,18 @@
|
||||
package com.getcapacitor.myapp;
|
||||
|
||||
import static org.junit.Assert.*;
|
||||
|
||||
import org.junit.Test;
|
||||
|
||||
/**
|
||||
* Example local unit test, which will execute on the development machine (host).
|
||||
*
|
||||
* @see <a href="http://d.android.com/tools/testing">Testing documentation</a>
|
||||
*/
|
||||
public class ExampleUnitTest {
|
||||
|
||||
@Test
|
||||
public void addition_isCorrect() throws Exception {
|
||||
assertEquals(4, 2 + 2);
|
||||
}
|
||||
}
|
||||
29
android/build.gradle
Normal file
29
android/build.gradle
Normal file
@ -0,0 +1,29 @@
|
||||
// Top-level build file where you can add configuration options common to all sub-projects/modules.
|
||||
|
||||
buildscript {
|
||||
|
||||
repositories {
|
||||
google()
|
||||
mavenCentral()
|
||||
}
|
||||
dependencies {
|
||||
classpath 'com.android.tools.build:gradle:7.2.1'
|
||||
classpath 'com.google.gms:google-services:4.3.13'
|
||||
|
||||
// NOTE: Do not place your application dependencies here; they belong
|
||||
// in the individual module build.gradle files
|
||||
}
|
||||
}
|
||||
|
||||
apply from: "variables.gradle"
|
||||
|
||||
allprojects {
|
||||
repositories {
|
||||
google()
|
||||
mavenCentral()
|
||||
}
|
||||
}
|
||||
|
||||
task clean(type: Delete) {
|
||||
delete rootProject.buildDir
|
||||
}
|
||||
3
android/capacitor.settings.gradle
Normal file
3
android/capacitor.settings.gradle
Normal file
@ -0,0 +1,3 @@
|
||||
// DO NOT EDIT THIS FILE! IT IS GENERATED EACH TIME "capacitor update" IS RUN
|
||||
include ':capacitor-android'
|
||||
project(':capacitor-android').projectDir = new File('../node_modules/@capacitor/android/capacitor')
|
||||
24
android/gradle.properties
Normal file
24
android/gradle.properties
Normal file
@ -0,0 +1,24 @@
|
||||
# Project-wide Gradle settings.
|
||||
|
||||
# IDE (e.g. Android Studio) users:
|
||||
# Gradle settings configured through the IDE *will override*
|
||||
# any settings specified in this file.
|
||||
|
||||
# For more details on how to configure your build environment visit
|
||||
# http://www.gradle.org/docs/current/userguide/build_environment.html
|
||||
|
||||
# Specifies the JVM arguments used for the daemon process.
|
||||
# The setting is particularly useful for tweaking memory settings.
|
||||
org.gradle.jvmargs=-Xmx1536m
|
||||
|
||||
# When configured, Gradle will run in incubating parallel mode.
|
||||
# This option should only be used with decoupled projects. More details, visit
|
||||
# http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects
|
||||
# org.gradle.parallel=true
|
||||
|
||||
# AndroidX package structure to make it clearer which packages are bundled with the
|
||||
# Android operating system, and which are packaged with your app's APK
|
||||
# https://developer.android.com/topic/libraries/support-library/androidx-rn
|
||||
android.useAndroidX=true
|
||||
# Automatically convert third-party libraries to use AndroidX
|
||||
android.enableJetifier=true
|
||||
BIN
android/gradle/wrapper/gradle-wrapper.jar
vendored
Normal file
BIN
android/gradle/wrapper/gradle-wrapper.jar
vendored
Normal file
Binary file not shown.
5
android/gradle/wrapper/gradle-wrapper.properties
vendored
Normal file
5
android/gradle/wrapper/gradle-wrapper.properties
vendored
Normal file
@ -0,0 +1,5 @@
|
||||
distributionBase=GRADLE_USER_HOME
|
||||
distributionPath=wrapper/dists
|
||||
distributionUrl=https\://services.gradle.org/distributions/gradle-7.4.2-all.zip
|
||||
zipStoreBase=GRADLE_USER_HOME
|
||||
zipStorePath=wrapper/dists
|
||||
234
android/gradlew
vendored
Normal file
234
android/gradlew
vendored
Normal file
@ -0,0 +1,234 @@
|
||||
#!/bin/sh
|
||||
|
||||
#
|
||||
# Copyright © 2015-2021 the original authors.
|
||||
#
|
||||
# Licensed under the Apache License, Version 2.0 (the "License");
|
||||
# you may not use this file except in compliance with the License.
|
||||
# You may obtain a copy of the License at
|
||||
#
|
||||
# https://www.apache.org/licenses/LICENSE-2.0
|
||||
#
|
||||
# Unless required by applicable law or agreed to in writing, software
|
||||
# distributed under the License is distributed on an "AS IS" BASIS,
|
||||
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
# See the License for the specific language governing permissions and
|
||||
# limitations under the License.
|
||||
#
|
||||
|
||||
##############################################################################
|
||||
#
|
||||
# Gradle start up script for POSIX generated by Gradle.
|
||||
#
|
||||
# Important for running:
|
||||
#
|
||||
# (1) You need a POSIX-compliant shell to run this script. If your /bin/sh is
|
||||
# noncompliant, but you have some other compliant shell such as ksh or
|
||||
# bash, then to run this script, type that shell name before the whole
|
||||
# command line, like:
|
||||
#
|
||||
# ksh Gradle
|
||||
#
|
||||
# Busybox and similar reduced shells will NOT work, because this script
|
||||
# requires all of these POSIX shell features:
|
||||
# * functions;
|
||||
# * expansions «$var», «${var}», «${var:-default}», «${var+SET}»,
|
||||
# «${var#prefix}», «${var%suffix}», and «$( cmd )»;
|
||||
# * compound commands having a testable exit status, especially «case»;
|
||||
# * various built-in commands including «command», «set», and «ulimit».
|
||||
#
|
||||
# Important for patching:
|
||||
#
|
||||
# (2) This script targets any POSIX shell, so it avoids extensions provided
|
||||
# by Bash, Ksh, etc; in particular arrays are avoided.
|
||||
#
|
||||
# The "traditional" practice of packing multiple parameters into a
|
||||
# space-separated string is a well documented source of bugs and security
|
||||
# problems, so this is (mostly) avoided, by progressively accumulating
|
||||
# options in "$@", and eventually passing that to Java.
|
||||
#
|
||||
# Where the inherited environment variables (DEFAULT_JVM_OPTS, JAVA_OPTS,
|
||||
# and GRADLE_OPTS) rely on word-splitting, this is performed explicitly;
|
||||
# see the in-line comments for details.
|
||||
#
|
||||
# There are tweaks for specific operating systems such as AIX, CygWin,
|
||||
# Darwin, MinGW, and NonStop.
|
||||
#
|
||||
# (3) This script is generated from the Groovy template
|
||||
# https://github.com/gradle/gradle/blob/master/subprojects/plugins/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt
|
||||
# within the Gradle project.
|
||||
#
|
||||
# You can find Gradle at https://github.com/gradle/gradle/.
|
||||
#
|
||||
##############################################################################
|
||||
|
||||
# Attempt to set APP_HOME
|
||||
|
||||
# Resolve links: $0 may be a link
|
||||
app_path=$0
|
||||
|
||||
# Need this for daisy-chained symlinks.
|
||||
while
|
||||
APP_HOME=${app_path%"${app_path##*/}"} # leaves a trailing /; empty if no leading path
|
||||
[ -h "$app_path" ]
|
||||
do
|
||||
ls=$( ls -ld "$app_path" )
|
||||
link=${ls#*' -> '}
|
||||
case $link in #(
|
||||
/*) app_path=$link ;; #(
|
||||
*) app_path=$APP_HOME$link ;;
|
||||
esac
|
||||
done
|
||||
|
||||
APP_HOME=$( cd "${APP_HOME:-./}" && pwd -P ) || exit
|
||||
|
||||
APP_NAME="Gradle"
|
||||
APP_BASE_NAME=${0##*/}
|
||||
|
||||
# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
|
||||
DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
|
||||
|
||||
# Use the maximum available, or set MAX_FD != -1 to use that value.
|
||||
MAX_FD=maximum
|
||||
|
||||
warn () {
|
||||
echo "$*"
|
||||
} >&2
|
||||
|
||||
die () {
|
||||
echo
|
||||
echo "$*"
|
||||
echo
|
||||
exit 1
|
||||
} >&2
|
||||
|
||||
# OS specific support (must be 'true' or 'false').
|
||||
cygwin=false
|
||||
msys=false
|
||||
darwin=false
|
||||
nonstop=false
|
||||
case "$( uname )" in #(
|
||||
CYGWIN* ) cygwin=true ;; #(
|
||||
Darwin* ) darwin=true ;; #(
|
||||
MSYS* | MINGW* ) msys=true ;; #(
|
||||
NONSTOP* ) nonstop=true ;;
|
||||
esac
|
||||
|
||||
CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
|
||||
|
||||
|
||||
# Determine the Java command to use to start the JVM.
|
||||
if [ -n "$JAVA_HOME" ] ; then
|
||||
if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
|
||||
# IBM's JDK on AIX uses strange locations for the executables
|
||||
JAVACMD=$JAVA_HOME/jre/sh/java
|
||||
else
|
||||
JAVACMD=$JAVA_HOME/bin/java
|
||||
fi
|
||||
if [ ! -x "$JAVACMD" ] ; then
|
||||
die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
|
||||
|
||||
Please set the JAVA_HOME variable in your environment to match the
|
||||
location of your Java installation."
|
||||
fi
|
||||
else
|
||||
JAVACMD=java
|
||||
which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
|
||||
|
||||
Please set the JAVA_HOME variable in your environment to match the
|
||||
location of your Java installation."
|
||||
fi
|
||||
|
||||
# Increase the maximum file descriptors if we can.
|
||||
if ! "$cygwin" && ! "$darwin" && ! "$nonstop" ; then
|
||||
case $MAX_FD in #(
|
||||
max*)
|
||||
MAX_FD=$( ulimit -H -n ) ||
|
||||
warn "Could not query maximum file descriptor limit"
|
||||
esac
|
||||
case $MAX_FD in #(
|
||||
'' | soft) :;; #(
|
||||
*)
|
||||
ulimit -n "$MAX_FD" ||
|
||||
warn "Could not set maximum file descriptor limit to $MAX_FD"
|
||||
esac
|
||||
fi
|
||||
|
||||
# Collect all arguments for the java command, stacking in reverse order:
|
||||
# * args from the command line
|
||||
# * the main class name
|
||||
# * -classpath
|
||||
# * -D...appname settings
|
||||
# * --module-path (only if needed)
|
||||
# * DEFAULT_JVM_OPTS, JAVA_OPTS, and GRADLE_OPTS environment variables.
|
||||
|
||||
# For Cygwin or MSYS, switch paths to Windows format before running java
|
||||
if "$cygwin" || "$msys" ; then
|
||||
APP_HOME=$( cygpath --path --mixed "$APP_HOME" )
|
||||
CLASSPATH=$( cygpath --path --mixed "$CLASSPATH" )
|
||||
|
||||
JAVACMD=$( cygpath --unix "$JAVACMD" )
|
||||
|
||||
# Now convert the arguments - kludge to limit ourselves to /bin/sh
|
||||
for arg do
|
||||
if
|
||||
case $arg in #(
|
||||
-*) false ;; # don't mess with options #(
|
||||
/?*) t=${arg#/} t=/${t%%/*} # looks like a POSIX filepath
|
||||
[ -e "$t" ] ;; #(
|
||||
*) false ;;
|
||||
esac
|
||||
then
|
||||
arg=$( cygpath --path --ignore --mixed "$arg" )
|
||||
fi
|
||||
# Roll the args list around exactly as many times as the number of
|
||||
# args, so each arg winds up back in the position where it started, but
|
||||
# possibly modified.
|
||||
#
|
||||
# NB: a `for` loop captures its iteration list before it begins, so
|
||||
# changing the positional parameters here affects neither the number of
|
||||
# iterations, nor the values presented in `arg`.
|
||||
shift # remove old arg
|
||||
set -- "$@" "$arg" # push replacement arg
|
||||
done
|
||||
fi
|
||||
|
||||
# Collect all arguments for the java command;
|
||||
# * $DEFAULT_JVM_OPTS, $JAVA_OPTS, and $GRADLE_OPTS can contain fragments of
|
||||
# shell script including quotes and variable substitutions, so put them in
|
||||
# double quotes to make sure that they get re-expanded; and
|
||||
# * put everything else in single quotes, so that it's not re-expanded.
|
||||
|
||||
set -- \
|
||||
"-Dorg.gradle.appname=$APP_BASE_NAME" \
|
||||
-classpath "$CLASSPATH" \
|
||||
org.gradle.wrapper.GradleWrapperMain \
|
||||
"$@"
|
||||
|
||||
# Use "xargs" to parse quoted args.
|
||||
#
|
||||
# With -n1 it outputs one arg per line, with the quotes and backslashes removed.
|
||||
#
|
||||
# In Bash we could simply go:
|
||||
#
|
||||
# readarray ARGS < <( xargs -n1 <<<"$var" ) &&
|
||||
# set -- "${ARGS[@]}" "$@"
|
||||
#
|
||||
# but POSIX shell has neither arrays nor command substitution, so instead we
|
||||
# post-process each arg (as a line of input to sed) to backslash-escape any
|
||||
# character that might be a shell metacharacter, then use eval to reverse
|
||||
# that process (while maintaining the separation between arguments), and wrap
|
||||
# the whole thing up as a single "set" statement.
|
||||
#
|
||||
# This will of course break if any of these variables contains a newline or
|
||||
# an unmatched quote.
|
||||
#
|
||||
|
||||
eval "set -- $(
|
||||
printf '%s\n' "$DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS" |
|
||||
xargs -n1 |
|
||||
sed ' s~[^-[:alnum:]+,./:=@_]~\\&~g; ' |
|
||||
tr '\n' ' '
|
||||
)" '"$@"'
|
||||
|
||||
exec "$JAVACMD" "$@"
|
||||
89
android/gradlew.bat
vendored
Normal file
89
android/gradlew.bat
vendored
Normal file
@ -0,0 +1,89 @@
|
||||
@rem
|
||||
@rem Copyright 2015 the original author or authors.
|
||||
@rem
|
||||
@rem Licensed under the Apache License, Version 2.0 (the "License");
|
||||
@rem you may not use this file except in compliance with the License.
|
||||
@rem You may obtain a copy of the License at
|
||||
@rem
|
||||
@rem https://www.apache.org/licenses/LICENSE-2.0
|
||||
@rem
|
||||
@rem Unless required by applicable law or agreed to in writing, software
|
||||
@rem distributed under the License is distributed on an "AS IS" BASIS,
|
||||
@rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
@rem See the License for the specific language governing permissions and
|
||||
@rem limitations under the License.
|
||||
@rem
|
||||
|
||||
@if "%DEBUG%" == "" @echo off
|
||||
@rem ##########################################################################
|
||||
@rem
|
||||
@rem Gradle startup script for Windows
|
||||
@rem
|
||||
@rem ##########################################################################
|
||||
|
||||
@rem Set local scope for the variables with windows NT shell
|
||||
if "%OS%"=="Windows_NT" setlocal
|
||||
|
||||
set DIRNAME=%~dp0
|
||||
if "%DIRNAME%" == "" set DIRNAME=.
|
||||
set APP_BASE_NAME=%~n0
|
||||
set APP_HOME=%DIRNAME%
|
||||
|
||||
@rem Resolve any "." and ".." in APP_HOME to make it shorter.
|
||||
for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi
|
||||
|
||||
@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
|
||||
set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m"
|
||||
|
||||
@rem Find java.exe
|
||||
if defined JAVA_HOME goto findJavaFromJavaHome
|
||||
|
||||
set JAVA_EXE=java.exe
|
||||
%JAVA_EXE% -version >NUL 2>&1
|
||||
if "%ERRORLEVEL%" == "0" goto execute
|
||||
|
||||
echo.
|
||||
echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
|
||||
echo.
|
||||
echo Please set the JAVA_HOME variable in your environment to match the
|
||||
echo location of your Java installation.
|
||||
|
||||
goto fail
|
||||
|
||||
:findJavaFromJavaHome
|
||||
set JAVA_HOME=%JAVA_HOME:"=%
|
||||
set JAVA_EXE=%JAVA_HOME%/bin/java.exe
|
||||
|
||||
if exist "%JAVA_EXE%" goto execute
|
||||
|
||||
echo.
|
||||
echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME%
|
||||
echo.
|
||||
echo Please set the JAVA_HOME variable in your environment to match the
|
||||
echo location of your Java installation.
|
||||
|
||||
goto fail
|
||||
|
||||
:execute
|
||||
@rem Setup the command line
|
||||
|
||||
set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
|
||||
|
||||
|
||||
@rem Execute Gradle
|
||||
"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %*
|
||||
|
||||
:end
|
||||
@rem End local scope for the variables with windows NT shell
|
||||
if "%ERRORLEVEL%"=="0" goto mainEnd
|
||||
|
||||
:fail
|
||||
rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
|
||||
rem the _cmd.exe /c_ return code!
|
||||
if not "" == "%GRADLE_EXIT_CONSOLE%" exit 1
|
||||
exit /b 1
|
||||
|
||||
:mainEnd
|
||||
if "%OS%"=="Windows_NT" endlocal
|
||||
|
||||
:omega
|
||||
5
android/settings.gradle
Normal file
5
android/settings.gradle
Normal file
@ -0,0 +1,5 @@
|
||||
include ':app'
|
||||
include ':capacitor-cordova-android-plugins'
|
||||
project(':capacitor-cordova-android-plugins').projectDir = new File('./capacitor-cordova-android-plugins/')
|
||||
|
||||
apply from: 'capacitor.settings.gradle'
|
||||
16
android/variables.gradle
Normal file
16
android/variables.gradle
Normal file
@ -0,0 +1,16 @@
|
||||
ext {
|
||||
minSdkVersion = 22
|
||||
compileSdkVersion = 32
|
||||
targetSdkVersion = 32
|
||||
androidxActivityVersion = '1.4.0'
|
||||
androidxAppCompatVersion = '1.4.2'
|
||||
androidxCoordinatorLayoutVersion = '1.2.0'
|
||||
androidxCoreVersion = '1.8.0'
|
||||
androidxFragmentVersion = '1.4.1'
|
||||
coreSplashScreenVersion = '1.0.0-rc01'
|
||||
androidxWebkitVersion = '1.4.0'
|
||||
junitVersion = '4.13.2'
|
||||
androidxJunitVersion = '1.1.3'
|
||||
androidxEspressoCoreVersion = '3.4.0'
|
||||
cordovaAndroidVersion = '10.1.1'
|
||||
}
|
||||
5
babel.config.js
Normal file
5
babel.config.js
Normal file
@ -0,0 +1,5 @@
|
||||
module.exports = {
|
||||
presets: [
|
||||
'@vue/cli-plugin-babel/preset'
|
||||
]
|
||||
}
|
||||
10
capacitor.config.ts
Normal file
10
capacitor.config.ts
Normal file
@ -0,0 +1,10 @@
|
||||
import { CapacitorConfig } from '@capacitor/cli';
|
||||
|
||||
const config: CapacitorConfig = {
|
||||
appId: 'ho.ooo.ka',
|
||||
appName: 'hookah',
|
||||
webDir: 'dist',
|
||||
bundledWebRuntime: false
|
||||
};
|
||||
|
||||
export default config;
|
||||
21762
package-lock.json
generated
Normal file
21762
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
66
package.json
Normal file
66
package.json
Normal file
@ -0,0 +1,66 @@
|
||||
{
|
||||
"name": "hookah",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
"build": "vue-cli-service build",
|
||||
"lint": "vue-cli-service lint",
|
||||
"deploy": "upload-script.bat"
|
||||
},
|
||||
"dependencies": {
|
||||
"@capacitor/android": "^4.6.2",
|
||||
"@capacitor/cli": "^4.6.2",
|
||||
"@capacitor/core": "^4.6.2",
|
||||
"@fortawesome/fontawesome-svg-core": "^6.1.1",
|
||||
"@fortawesome/free-solid-svg-icons": "^6.1.1",
|
||||
"@fortawesome/vue-fontawesome": "^3.0.0-5",
|
||||
"core-js": "^3.8.3",
|
||||
"pinia": "^2.0.13",
|
||||
"vue": "^3.2.13",
|
||||
"vue-router": "^4.0.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@typescript-eslint/eslint-plugin": "^5.4.0",
|
||||
"@typescript-eslint/parser": "^5.4.0",
|
||||
"@vue/cli-plugin-babel": "~5.0.0",
|
||||
"@vue/cli-plugin-eslint": "~5.0.0",
|
||||
"@vue/cli-plugin-router": "~5.0.0",
|
||||
"@vue/cli-plugin-typescript": "~5.0.0",
|
||||
"@vue/cli-service": "~5.0.0",
|
||||
"@vue/eslint-config-typescript": "^9.1.0",
|
||||
"eslint": "^7.32.0",
|
||||
"eslint-plugin-vue": "^8.0.3",
|
||||
"sass": "^1.32.7",
|
||||
"sass-loader": "^12.0.0",
|
||||
"typescript": "~4.5.5",
|
||||
"vue-cli-plugin-pinia": "^0.1.2"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"root": true,
|
||||
"env": {
|
||||
"node": true
|
||||
},
|
||||
"extends": [
|
||||
"plugin:vue/vue3-essential",
|
||||
"eslint:recommended",
|
||||
"@vue/typescript/recommended"
|
||||
],
|
||||
"parserOptions": {
|
||||
"ecmaVersion": 2020
|
||||
},
|
||||
"rules": {},
|
||||
"globals": {
|
||||
"defineProps": "readonly",
|
||||
"defineEmits": "readonly",
|
||||
"defineExpose": "readonly",
|
||||
"withDefaults": "readonly"
|
||||
}
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
"last 2 versions",
|
||||
"not dead",
|
||||
"not ie 11"
|
||||
]
|
||||
}
|
||||
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
19
public/index.html
Normal file
19
public/index.html
Normal file
@ -0,0 +1,19 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
|
||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
<strong>
|
||||
We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to
|
||||
continue.
|
||||
</strong>
|
||||
</noscript>
|
||||
<div id="app" class="app"></div>
|
||||
</body>
|
||||
</html>
|
||||
BIN
public/media/images/intro-image-1.webp
Normal file
BIN
public/media/images/intro-image-1.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 176 KiB |
BIN
public/media/images/intro-image-2.webp
Normal file
BIN
public/media/images/intro-image-2.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
BIN
public/media/images/intro-image-3.webp
Normal file
BIN
public/media/images/intro-image-3.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
public/media/images/promo.webp
Normal file
BIN
public/media/images/promo.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
BIN
public/media/images/tobaco1.webp
Normal file
BIN
public/media/images/tobaco1.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
123
src/App.vue
Normal file
123
src/App.vue
Normal file
@ -0,0 +1,123 @@
|
||||
<template>
|
||||
<RouterView />
|
||||
<div id="modals"></div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useUserStore, useUIStore } from "@/store";
|
||||
|
||||
const userStore = useUserStore();
|
||||
const uiStore = useUIStore();
|
||||
|
||||
init();
|
||||
function init() {
|
||||
userStore.loadData();
|
||||
|
||||
const savedTheme = localStorage.getItem("theme");
|
||||
if (savedTheme) {
|
||||
uiStore.setTheme(savedTheme);
|
||||
} else {
|
||||
if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
|
||||
uiStore.setTheme("dark");
|
||||
} else {
|
||||
uiStore.setTheme("light");
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "@/styles/themes.scss";
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
html {
|
||||
font-size: 2vw;
|
||||
|
||||
@media (min-width: 500px) {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
body {
|
||||
background: color("main-background");
|
||||
|
||||
font-size: r(22);
|
||||
font-family: Roboto, sans-serif;
|
||||
font-weight: normal;
|
||||
color: color("main-color");
|
||||
|
||||
@media (min-width: 500px) {
|
||||
width: 500px;
|
||||
margin: 0 auto;
|
||||
border: 1px solid grey;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.fa-icon {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.app {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
|
||||
&__view {
|
||||
$__view: &;
|
||||
position: relative;
|
||||
flex: 1;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
|
||||
&--transition-direction {
|
||||
&--left {
|
||||
#{$__view}--transition {
|
||||
&-enter-from {
|
||||
transform: translateX(-100vw);
|
||||
}
|
||||
&-leave-to {
|
||||
transform: translateX(100vw);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--right {
|
||||
#{$__view}--transition {
|
||||
&-enter-from {
|
||||
transform: translateX(100vw);
|
||||
}
|
||||
&-leave-to {
|
||||
transform: translateX(-100vw);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--transition {
|
||||
&-enter-active,
|
||||
&-leave-active {
|
||||
transition: all 0.18s linear;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__navigation-bar {
|
||||
flex: 0 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
BIN
src/assets/fonts/Roboto-Bold.ttf
Normal file
BIN
src/assets/fonts/Roboto-Bold.ttf
Normal file
Binary file not shown.
BIN
src/assets/fonts/Roboto-Bold.woff2
Normal file
BIN
src/assets/fonts/Roboto-Bold.woff2
Normal file
Binary file not shown.
BIN
src/assets/fonts/Roboto-Italic.ttf
Normal file
BIN
src/assets/fonts/Roboto-Italic.ttf
Normal file
Binary file not shown.
BIN
src/assets/fonts/Roboto-Italic.woff2
Normal file
BIN
src/assets/fonts/Roboto-Italic.woff2
Normal file
Binary file not shown.
BIN
src/assets/fonts/Roboto-Light.ttf
Normal file
BIN
src/assets/fonts/Roboto-Light.ttf
Normal file
Binary file not shown.
BIN
src/assets/fonts/Roboto-Light.woff2
Normal file
BIN
src/assets/fonts/Roboto-Light.woff2
Normal file
Binary file not shown.
BIN
src/assets/fonts/Roboto-Regular.ttf
Normal file
BIN
src/assets/fonts/Roboto-Regular.ttf
Normal file
Binary file not shown.
BIN
src/assets/fonts/Roboto-Regular.woff2
Normal file
BIN
src/assets/fonts/Roboto-Regular.woff2
Normal file
Binary file not shown.
BIN
src/assets/images/smoke.webp
Normal file
BIN
src/assets/images/smoke.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 780 KiB |
BIN
src/assets/logo.png
Normal file
BIN
src/assets/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
19
src/components.d.ts
vendored
Normal file
19
src/components.d.ts
vendored
Normal file
@ -0,0 +1,19 @@
|
||||
// components.d.ts
|
||||
declare module "@vue/runtime-core" {
|
||||
export interface GlobalComponents {
|
||||
RouterLink: typeof import("vue-router")["RouterLink"];
|
||||
RouterView: typeof import("vue-router")["RouterView"];
|
||||
Component: typeof import("vue")["component"];
|
||||
FontAwesomeIcon: typeof import("@fortawesome/vue-fontawesome")["FontAwesomeIcon"];
|
||||
FontAwesomeLayers: typeof import("@fortawesome/vue-fontawesome")["FontAwesomeLayers"];
|
||||
InputComp: typeof import("@/components/UI/InputComp.vue");
|
||||
InputFileComp: typeof import("@/components/UI/InputFileComp.vue");
|
||||
ButtonComp: typeof import("@/components/UI/ButtonComp.vue");
|
||||
ImageComp: typeof import("@/components/UI/ImageComp.vue");
|
||||
ModalComp: typeof import("@/components/UI/ModalComp.vue");
|
||||
SliderComp: typeof import("@/components/UI/Slider/SliderComp.vue");
|
||||
SliderTabComp: typeof import("@/components/UI/Slider/SliderTabComp.vue");
|
||||
}
|
||||
}
|
||||
|
||||
export {};
|
||||
230
src/components/Authorization/AuthorizationMain.vue
Normal file
230
src/components/Authorization/AuthorizationMain.vue
Normal file
@ -0,0 +1,230 @@
|
||||
<template>
|
||||
<div class="authorization">
|
||||
<div class="authorization__head">
|
||||
<FontAwesomeIcon class="authorization__head-link" icon="chevron-left" @click="goToMain()" />
|
||||
<div class="authorization__head-text" v-if="isLogin">Вход</div>
|
||||
<div class="authorization__head-text" v-else>Регистрация</div>
|
||||
</div>
|
||||
|
||||
<div class="authorization__content" v-if="isLogin">
|
||||
<InputComp type="email" placeholder="Ваш email" :hasWarning="fieldHasErrors('Email')" v-model="dataLogin.email" />
|
||||
<InputComp type="password" placeholder="Пароль" :hasWarning="fieldHasErrors('Пароль')" v-model="dataLogin.password" />
|
||||
|
||||
<ButtonComp class="authorization__button" value="Войти" type="primary" @click="submit()" />
|
||||
<div class="authorization__toggler">
|
||||
Ещё нет аккаунта?
|
||||
<span class="authorization__toggler-link" @click="toggleType()">Зарегистрироваться</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="authorization__content" v-else>
|
||||
<SwitchableImage class="authorization__photo" :value="dataRegister.image" :edited="true" @change="setRegisterImage" />
|
||||
<InputComp type="text" placeholder="Ваше имя *" :hasWarning="fieldHasErrors('Имя')" v-model="dataRegister.name" />
|
||||
<InputComp type="text" placeholder="Ваша фамилия *" :hasWarning="fieldHasErrors('Фамилия')" v-model="dataRegister.surname" />
|
||||
<InputComp type="email" placeholder="Ваш email *" :hasWarning="fieldHasErrors('Email')" v-model="dataRegister.email" />
|
||||
<InputComp type="password" placeholder="Пароль *" :hasWarning="fieldHasErrors('Пароль')" v-model="dataRegister.password" />
|
||||
<InputComp
|
||||
type="password"
|
||||
placeholder="Повторите пароль *"
|
||||
:hasWarning="fieldHasErrors('Пароль')"
|
||||
v-model="dataRegister.password2"
|
||||
/>
|
||||
|
||||
<ButtonComp class="authorization__button" value="Зарегистрироваться" type="primary" @click="submit()" />
|
||||
<div class="authorization__toggler">
|
||||
Уже есть аккаунт?
|
||||
<span class="authorization__toggler-link" @click="toggleType()">Войти</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<NotificationsMain class="authorization__notifications" v-model="notifications" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from "vue";
|
||||
import InputImage from "@/components/Authorization/InputImage.vue";
|
||||
import NotificationsMain from "@/components/Notifications/NotificationsMain.vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import { useUserStore } from "@/store";
|
||||
import { useUserApi } from "@/composables/api";
|
||||
import { FieldsContainer, FieldChecks } from "@/modules/validator";
|
||||
import { notification } from "@/types";
|
||||
import SwitchableImage from "@/components/Common/SwitchableImage.vue";
|
||||
import { convertFileToBase64String } from "@/composables/utils";
|
||||
const router = useRouter();
|
||||
const userStore = useUserStore();
|
||||
const userApi = useUserApi();
|
||||
|
||||
const props = defineProps<{ type: string }>();
|
||||
|
||||
const isLogin = computed(() => props.type === "login");
|
||||
|
||||
function toggleType() {
|
||||
if (isLogin.value) {
|
||||
router.push("/register");
|
||||
} else {
|
||||
router.push("/login");
|
||||
}
|
||||
notifications.value = [];
|
||||
|
||||
resetData();
|
||||
}
|
||||
|
||||
function goToMain() {
|
||||
router.push("/");
|
||||
}
|
||||
|
||||
//#region login and registration
|
||||
const dataLogin = ref<{
|
||||
email: string;
|
||||
password: string;
|
||||
}>({ email: "", password: "" });
|
||||
|
||||
const dataRegister = ref<{
|
||||
name: string;
|
||||
surname: string;
|
||||
email: string;
|
||||
password: string;
|
||||
password2: string;
|
||||
image: string;
|
||||
imageFile?: File;
|
||||
}>({ name: "", surname: "", email: "", password: "", password2: "", image: "", imageFile: undefined });
|
||||
|
||||
async function setRegisterImage(file: File) {
|
||||
console.log(file);
|
||||
|
||||
dataRegister.value.imageFile = file;
|
||||
dataRegister.value.image = await convertFileToBase64String(file);
|
||||
}
|
||||
|
||||
const notifications = ref<notification[]>([]);
|
||||
|
||||
async function submit() {
|
||||
let errors = getFieldsErrors();
|
||||
|
||||
notifications.value = errors;
|
||||
|
||||
if (errors.length > 0) return;
|
||||
|
||||
if (isLogin.value) {
|
||||
const resp = await userApi.login(dataLogin.value);
|
||||
userStore.setData(resp);
|
||||
router.push("/");
|
||||
} else {
|
||||
const resp = await userApi.register(dataRegister.value);
|
||||
notifications.value.push({ text: "Регистрация прошла успешно. Теперь вы можете войти.", type: "success" });
|
||||
router.push("/login");
|
||||
}
|
||||
|
||||
resetData();
|
||||
}
|
||||
|
||||
function getFieldsErrors() {
|
||||
const container = new FieldsContainer();
|
||||
if (isLogin.value) {
|
||||
container.addField("Email", dataLogin.value.email, [FieldChecks.nonEmpty, FieldChecks.email]);
|
||||
container.addField("Пароль", dataLogin.value.password, [FieldChecks.nonEmpty, FieldChecks.minLength(6), FieldChecks.maxLength(32)]);
|
||||
} else {
|
||||
container.addField("Имя", dataRegister.value.name, [
|
||||
FieldChecks.nonEmpty,
|
||||
FieldChecks.onlyLettersWhitespaces,
|
||||
FieldChecks.minLength(2),
|
||||
FieldChecks.maxLength(20),
|
||||
]);
|
||||
container.addField("Фамилия", dataRegister.value.surname, [
|
||||
FieldChecks.nonEmpty,
|
||||
FieldChecks.onlyLettersWhitespaces,
|
||||
FieldChecks.minLength(2),
|
||||
FieldChecks.maxLength(20),
|
||||
]);
|
||||
container.addField("Email", dataRegister.value.email, [FieldChecks.nonEmpty, FieldChecks.email]);
|
||||
container.addField("Пароль", dataRegister.value.password, [
|
||||
FieldChecks.nonEmpty,
|
||||
FieldChecks.minLength(6),
|
||||
FieldChecks.maxLength(32),
|
||||
]);
|
||||
}
|
||||
|
||||
let errors: notification[] = [];
|
||||
for (let [key, value] of container.fields) {
|
||||
const error = value.tryGetFirstError();
|
||||
if (error !== "") {
|
||||
errors.push({ field: key, text: error, type: "warning" });
|
||||
}
|
||||
}
|
||||
|
||||
if (!isLogin.value) {
|
||||
if (dataRegister.value.password !== dataRegister.value.password2) {
|
||||
errors.push({ field: "Пароль", text: "Пароли не совпадают.", type: "warning" });
|
||||
}
|
||||
}
|
||||
return errors;
|
||||
}
|
||||
|
||||
function fieldHasErrors(field: string) {
|
||||
return notifications.value.some((x) => x.field === field);
|
||||
}
|
||||
|
||||
function resetData() {
|
||||
dataLogin.value = { email: "", password: "" };
|
||||
dataRegister.value = { name: "", surname: "", email: "", password: "", password2: "", image: "", imageFile: undefined };
|
||||
}
|
||||
//#endregion
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.authorization {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
padding: r(40) r(70);
|
||||
|
||||
&__head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: r(20);
|
||||
font-size: r(20);
|
||||
}
|
||||
|
||||
&__head-link {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&__content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&__photo {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
&__button {
|
||||
align-self: center;
|
||||
margin-top: r(30);
|
||||
min-width: 50%;
|
||||
}
|
||||
|
||||
&__toggler {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: r(5);
|
||||
margin-top: r(15);
|
||||
color: color("ui-background");
|
||||
font-size: r(19);
|
||||
}
|
||||
|
||||
&__toggler-link {
|
||||
color: color("theme-color");
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&__notifications {
|
||||
position: fixed;
|
||||
inset: auto 0 0 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
68
src/components/Authorization/InputImage.vue
Normal file
68
src/components/Authorization/InputImage.vue
Normal file
@ -0,0 +1,68 @@
|
||||
<template>
|
||||
<label class="input-image">
|
||||
<img class="input-image__image" :src="imageSrc" v-if="imageFile" />
|
||||
<FontAwesomeIcon class="input-image__icon" icon="user" v-else />
|
||||
<input class="input-image__input" type="file" accept=".jpg, .jpeg, .png, image/png, image/jpg, image/jpeg" @change="valueChanged" />
|
||||
</label>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { convertFileToBase64String } from "@/composables/utils";
|
||||
|
||||
const emit = defineEmits(["change"]);
|
||||
|
||||
const imageFile = ref<File | undefined>(undefined);
|
||||
const imageSrc = ref("");
|
||||
|
||||
async function valueChanged(event: Event) {
|
||||
const inputElement = event.target as HTMLInputElement;
|
||||
const file = inputElement.files?.[0];
|
||||
|
||||
if (file) {
|
||||
if (!file.type.includes("image")) {
|
||||
alert("Необходимо выбрать изображение");
|
||||
return;
|
||||
}
|
||||
|
||||
imageFile.value = file;
|
||||
|
||||
const fileString = await convertFileToBase64String(file);
|
||||
|
||||
imageSrc.value = fileString;
|
||||
emit("change", file);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.input-image {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: r(100);
|
||||
height: r(100);
|
||||
margin: r(10);
|
||||
border-radius: 50%;
|
||||
border: r(1) solid color("ui-background");
|
||||
overflow: hidden;
|
||||
|
||||
&__image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
height: 30%;
|
||||
width: 30%;
|
||||
color: color("ui-background");
|
||||
}
|
||||
|
||||
&__input {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
84
src/components/Common/SwitchableImage.vue
Normal file
84
src/components/Common/SwitchableImage.vue
Normal file
@ -0,0 +1,84 @@
|
||||
<template>
|
||||
<div class="switchable-image">
|
||||
<img class="switchable-image__image" :src="value" v-if="value" />
|
||||
<FontAwesomeIcon class="switchable-image__placeholder" icon="user" v-else />
|
||||
<label class="switchable-image__input-field" v-if="edited">
|
||||
<FontAwesomeIcon class="switchable-image__input-icon" icon="pen" />
|
||||
<input
|
||||
class="switchable-image__input"
|
||||
type="file"
|
||||
accept=".jpg, .jpeg, .png, image/png, image/jpg, image/jpeg"
|
||||
@change="valueChanged"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const props = defineProps<{ value: string; edited: boolean }>();
|
||||
const emit = defineEmits(["change"]);
|
||||
|
||||
function valueChanged(event: Event) {
|
||||
const inputElement = event.target as HTMLInputElement;
|
||||
const file = inputElement.files?.[0];
|
||||
if (file) {
|
||||
emit("change", file);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.switchable-image {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: r(150);
|
||||
height: r(150);
|
||||
border-radius: 50%;
|
||||
border: r(1) solid color("theme-color");
|
||||
|
||||
&__image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border: none;
|
||||
outline: none;
|
||||
border-radius: 50%;
|
||||
|
||||
&[src=""] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__placeholder {
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
color: color("theme-color");
|
||||
}
|
||||
|
||||
&__input-field {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
&__input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__input-icon {
|
||||
position: absolute;
|
||||
top: r(5);
|
||||
right: r(5);
|
||||
width: 15%;
|
||||
height: 15%;
|
||||
border-radius: 50%;
|
||||
padding: r(10);
|
||||
|
||||
background: color("theme-color");
|
||||
color: color("ui-color-on-background");
|
||||
}
|
||||
}
|
||||
</style>
|
||||
22
src/components/Common/ThemeSwitcher.vue
Normal file
22
src/components/Common/ThemeSwitcher.vue
Normal file
@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<div class="theme-switcher" @click="toggleTheme()">
|
||||
<FontAwesomeIcon class="fa-icon" icon="sun" v-if="uiStore.theme === 'dark'" />
|
||||
<FontAwesomeIcon class="fa-icon" icon="moon" v-else />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useUIStore } from "@/store";
|
||||
|
||||
const uiStore = useUIStore();
|
||||
|
||||
function toggleTheme() {
|
||||
const nextTheme = uiStore.theme === "light" ? "dark" : "light";
|
||||
uiStore.setTheme(nextTheme);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.theme-switcher {
|
||||
}
|
||||
</style>
|
||||
56
src/components/HomeView/AuthorizationNeeded.vue
Normal file
56
src/components/HomeView/AuthorizationNeeded.vue
Normal file
@ -0,0 +1,56 @@
|
||||
<template>
|
||||
<div class="authorization-needed">
|
||||
<div class="authorization-needed__container">
|
||||
<FontAwesomeIcon class="authorization-needed__icon" icon="user-lock" />
|
||||
<div class="authorization-needed__title">Необходима авторизация</div>
|
||||
<div class="authorization-needed__text">
|
||||
Для просмотра этой страницы
|
||||
<br />
|
||||
вам необходимо
|
||||
<RouterLink to="/login" class="authorization-needed__link">войти</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
<style lang="scss">
|
||||
.authorization-needed {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: r(20);
|
||||
|
||||
&__container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: r(15);
|
||||
}
|
||||
|
||||
&__icon {
|
||||
color: color("theme-color");
|
||||
font-size: r(35);
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
&__text {
|
||||
text-align: center;
|
||||
font-size: r(18);
|
||||
line-height: r(26);
|
||||
}
|
||||
|
||||
&__link {
|
||||
color: color("theme-color");
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
75
src/components/HomeView/Header/HeaderMain.vue
Normal file
75
src/components/HomeView/Header/HeaderMain.vue
Normal file
@ -0,0 +1,75 @@
|
||||
<template>
|
||||
<div class="header" v-if="userStore.isLoggedIn" @click="goToUserPage()">
|
||||
<div class="header__user-image">
|
||||
<div class="header__image-container">
|
||||
<img class="header__image" :src="userStore.userData.image" v-if="userStore.userData.image" />
|
||||
<FontAwesomeIcon class="header__image-placeholder" icon="user" v-else />
|
||||
</div>
|
||||
</div>
|
||||
<div class="header__name">{{ userStore.userData.name }} {{ userStore.userData.surname }}</div>
|
||||
<div class="header__coins">
|
||||
<FontAwesomeIcon icon="coins" />
|
||||
{{ userStore.laCoins }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useUserStore } from "@/store";
|
||||
import { useRouter } from "vue-router";
|
||||
|
||||
const userStore = useUserStore();
|
||||
const router = useRouter();
|
||||
|
||||
function goToUserPage() {
|
||||
router.push("/user");
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: r(60);
|
||||
padding: r(5) r(20);
|
||||
color: color("ui-color-on-background");
|
||||
background: linear-gradient(60deg, color("theme-color"), color("theme-color", $lightness: -13%));
|
||||
box-shadow: 0 r(4) r(20) 0 hsla(0, 0%, 0%, 0.14), 0 r(7) r(12) r(-5) color("theme-color", $alpha: -0.54);
|
||||
user-select: none;
|
||||
z-index: 50;
|
||||
|
||||
&__user-image {
|
||||
position: relative;
|
||||
width: r(60);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&__image-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: r(50);
|
||||
height: r(50);
|
||||
border-radius: 50%;
|
||||
background: white;
|
||||
}
|
||||
|
||||
&__image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
&__image-placeholder {
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
color: color("theme-color");
|
||||
}
|
||||
|
||||
&__name {
|
||||
flex: 1;
|
||||
line-height: r(21);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
92
src/components/HomeView/HomeViewMain.vue
Normal file
92
src/components/HomeView/HomeViewMain.vue
Normal file
@ -0,0 +1,92 @@
|
||||
<template>
|
||||
<div class="home-view">
|
||||
<HeaderMain />
|
||||
<div class="home-view__view" :class="'home-view__view--transition-direction--' + navigationDirection">
|
||||
<RouterView v-slot="{ Component }" class="home-view__page">
|
||||
<Transition name="home-view__view--transition">
|
||||
<KeepAlive>
|
||||
<Component :is="Component" />
|
||||
</KeepAlive>
|
||||
</Transition>
|
||||
</RouterView>
|
||||
</div>
|
||||
<NavigationBarMain class="home-view__navigation-bar" @direction="setDirection" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import HeaderMain from "@/components/HomeView/Header/HeaderMain.vue";
|
||||
import NavigationBarMain from "@/components/HomeView/NavigationBar/NavigationBarMain.vue";
|
||||
import { ref } from "vue";
|
||||
|
||||
const navigationDirection = ref("none");
|
||||
|
||||
function setDirection(direction: string) {
|
||||
navigationDirection.value = direction;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.home-view {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&__view {
|
||||
$__view: &;
|
||||
|
||||
flex: 1;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
background: color("second-background");
|
||||
|
||||
&--transition-direction {
|
||||
&--left {
|
||||
#{$__view}--transition {
|
||||
&-enter-from {
|
||||
transform: translateX(-100%);
|
||||
opacity: 0;
|
||||
}
|
||||
&-leave-to {
|
||||
transform: translateX(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--right {
|
||||
#{$__view}--transition {
|
||||
&-enter-from {
|
||||
transform: translateX(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
&-leave-to {
|
||||
transform: translateX(-100%);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--transition {
|
||||
&-enter-active,
|
||||
&-leave-active {
|
||||
transition: all 0.1s ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__page {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
&__navigation-bar {
|
||||
flex: 0 1 auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
180
src/components/HomeView/NavigationBar/NavigationBarMain.vue
Normal file
180
src/components/HomeView/NavigationBar/NavigationBarMain.vue
Normal file
@ -0,0 +1,180 @@
|
||||
<template>
|
||||
<div class="navigation-bar">
|
||||
<template v-for="tab in tabs" :key="tab.index">
|
||||
<RouterLink
|
||||
class="navigation-bar__item"
|
||||
:class="{
|
||||
'navigation-bar__item--center': tab.isCenter,
|
||||
}"
|
||||
:to="tab.path"
|
||||
:active-class="'navigation-bar__item--active'"
|
||||
>
|
||||
<div class="navigation-bar__icon-container">
|
||||
<FontAwesomeIcon class="navigation-bar__icon" :icon="tab.icon" />
|
||||
<div class="navigation-bar__icon-counter" v-if="tab.counter?.value">
|
||||
{{ tab.counter }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="navigation-bar__item-name">
|
||||
{{ tab.name }}
|
||||
</div>
|
||||
</RouterLink>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useOrdersStore } from "@/store";
|
||||
import { ref, computed, nextTick } from "vue";
|
||||
// router
|
||||
import { onBeforeRouteUpdate, useRoute, useRouter } from "vue-router";
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const emit = defineEmits(["direction"]);
|
||||
const ordersStore = useOrdersStore();
|
||||
|
||||
const tabs = [
|
||||
{ path: "/home", name: "Лента", icon: "house" },
|
||||
{ path: "/menu", name: "Меню", icon: "bars" },
|
||||
{ path: "/hookah", name: "Кальян", isCenter: true, icon: "bottle-droplet" },
|
||||
{
|
||||
path: "/orders",
|
||||
name: "Заказы",
|
||||
icon: "file-lines",
|
||||
counter: computed(() => ordersStore.orders.filter((x) => x.status !== "completed").length),
|
||||
},
|
||||
{ path: "/user", name: "Профиль", icon: "user" },
|
||||
];
|
||||
|
||||
const currentTabIndex = computed(() => {
|
||||
let tab = tabs.find((x) => route.path.includes(x.path));
|
||||
if (!tab) return -1;
|
||||
return tabs.indexOf(tab);
|
||||
});
|
||||
|
||||
onBeforeRouteUpdate((to) => {
|
||||
const tabTo = tabs.find((x) => to.path.includes(x.path));
|
||||
if (tabTo) {
|
||||
if (currentTabIndex.value === tabs.indexOf(tabTo)) return;
|
||||
|
||||
if (currentTabIndex.value > tabs.indexOf(tabTo)) {
|
||||
emit("direction", "left");
|
||||
} else {
|
||||
emit("direction", "right");
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
emit("direction", "none");
|
||||
}, 200);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.navigation-bar {
|
||||
$p: &;
|
||||
|
||||
display: flex;
|
||||
height: r(60);
|
||||
font-size: r(16);
|
||||
color: color("ui-background");
|
||||
user-select: none;
|
||||
box-shadow: 0 r(-4) r(20) 0 hsla(0, 0%, 0%, 0.12), 0 r(-7) r(12) r(-5) hsla(0, 0%, 0%, 0.15);
|
||||
|
||||
z-index: 50;
|
||||
|
||||
&__item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
padding: r(5) 0;
|
||||
cursor: pointer;
|
||||
|
||||
&--center {
|
||||
#{$p}__icon {
|
||||
width: r(40);
|
||||
height: r(40);
|
||||
padding: r(6);
|
||||
color: color("main-background");
|
||||
background: color("ui-background");
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
#{$p}__icon-container {
|
||||
bottom: r(22);
|
||||
width: r(60);
|
||||
height: r(60);
|
||||
background: color("main-background");
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 r(-4) r(20) 0 hsla(0, 0%, 0%, 0.12), 0 r(-7) r(12) r(-5) hsla(0, 0%, 0%, 0.15);
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: r(22);
|
||||
width: 150%;
|
||||
height: r(58);
|
||||
background: color("main-background");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--active {
|
||||
#{$p}__item-name {
|
||||
color: color("main-color");
|
||||
}
|
||||
}
|
||||
|
||||
&--active#{&}:not(&--center) {
|
||||
#{$p}__icon {
|
||||
color: color("theme-color");
|
||||
}
|
||||
}
|
||||
|
||||
&--active#{&}--center {
|
||||
#{$p}__icon {
|
||||
background: color("theme-color");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__item-name {
|
||||
transition: color 0.18s ease;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: background-color 0.18s ease, color 0.18s ease;
|
||||
}
|
||||
|
||||
&__icon-counter {
|
||||
z-index: 2;
|
||||
position: absolute;
|
||||
top: -25%;
|
||||
right: -25%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: r(20);
|
||||
height: r(20);
|
||||
border-radius: 50%;
|
||||
color: color("ui-color-on-background");
|
||||
background: color("warning-color");
|
||||
}
|
||||
|
||||
&__icon-container {
|
||||
position: absolute;
|
||||
bottom: r(25);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: r(28);
|
||||
height: r(28);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
142
src/components/HomeView/Tabs/Home/HomeMain.vue
Normal file
142
src/components/HomeView/Tabs/Home/HomeMain.vue
Normal file
@ -0,0 +1,142 @@
|
||||
<template>
|
||||
<div class="home">
|
||||
<div class="home__slider-promo">
|
||||
<div class="home__slider-promo-title">Акции</div>
|
||||
<SliderComp type="infinite" :automatic="true">
|
||||
<SliderTabComp>
|
||||
<ImageComp class="home__slider-promo-image" src="/media/images/promo.webp" @click="openModal(0)" />
|
||||
<ModalComp :ref="(elem: any) => {refModal.push(elem as InstanceType<typeof ModalComp>)}">
|
||||
<ImageComp class="home__slider-promo-image" src="/media/images/promo.webp" />
|
||||
<div class="home__slider-promo-text">Текст акции 1</div>
|
||||
</ModalComp>
|
||||
</SliderTabComp>
|
||||
<SliderTabComp>
|
||||
<ImageComp class="home__slider-promo-image" src="/media/images/promo.webp" @click="openModal(1)" />
|
||||
<ModalComp :ref="(elem: any) => {refModal.push(elem as InstanceType<typeof ModalComp>)}">
|
||||
<ImageComp class="home__slider-promo-image" src="/media/images/promo.webp" />
|
||||
<div class="home__slider-promo-text" home__slider-image>Текст акции 2</div>
|
||||
</ModalComp>
|
||||
</SliderTabComp>
|
||||
<SliderTabComp>
|
||||
<ImageComp class="home__slider-promo-image" src="/media/images/promo.webp" @click="openModal(2)" />
|
||||
<ModalComp :ref="(elem: any) => {refModal.push(elem as InstanceType<typeof ModalComp>)}">
|
||||
<ImageComp class="home__slider-promo-image" src="/media/images/promo.webp" />
|
||||
<div class="home__slider-promo-text">Текст акции 3</div>
|
||||
</ModalComp>
|
||||
</SliderTabComp>
|
||||
</SliderComp>
|
||||
</div>
|
||||
<div class="home__slider" v-if="ordersStore.orders.length > 0">
|
||||
<div class="home__slider-title">Последние заказы</div>
|
||||
<div class="home__slider-list">
|
||||
<div class="home__slider-item" v-for="order in ordersStore.orders.sort((a, b) => b.id - a.id)" :key="order.id">
|
||||
<div>Заказ № {{ order.id }}</div>
|
||||
<div>Стол: {{ order.table }}</div>
|
||||
<div>Тяжесть: {{ order.heaviness.title }}</div>
|
||||
<div>Вкус: {{ order.tastes.map((x) => x.title).join(", ") }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="home__slider-footer"></div>
|
||||
</div>
|
||||
<div class="home__slider" v-if="ordersStore.favouriteOrders.length > 0">
|
||||
<div class="home__slider-title">Любимые кальяны</div>
|
||||
<div class="home__slider-list">
|
||||
<div class="home__slider-item" v-for="order in ordersStore.favouriteOrders.sort((a, b) => b.id - a.id)" :key="order.id">
|
||||
<div>Тяжесть: {{ order.heaviness.title }}</div>
|
||||
<div>Вкус: {{ order.tastes.map((x) => x.title).join(", ") }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="home__slider-footer"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useOrdersStore } from "@/store";
|
||||
import { ref } from "vue";
|
||||
import ModalComp from "@/components/UI/ModalComp.vue";
|
||||
|
||||
const refModal = ref<InstanceType<typeof ModalComp>[]>([]);
|
||||
|
||||
const ordersStore = useOrdersStore();
|
||||
|
||||
function openModal(index: number) {
|
||||
refModal.value[index].open();
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.home {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: r(20);
|
||||
min-height: 100%;
|
||||
width: 100%;
|
||||
padding: r(20) 0;
|
||||
|
||||
&__slider-promo {
|
||||
background: color("main-background");
|
||||
box-shadow: 0 r(2) r(2) 0 rgba(0, 0, 0, 0.14), 0 r(3) r(1) r(-2) rgba(0, 0, 0, 0.2), 0 r(1) r(5) 0 rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
&__slider-promo-title {
|
||||
font-size: r(25);
|
||||
padding: r(10) r(20);
|
||||
}
|
||||
|
||||
&__slider-promo-image {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__slider-promo-text {
|
||||
margin-top: r(20);
|
||||
}
|
||||
|
||||
&__slider-title {
|
||||
padding: r(10) r(30);
|
||||
//background: color("main-background");
|
||||
//box-shadow: 0 r(2) r(2) 0 rgba(0, 0, 0, 0.14), 0 r(3) r(1) r(-2) rgba(0, 0, 0, 0.2), 0 r(1) r(5) 0 rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
&__slider {
|
||||
@include main-container;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: r(1);
|
||||
background: color("main-background");
|
||||
}
|
||||
|
||||
&__slider-list {
|
||||
display: flex;
|
||||
gap: r(20);
|
||||
padding: r(5) r(20);
|
||||
overflow-x: auto;
|
||||
|
||||
@media (max-width: $mobileWidth) {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__slider-footer {
|
||||
height: r(15);
|
||||
//background: color("main-background");
|
||||
//box-shadow: 0 r(2) r(2) 0 rgba(0, 0, 0, 0.14), 0 r(3) r(1) r(-2) rgba(0, 0, 0, 0.2), 0 r(1) r(5) 0 rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
&__slider-item {
|
||||
@include main-container;
|
||||
|
||||
min-width: 60%;
|
||||
padding: r(10);
|
||||
box-shadow: 0 r(2) r(2) 0 rgba(0, 0, 0, 0.34), 0 r(3) r(1) r(-2) rgba(0, 0, 0, 0.5), 0 r(1) r(5) 0 rgba(0, 0, 0, 0.32);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
62
src/components/HomeView/Tabs/Hookah/HeavinessTab.vue
Normal file
62
src/components/HomeView/Tabs/Hookah/HeavinessTab.vue
Normal file
@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<div class="hookah-heaviness">
|
||||
<div class="hookah-heaviness__container">
|
||||
<div
|
||||
class="hookah-heaviness__item"
|
||||
v-for="item in hookahStore.heavinessList"
|
||||
:key="item.title"
|
||||
:class="{ 'hookah-heaviness__item--active': hookahStore.selectedHeaviness === item }"
|
||||
@click="changeHeaviness(item)"
|
||||
>
|
||||
{{ item.title }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useHookahStore } from "@/store";
|
||||
import { heaviness } from "@/types";
|
||||
|
||||
const hookahStore = useHookahStore();
|
||||
|
||||
function changeHeaviness(heaviness: heaviness) {
|
||||
hookahStore.selectedHeaviness = heaviness;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.hookah-heaviness {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
&__container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: r(10);
|
||||
width: 80%;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
&__item {
|
||||
@include main-container;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: r(10) r(10);
|
||||
cursor: pointer;
|
||||
transition: 0.18s ease;
|
||||
transition-property: background-color, color, box-shadow;
|
||||
|
||||
&--active {
|
||||
background: color("theme-color");
|
||||
color: color("ui-color-on-background");
|
||||
box-shadow: 0 r(2) r(2) 0 color("theme-color", $alpha: -0.86), 0 r(3) r(1) r(-2) color("theme-color", $alpha: -0.8),
|
||||
0 r(1) r(5) 0 color("theme-color", $alpha: -0.88);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
416
src/components/HomeView/Tabs/Hookah/HookahMain.vue
Normal file
416
src/components/HomeView/Tabs/Hookah/HookahMain.vue
Normal file
@ -0,0 +1,416 @@
|
||||
<template>
|
||||
<template v-if="userStore.isLoggedIn">
|
||||
<div class="hookah" :class="'hookah--transition-direction--' + direction">
|
||||
<div class="hookah__navigation">
|
||||
<div class="hookah__navigation-title">Создаём заказ. {{ currentTabIndex < 3 ? "Выберите..." : "Проверьте..." }}</div>
|
||||
<div class="hookah__navigation-buttons">
|
||||
<RouterLink
|
||||
class="hookah__navigation-item hookah-navigation-item"
|
||||
v-for="(tab, index) in tabs"
|
||||
:key="tab.name"
|
||||
:to="tab.path"
|
||||
active-class="hookah-navigation-item--active"
|
||||
:class="{ 'hookah-navigation-item--completed': isTabCompleted(index) }"
|
||||
@click.prevent="changeTab(index)"
|
||||
>
|
||||
<div class="hookah-navigation-item__side" v-html="getSideShape('rect')" v-if="index === 0"></div>
|
||||
<div class="hookah-navigation-item__side" v-html="getSideShape('left')" v-else></div>
|
||||
<div class="hookah-navigation-item__text">{{ tab.name }}</div>
|
||||
<div class="hookah-navigation-item__side" v-html="getSideShape('rect')" v-if="index === tabs.length - 1"></div>
|
||||
<div class="hookah-navigation-item__side" v-html="getSideShape('right')" v-else></div>
|
||||
</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hookah__view">
|
||||
<RouterView v-slot="{ Component }" class="hookah__page">
|
||||
<Transition name="hookah--transition">
|
||||
<Component :is="Component" />
|
||||
</Transition>
|
||||
</RouterView>
|
||||
|
||||
<Transition name="hookah__view-button-container--transition">
|
||||
<div class="hookah__view-button-container" v-show="navigationButtonShowed" @click="nextButtonClicked()">
|
||||
<ButtonComp class="hookah__view-button" type="primary" value="Далее" />
|
||||
</div>
|
||||
</Transition>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-for="num in 3"
|
||||
:key="num"
|
||||
class="hookah__background-smoke"
|
||||
:class="`hookah__background-smoke--${num}`"
|
||||
:style="`opacity: ${getSmokeOpacity(num)}`"
|
||||
></div>
|
||||
<div class="hookah__background-table" :style="`opacity: ${backgroundTableOpacity}`">
|
||||
{{ backgroundTableNumber }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<AuthorizationNeeded />
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onActivated, ref, watch } from "vue";
|
||||
import AuthorizationNeeded from "@/components/HomeView/AuthorizationNeeded.vue";
|
||||
import { onBeforeRouteUpdate, useRoute, useRouter } from "vue-router";
|
||||
import { useHookahStore, useUIStore, useUserStore } from "@/store";
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
|
||||
const hookahStore = useHookahStore();
|
||||
const userStore = useUserStore();
|
||||
const uiStore = useUIStore();
|
||||
|
||||
const html = (val: any) => val;
|
||||
|
||||
const tabs = [
|
||||
{ name: "Стол", path: "/hookah/table" },
|
||||
{ name: "Тяжесть", path: "/hookah/heaviness" },
|
||||
{ name: "Вкус", path: "/hookah/taste" },
|
||||
{ name: "Итог", path: "/hookah/summary" },
|
||||
];
|
||||
|
||||
const direction = ref("none");
|
||||
const currentTabIndex = computed(() => {
|
||||
return getTabIndexByPath(route.path);
|
||||
});
|
||||
|
||||
init();
|
||||
function init() {
|
||||
router.push(getPreviousNotCompletedTab(3)?.path ?? tabs[3].path);
|
||||
}
|
||||
onActivated(() => init());
|
||||
|
||||
function getTabIndexByPath(path: string) {
|
||||
let tab = tabs.find((x) => path === x.path);
|
||||
return tab ? tabs.indexOf(tab) : -1;
|
||||
}
|
||||
|
||||
function changeTab(index: number) {
|
||||
if (currentTabIndex.value === index) return;
|
||||
|
||||
if (currentTabIndex.value > index) {
|
||||
direction.value = "left";
|
||||
} else {
|
||||
direction.value = "right";
|
||||
}
|
||||
|
||||
router.push(tabs[index].path);
|
||||
|
||||
setTimeout(() => {
|
||||
direction.value = "none";
|
||||
}, 200);
|
||||
}
|
||||
|
||||
function getSideShape(type: "right" | "left" | "rect") {
|
||||
switch (type) {
|
||||
case "right":
|
||||
return html`
|
||||
<svg class="hookah-navigation-item__shape" viewbox="0 0 55 100">
|
||||
<polygon points="0,0 5,0 55,50 5,100 0,100" />
|
||||
</svg>
|
||||
`;
|
||||
case "left":
|
||||
return html`
|
||||
<svg class="hookah-navigation-item__shape" viewbox="0 0 55 100">
|
||||
<polygon points="0,0 55,0 55,100 0,100 50,50" />
|
||||
</svg>
|
||||
`;
|
||||
case "rect":
|
||||
return html`
|
||||
<svg class="hookah-navigation-item__shape" viewbox="0 0 51 100">
|
||||
<polygon points="1,0 51,0 51,100 1,100" />
|
||||
</svg>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
const navigationButtonLeftShowed = computed(() => {
|
||||
if (direction.value != "none") return false;
|
||||
return currentTabIndex.value > 0;
|
||||
});
|
||||
|
||||
const navigationButtonRightShowed = computed(() => {
|
||||
if (currentTabIndex.value >= tabs.length - 1) return false;
|
||||
if (direction.value != "none") return false;
|
||||
|
||||
return isTabCompleted(currentTabIndex.value);
|
||||
});
|
||||
|
||||
const navigationButtonShowed = computed(() => {
|
||||
if (currentTabIndex.value >= tabs.length - 1) return false;
|
||||
if (direction.value !== "none") return false;
|
||||
|
||||
return isTabCompleted(currentTabIndex.value);
|
||||
});
|
||||
|
||||
function nextButtonClicked() {
|
||||
const nextIncompletedTab = getNextNotCompletedTab(currentTabIndex.value);
|
||||
changeTab(tabs.indexOf(nextIncompletedTab));
|
||||
}
|
||||
|
||||
function isTabCompleted(index: number) {
|
||||
switch (index) {
|
||||
case 0:
|
||||
return hookahStore.selectedTableNumber > 0;
|
||||
case 1:
|
||||
return hookahStore.selectedHeaviness != null;
|
||||
case 2:
|
||||
return hookahStore.selectedTastes.length > 0;
|
||||
}
|
||||
}
|
||||
|
||||
function getPreviousNotCompletedTab(index: number) {
|
||||
for (let i = 0; i < index; i++) {
|
||||
if (!isTabCompleted(i)) {
|
||||
return tabs[i];
|
||||
}
|
||||
}
|
||||
return undefined;
|
||||
}
|
||||
|
||||
function getNextNotCompletedTab(index: number) {
|
||||
for (let i = index; i < 3; i++) {
|
||||
if (!isTabCompleted(i)) {
|
||||
return tabs[i];
|
||||
}
|
||||
}
|
||||
return tabs[3];
|
||||
}
|
||||
|
||||
function getSmokeOpacity(num: number) {
|
||||
if (hookahStore.selectedHeaviness && hookahStore.selectedHeaviness.id >= num - 1) {
|
||||
return uiStore.theme === "light" ? 1 : 0.1;
|
||||
}
|
||||
return 0;
|
||||
}
|
||||
|
||||
const backgroundTableOpacity = ref(0);
|
||||
const backgroundTableNumber = ref(0);
|
||||
|
||||
let backgroundTableTimeout: number;
|
||||
|
||||
function changeBackgroundTableNumber(to: number) {
|
||||
clearTimeout(backgroundTableTimeout);
|
||||
backgroundTableOpacity.value = 0;
|
||||
backgroundTableTimeout = setTimeout(() => {
|
||||
backgroundTableNumber.value = to;
|
||||
backgroundTableOpacity.value = to > 0 ? 1 : 0;
|
||||
}, 380);
|
||||
}
|
||||
|
||||
watch(
|
||||
() => hookahStore.selectedTableNumber,
|
||||
(to) => {
|
||||
changeBackgroundTableNumber(to);
|
||||
}
|
||||
);
|
||||
|
||||
onBeforeRouteUpdate((to) => {
|
||||
const tab = getPreviousNotCompletedTab(getTabIndexByPath(to.path));
|
||||
if (tab && to.path !== tab.path) {
|
||||
return tab.path;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.hookah {
|
||||
$p: &;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&__navigation {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: r(10) 0;
|
||||
gap: r(10);
|
||||
|
||||
background: color("main-background");
|
||||
box-shadow: 0 r(2) r(2) 0 rgba(0, 0, 0, 0.14), 0 r(3) r(1) r(-2) rgba(0, 0, 0, 0.2), 0 r(1) r(5) 0 rgba(0, 0, 0, 0.12);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
&__navigation-buttons {
|
||||
--height: 4rem;
|
||||
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: var(--height);
|
||||
}
|
||||
|
||||
&__navigation-item {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
&__view {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
&__view-button-container {
|
||||
position: absolute;
|
||||
inset: auto 0 r(40) 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
color: color("ui-color");
|
||||
cursor: pointer;
|
||||
|
||||
&--transition {
|
||||
&-enter-active,
|
||||
&-leave-active {
|
||||
transition: opacity 0.18s ease;
|
||||
}
|
||||
|
||||
&-enter-from,
|
||||
&-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__view-button {
|
||||
width: 35%;
|
||||
}
|
||||
|
||||
&__page {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
padding: r(20);
|
||||
}
|
||||
|
||||
&__background-smoke {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image: url("@/assets/images/smoke.webp");
|
||||
background-size: r(1200);
|
||||
background-repeat: no-repeat;
|
||||
transition: opacity 0.38s ease;
|
||||
|
||||
&--1 {
|
||||
background-position: 50% 40vh;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
&--2 {
|
||||
background-position: 25% 10vh;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&--3 {
|
||||
background-position: 75% -20vh;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&__background-table {
|
||||
position: absolute;
|
||||
inset: auto 0 0 auto;
|
||||
padding: r(20);
|
||||
|
||||
color: transparent;
|
||||
font-size: 30vh;
|
||||
font-style: italic;
|
||||
text-shadow: 0 0 r(8) color("ui-color", $alpha: -0.9);
|
||||
|
||||
transition: opacity 0.38s ease;
|
||||
z-index: 4;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
&--transition-direction {
|
||||
&--left {
|
||||
#{$p}--transition {
|
||||
&-enter-from {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
&-leave-to {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--right {
|
||||
#{$p}--transition {
|
||||
&-enter-from {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
&-leave-to {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--transition {
|
||||
&-enter-active,
|
||||
&-leave-active {
|
||||
transition: all 0.1s ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hookah-navigation-item {
|
||||
$p: &;
|
||||
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
&__side {
|
||||
height: var(--height);
|
||||
width: calc(var(--height + r(5)) / 2);
|
||||
margin: 0 r(-1);
|
||||
}
|
||||
|
||||
&__shape {
|
||||
display: block;
|
||||
height: 100%;
|
||||
fill: color("ui-background");
|
||||
transition: fill 0.18s ease;
|
||||
}
|
||||
|
||||
&__text {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
background: color("ui-background");
|
||||
color: color("ui-color-on-background");
|
||||
font-size: r(24);
|
||||
transition: background-color 0.18s ease;
|
||||
}
|
||||
|
||||
&--completed {
|
||||
#{$p}__text {
|
||||
background: color("theme-color", $saturation: -50%);
|
||||
}
|
||||
|
||||
#{$p}__shape {
|
||||
fill: color("theme-color", $saturation: -50%);
|
||||
}
|
||||
}
|
||||
|
||||
&--active {
|
||||
#{$p}__text {
|
||||
background: color("theme-color");
|
||||
}
|
||||
|
||||
#{$p}__shape {
|
||||
fill: color("theme-color");
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
68
src/components/HomeView/Tabs/Hookah/SummaryTab.vue
Normal file
68
src/components/HomeView/Tabs/Hookah/SummaryTab.vue
Normal file
@ -0,0 +1,68 @@
|
||||
<template>
|
||||
<div class="hookah-summary">
|
||||
<div class="hookah-summary__container">
|
||||
<div>Стол: {{ hookahStore.selectedTableNumber }}</div>
|
||||
<div>Тяжесть: {{ hookahStore.selectedHeaviness?.title }}</div>
|
||||
<div>Вкус: {{ hookahStore.selectedTastes.map((x) => x.title).join(", ") }}</div>
|
||||
<div>Цена: {{ 123 }}</div>
|
||||
<ButtonComp :type="'primary'" :value="'Заказать'" @click="createOrder()" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useHookahStore, useOrdersStore } from "@/store";
|
||||
import { useOrdersApi } from "@/composables/api";
|
||||
import { useRouter } from "vue-router";
|
||||
|
||||
const hookahStore = useHookahStore();
|
||||
const ordersStore = useOrdersStore();
|
||||
const ordersApi = useOrdersApi();
|
||||
const router = useRouter();
|
||||
|
||||
async function createOrder() {
|
||||
const order = await tryCreateOrder();
|
||||
if (order) {
|
||||
ordersStore.createOrder(order);
|
||||
setTimeout(() => {
|
||||
hookahStore.clearSelected();
|
||||
}, 200);
|
||||
|
||||
router.push("/orders");
|
||||
}
|
||||
}
|
||||
|
||||
async function tryCreateOrder() {
|
||||
if (hookahStore.selectedHeaviness == null) return;
|
||||
|
||||
const resp = await ordersApi.createOrder({
|
||||
table: hookahStore.selectedTableNumber,
|
||||
heavinessId: hookahStore.selectedHeaviness.id,
|
||||
tasteIds: hookahStore.selectedTastes.map((x) => x.id),
|
||||
});
|
||||
|
||||
return resp;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.hookah-summary {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
&__container {
|
||||
@include main-container;
|
||||
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
gap: r(10);
|
||||
width: 80%;
|
||||
padding: r(15);
|
||||
z-index: 10;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
62
src/components/HomeView/Tabs/Hookah/TableTab.vue
Normal file
62
src/components/HomeView/Tabs/Hookah/TableTab.vue
Normal file
@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<div class="hookah-table">
|
||||
<div class="hookah-table__container">
|
||||
<div
|
||||
class="hookah-table__item"
|
||||
:class="{ 'hookah-table__item--active': hookahStore.selectedTableNumber === num }"
|
||||
v-for="num in 15"
|
||||
:key="num"
|
||||
@click="setTable(num)"
|
||||
>
|
||||
{{ num }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useHookahStore } from "@/store";
|
||||
|
||||
const hookahStore = useHookahStore();
|
||||
|
||||
function setTable(num: number) {
|
||||
hookahStore.selectedTableNumber = num;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.hookah-table {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
&__container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
flex-wrap: wrap;
|
||||
gap: r(10);
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
&__item {
|
||||
@include main-container;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: r(45);
|
||||
height: r(45);
|
||||
cursor: pointer;
|
||||
transition: 0.18s ease;
|
||||
transition-property: background-color, color, box-shadow;
|
||||
|
||||
&--active {
|
||||
background: color("theme-color");
|
||||
color: color("ui-color-on-background");
|
||||
box-shadow: 0 r(2) r(2) 0 color("theme-color", $alpha: -0.86), 0 r(3) r(1) r(-2) color("theme-color", $alpha: -0.8),
|
||||
0 r(1) r(5) 0 color("theme-color", $alpha: -0.88);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
73
src/components/HomeView/Tabs/Hookah/TasteTab.vue
Normal file
73
src/components/HomeView/Tabs/Hookah/TasteTab.vue
Normal file
@ -0,0 +1,73 @@
|
||||
<template>
|
||||
<div class="hookah-taste">
|
||||
<div class="hookah-taste__container">
|
||||
<div
|
||||
class="hookah-taste__item"
|
||||
:class="{ 'hookah-taste__item--active': hookahStore.selectedTastes.includes(item) }"
|
||||
v-for="item in hookahStore.tastesList"
|
||||
:key="item.id"
|
||||
@click="toggleTaste(item)"
|
||||
>
|
||||
{{ item.title }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useHookahStore } from "@/store";
|
||||
import { taste } from "@/types";
|
||||
|
||||
const hookahStore = useHookahStore();
|
||||
|
||||
let maxSelectedTastesCount = 2;
|
||||
|
||||
function toggleTaste(taste: taste) {
|
||||
if (hookahStore.selectedTastes.includes(taste)) {
|
||||
hookahStore.selectedTastes = hookahStore.selectedTastes.filter((x) => x !== taste);
|
||||
} else {
|
||||
if (hookahStore.selectedTastes.length < maxSelectedTastesCount) {
|
||||
hookahStore.selectedTastes.push(taste);
|
||||
} else {
|
||||
console.log("can't select more than ", maxSelectedTastesCount);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.hookah-taste {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
&__container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
gap: r(10);
|
||||
width: 80%;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
&__item {
|
||||
@include main-container;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: r(5) r(10);
|
||||
cursor: pointer;
|
||||
transition: 0.18s ease;
|
||||
transition-property: background-color, color, box-shadow;
|
||||
|
||||
&--active {
|
||||
background: color("theme-color");
|
||||
color: color("ui-color-on-background");
|
||||
box-shadow: 0 r(2) r(2) 0 color("theme-color", $alpha: -0.86), 0 r(3) r(1) r(-2) color("theme-color", $alpha: -0.8),
|
||||
0 r(1) r(5) 0 color("theme-color", $alpha: -0.88);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
75
src/components/HomeView/Tabs/Menu/MenuItem.vue
Normal file
75
src/components/HomeView/Tabs/Menu/MenuItem.vue
Normal file
@ -0,0 +1,75 @@
|
||||
<template>
|
||||
<div class="menu-item" @click="openModal()">
|
||||
<ImageComp class="menu-item__image" src="/media/images/tobaco1.webp" />
|
||||
<div class="menu-item__title">{{ item.title }}</div>
|
||||
<div class="menu-item__description">{{ item.description }}</div>
|
||||
<div class="menu-item__price">
|
||||
{{ item.price }}
|
||||
<FontAwesomeIcon class="menu-item__price-icon" icon="ruble-sign" />
|
||||
</div>
|
||||
<ModalComp ref="refModal">
|
||||
<div class="menu-item__modal">
|
||||
<ImageComp class="menu-item__image" src="/media/images/tobaco1.webp" />
|
||||
<div class="menu-item__title">{{ item.title }}</div>
|
||||
<div class="menu-item__description">{{ item.description }}</div>
|
||||
<div class="menu-item__price">
|
||||
{{ item.price }}
|
||||
<FontAwesomeIcon class="menu-item__price-icon" icon="ruble-sign" />
|
||||
</div>
|
||||
</div>
|
||||
</ModalComp>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { menuItem } from "@/types";
|
||||
import { onDeactivated, ref } from "vue";
|
||||
import ModalComp from "@/components/UI/ModalComp.vue";
|
||||
|
||||
const refModal = ref<InstanceType<typeof ModalComp> | undefined>();
|
||||
const props = defineProps<{ item: menuItem }>();
|
||||
|
||||
onDeactivated(() => {
|
||||
refModal.value?.close();
|
||||
});
|
||||
|
||||
function openModal() {
|
||||
refModal.value?.open();
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.menu-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: r(10);
|
||||
width: 90%;
|
||||
margin: r(10) 0;
|
||||
padding: r(15);
|
||||
border-radius: r(6);
|
||||
background: color("main-background");
|
||||
box-shadow: 0 r(2) r(2) 0 rgba(0, 0, 0, 0.14), 0 r(3) r(1) r(-2) rgba(0, 0, 0, 0.2), 0 r(1) r(5) 0 rgba(0, 0, 0, 0.12);
|
||||
|
||||
&__image {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: r(23);
|
||||
}
|
||||
|
||||
&__price {
|
||||
font-size: r(23);
|
||||
}
|
||||
|
||||
&__price-icon {
|
||||
font-size: r(20);
|
||||
}
|
||||
|
||||
&__modal {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: r(10);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
163
src/components/HomeView/Tabs/Menu/MenuMain.vue
Normal file
163
src/components/HomeView/Tabs/Menu/MenuMain.vue
Normal file
@ -0,0 +1,163 @@
|
||||
<template>
|
||||
<div class="menu">
|
||||
<div class="menu__navigation">
|
||||
<div class="menu__navigation-container">
|
||||
<div
|
||||
class="menu__navigation-item"
|
||||
v-for="category in menuStore.categories"
|
||||
:class="{ 'menu__navigation-item--active': selectedCategory === category }"
|
||||
:key="category.id"
|
||||
@click="changeCategory(category)"
|
||||
:ref="(el)=>refCategories.push(el as Element)"
|
||||
>
|
||||
{{ category.title }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu__list" ref="refMenuList">
|
||||
<TransitionGroup name="menu__list-item--transition">
|
||||
<MenuItem
|
||||
class="menu__list-item"
|
||||
v-for="item in selectedMenuItems"
|
||||
:key="Math.random() * (item.id + 1)"
|
||||
:item="item"
|
||||
></MenuItem>
|
||||
</TransitionGroup>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from "vue";
|
||||
import { category } from "@/types";
|
||||
import { useMenuApi } from "@/composables/api";
|
||||
import { useMenuStore } from "@/store";
|
||||
import MenuItem from "./MenuItem.vue";
|
||||
|
||||
const menuStore = useMenuStore();
|
||||
const menuApi = useMenuApi();
|
||||
|
||||
const refCategories = ref<Element[]>([]);
|
||||
const refMenuList = ref<Element>();
|
||||
|
||||
init();
|
||||
function init() {
|
||||
menuStore.categories = menuApi.getCategories();
|
||||
menuStore.menuItems = menuApi.getMenuItems();
|
||||
}
|
||||
|
||||
const selectedMenuItems = computed(() =>
|
||||
selectedCategory.value == null ? menuStore.menuItems : menuStore.menuItems.filter((x) => x.categoryId === selectedCategory.value?.id)
|
||||
);
|
||||
const selectedCategory = ref<category | undefined>(undefined);
|
||||
|
||||
function changeCategory(category: category) {
|
||||
if (selectedCategory.value === category) {
|
||||
selectedCategory.value = undefined;
|
||||
} else {
|
||||
selectedCategory.value = category;
|
||||
const selectedCategoryElement = refCategories.value[menuStore.categories.indexOf(selectedCategory.value)];
|
||||
selectedCategoryElement.scrollIntoView({ behavior: "smooth", block: "center", inline: "center" });
|
||||
}
|
||||
setTimeout(() => {
|
||||
refMenuList.value?.scroll(0, 0);
|
||||
}, 180);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.menu {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
&__navigation {
|
||||
position: relative;
|
||||
flex: 0 1 auto;
|
||||
background: color("main-background");
|
||||
box-shadow: 0 r(4) r(18) 0 rgba(0, 0, 0, 0.12), 0 r(7) r(10) r(-5) rgba(0, 0, 0, 0.15);
|
||||
z-index: 1;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
&__navigation-container {
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
padding: 0 r(35);
|
||||
|
||||
@media (max-width: $mobileWidth) {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__navigation-item {
|
||||
position: relative;
|
||||
padding: r(15);
|
||||
font-size: r(24);
|
||||
font-weight: 300;
|
||||
text-transform: capitalize;
|
||||
white-space: nowrap;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: r(4);
|
||||
border-radius: r(2);
|
||||
background: color("theme-color");
|
||||
opacity: 0;
|
||||
z-index: 1;
|
||||
transition: opacity 0.18s ease;
|
||||
}
|
||||
|
||||
&--active {
|
||||
&::after {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__list {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: r(10) 0 r(20) 0;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
&__list-item {
|
||||
flex: 0 0 auto;
|
||||
|
||||
--transition-duration: 0.18s;
|
||||
|
||||
&--transition {
|
||||
&-enter-active {
|
||||
transition: opacity var(--transition-duration) var(--transition-duration) ease;
|
||||
}
|
||||
&-leave-active {
|
||||
transition: opacity var(--transition-duration) ease;
|
||||
}
|
||||
|
||||
&-enter-from,
|
||||
&-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
159
src/components/HomeView/Tabs/Orders/OrdersMain.vue
Normal file
159
src/components/HomeView/Tabs/Orders/OrdersMain.vue
Normal file
@ -0,0 +1,159 @@
|
||||
<template>
|
||||
<template v-if="userStore.isLoggedIn">
|
||||
<div class="orders">
|
||||
<div class="orders__list">
|
||||
<div class="orders__item" v-for="(order, index) in ordersStore.orders" :key="order.id">
|
||||
<div class="orders__item-main">
|
||||
<div class="orders__item-head">
|
||||
<div>Заказ № {{ order.id }}</div>
|
||||
<div>статус: {{ order.status }}</div>
|
||||
</div>
|
||||
<div>Стол: {{ order.table }}</div>
|
||||
<div>Тяжесть: {{ order.heaviness.title }}</div>
|
||||
<div>Вкус: {{ order.tastes.map((x) => x.title).join(", ") }}</div>
|
||||
<div>Цена: {{ order.price }}</div>
|
||||
<div
|
||||
class="orders__item-favourite"
|
||||
:class="{ 'orders__item-favourite--active': order.favourite }"
|
||||
@click="toggleFavourite(order)"
|
||||
>
|
||||
<FontAwesomeIcon icon="star" />
|
||||
</div>
|
||||
<FontAwesomeIcon
|
||||
class="orders__item-expand"
|
||||
:class="{ 'orders__item-expand--active': index === expandedIndex }"
|
||||
icon="chevron-down"
|
||||
@click="toggleExpanded(index)"
|
||||
/>
|
||||
</div>
|
||||
<div class="orders__item-add" v-show="index === expandedIndex">
|
||||
<ButtonComp type="primary" value="Повторить заказ" @click="repeatOrder(order)" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="orders__item" v-if="ordersStore.orders.length === 0">
|
||||
У вас пока нет ни одного заказа...
|
||||
<RouterLink class="orders__item-link" to="/hookah/table">Сделать заказ</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<AuthorizationNeeded />
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import AuthorizationNeeded from "@/components/HomeView/AuthorizationNeeded.vue";
|
||||
import { useOrdersApi } from "@/composables/api";
|
||||
import { useUserStore, useOrdersStore, useHookahStore } from "@/store";
|
||||
import { order } from "@/types";
|
||||
import { ref } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
|
||||
const userStore = useUserStore();
|
||||
const ordersStore = useOrdersStore();
|
||||
const hookahStore = useHookahStore();
|
||||
const ordersApi = useOrdersApi();
|
||||
const router = useRouter();
|
||||
|
||||
const expandedIndex = ref(-1);
|
||||
|
||||
async function toggleFavourite(order: order) {
|
||||
const resp = await ordersApi.toggleFavourite(order);
|
||||
|
||||
if (resp) {
|
||||
order.favourite = !order.favourite;
|
||||
}
|
||||
}
|
||||
|
||||
function toggleExpanded(index: number) {
|
||||
if (index === expandedIndex.value) {
|
||||
expandedIndex.value = -1;
|
||||
} else {
|
||||
expandedIndex.value = index;
|
||||
}
|
||||
}
|
||||
|
||||
function repeatOrder(order: order) {
|
||||
hookahStore.selectedHeaviness = order.heaviness;
|
||||
hookahStore.selectedTastes = order.tastes;
|
||||
router.push("/hookah/table");
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.orders {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
padding: r(20);
|
||||
|
||||
&__list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: r(20);
|
||||
}
|
||||
|
||||
&__item {
|
||||
@include main-container;
|
||||
|
||||
position: relative;
|
||||
padding: r(10);
|
||||
}
|
||||
|
||||
&__item-main {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: r(5);
|
||||
}
|
||||
|
||||
&__item-add {
|
||||
margin-top: r(10);
|
||||
}
|
||||
|
||||
&__item-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: calc(100% - r(30));
|
||||
}
|
||||
|
||||
&__item-favourite {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: r(20);
|
||||
height: r(20);
|
||||
color: color("ui-background");
|
||||
transition: color 0.18s ease;
|
||||
cursor: pointer;
|
||||
|
||||
&--active {
|
||||
color: color("theme-color");
|
||||
}
|
||||
}
|
||||
|
||||
&__item-expand {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: r(20);
|
||||
height: r(20);
|
||||
color: color("ui-background");
|
||||
transition: transform 0.18s ease;
|
||||
cursor: pointer;
|
||||
|
||||
&--active {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
&__item-link {
|
||||
color: color("theme-color");
|
||||
}
|
||||
}
|
||||
</style>
|
||||
340
src/components/HomeView/Tabs/User/UserMain.vue
Normal file
340
src/components/HomeView/Tabs/User/UserMain.vue
Normal file
@ -0,0 +1,340 @@
|
||||
<template>
|
||||
<template v-if="userStore.isLoggedIn">
|
||||
<div class="user">
|
||||
<div class="user__container">
|
||||
<div class="user__user-data">
|
||||
<SwitchableImage
|
||||
class="user__image"
|
||||
:value="localUserData.image"
|
||||
:edited="userDataEdited"
|
||||
@change="changeLocalImageValue"
|
||||
/>
|
||||
<InputComp
|
||||
class="user__name"
|
||||
v-model="localUserData.name"
|
||||
placeholder="Имя"
|
||||
:hasWarning="fieldHasErrors('Имя')"
|
||||
:readOnly="!userDataEdited"
|
||||
></InputComp>
|
||||
<InputComp
|
||||
class="user__surname"
|
||||
v-model="localUserData.surname"
|
||||
placeholder="Фамилия"
|
||||
:hasWarning="fieldHasErrors('Фамилия')"
|
||||
:readOnly="!userDataEdited"
|
||||
></InputComp>
|
||||
|
||||
<InputComp class="user__email" v-model="userStore.userData.email" :placeholder="'Почта'" :readOnly="true"></InputComp>
|
||||
|
||||
<ButtonComp
|
||||
class="user__button"
|
||||
v-if="userDataEdited"
|
||||
value="Сохранить изменения"
|
||||
type="primary"
|
||||
@click="tryChangeUserData()"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="user__password" v-if="userDataEdited">
|
||||
<template v-if="userPasswordEdited">
|
||||
<InputComp
|
||||
class="user__name"
|
||||
v-model="localPasswords.oldPassword"
|
||||
type="password"
|
||||
:hasWarning="fieldHasErrors('Старый пароль')"
|
||||
placeholder="Старый пароль"
|
||||
></InputComp>
|
||||
<InputComp
|
||||
class="user__surname"
|
||||
v-model="localPasswords.newPassword"
|
||||
type="password"
|
||||
:hasWarning="fieldHasErrors('Новый пароль')"
|
||||
placeholder="Новый пароль"
|
||||
></InputComp>
|
||||
<InputComp
|
||||
class="user__surname"
|
||||
v-model="localPasswords.newPassword2"
|
||||
type="password"
|
||||
:hasWarning="fieldHasErrors('Новый пароль')"
|
||||
placeholder="Повторите новый пароль"
|
||||
></InputComp>
|
||||
</template>
|
||||
|
||||
<ButtonComp
|
||||
class="user__button"
|
||||
value="Сменить пароль"
|
||||
:type="passwordButtonStyle"
|
||||
@click="changePasswordButtonHandler()"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="user__edit-toggle">
|
||||
<FontAwesomeIcon class="fa-icon" icon="user-pen" v-if="!userDataEdited" @click="startEdit()" />
|
||||
<FontAwesomeIcon class="fa-icon" icon="xmark" v-else @click="stopEdit()" />
|
||||
</div>
|
||||
|
||||
<ButtonComp class="user__button" v-if="!userDataEdited" value="Выйти" type="primary" @click="tryLogout()" />
|
||||
<ThemeSwitcher class="user__theme-switcher" />
|
||||
|
||||
<NotificationsMain class="user__notifications" v-model="notifications" />
|
||||
<ModalComp ref="refModal">Вы действительно хотите выйти?</ModalComp>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<AuthorizationNeeded />
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onDeactivated, ref, watch } from "vue";
|
||||
import SwitchableImage from "@/components/Common/SwitchableImage.vue";
|
||||
import AuthorizationNeeded from "@/components/HomeView/AuthorizationNeeded.vue";
|
||||
import NotificationsMain from "@/components/Notifications/NotificationsMain.vue";
|
||||
import { useUserStore } from "@/store";
|
||||
import { useRouter } from "vue-router";
|
||||
import { useUserApi } from "@/composables/api";
|
||||
import { convertFileToBase64String } from "@/composables/utils";
|
||||
import { FieldChecks, FieldsContainer } from "@/modules/validator";
|
||||
import { notification } from "@/types";
|
||||
import ModalComp from "@/components/UI/ModalComp.vue";
|
||||
import ThemeSwitcher from "@/components/Common/ThemeSwitcher.vue";
|
||||
|
||||
const refModal = ref<InstanceType<typeof ModalComp> | undefined>();
|
||||
|
||||
const router = useRouter();
|
||||
const userStore = useUserStore();
|
||||
const userApi = useUserApi();
|
||||
|
||||
async function tryLogout() {
|
||||
const result = await refModal.value?.open({ type: "cancel_leave" });
|
||||
if (result === "leave") {
|
||||
logout();
|
||||
}
|
||||
}
|
||||
|
||||
function logout() {
|
||||
router.push("/login");
|
||||
userStore.resetData();
|
||||
}
|
||||
|
||||
const userDataEdited = ref(false);
|
||||
const userPasswordEdited = ref(false);
|
||||
|
||||
const localUserData = ref<{ name: string; surname: string; image: string; imageFile?: File }>({
|
||||
...userStore.userData,
|
||||
imageFile: undefined,
|
||||
});
|
||||
const localPasswords = ref({ oldPassword: "", newPassword: "", newPassword2: "" });
|
||||
|
||||
const passwordButtonStyle = computed(() =>
|
||||
!userPasswordEdited.value ||
|
||||
(localPasswords.value.oldPassword !== "" && localPasswords.value.newPassword !== "" && localPasswords.value.newPassword2 !== "")
|
||||
? "primary"
|
||||
: "disabled"
|
||||
);
|
||||
|
||||
function startEdit() {
|
||||
userDataEdited.value = true;
|
||||
}
|
||||
function stopEdit() {
|
||||
userDataEdited.value = false;
|
||||
userPasswordEdited.value = false;
|
||||
localUserData.value = { ...userStore.userData };
|
||||
localPasswords.value = { oldPassword: "", newPassword: "", newPassword2: "" };
|
||||
}
|
||||
|
||||
const notifications = ref<notification[]>([]);
|
||||
|
||||
async function tryChangeUserData() {
|
||||
let errors = getUserDataFieldErrors();
|
||||
|
||||
notifications.value = errors;
|
||||
|
||||
if (errors.length > 0) return;
|
||||
|
||||
const resp = await userApi.changeUserData(localUserData.value);
|
||||
userStore.setFieldValue("name", resp.name);
|
||||
userStore.setFieldValue("surname", resp.surname);
|
||||
userStore.setFieldValue("image", resp.image);
|
||||
|
||||
notifications.value = [{ text: "Данные успешно изменены", type: "success" }];
|
||||
|
||||
stopEdit();
|
||||
}
|
||||
|
||||
async function changeLocalImageValue(file: File) {
|
||||
console.log(file);
|
||||
if (!file.type.includes("image")) {
|
||||
alert("Необходимо выбрать изображение");
|
||||
return;
|
||||
}
|
||||
|
||||
localUserData.value.imageFile = file;
|
||||
localUserData.value.image = await convertFileToBase64String(file);
|
||||
}
|
||||
|
||||
function getUserDataFieldErrors() {
|
||||
const container = new FieldsContainer();
|
||||
|
||||
container.addField("Имя", localUserData.value.name, [
|
||||
FieldChecks.nonEmpty,
|
||||
FieldChecks.onlyLettersWhitespaces,
|
||||
FieldChecks.minLength(2),
|
||||
FieldChecks.maxLength(20),
|
||||
]);
|
||||
container.addField("Фамилия", localUserData.value.surname, [
|
||||
FieldChecks.nonEmpty,
|
||||
FieldChecks.onlyLettersWhitespaces,
|
||||
FieldChecks.minLength(2),
|
||||
FieldChecks.maxLength(20),
|
||||
]);
|
||||
|
||||
let errors: notification[] = [];
|
||||
for (let [key, value] of container.fields) {
|
||||
const error = value.tryGetFirstError();
|
||||
if (error !== "") {
|
||||
errors.push({ field: key, text: error, type: "warning" });
|
||||
}
|
||||
}
|
||||
|
||||
return errors;
|
||||
}
|
||||
|
||||
function changePasswordButtonHandler() {
|
||||
if (!userPasswordEdited.value) {
|
||||
userPasswordEdited.value = true;
|
||||
} else {
|
||||
tryChangeUserPassword();
|
||||
}
|
||||
}
|
||||
|
||||
async function tryChangeUserPassword() {
|
||||
let errors = getUserPasswordFieldErrors();
|
||||
|
||||
notifications.value = errors;
|
||||
|
||||
if (errors.length > 0) return;
|
||||
|
||||
const resp = await userApi.changeUserPassword(localPasswords.value);
|
||||
|
||||
notifications.value = [{ text: "Пароль успешно изменён", type: "success" }];
|
||||
|
||||
stopEdit();
|
||||
}
|
||||
|
||||
function getUserPasswordFieldErrors() {
|
||||
const container = new FieldsContainer();
|
||||
|
||||
container.addField("Старый пароль", localPasswords.value.oldPassword, [FieldChecks.nonEmpty]);
|
||||
|
||||
container.addField("Новый пароль", localPasswords.value.newPassword, [
|
||||
FieldChecks.nonEmpty,
|
||||
FieldChecks.minLength(6),
|
||||
FieldChecks.maxLength(32),
|
||||
]);
|
||||
|
||||
let errors: notification[] = [];
|
||||
for (let [key, value] of container.fields) {
|
||||
const error = value.tryGetFirstError();
|
||||
if (error !== "") {
|
||||
errors.push({ field: key, text: error, type: "warning" });
|
||||
}
|
||||
}
|
||||
|
||||
if (localPasswords.value.newPassword !== localPasswords.value.newPassword2) {
|
||||
errors.push({ field: "Новый пароль", text: "Пароли не совпадают.", type: "warning" });
|
||||
}
|
||||
|
||||
return errors;
|
||||
}
|
||||
|
||||
function fieldHasErrors(field: string) {
|
||||
return notifications.value.some((x) => x.field === field);
|
||||
}
|
||||
|
||||
watch(
|
||||
() => userStore.userData.name,
|
||||
(to) => (localUserData.value.name = to)
|
||||
);
|
||||
watch(
|
||||
() => userStore.userData.surname,
|
||||
(to) => (localUserData.value.surname = to)
|
||||
);
|
||||
|
||||
onDeactivated(() => {
|
||||
stopEdit();
|
||||
notifications.value = [];
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.user {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
padding: r(20);
|
||||
|
||||
&__container {
|
||||
@include main-container;
|
||||
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
padding: r(20);
|
||||
}
|
||||
|
||||
&__user-data {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&__image {
|
||||
flex: 0 0 auto;
|
||||
margin: 0 auto r(15) auto;
|
||||
}
|
||||
|
||||
&__email {
|
||||
//display: flex;
|
||||
//align-items: center;
|
||||
}
|
||||
|
||||
&__password {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: r(25);
|
||||
}
|
||||
|
||||
&__button {
|
||||
align-self: center;
|
||||
margin-top: r(15);
|
||||
}
|
||||
|
||||
&__edit-toggle {
|
||||
position: absolute;
|
||||
top: r(20);
|
||||
right: r(20);
|
||||
width: r(30);
|
||||
height: r(30);
|
||||
color: color("ui-background");
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&__theme-switcher {
|
||||
position: absolute;
|
||||
top: r(20);
|
||||
left: r(20);
|
||||
width: r(30);
|
||||
height: r(30);
|
||||
color: color("ui-background");
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&__notifications {
|
||||
position: fixed;
|
||||
inset: auto 0 r(90) 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
129
src/components/Intro/IntroMain.vue
Normal file
129
src/components/Intro/IntroMain.vue
Normal file
@ -0,0 +1,129 @@
|
||||
<template>
|
||||
<div class="intro">
|
||||
<SliderComp class="intro__slider" type="default" :automatic="false" @index="sliderIndexChanged">
|
||||
<SliderTabComp>
|
||||
<div class="intro__tab-content">
|
||||
<div class="intro__tab-image-container">
|
||||
<img class="intro__tab-image" src="/media/images/intro-image-1.webp" />
|
||||
</div>
|
||||
<div class="intro__tab-text">Подпись для первой картинки</div>
|
||||
</div>
|
||||
</SliderTabComp>
|
||||
<SliderTabComp>
|
||||
<div class="intro__tab-content">
|
||||
<div class="intro__tab-image-container">
|
||||
<img class="intro__tab-image" src="/media/images/intro-image-2.webp" />
|
||||
</div>
|
||||
<div class="intro__tab-text">Подпись для второй картинки</div>
|
||||
</div>
|
||||
</SliderTabComp>
|
||||
<SliderTabComp>
|
||||
<div class="intro__tab-content">
|
||||
<div class="intro__tab-image-container">
|
||||
<img class="intro__tab-image" src="/media/images/intro-image-3.webp" />
|
||||
</div>
|
||||
<div class="intro__tab-text">Подпись для третьей картинки</div>
|
||||
</div>
|
||||
</SliderTabComp>
|
||||
</SliderComp>
|
||||
<Transition name="intro__additional-container--transition">
|
||||
<div class="intro__additional-container" v-show="isAdditionalShowed">
|
||||
<div class="intro__additional-button" @click="additionalAction()">вход</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useUserStore } from "@/store";
|
||||
import { ref } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
const router = useRouter();
|
||||
const userStore = useUserStore();
|
||||
|
||||
const isAdditionalShowed = ref(false);
|
||||
|
||||
function sliderIndexChanged(index: number) {
|
||||
isAdditionalShowed.value = index === 2;
|
||||
}
|
||||
|
||||
function additionalAction() {
|
||||
userStore.introWatched = true;
|
||||
userStore.saveData();
|
||||
router.push("/login");
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.intro {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
&__slider {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__tab-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
padding: r(60) 0;
|
||||
}
|
||||
|
||||
&__tab-image-container {
|
||||
flex: 8;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
&__tab-image {
|
||||
max-width: 80%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
&__tab-text {
|
||||
flex: 2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
max-width: 90%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__additional-container {
|
||||
position: absolute;
|
||||
bottom: r(60);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
|
||||
&--transition {
|
||||
&-enter-active,
|
||||
&-leave-active {
|
||||
transition: 0.28s ease;
|
||||
transition-property: bottom, opacity;
|
||||
}
|
||||
|
||||
&-enter-from,
|
||||
&-leave-to {
|
||||
bottom: r(30);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__additional-button {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: r(150);
|
||||
padding: r(5) 0;
|
||||
border: r(1) solid color("main-color");
|
||||
border-radius: r(16);
|
||||
color: color("main-color");
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
123
src/components/Notifications/NotificationsMain.vue
Normal file
123
src/components/Notifications/NotificationsMain.vue
Normal file
@ -0,0 +1,123 @@
|
||||
<template>
|
||||
<div class="notifications">
|
||||
<TransitionGroup name="notifications--transition">
|
||||
<div
|
||||
class="notifications__item"
|
||||
:class="'notifications__item--' + notification.type"
|
||||
v-for="notification in notifications"
|
||||
:key="notification.field + notification.text"
|
||||
>
|
||||
<div class="notifications__item-name" v-if="notification.field">{{ notification.field }}:</div>
|
||||
<div class="notifications__item-text">{{ notification.text }}</div>
|
||||
<FontAwesomeIcon class="notifications__item-close" icon="xmark" @click="closeNotification(notification)" />
|
||||
<div class="notifications__item-countdown"></div>
|
||||
</div>
|
||||
</TransitionGroup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, nextTick, ref, watch } from "vue";
|
||||
import { notification } from "@/types";
|
||||
|
||||
const props = defineProps<{ modelValue: notification[] }>();
|
||||
const emit = defineEmits(["update:modelValue"]);
|
||||
|
||||
const notifications = computed({
|
||||
get: () => props.modelValue,
|
||||
set: (to) => {
|
||||
emit("update:modelValue", to);
|
||||
},
|
||||
});
|
||||
|
||||
function setNotificationsTimeout() {
|
||||
nextTick(() => {
|
||||
notifications.value.forEach((x) => {
|
||||
setTimeout(() => {
|
||||
closeNotification(x);
|
||||
}, 5000);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
() => {
|
||||
setNotificationsTimeout();
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
|
||||
watch(
|
||||
() => notifications.value,
|
||||
(to, from) => {
|
||||
if (from.length > to.length) emit("update:modelValue", to);
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
|
||||
function closeNotification(notification: notification) {
|
||||
notifications.value = notifications.value.filter((x) => x !== notification);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.notifications {
|
||||
z-index: 100;
|
||||
|
||||
&--transition {
|
||||
&-enter-active {
|
||||
transition: 0.18s 0.18s ease;
|
||||
}
|
||||
&-leave-active {
|
||||
transition: 0.18s ease;
|
||||
}
|
||||
|
||||
&-enter-from {
|
||||
opacity: 0;
|
||||
margin-bottom: r(-38);
|
||||
}
|
||||
&-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&-move {
|
||||
transition: all 0.18s ease;
|
||||
}
|
||||
}
|
||||
|
||||
&__item {
|
||||
$__item: &;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: r(5);
|
||||
padding: r(10) r(20);
|
||||
margin-top: r(1);
|
||||
font-size: r(18);
|
||||
color: color("ui-color-on-background");
|
||||
|
||||
&-field {
|
||||
flex: 0 0 r(70);
|
||||
}
|
||||
|
||||
&-text {
|
||||
flex: 1 1;
|
||||
}
|
||||
|
||||
&-close {
|
||||
height: r(14);
|
||||
width: r(20);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&--success {
|
||||
background: color("success-color");
|
||||
}
|
||||
|
||||
&--warning {
|
||||
background: color("warning-color");
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
152
src/components/UI/ButtonComp.vue
Normal file
152
src/components/UI/ButtonComp.vue
Normal file
@ -0,0 +1,152 @@
|
||||
<template>
|
||||
<button class="button-comp" :class="type != null ? `button-comp--${type}` : `button-comp--default`">
|
||||
<div class="button-comp__ripple" @mousedown="startWave" ref="refRipple">
|
||||
<div class="button-comp__content">{{ value }}</div>
|
||||
</div>
|
||||
<TransitionGroup name="button-comp__ripple-wave--transition">
|
||||
<div
|
||||
class="button-comp__ripple-wave"
|
||||
v-for="wave in waves"
|
||||
:key="wave.id"
|
||||
:style="{ left: `${wave.x}px`, top: `${wave.y}px` }"
|
||||
></div>
|
||||
</TransitionGroup>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
interface wave {
|
||||
x: number;
|
||||
y: number;
|
||||
id: number;
|
||||
}
|
||||
|
||||
defineProps<{ value: string; type: "default" | "primary" | "disabled" | undefined }>();
|
||||
|
||||
//#region handling ripple waves
|
||||
const refRipple = ref<HTMLDivElement | undefined>(undefined);
|
||||
const waves = ref<wave[]>([]);
|
||||
|
||||
function startWave(event: MouseEvent | TouchEvent) {
|
||||
if (!refRipple.value || (event.type !== "mousedown" && event.type !== "touchstart")) return;
|
||||
|
||||
const rect = refRipple.value.getBoundingClientRect();
|
||||
let x, y;
|
||||
const id = Math.random();
|
||||
|
||||
if (event instanceof MouseEvent) {
|
||||
x = event.clientX - rect.left - 80;
|
||||
y = event.clientY - rect.top - 80;
|
||||
} else {
|
||||
x = event.changedTouches[0].clientX - rect.left - 80;
|
||||
y = event.changedTouches[0].clientY - rect.top - 80;
|
||||
}
|
||||
|
||||
let wave = { x, y, id };
|
||||
addWave(wave);
|
||||
|
||||
setTimeout(() => {
|
||||
removeWave(wave);
|
||||
}, 800);
|
||||
}
|
||||
|
||||
function addWave(wave: wave) {
|
||||
waves.value.push(wave);
|
||||
}
|
||||
|
||||
function removeWave(wave: wave) {
|
||||
waves.value = waves.value.filter((x) => x.id !== wave.id);
|
||||
}
|
||||
//#endregion
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.button-comp {
|
||||
position: relative;
|
||||
border-radius: r(3);
|
||||
height: auto;
|
||||
min-width: r(88);
|
||||
line-height: 1.4;
|
||||
font-size: r(18);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0;
|
||||
color: color("ui-color-on-background");
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
user-select: none;
|
||||
overflow: hidden;
|
||||
outline: none;
|
||||
border: none;
|
||||
|
||||
transition: background-color 0.18s ease;
|
||||
|
||||
&--default {
|
||||
background: color("main-background", $lightness: -0%);
|
||||
// box-shadow: 0 r(2) r(2) 0 color("ui-color", $alpha: -0.86), 0 r(3) r(1) r(-2) color("ui-color", $alpha: -0.8),
|
||||
// 0 r(1) r(5) 0 color("ui-color", $alpha: -0.88);
|
||||
color: color("main-color");
|
||||
|
||||
&:hover {
|
||||
background: color("main-background", $lightness: -6%);
|
||||
}
|
||||
}
|
||||
|
||||
&--primary {
|
||||
background: color("theme-color");
|
||||
box-shadow: 0 r(2) r(2) 0 color("theme-color", $alpha: -0.86), 0 r(3) r(1) r(-2) color("theme-color", $alpha: -0.8),
|
||||
0 r(1) r(5) 0 color("theme-color", $alpha: -0.88);
|
||||
|
||||
&:hover {
|
||||
background: color("theme-color", $lightness: -3%);
|
||||
}
|
||||
}
|
||||
|
||||
&--disabled {
|
||||
background: color("ui-background");
|
||||
box-shadow: 0 r(2) r(2) 0 color("ui-background", $alpha: -0.86), 0 r(3) r(1) r(-2) color("ui-background", $alpha: -0.8),
|
||||
0 r(1) r(5) 0 color("ui-background", $alpha: -0.88);
|
||||
|
||||
&:hover {
|
||||
background: color("ui-background", $lightness: -3%);
|
||||
}
|
||||
}
|
||||
|
||||
&__ripple {
|
||||
display: flex;
|
||||
position: relative;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: r(12) r(30);
|
||||
}
|
||||
|
||||
&__ripple-wave {
|
||||
position: absolute;
|
||||
width: r(160);
|
||||
height: r(160);
|
||||
border-radius: 50%;
|
||||
background: black;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
transform: scale(2);
|
||||
|
||||
&--transition {
|
||||
&-enter-active {
|
||||
transition: 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
|
||||
transition-property: opacity, transform;
|
||||
}
|
||||
&-enter-from {
|
||||
opacity: 0.26;
|
||||
transform: scale(0.26);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
125
src/components/UI/ComboBoxComp.vue
Normal file
125
src/components/UI/ComboBoxComp.vue
Normal file
@ -0,0 +1,125 @@
|
||||
<template>
|
||||
<div class="combo-box-comp" :class="{ 'combo-box-comp--opened': opened }" v-click-outside="closeList">
|
||||
<div class="combo-box-comp__input" @click="toggleOpened()">
|
||||
<div class="combo-box-comp__input-text">
|
||||
{{ displayedItem?.title }}
|
||||
</div>
|
||||
<FontAwesomeIcon class="combo-box-comp__input-toggle" icon="chevron-down" />
|
||||
</div>
|
||||
<Transition name="combo-box-comp__list--transition">
|
||||
<div class="combo-box-comp__list" v-if="opened">
|
||||
<div class="combo-box-comp__item" v-for="item in props.list" :key="item" @click="selectItem(item.id)">
|
||||
{{ item.title }}
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from "vue";
|
||||
import { ComboBoxItem } from "@/types/index";
|
||||
import vClickOutside from "@/directives/ClickOutside";
|
||||
|
||||
const props = defineProps<{ list: ComboBoxItem[]; modelValue: ComboBoxItem | undefined }>();
|
||||
|
||||
const emit = defineEmits(["update:modelValue"]);
|
||||
|
||||
const displayedItem = computed(() => props.modelValue);
|
||||
|
||||
const opened = ref(false);
|
||||
|
||||
function toggleOpened() {
|
||||
opened.value ? closeList() : openList();
|
||||
}
|
||||
|
||||
function openList() {
|
||||
opened.value = true;
|
||||
}
|
||||
|
||||
function closeList() {
|
||||
opened.value = false;
|
||||
}
|
||||
|
||||
function selectItem(id: number) {
|
||||
emit(
|
||||
"update:modelValue",
|
||||
props.list.find((x) => x.id === id)
|
||||
);
|
||||
closeList();
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.combo-box-comp {
|
||||
$p: &;
|
||||
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
height: r(50);
|
||||
min-width: r(200);
|
||||
font-size: r(10);
|
||||
|
||||
&__input {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0 r(15);
|
||||
background: color("ui-background");
|
||||
border-radius: r(10);
|
||||
border: r(2) solid color("border");
|
||||
cursor: pointer;
|
||||
transition: border-color 0.18s ease;
|
||||
|
||||
&:hover {
|
||||
border: r(2) solid color("border-hover");
|
||||
}
|
||||
}
|
||||
|
||||
&__input-toggle {
|
||||
transition: transform 0.18s ease;
|
||||
}
|
||||
|
||||
&__list {
|
||||
position: relative;
|
||||
margin: 0 r(8);
|
||||
background: color("ui-background");
|
||||
border: r(2) solid color("border-active");
|
||||
border-top-width: 0;
|
||||
z-index: 10;
|
||||
|
||||
&--transition {
|
||||
&-enter-active,
|
||||
&-leave-active {
|
||||
transition: opacity 0.18s ease;
|
||||
}
|
||||
&-enter-from,
|
||||
&-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__item {
|
||||
cursor: pointer;
|
||||
padding: r(7);
|
||||
|
||||
transition: background-color 0.18s ease;
|
||||
|
||||
&:hover {
|
||||
background: color("ui-background-hover");
|
||||
}
|
||||
}
|
||||
|
||||
&--opened {
|
||||
#{$p}__input {
|
||||
border: r(2) solid color("border-active");
|
||||
}
|
||||
#{$p}__input-toggle {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user