chore: add code
This commit is contained in:
parent
dd6d1aa7bd
commit
88bd388d75
485
locales/en.yaml
Normal file
485
locales/en.yaml
Normal file
@ -0,0 +1,485 @@
|
||||
edit: Edit
|
||||
reset: Reset
|
||||
onedit: Edit On
|
||||
changeview: View
|
||||
showview: Show View
|
||||
menufixed: Menu fixed
|
||||
fixmen: Fix Menu
|
||||
from: From
|
||||
link: Link
|
||||
since: Since
|
||||
date: Date
|
||||
location: In
|
||||
position: Role
|
||||
name: Name
|
||||
code: Code
|
||||
license: License
|
||||
for: For
|
||||
role: Role
|
||||
tasks: Tasks
|
||||
description: Description
|
||||
tools: Tools
|
||||
purpose: Purpose
|
||||
code_on: Code on
|
||||
deployed_to: Deployed to
|
||||
features: Features
|
||||
builtwith: Built with
|
||||
hidepanel: Hide panel
|
||||
showpanel: Show panel
|
||||
id: Id
|
||||
org: Org.
|
||||
title: Title
|
||||
cert: Cert.
|
||||
capture: Capture
|
||||
site: Site
|
||||
total: Total
|
||||
items: Items
|
||||
in: in
|
||||
of: of
|
||||
fixmenu: Fix Menu
|
||||
phone: Phone
|
||||
address: Address
|
||||
save: Save
|
||||
close: Close
|
||||
DataNeedSaved: Data changes not saved !
|
||||
click_link_to_save: Click on link to save
|
||||
download_json_data: 'Download JSON data '
|
||||
cancel: Cancel
|
||||
signup: Sign Up
|
||||
select: Select
|
||||
selectOption: Select options
|
||||
selectModel: Select Model
|
||||
send: Send
|
||||
local: Local
|
||||
path: Path
|
||||
route: Web Route
|
||||
param: Parameter
|
||||
type: Type
|
||||
Route: Routue
|
||||
Template: Template
|
||||
Lang: Lang
|
||||
Name: Name
|
||||
saveload:
|
||||
editMode: Edit mode
|
||||
saveLocalFile: Save to local file
|
||||
saveData: Save data
|
||||
dataSaved: Data saved
|
||||
sendData: Send data
|
||||
saveOptions: Save options
|
||||
dataLoaded: Data loaded
|
||||
autherror: Auth error
|
||||
loaderror: Load error
|
||||
auth:
|
||||
invalidcredentials: Invalid credentials
|
||||
loginForm: ''
|
||||
newaccount: new account
|
||||
password: password
|
||||
register: Register
|
||||
signin: Sign in
|
||||
subHeading: Login info
|
||||
subTitle: ''
|
||||
welcome: welcome !
|
||||
button:
|
||||
about: About
|
||||
back: Back
|
||||
cancel: Cancel
|
||||
close-panel: Close panel
|
||||
delete: Delete
|
||||
go: Go
|
||||
home: Home
|
||||
new: Nuevo
|
||||
reset: Reset
|
||||
save: Save
|
||||
toggle_dark: Toggle dark mode
|
||||
toggle_langs: Change language
|
||||
connection:
|
||||
error: Error conexión
|
||||
dashboard: Dashboard
|
||||
form:
|
||||
delete_done: Delete done
|
||||
delete_error: Delete Error
|
||||
save_done: Data saved
|
||||
save_error: Data save Error
|
||||
intro:
|
||||
desc: Opinionated Vite Starter Template
|
||||
dynamic-route: Demo of dynamic route
|
||||
hi: Hi, {name}!
|
||||
whats-your-name: What's your name?
|
||||
login:
|
||||
end_session: End session
|
||||
form: Credentials
|
||||
invalidcredentials: Incorrect data
|
||||
newuser: New user
|
||||
nodata: Data incomplete
|
||||
password: Password
|
||||
register: Register
|
||||
forgot: Forgot ?
|
||||
checkemail: Check email
|
||||
reset: Reset
|
||||
see_you_soon: See You soon !
|
||||
signin: Signin
|
||||
subHeading: Access
|
||||
subtitle: LibreCloud online
|
||||
user_email: User / email
|
||||
username: User name
|
||||
email: Email
|
||||
welcome: welcome
|
||||
message:
|
||||
loading: Loadding
|
||||
not-found: Not found
|
||||
notes: Notes
|
||||
notifications:
|
||||
content: content
|
||||
notifications: Notifications
|
||||
search:
|
||||
search: Search
|
||||
payload:
|
||||
exp: Expiration
|
||||
id: id
|
||||
uuid: uuid
|
||||
data: Data
|
||||
orig_iat: Issued
|
||||
tracking:
|
||||
when: When
|
||||
what: What
|
||||
where: Where
|
||||
context: Context
|
||||
ctx: Ctx.
|
||||
data: Datos
|
||||
auth: Authorization
|
||||
payload: Payload Auth.
|
||||
list: Data Dates
|
||||
menu:
|
||||
lang: Lang
|
||||
Config: Configuration
|
||||
Tracking: Tracking
|
||||
Users: Users
|
||||
sec_langs: Langs
|
||||
sec_webserver: WebServer
|
||||
sec_logs: Logs
|
||||
sec_jwt: JWT
|
||||
sec_auth: Auth
|
||||
sec_perms: Permissions
|
||||
sec_routes: Routes
|
||||
sec_templates: Templates
|
||||
sec_mail: Mail
|
||||
sec_assets: WebAssets
|
||||
sec_models: DataModels
|
||||
sec_git: GIT
|
||||
sec_redis: Redis
|
||||
sec_others: Others
|
||||
sec_usersData: Accounts
|
||||
sec_modelsData: Models
|
||||
sec_invitations: Invitations
|
||||
sec_authzModel: Authz.Model
|
||||
sec_authzPolicy: Authz.Policy
|
||||
sec_tracking_list: Logs
|
||||
sec_tracking_data: Data
|
||||
users:
|
||||
usersData: Users Data
|
||||
msg_usersData: Data for <b>YAML</b> file collecting basic user data.<br> <u>Password</u> is encrypted by server command, use prefix <b>passwdEnc</b> (passwdEncmypasswd) to request encryption.
|
||||
modelsData: Users Models
|
||||
msg_modelsData: In is a <b>YAML</b> file collecting data for specific keys (<b>uuid</b>) to load CV models and permissions.
|
||||
invitations: New Users Invitations
|
||||
msg_invitations: Use <b>Uses num.</b> with negative number for no limit uses.<br>Use <b>Expire</b> (ISO date format). Shortcut Atajo <b>?+num(d,h,m)</b>, by example <b>?+2h</b> for expire in two hours or use <b>?+20m</b> for 20 minutes, then adjust result.<br>Set a <b>Role</b> for new User.
|
||||
authzModel: Authorization Models
|
||||
msg_authzModel: It is a <a class='link' href='https://casbin.org/' target='_blank'>Cabin RBAC with resources model<a/> to controll resources access.
|
||||
authzPolicy: Authorization Policies
|
||||
msg_authzPolicy: It is a <a class='link' href='https://casbin.org/' target='_blank'>Cabin RBAC with resources policy model<a/> to controll resources access.
|
||||
|
||||
sec_modelsData:
|
||||
model: Modelo
|
||||
user: Usuario
|
||||
data: Datos
|
||||
active: Activo
|
||||
sec_usersData:
|
||||
description: Description
|
||||
email: Email
|
||||
passwd: Password
|
||||
data: Data
|
||||
web: Web
|
||||
username: Username
|
||||
sec_invitations:
|
||||
email: Email
|
||||
createdby: Created by
|
||||
expire: Expire
|
||||
howmany: Uses num.
|
||||
role: Role
|
||||
description: Description
|
||||
data: Data
|
||||
active: Active
|
||||
|
||||
cv:
|
||||
'on': active
|
||||
'off': unactive
|
||||
profile: Profile
|
||||
experience: Experience
|
||||
work_experience: Work Experience
|
||||
projects: Projects
|
||||
teaching: Teaching
|
||||
talks: Talks
|
||||
education: Education
|
||||
expand_skills: Expand Skills
|
||||
others: Others
|
||||
contact: Contact
|
||||
personal: Personal
|
||||
certifications: Certifications
|
||||
languages: Languages
|
||||
infrastructures: Infrastructures
|
||||
skills_tools: Skills & Tools
|
||||
skills: Skills
|
||||
onweb: On the Web
|
||||
mission: Mission
|
||||
mission_how: Missión detail
|
||||
|
||||
lang:
|
||||
spanish: Spanish
|
||||
english: English
|
||||
french: French
|
||||
fluent: Fluent
|
||||
native: Native
|
||||
conversation: Conversation
|
||||
|
||||
vars:
|
||||
sec_logs: Web Service Logs
|
||||
sec_webserver: Webserver Settings
|
||||
sec_jwt: JSON Web Tokens
|
||||
sec_auth: Access Authorizations
|
||||
sec_perms: Permissions
|
||||
sec_routes: Webserver Routes
|
||||
sec_templates: Webserver Templates
|
||||
sec_mail: Mail Services
|
||||
sec_assets: Webserver Assets
|
||||
sec_models: CV Models
|
||||
sec_langs: Languages
|
||||
sec_git: Git
|
||||
sec_redis: Redis
|
||||
sec_others: Others
|
||||
sec_logs:
|
||||
logOut: Main Log filepath
|
||||
requestOut: Web Request Log DirPath
|
||||
requestStore: Store Web Request
|
||||
trackingOut: Tracking actions DirPath
|
||||
trackingStore: Store Tracking actions
|
||||
debugLevel: Debugging Level
|
||||
sec_webserver:
|
||||
host: Host
|
||||
port: Port
|
||||
protocol: Protocol
|
||||
keyPem: Primary key Certificate
|
||||
certPem: Public key Certificate
|
||||
allowOrigins: Allowed URL origins (CORS)
|
||||
sec_jwt:
|
||||
useJWT: Use JSON Web Tokens
|
||||
jwtRealm: JWT Realm
|
||||
jwtKey: JWT Key
|
||||
jwtTimeout: JWT Timeout
|
||||
jwtMaxRefresh: JWT Refresh tiemout
|
||||
signingAlgorithm: Signing Algorithm for firma JWT
|
||||
jwtKeyPem: Private Certificate Path to sign JWT
|
||||
jwtCertPem: Public Certificate Path to sign JWT
|
||||
sec_auth:
|
||||
authSep: Authorizations separator
|
||||
passwdEnc: Password Encription prefix
|
||||
invitationsPath: Path to users invitations
|
||||
recoveryTime: Expire Id Recovery access time
|
||||
useAuthz: Use Casbin Authorizations
|
||||
authzModel: Casbin Authorizations Path
|
||||
authzPolicy: Casbin Policies Path
|
||||
adminRole: Administrador Role
|
||||
usersStore: Users store
|
||||
sec_perms:
|
||||
pubUser: Public User
|
||||
usersPath: Users filepath
|
||||
usersModelsPath: Users Models filepath
|
||||
identityKey: Identity Key
|
||||
usersStore: Store Users
|
||||
sec_routes:
|
||||
rootAuthGroup: Authentication Group
|
||||
routes: Webserver Routes
|
||||
path: Path
|
||||
param: Param
|
||||
sec_templates:
|
||||
templatesRoot: Main Template filepath
|
||||
templatesExt: Templates files extension
|
||||
templatesIncludes: Templates Include FilePath
|
||||
templatesLayouts: Templates Layout filepath
|
||||
templatesFiles: Templates Paths List
|
||||
path: Path
|
||||
route: Route
|
||||
sec_mail:
|
||||
mailHost: Server
|
||||
mailPort: Port
|
||||
mailFrom: From Email
|
||||
mailUser: Mail user
|
||||
mailPswd: User passwrord
|
||||
mailCertPath: Cert. Path
|
||||
mailCertDom: Cert. Domain
|
||||
tplsMailPath: Mail Templates Path
|
||||
tplsMail: Mail Templates List
|
||||
path: Path
|
||||
route: Route
|
||||
sec_assets:
|
||||
assetsPath: Web Assets Path
|
||||
assetsURL: URL Web Assets
|
||||
sec_models:
|
||||
useDist: Use Distribution (JSON)
|
||||
genDist: Generate Distribution (JSON)
|
||||
genExcludeList: Exclude Names List
|
||||
dataDistPath: Distribution Path (JSON)
|
||||
dataPath: Data Path (YAML files)
|
||||
dataModelsRoot: Models-List Root-Path
|
||||
dataCorePath: Data Core Path
|
||||
dataDflt: Default Model Name
|
||||
dataItems: Data Items List
|
||||
dataStore: Store Data
|
||||
sec_langs:
|
||||
langs: Languages List
|
||||
mainLang: Main Language
|
||||
sec_git:
|
||||
useRepo: Use GIT Repository
|
||||
useRepoOnReq: Use Repository in web requests
|
||||
quietGit: Not show additional GIT messages
|
||||
backgGit: Use background mode for GIT
|
||||
repoPath: Local path for Repository
|
||||
repoName: Repository Name
|
||||
repoCommit: Commits GIT message
|
||||
sec_redis:
|
||||
redisHost: Redis Host
|
||||
redisPort: Redis Port
|
||||
redisDB: Redis DataBase
|
||||
redisPswd: Redis DB Password
|
||||
sec_others:
|
||||
openBrowser: Open web browser at web server start
|
||||
|
||||
info:
|
||||
logs: >-
|
||||
<div class='title'>Web Service Logs where server runs.</div>
|
||||
<div class='note'>Paths with read/write permissions.</div>
|
||||
webserver: >-
|
||||
<div class='title'>Web Server Configuration</div>
|
||||
jwt: >-
|
||||
<div class='title'>JSON Web Tokens (JWT) Configuration</div>
|
||||
auth: >-
|
||||
<div class='title'>Access Authorizations for web requests</div>
|
||||
perms: >-
|
||||
<div class='title'>Access Permissions to resources (users, groups, policies)</div>
|
||||
routes: >-
|
||||
<div class='title'>Web Server Requests Routes</div>
|
||||
templates: >-
|
||||
<div class='title'>Web Server Templates</div>
|
||||
mail: >-
|
||||
<div class='title'>Mail Services Configuration</div>
|
||||
assets: >-
|
||||
<div class='title'>Web Server Assets</div>
|
||||
<div class='note'>Static files</div>
|
||||
models: >-
|
||||
<div class='title'>Data Models. JSON and YAML formats</div>
|
||||
langs: >-
|
||||
<div class='title'>Languages </div>
|
||||
git: >-
|
||||
<div class='title'>GIT as Data Source</div>
|
||||
redis: >-
|
||||
<div class='title'>Redis</div>
|
||||
others: >-
|
||||
<div class='title'>Others</div>
|
||||
|
||||
infosec_logs:
|
||||
logOut: Main Logs relative or absolute Path
|
||||
requestOut: Web Requests daily Logs files, relative or absolute Directory Path
|
||||
requestStore: Web Requests Store (fs/redis)
|
||||
trackingOut: Tracking daily Actions files, absolute Directory Path
|
||||
trackingStore: Tracking Actions Store (fs/redis)
|
||||
debugLevel: Debuggin Level (0,1,2)
|
||||
infosec_webserver:
|
||||
host: Web server Host name or domain
|
||||
port: Web server listen Port (80, 443, etc)
|
||||
protocol: Web server Protocol (http | https)
|
||||
keyPem: Digital Certificate private key Path
|
||||
certPem: Digital Certificate public key Path
|
||||
allowOrigins: URLs Allowed Access (origins) List (CORS)
|
||||
infosec_jwt:
|
||||
useJWT: Use JSON Web Token for access identification
|
||||
jwtRealm: JWT Realm
|
||||
jwtKey: JWT Key
|
||||
jwtTimeout: Token timeout in minutes
|
||||
jwtMaxRefresh: Max refresh token time before expiration
|
||||
signingAlgorithm: Signing Algorithm for JWT (RS256 or '')
|
||||
jwtKeyPem: Private Certificate Path to sing JWT
|
||||
jwtCertPem: Public Certificate Path to sing JWT
|
||||
infosec_auth:
|
||||
authSep: Separation character for user and credentials in web requests
|
||||
passwdEnc: Password Encription prefix for server
|
||||
invitationsPath: Path to new user invitations
|
||||
recoveryTime: Recovery access id expire in minutes
|
||||
useAuthz: Use Casbin Authorizations for web requests
|
||||
authzModel: Casbin authioization model path
|
||||
authzPolicy: Authorization Policies Path
|
||||
adminRole: Administration name role for Casbin authorizations
|
||||
usersStore: Users store (fs/redis)
|
||||
infosec_perms:
|
||||
pubUser: Name to identify public users (usually 'none')
|
||||
usersPath: Users path file with access credentials encrypted
|
||||
usersModelsPath: Models associated with users path
|
||||
identityKey: Field name to identify user ('id')
|
||||
infosec_routes:
|
||||
rootAuthGroup: Web route group name for routes with authorization required
|
||||
routes: >-
|
||||
Rotues List, use 'path' (url relative) and 'param' field name.
|
||||
New routes has to be defined/managed in server.
|
||||
infosec_templates:
|
||||
templatesRoot: Web server Templates relative or absolute Path
|
||||
templatesExt: Template files Extensión (default .tmpl)
|
||||
templatesIncludes: File path to include in Templates (Headers, Footer, etc.)
|
||||
templatesLayouts: Templates Layout file path
|
||||
templatesFiles: >-
|
||||
Templates List with 'path' (relative or absolute), 'route' relative URL
|
||||
info_mail:
|
||||
mailHost: Mail service Server, domain or IP
|
||||
mailPort: Mail service Port (SSL)
|
||||
mailFrom: Email (from) who send
|
||||
mailUser: User for Mail service access
|
||||
mailPswd: Password form User Mail service access
|
||||
mailCertPath: Certificate Path (DKIM) for emails
|
||||
mailCertDom: Certificate Domain DKIM
|
||||
tplsMailPath: Templates Email Path
|
||||
tplsMail: >-
|
||||
Mail Templates List with 'path' (relative or absolute), 'type' (format 'text' 'html')
|
||||
infosec_assets:
|
||||
assetsPath: Static resources Path for web server
|
||||
assetsURL: Static resources relative URL for web server
|
||||
infosec_models:
|
||||
useDist: Use data models in distributiuon mode (one file in JSON format)
|
||||
genDist: >-
|
||||
Genearte Data models for distribution before web server start or when saving data
|
||||
genExcludeList: >-
|
||||
Names List to exclude for distribution, will keep items structure in several YAML files.
|
||||
dataDistPath: Path for Data model distribution with modelos de datos para distribución (JSON)
|
||||
dataPath: Data directory path, contains folders with items in YAML
|
||||
dataModelsRoot: File Name (YAML) which contains the models available to the user
|
||||
dataCorePath: Main Data file name or 'Core'
|
||||
dataDflt: Main/default data models filename
|
||||
dataItems: >-
|
||||
Items List with each Data Model.
|
||||
Contains a 'showinfo' folder with authorizations (view/edit) for each item and his attributes or fields.
|
||||
Includes a 'langs' directory with availables languages folders and their translated items.
|
||||
dataStore: Data Store (fs/redis)
|
||||
infosec_langs:
|
||||
langs: Languages List in two lowercase letters code
|
||||
mainLang: Main/defaul Language
|
||||
infosec_git:
|
||||
useRepo: Use GIT Repository as Data Source
|
||||
useRepoOnReq: Use GIT with each web request (pull/push)
|
||||
quietGit: Do not show additional messages for GIT tasks
|
||||
backgGit: Run GIT taks in background
|
||||
repoPath: Local Directory Path to use GIT (contains .git)
|
||||
repoName: Repository/branch name for pull/push (default origin)
|
||||
repoCommit: Commit text for automatic changes with GIT
|
||||
infosec_redis:
|
||||
redisHost: Redis Host
|
||||
redisPort: Redis Port
|
||||
redisDB: Redis DataBase
|
||||
redisPswd: Redis DB Password
|
||||
infosec_others:
|
||||
openBrowser: URL to open with web browser when web server starts
|
||||
useTracking: Use Tracking actions (add appropriate routes)
|
||||
482
locales/es.yaml
Normal file
482
locales/es.yaml
Normal file
@ -0,0 +1,482 @@
|
||||
edit: Editar
|
||||
reset: Reset
|
||||
onedit: Activar Edición
|
||||
changeview: Vista
|
||||
showview: Mostrar Vista
|
||||
menufixed: Menú fijo
|
||||
fixmenu: Fijar Menú
|
||||
from: De
|
||||
link: Enlace
|
||||
since: Desde
|
||||
date: Fecha
|
||||
location: En
|
||||
position: Rol
|
||||
name: Nombre
|
||||
code: Código
|
||||
license: Licencia
|
||||
for: Para
|
||||
tasks: Tareas
|
||||
role: Rol
|
||||
description: Descripción
|
||||
tools: Software
|
||||
purpose: Propósito
|
||||
code_on: Código en
|
||||
deployed_to: Desplegado en
|
||||
features: Funciones
|
||||
builtwith: Creado con
|
||||
hidepanel: Ocultar panel
|
||||
showpanel: Mostrar panel
|
||||
id: Id
|
||||
org: Org.
|
||||
title: Título
|
||||
cert: Cert.
|
||||
capture: Captura
|
||||
site: Sitio
|
||||
total: Total
|
||||
items: Items
|
||||
in: en
|
||||
of: de
|
||||
phone: Teléfono
|
||||
address: Dirección
|
||||
save: Guardar
|
||||
close: Cerrar
|
||||
DataNeedSaved: Cambios no guardados
|
||||
click_link_to_save: Click en enlace de arriba para guardar
|
||||
download_json_data: Descargar datos en JSON
|
||||
cancel: Cancelar
|
||||
signup: Registrarse
|
||||
select: Seleccionar
|
||||
selectOption: Selección de opciones
|
||||
selectModel: Seleccionar modelo
|
||||
send: Enviar
|
||||
local: Local
|
||||
path: Ruta Fichero
|
||||
route: Ruta Web
|
||||
param: Parámetro
|
||||
type: Tipo
|
||||
Route: Ruta
|
||||
Template: Plantilla
|
||||
Lang: Idioma
|
||||
Name: Nombre
|
||||
saveload:
|
||||
editMode: Modo edición
|
||||
saveLocalFile: Guardar como fichero local
|
||||
saveData: Guardar datos
|
||||
dataSaved: Datos guardados
|
||||
sendData: Enviar datos
|
||||
saveOptions: Opciones para guardar
|
||||
dataLoaded: Datos cargados
|
||||
autherror: Error autenticación
|
||||
loaderror: Error de carga
|
||||
auth:
|
||||
invalidcredentials: Credenciale no válidas
|
||||
loginForm: ''
|
||||
newaccount: nueva cuenta
|
||||
password: password
|
||||
register: Registrarse
|
||||
signin: Inicial sessión
|
||||
subHeading: Login info
|
||||
subTitle: ''
|
||||
welcome: ¡ Bienvenido/a !
|
||||
button:
|
||||
about: Acerca de
|
||||
back: Atrás
|
||||
cancel: Cancelar
|
||||
close-panel: Cerarr panel
|
||||
delete: Borrar
|
||||
go: Ir
|
||||
home: Inicio
|
||||
new: Nuevo
|
||||
reset: Reset
|
||||
save: Guardar
|
||||
toggle_dark: Alternar modo oscuro
|
||||
toggle_langs: Cambiar idiomas
|
||||
connection:
|
||||
error: Error conexión
|
||||
dashboard: Panel de control
|
||||
form:
|
||||
delete_done: Borrado realizado
|
||||
delete_error: Error al borrar datos
|
||||
save_done: Datos guardados
|
||||
save_error: Error al guardar datos
|
||||
intro:
|
||||
desc: Plantilla de Inicio de Vite Dogmática
|
||||
dynamic-route: Demo de ruta dinámica
|
||||
hi: ¡Hola, {name}!
|
||||
whats-your-name: ¿Cómo te llamas?
|
||||
login:
|
||||
end_session: Sesión finalizada
|
||||
form: Credenciales
|
||||
invalidcredentials: Datos incorrectos
|
||||
newuser: Nuevo usuario
|
||||
nodata: Datos incompetos
|
||||
password: Password
|
||||
register: Registrarse
|
||||
forgot: ¿ Olvidado ?
|
||||
checkemail: Comprobar email
|
||||
reset: Reset
|
||||
see_you_soon: ¡ Nos vemos pronto !
|
||||
signin: Iniciar sesión
|
||||
subHeading: Acceso
|
||||
subtitle: LibreCloud online
|
||||
user_email: Usuario / email
|
||||
username: Usuario
|
||||
email: Email
|
||||
welcome: Bienvenido/a
|
||||
message:
|
||||
loading: Cargando
|
||||
not-found: No se ha encontrado
|
||||
notes: Notas
|
||||
notifications:
|
||||
content: contenido
|
||||
notifications: Notificiaciones
|
||||
search:
|
||||
search: Buscar
|
||||
payload:
|
||||
exp: Expiración
|
||||
id: id
|
||||
uuid: uuid
|
||||
data: Datos
|
||||
orig_iat: Emitida
|
||||
tracking:
|
||||
when: Cuando
|
||||
what: Qué
|
||||
where: Dónde
|
||||
context: Contexto
|
||||
ctx: Ctx.
|
||||
data: Datos
|
||||
auth: Autorización
|
||||
payload: Info/Autorización
|
||||
list: Fechas Datos
|
||||
menu:
|
||||
lang: Idioma
|
||||
Config: Configuración
|
||||
Tracking: Seguimiento
|
||||
Users: Usuarios
|
||||
sec_langs: Idiomas
|
||||
sec_webserver: ServidorWeb
|
||||
sec_logs: Logs
|
||||
sec_jwt: JWT
|
||||
sec_auth: Autorizaciones
|
||||
sec_perms: Permisos
|
||||
sec_routes: Rutas
|
||||
sec_templates: Plantillas
|
||||
sec_mail: Correo
|
||||
sec_assets: RecurosWeb
|
||||
sec_models: ModelosDatos
|
||||
sec_git: GIT
|
||||
sec_redis: Redis
|
||||
sec_others: Otros
|
||||
sec_usersData: Cuentas
|
||||
sec_modelsData: Modelos
|
||||
sec_invitations: Invitaciones
|
||||
sec_authzModel: Aut.Modelos
|
||||
sec_authzPolicy: Aut.Polítcas
|
||||
sec_tracking_list: Logs
|
||||
sec_tracking_data: Datos
|
||||
users:
|
||||
usersData: Datos Usuarios
|
||||
msg_usersData: Es un fichero en <b>YAML</b> quer reune los datos básicos de cada usuarios.<br>El <u>password</u> está encriptado en el servidor, usar el prefijo <b>passwdEnc</b> (passwdEncmiclave) para pedir que se encripte.
|
||||
modelsData: Modelos de Usuarios
|
||||
msg_models: Es un fichero en <b>YAML</b> que reune las claves específcas (<b>uuid</b>) los datos para la carga de modelos CV y permisos de uso.
|
||||
invitations: Invitaciones para nuevos usuarios
|
||||
msg_invitations: Usar <b>Num.Usos</b> con número negativo para uso no limitado.<br>Usar <b>Expira</b> (fecha en formato ISO). Atajo <b>?+num(d,h,m)</b>, por ejemplo <b>?+2h</b> para que expire en dos horas o usar <b>?+20m</b> para 20 minutos, luego ajustar el resultado.<br>Asignar un <b>Rol</b> al nuevo usuario
|
||||
authzModel: Modelos Autorización
|
||||
msg_authzModel: Es un <a class='link' href='https://casbin.org/' target='_blank'>modelo Casbin en RBAC <a/> para controlar el acceso a los recursos.
|
||||
authzPolicy: Políticas Autorización
|
||||
msg_authzPolicy: Es un <a class='link' href='https://casbin.org/' target='_blank'>modelo Casbin en RBAC de polítcas de recursos<a/> para controlar el acceso a los recursos.
|
||||
|
||||
sec_modelsData:
|
||||
model: Modelo
|
||||
user: Usuario
|
||||
data: Datos
|
||||
active: Activo
|
||||
sec_usersData:
|
||||
description: Descripción
|
||||
email: Email
|
||||
passwd: Password
|
||||
data: Datos
|
||||
web: Web
|
||||
username: Usuario
|
||||
sec_invitations:
|
||||
email: Email
|
||||
createdby: Creada por
|
||||
expire: Expira
|
||||
howmany: Num.Usos
|
||||
role: Rol
|
||||
description: Descripción
|
||||
data: Datos
|
||||
active: Activo
|
||||
|
||||
cv:
|
||||
'on': activo
|
||||
'off': desactivado
|
||||
profile: Perfil
|
||||
work_experience: Experiencia
|
||||
projects: Proyectos
|
||||
teaching: Enseñanza
|
||||
talks: Charlas
|
||||
education: Educación
|
||||
expand_skills: Ampliando habilidades
|
||||
others: Otros
|
||||
contact: Contacto
|
||||
personal: Personal
|
||||
certifications: Certificaciones
|
||||
languages: Idiomas
|
||||
infrastructures: Infrastructuras
|
||||
skills_tools: Habilidades y Herramientas
|
||||
skills: Habilidades
|
||||
onweb: En la Web
|
||||
mission: Misión
|
||||
mission_how: Detalle misión
|
||||
|
||||
lang:
|
||||
spanish: Español
|
||||
english: Inglés
|
||||
french: Francés
|
||||
fluent: Fluído
|
||||
native: Nativo
|
||||
conversation: Conversación
|
||||
|
||||
vars:
|
||||
sec_logs: Logs Servicio Web
|
||||
sec_webserver: Configuración Servidor Web
|
||||
sec_jwt: JSON Web Tokens
|
||||
sec_auth: Autorizaciones de acceso
|
||||
sec_perms: Permisos
|
||||
sec_routes: Rutas Servidor Web
|
||||
sec_templates: Plantillas Servidor Web
|
||||
sec_mail: Configuración Servicios de Correo
|
||||
sec_assets: Recusos estáticos Servidor Web
|
||||
sec_models: Modelos CV
|
||||
sec_langs: Idiomas
|
||||
sec_git: Git
|
||||
sec_redis: Redis
|
||||
sec_others: Otros
|
||||
|
||||
sec_logs:
|
||||
logOut: Ruta fichero log principal
|
||||
requestOut: Ruta directorio logs peticiones web
|
||||
requestStore: Almacenamiento peticiones web
|
||||
trackingOut: Ruta directorio seguimiento acciones (tracking)
|
||||
trackingStore: Almacenamiento seguimiento
|
||||
debugLevel: Nivel depuración
|
||||
sec_webserver:
|
||||
host: Host
|
||||
port: Puerto
|
||||
protocol: Protocolo
|
||||
keyPem: Certificado clave privada
|
||||
certPem: Certificado clave pública
|
||||
allowOrigins: Lista orígenes permitidos (CORS)
|
||||
sec_jwt:
|
||||
useJWT: Usar JSON Web Tokens
|
||||
jwtRealm: Ámbito JWT
|
||||
jwtKey: Clave JWT
|
||||
jwtTimeout: Expiración JWT
|
||||
jwtMaxRefresh: Tiempo para refrescar JWT
|
||||
signingAlgorithm: Algoritmo de firma JWT
|
||||
jwtKeyPem: Ruta clave privada firma JWT
|
||||
jwtCertPem: Ruta clave pública firma JWT
|
||||
sec_auth:
|
||||
authSep: Separador autorizaciones
|
||||
passwdEnc: Prefijo Encriptación password
|
||||
invitationsPath: Ruta fichero invitaciones usuarios
|
||||
recoveryTime: Tiempo expiración recuperación
|
||||
useAuthz: usar Autorizaciones Casbin
|
||||
authzModel: Ruta fichero de Autorizaciones Casbin
|
||||
authzPolicy: Ruta fichero de Políticas Casbin
|
||||
adminRole: Rol administrador
|
||||
usersStore: Almacenamiento usuarios
|
||||
sec_perms:
|
||||
pubUser: Usuario público
|
||||
usersPath: Ruta fichero de Usuarios
|
||||
usersModelsPath: Ruta fichero de Modelos de usuarios
|
||||
identityKey: Clave de identidad
|
||||
sec_routes:
|
||||
rootAuthGroup: Grupo de Autenticación
|
||||
routes: Rutas Webserver
|
||||
path: Ruta fichero
|
||||
param: Parámetro
|
||||
sec_templates:
|
||||
templatesRoot: Ruta fichero Plantilla Principal
|
||||
templatesExt: Extensión ficheros plantilla
|
||||
templatesIncludes: Ruta fichero a Incluir en plantillas
|
||||
templatesLayouts: Ruta fichero plantilla base o maqueta
|
||||
templatesFiles: Lista de Rutas de Plantillas
|
||||
path: Ruta fichero
|
||||
route: Ruta web
|
||||
sec_mail:
|
||||
mailHost: Servidor
|
||||
mailPort: Puerto
|
||||
mailFrom: Email de envío
|
||||
mailUser: Usuario de mail
|
||||
mailPswd: Password del usuario
|
||||
tplsMailPath: Ruta Plantillas de Correo
|
||||
tplsMail: Lista Plantillas de Correo
|
||||
path: Ruta fichero
|
||||
route: Ruta web
|
||||
sec_assets:
|
||||
assetsPath: Ruta fichero recursos web
|
||||
assetsURL: URL recursos web
|
||||
sec_models:
|
||||
useDist: Usar Distribución (JSON)
|
||||
genDist: Generar Distribución (JSON)
|
||||
genExcludeList: Lista nombres a excluir
|
||||
dataDistPath: Ruta fichero de Distribución (JSON)
|
||||
dataPath: Ruta Ficherod e Datos (YAML files)
|
||||
dataModelsRoot: Ruta fichero Principal Lista de Modelos
|
||||
dataCorePath: Ruta fichero de Datos Core (principales)
|
||||
dataDflt: Nombre Modelo por defecto
|
||||
dataItems: Lista Items de Datos
|
||||
dataStore: Almacenamiento datos
|
||||
sec_langs:
|
||||
langs: Lista de Idiomas
|
||||
mainLang: Idioma Principal
|
||||
sec_git:
|
||||
useRepo: Usar Repositorio GIT
|
||||
useRepoOnReq: Usar Repositorio en peticiones web (requests)
|
||||
quietGit: No mostrar mensajes GIT adicionales
|
||||
backgGit: Usar modo 'background' para GIT
|
||||
repoPath: Directorio Local del Repositorio
|
||||
repoName: Nombre del Repositorio
|
||||
repoCommit: Mensaje de GIT para los 'commits'
|
||||
sec_redis:
|
||||
redisHost: Host Redis
|
||||
redisPort: Puerto Redis
|
||||
redisDB: BaseDatos Redis
|
||||
redisPswd: Password BD Redis
|
||||
sec_others:
|
||||
openBrowser: Abrir un navegador al iniciar servidor web
|
||||
|
||||
info:
|
||||
logs: >-
|
||||
<div class='title'>Logs del Servicio Web en el servidor donde se ejecuta.</div>
|
||||
<div class='note'>Ruta con permisos de lectura/escritura.</div>
|
||||
webserver: >-
|
||||
<div class='title'>Configuración del Servidor Web</div>
|
||||
jwt: >-
|
||||
<div class='title'>Configuración JSON Web Tokens (JWT)</div>
|
||||
auth: >-
|
||||
<div class='title'>Autorizaciones de acceso para las peticiones web</div>
|
||||
perms: >-
|
||||
<div class='title'>Permisos de acceso a los recursos (usuarios, grupos, políticas)</div>
|
||||
routes: >-
|
||||
<div class='title'>Rutas para las peticiones del Servidor Web</div>
|
||||
templates: >-
|
||||
<div class='title'>Plantillas para el Servidor Web</div>
|
||||
mail: >-
|
||||
<div class='title'>Configuración Servicios de Correo</div>
|
||||
assets: >-
|
||||
<div class='title'>Recursos para el Servidor Web</div>
|
||||
<div class='note'>Ficheros estáticos</div>
|
||||
models: >-
|
||||
<div class='title'>Modelos de Datos. En formatos JSON y YAML</div>
|
||||
langs: >-
|
||||
<div class='title'>Idiomas </div>
|
||||
git: >-
|
||||
<div class='title'>GIT como Fuente de Datos</div>
|
||||
redis: >-
|
||||
<div class='title'>Redis</div>
|
||||
others: >-
|
||||
<div class='title'>Otros</div>
|
||||
|
||||
infosec_logs:
|
||||
logOut: Ruta relativa o absoluta del fichero de logs principal
|
||||
requestOut: Ruta relativa o absoluta del directorio de ficheros diarios de logs de peticiones web (requests)
|
||||
requestStore: Almacenamiento peticiones web (fs/redis)
|
||||
trackingOut: Ruta relativa o absoluta del directorio de ficheros diarios de seguimiento de acciones (tracking)
|
||||
trackingStore: Almacenamiento sequimeinto (fs/redis)
|
||||
debugLevel: Nivel de depuración (0,1,2)
|
||||
infosec_webserver:
|
||||
host: Nombre del 'host' o dominio para el servidor web
|
||||
port: Puerto de escucha del servidor web (80, 443, etc)
|
||||
protocol: Protocol del servidor web (http | https)
|
||||
keyPem: Ruta fichero de la clave privada del certificado digital
|
||||
certPem: Ruta fichero de la clave pública del certificado digital
|
||||
allowOrigins: Lista de URLs con acceso permitido (CORS)
|
||||
infosec_jwt:
|
||||
useJWT: Usar JSON Web Token para gestionar/identificar accesos
|
||||
jwtRealm: Nombre del ámbito o espaciio para la configuración del JWT
|
||||
jwtKey: Clave para la configuración de JWT
|
||||
jwtTimeout: Tiempo que tardan en expirar los Token en minutos
|
||||
jwtMaxRefresh: Tiempo máximo para solicitar un Token antes de que expire
|
||||
signingAlgorithm: Algoritmo de firma JWT (RS256 o '')
|
||||
jwtKeyPem: Ruta de la clave privada del certificado digital para firmar JWT
|
||||
jwtCertPem: Ruta de la clave pública del certificado digital para firmar JWT
|
||||
infosec_auth:
|
||||
authSep: Carácter de separación del usuario y su credencial en las peticiones web
|
||||
passwdEnc: Prefijo Encriptación password en el servidor
|
||||
invitationsPath: Ruta fichero de invitaciones a usuarios nuevos
|
||||
recoveryTime: Tiempo expiración ID de recuperacción de acceso en minutos
|
||||
useAuthz: Usar Autorizaciones Casbin para las peticiones web
|
||||
authzModel: Ruta fichero del modelo de autorizaciones (Casbin)
|
||||
authzPolicy: Ruta fichero de las políticas de autorizaciones
|
||||
adminRole: Nombre del rol de administración para autorizaciones Casbin
|
||||
usersStore: Almacenamiento usuarios (fs/redis)
|
||||
infosec_perms:
|
||||
pubUser: Nombre para identificar al usuario público (normalmente 'none')
|
||||
usersPath: Ruta fichero de usuarios con credenciales de acceso encriptadas
|
||||
usersModelsPath: Ruta fichero de los modelos asociados a usuarios
|
||||
identityKey: Nombre del campo que identifica al usuario ('id')
|
||||
infosec_routes:
|
||||
rootAuthGroup: Nombre del grupo de Rutas web que requieren autorización
|
||||
routes: >-
|
||||
Lista de rutas, especificando 'path' (url relativa) y 'param' nombre campo o parámetro.
|
||||
Las rutas nuevas han de estar definidas/gestionadas en el servidor.
|
||||
infosec_templates:
|
||||
templatesRoot: Ruta fichero relativa o absoluta de las plantillas para el servidor web
|
||||
templatesExt: Extensión de los ficheros de plantillas (por defecto .tmpl)
|
||||
templatesIncludes: Ruta de fichero a incluir en las plantillas (Cabecera, Pie, etc.)
|
||||
templatesLayouts: Ruta del fichero base o maqueta para las plantillas
|
||||
templatesFiles: >-
|
||||
Lista de plantillas con 'path' (relativo o absoluto), 'route' ruta URL relativa
|
||||
info_mail:
|
||||
mailHost: Servidor, dominio o IP del servicio de Correo
|
||||
mailPort: Puerto del servicio de Correo (SSL)
|
||||
mailFrom: Email que envía los correos
|
||||
mailUser: Usuario de acceso a los servicios de Correo
|
||||
mailPswd: Password del usuario de acceso a los servicios de Correo
|
||||
mailCertPath: Ruta certificado DKIM para emails
|
||||
mailCertDom: Dominio certificado DKIM
|
||||
tplsMailPath: Ruta Plantillas de Correo
|
||||
tplsMail: >-
|
||||
Lista Plantillas de Correo con 'path' (relativo o absoluto), 'tipo' (formato 'text' 'html')
|
||||
infosec_assets:
|
||||
assetsPath: Ruta de los ficheros de recursos estáticos para el servidor web
|
||||
assetsURL: URL relativa de los recursos estáticos para el servidor web
|
||||
infosec_models:
|
||||
useDist: Usar los modelos de datos en modo distribución (un fichero en formato JSON)
|
||||
genDist: >-
|
||||
Generar los modelos de datos para distribución antes de arrancar el servidor web
|
||||
o al salvar datos
|
||||
genExcludeList: >-
|
||||
Lista de nombres a excluir de la distribución que mantendrán la estructura de items en varios ficheros YAML.
|
||||
dataDistPath: Ruta del directorio que contiene los modelos de datos para distribución (JSON)
|
||||
dataPath: Ruta del directorio de datos, contiene carpetas con items en YAML
|
||||
dataModelsRoot: Nombre del fichero (YAML) que contiene los modelos disponibles para el usuario
|
||||
dataCorePath: Nombre del fichero de datos principal o 'Core'
|
||||
dataDflt: Nombre del modelo de datos principal/por defecto
|
||||
dataItems: >-
|
||||
Lista de items de cada modelo de datos.
|
||||
Contiene una carpeta 'showinfo' con autorizacions (ver/editar) de cada item y sus atributos o campos.
|
||||
Incluye un directorio 'langs' con carpetas de los idiomas disponibles y los items que tiene traducidos.
|
||||
dataStore: Almacenamiento datos (fs/redis)
|
||||
infosec_langs:
|
||||
langs: Lista de idiomas en código de dos letras minúscula
|
||||
mainLang: Idioma pricipal y por defecto
|
||||
infosec_git:
|
||||
useRepo: Usar Repositorio GIT como Fuente de datos
|
||||
useRepoOnReq: Usar GIT en cada petición web (pull/push)
|
||||
quietGit: No mostrar mensajes adicionales de las tareas GIT
|
||||
backgGit: Realizar tareas GIT en segundo plano o background
|
||||
repoPath: Ruta local del directorio para usar GIT (contiene .git)
|
||||
repoName: Nombre del repositorio/rama para pull/push (por defecto origin)
|
||||
repoCommit: Texto para los 'commits' automáticos sobre cambios con GIT
|
||||
infosec_others:
|
||||
openBrowser: URL para abrir en un navegador al iniciar el servidor web
|
||||
useTracking: Usa seguimiento de acciones o tracking (incluir rutas)
|
||||
infosec_redis:
|
||||
redisHost: Host Redis
|
||||
redisPort: Puerto Redis
|
||||
redisDB: BaseDatos Redis
|
||||
redisPswd: Password BD Redis
|
||||
21
src/App.vue
Normal file
21
src/App.vue
Normal file
@ -0,0 +1,21 @@
|
||||
<template>
|
||||
<component :is="layout" class="gray-700 dark:gray-200 dark:bg-gray-800 dark:text-warm-gray-100 text-warm-gray-800 dark:bg-warm-gray-800">
|
||||
<transition name="slide">
|
||||
<router-view />
|
||||
</transition>
|
||||
</component>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { useHead } from '@vueuse/head'
|
||||
useHead({
|
||||
title: 'CV genadmin',
|
||||
meta: [
|
||||
{ name: 'description', content: 'CV GenAdmin' },
|
||||
],
|
||||
})
|
||||
const { currentRoute } = useRouter()
|
||||
const appLayout = 'AppLayout'
|
||||
const layout = computed(() => {
|
||||
return `${currentRoute.value.meta.layout || appLayout}`
|
||||
})
|
||||
</script>
|
||||
20
src/components/Footer.vue
Normal file
20
src/components/Footer.vue
Normal file
@ -0,0 +1,20 @@
|
||||
<script setup lang="ts">
|
||||
import { isDark, toggleDark } from '~/composables'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<nav text-xl mt-6 inline-flex gap-2 dark:bg-cool-gray-800 dark:text-white >
|
||||
<button class="icon-btn !outline-none" @click="toggleDark()">
|
||||
<div v-if="isDark" i-carbon-moon />
|
||||
<div v-else i-carbon-sun />
|
||||
</button>
|
||||
<a
|
||||
icon-btn
|
||||
i-carbon-logo-github
|
||||
rel="noreferrer"
|
||||
href="https://github.com/antfu/vitesse-lite"
|
||||
target="_blank"
|
||||
title="GitHub"
|
||||
/>
|
||||
</nav>
|
||||
</template>
|
||||
175
src/components/InputValue.vue
Normal file
175
src/components/InputValue.vue
Normal file
@ -0,0 +1,175 @@
|
||||
<template>
|
||||
<div>
|
||||
<CheckInput
|
||||
v-if="typ === InputValueOption.bool"
|
||||
:typ="typ"
|
||||
:inputvalue="(dataValue as boolean)"
|
||||
:varname="varname"
|
||||
:validate="validate"
|
||||
:title="title"
|
||||
:edititem="edititem"
|
||||
:showitem="showitem"
|
||||
:messages="messages"
|
||||
@input-change="onInputChange"
|
||||
/>
|
||||
<TextInput
|
||||
v-if="typ !== InputValueOption.bool"
|
||||
:typ="typ"
|
||||
:inputvalue="(dataValue as any)"
|
||||
:varname="varname"
|
||||
:idx="-1"
|
||||
:rows="rows"
|
||||
:mode="mode"
|
||||
:vardef="vardef"
|
||||
:validate="validate"
|
||||
:title="title"
|
||||
:edititem="edititem"
|
||||
:showitem="showitem"
|
||||
:messages="messages"
|
||||
@input-change="onInputChange"
|
||||
/>
|
||||
<div v-if="typ === InputValueOption.arrayString">
|
||||
<div v-for="(val,elmindex) in dataValue as any" :key="elmindex" class="flex flex-1">
|
||||
<TextInput
|
||||
:typ="InputValueOption.string"
|
||||
:inputvalue="val"
|
||||
:varname="varname"
|
||||
:idx="elmindex"
|
||||
:vardef="vardef"
|
||||
:validate="validate"
|
||||
:title="title"
|
||||
:edititem="edititem"
|
||||
:showitem="showitem"
|
||||
:messages="messages"
|
||||
@input-change="onInputChange"
|
||||
/>
|
||||
<button
|
||||
v-if="edititem"
|
||||
class="no-print text-sm icon-btn mt-1 !outline-none text-gray-500 dark:text-gray-400"
|
||||
@click.prevent="onDeleteItem(elmindex,val)"
|
||||
>
|
||||
<div class="noprint flex"> <div i-carbon-trash-can /> </div>
|
||||
</button>
|
||||
</div>
|
||||
<h4 v-if="edititem" class="w-full flex flex-1 mt-5 px-1 pb-1 border-t-1 border-b-1 border-dotted border-gray-300 dark:border-gray-600 bg-gray-800">
|
||||
<label v-if="labelitms && labelitms.length > 0" :for="`id-${section}`"> <span class="text-xs mr-2 text-gray-600 dark:text-gray-500">{{t(labelitms,labelitms)}}</span> </label>
|
||||
<input
|
||||
type="text"
|
||||
class="appearance-none bg-transparent w-full text-gray-700 dark:text-gray-200 py-1 leading-tight focus:outline-none"
|
||||
:class="{'border-b border-indigo-500': edititem && showitem}"
|
||||
v-model="inputAdd"
|
||||
:disabled="!edititem"
|
||||
:id="`id-${section}`"
|
||||
/>
|
||||
<button
|
||||
v-if="edititem"
|
||||
class="no-print text-sm float-right icon-btn mt-1 !outline-none text-gray-500 dark:text-gray-400"
|
||||
@click.prevent="onAddItem()"
|
||||
>
|
||||
<div class="noprint flex">
|
||||
<div i-carbon-add-filled />
|
||||
</div>
|
||||
</button>
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { PropType } from 'vue'
|
||||
// import { isDefined } from '@vueuse/core'
|
||||
import TextInput from './forms/TextInput.vue'
|
||||
import CheckInput from './forms/CheckInput.vue'
|
||||
import { InputValueOption,InputValidateOption,InputValueModeOption} from '~/typs/inputs'
|
||||
import { generate_value } from '~/hooks/utils'
|
||||
|
||||
const emit = defineEmits(['inputChange','inputAdd','inputDelete'])
|
||||
const t = useI18n().t
|
||||
const props = defineProps({
|
||||
typ: {
|
||||
type: String as PropType<InputValueOption>,
|
||||
default: InputValueOption.string,
|
||||
required: true,
|
||||
},
|
||||
section: {
|
||||
type: String,
|
||||
default: '',
|
||||
required: false,
|
||||
},
|
||||
dataValue: {
|
||||
type: [String, Number, Boolean, Array], // as PropType<String[]>],
|
||||
default: '',
|
||||
required: true,
|
||||
},
|
||||
validate: {
|
||||
type: String as PropType<InputValidateOption>,
|
||||
default: InputValidateOption.none,
|
||||
required: true,
|
||||
},
|
||||
varname: {
|
||||
type: String,
|
||||
default: '',
|
||||
required: true,
|
||||
},
|
||||
vardef: {
|
||||
type: Object,
|
||||
default: {},
|
||||
required: false,
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: '',
|
||||
required: true,
|
||||
},
|
||||
labelitms: {
|
||||
type: String,
|
||||
default: '',
|
||||
required: false,
|
||||
},
|
||||
rows: {
|
||||
type: Number,
|
||||
default: 3,
|
||||
required: false,
|
||||
},
|
||||
mode: {
|
||||
type: String as PropType<InputValueModeOption>,
|
||||
default: InputValueModeOption.none,
|
||||
required: false,
|
||||
},
|
||||
edititem: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
required: true,
|
||||
},
|
||||
showitem: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
required: true,
|
||||
},
|
||||
messages: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
required: false,
|
||||
},
|
||||
})
|
||||
const inputAdd = ref('')
|
||||
const onInputChange = (data: {val: any,idx: number}) => {
|
||||
emit('inputChange',{ sec: props.section, key: props.varname, idx: data.idx, val: data.val})
|
||||
}
|
||||
const onDeleteItem= (elmindex: number, val: string) => {
|
||||
const data = props.dataValue as string[]
|
||||
const newData = data.filter((_: any,idx: number) => idx !== elmindex)
|
||||
emit('inputChange',{ sec: props.section, key: props.varname, val: newData})
|
||||
}
|
||||
const onAddItem= () => {
|
||||
const newData = props.dataValue as string[]
|
||||
if (inputAdd.value.startsWith('?') && props.vardef[props.varname] && props.vardef[props.varname].gen) {
|
||||
inputAdd.value = generate_value(props.vardef[props.varname].gen,inputAdd.value)
|
||||
}
|
||||
newData.push(inputAdd.value)
|
||||
emit('inputChange',{ sec: props.section, key: props.varname, val: newData})
|
||||
inputAdd.value=''
|
||||
}
|
||||
onBeforeMount(async() => {
|
||||
})
|
||||
</script>
|
||||
92
src/components/MenuLocales.vue
Normal file
92
src/components/MenuLocales.vue
Normal file
@ -0,0 +1,92 @@
|
||||
<template>
|
||||
<button class="icon-btn mx-2" @click="toggleShowLocales">
|
||||
<carbon-language class="inline-block text-gray-900 dark:text-white" />
|
||||
</button>
|
||||
<div v-if="showLocalesSelector" :class="`select !normal max-w-xs ${selWidth} float-right`">
|
||||
<select v-model="currentLocale" class="dark:text-white dark:bg-gray-800 !outline-none">
|
||||
<option
|
||||
v-for="(itm: string) in listLocales"
|
||||
:key="itm"
|
||||
:selected="itm === currentLocale"
|
||||
:value="itm"
|
||||
>
|
||||
{{ localeLabel(itm) }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
// <vue:window on:keydown={cleanOverlay} />
|
||||
import {
|
||||
computed,
|
||||
PropType,
|
||||
} from 'vue'
|
||||
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import {LocalesLabelModes} from '~/typs'
|
||||
|
||||
const props = defineProps({
|
||||
labelMode: {
|
||||
type: String as PropType<LocalesLabelModes>,
|
||||
//default: LocalesLabelModes.translation,
|
||||
required: false,
|
||||
},
|
||||
includeCurrent: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
required: false,
|
||||
},
|
||||
})
|
||||
const i18n = useI18n()
|
||||
|
||||
const showLocalesSelector = ref(false)
|
||||
|
||||
const emit = defineEmits(['onLocale'])
|
||||
const currentLocale = computed({
|
||||
get: (): string => i18n.locale.value,
|
||||
set: (val: string) => {
|
||||
if (i18n.availableLocales.includes(val)) {
|
||||
// console.log(`change to ${val} from ${i18n.locale.value}`)
|
||||
i18n.locale.value = val
|
||||
emit('onLocale', val)
|
||||
showLocalesSelector.value = false
|
||||
}
|
||||
},
|
||||
})
|
||||
const locales = computed(() => i18n.availableLocales)
|
||||
const listLocales = computed(() =>
|
||||
props.includeCurrent ? locales.value : locales.value.filter(lcl => lcl !== currentLocale.value))
|
||||
const toggleShowLocales = () => {
|
||||
showLocalesSelector.value = !showLocalesSelector.value
|
||||
// change to some real logic
|
||||
// i18n.locale.value = i18n.availableLocales[(i18n.availableLocales.indexOf(i18n.locale.value) + 1) % i18n.availableLocales.length]
|
||||
}
|
||||
const localeLabel = (value: string): string => {
|
||||
let label = ''
|
||||
switch (props.labelMode) {
|
||||
case LocalesLabelModes.auto:
|
||||
case LocalesLabelModes.translation:
|
||||
label = i18n.t(value, value)
|
||||
break
|
||||
case LocalesLabelModes.value:
|
||||
label = value
|
||||
break
|
||||
}
|
||||
return label
|
||||
}
|
||||
const selWidth = computed(() => {
|
||||
let width = ''
|
||||
switch (props.labelMode) {
|
||||
case LocalesLabelModes.auto:
|
||||
width = 'w-auto'
|
||||
break
|
||||
case LocalesLabelModes.translation:
|
||||
width = 'w-28'
|
||||
break
|
||||
case LocalesLabelModes.value:
|
||||
width = 'w-24'
|
||||
break
|
||||
}
|
||||
return width
|
||||
})
|
||||
</script>
|
||||
41
src/components/MessageBox.vue
Normal file
41
src/components/MessageBox.vue
Normal file
@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<div class="flex">
|
||||
<div class="box">
|
||||
<div class="text-center space-y-2">
|
||||
<div class="space-y-0.5">
|
||||
<p class="text-lg text-black dark:text-white font-semibold mb-2">
|
||||
<slot name="header"></slot>
|
||||
</p>
|
||||
<p class="text-gray-500 dark:text-gray-300 font-medium pb-3">
|
||||
<slot name="content"></slot>
|
||||
</p>
|
||||
</div>
|
||||
<slot name="button"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
/*
|
||||
import { PropType } from 'vue'
|
||||
import { OtherType, AuthInfoType, ShowInfoType } from '~/typs/cv'
|
||||
import useState from '~/hooks/useState'
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Array as PropType<OtherType[]>,
|
||||
default: [],
|
||||
required: true,
|
||||
},
|
||||
showinfo: {
|
||||
type: Object as PropType<ShowInfoType>,
|
||||
default: {},
|
||||
required: true,
|
||||
},
|
||||
authinfo: {
|
||||
type: Object as PropType<AuthInfoType>,
|
||||
default: { editable: false, viewchange: false },
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
*/
|
||||
</script>
|
||||
191
src/components/MessageBoxView.vue
Normal file
191
src/components/MessageBoxView.vue
Normal file
@ -0,0 +1,191 @@
|
||||
<template>
|
||||
<MessageBox v-if="openMessageBox && messageType !== MessageBoxType.NotSet" class="z-99 absolute top-10 left-10 openbox">
|
||||
<template v-slot:header>
|
||||
<h2 class="text-indigo-700 dark:text-indigo-300">
|
||||
<span v-if="messageType === MessageBoxType.Select">{{ t('selectModel', 'Select Model') }}</span>
|
||||
<span v-if="messageType === MessageBoxType.Save"> {{ t('DataNeedSaved', 'Data changes not saved') }}</span>
|
||||
</h2>
|
||||
</template>
|
||||
<template v-slot:content>
|
||||
<div class="task" v-if="messageType === MessageBoxType.Save && data_url_encoded !== MessageBoxType.NotSet">
|
||||
<a
|
||||
:href="`data:${data_url_encoded}`"
|
||||
:download="`${inputValue}${inputValue.includes('json') ? '' : '.json'}`"
|
||||
>{{ t('download_json_data', 'download JSON data') }}</a>
|
||||
</div>
|
||||
<div
|
||||
v-if="messageType === MessageBoxType.Save && data_url_encoded !== MessageBoxType.NotSet"
|
||||
class="mt-2 text-xs text-800 dark:text-indigo-100"
|
||||
>{{ t('click_link_to_save', 'Click on link to save') }} {{inputValue}}</div>
|
||||
<form v-if="messageType === MessageBoxType.OneInput" @submit.prevent="onMessageOkBtn" class="w-full max-w-sm">
|
||||
<div class="flex items-center border-b border-indigo-500 py-2">
|
||||
<input
|
||||
class="appearance-none bg-transparent border-none w-full text-gray-700 dark:text-gray-200 mr-3 py-1 px-2 leading-tight focus:outline-none"
|
||||
:type="inputType"
|
||||
v-model="oneinputValue"
|
||||
:placeholder="input_placeholder"
|
||||
aria-label="Full name"
|
||||
/>
|
||||
<div v-if="inpType === inputType" i-carbon-view @click="onInputType"/>
|
||||
<div v-else i-carbon-view-off @click="onInputType"/>
|
||||
</div>
|
||||
</form>
|
||||
<form v-if="messageType === MessageBoxType.Save && show_input" @submit.prevent="onMessageOkBtn" class="w-full max-w-sm">
|
||||
<div class="flex items-center border-b border-indigo-500 py-2">
|
||||
<input
|
||||
class="appearance-none bg-transparent border-none w-full text-gray-700 dark:text-gray-200 mr-3 py-1 px-2 leading-tight focus:outline-none"
|
||||
type="text"
|
||||
v-model="inputValue"
|
||||
:placeholder="input_placeholder"
|
||||
aria-label="Full name"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex items-center mt-2 py-2">
|
||||
<span class="text-gray-700 dark:text-gray-500 text-sm">{{t('saveload.saveOptions','Save options')}}:</span>
|
||||
<div class="mt-0 flex">
|
||||
<div v-if="sendurl !== ''" class="mx-2">
|
||||
<label class="inline-flex items-center">
|
||||
<input type="radio" class="form-radio" name="radio" v-model="inputSaveMode" :checked="inputSaveMode === 'send'" />
|
||||
<span class="ml-2 text-sm">{{t('send','Send')}}</span>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label class="inline-flex items-center">
|
||||
<input type="radio" class="form-radio" name="radio" v-model="inputSaveMode" :checked="inputSaveMode !== 'send'"/>
|
||||
<span class="ml-2 text-sm">{{t('local','Local')}}</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<button v-for="(btn:any,idx:number) in input_btns" :key="idx"
|
||||
class="flex-shrink-0 bg-indigo-500 hover:bg-indigo-700 border-indigo-500 hover:border-indigo-700 text-sm border-4 text-white py-1 px-2 rounded"
|
||||
:class="{'dark:bg-red-400 bg-red-700': btn.typ === 'cancel'}"
|
||||
type="button"
|
||||
@click="onInputBtn(btn)"
|
||||
>{{ t(btn.title) }}</button>
|
||||
</div>
|
||||
</form>
|
||||
<div v-if="messageType === 'select' && Object.keys(select_ops).length > 0" class="inline-block relative w-64">
|
||||
<select
|
||||
class="block appearance-none w-full bg-white dark:bg-gray-600 border border-gray-400 hover:border-gray-500 px-4 py-2 pr-8 rounded shadow leading-tight focus:outline-none focus:shadow-outline"
|
||||
v-model="selectValue"
|
||||
>
|
||||
<option value=""></option>
|
||||
<option v-for="(op: any) in select_ops" :key="op.id" :value="op.id">{{op.title}}</option>
|
||||
</select>
|
||||
<div
|
||||
class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 dark:text-indigo-200 text-indigo-700 dark:bg-gray-600 border-r-1 border-t-1 border-b-1 border-l-0 border-gray-400 "
|
||||
>
|
||||
<svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
|
||||
<path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot:button>
|
||||
<div class="flex items-center gap-5">
|
||||
<button
|
||||
v-if="messageType === MessageBoxType.Select || (messageType === MessageBoxType.Save && data_url_encoded === '')"
|
||||
class="btn-msg flex-grow"
|
||||
@click="onMessageOkBtn"
|
||||
>
|
||||
<span v-if="messageType === MessageBoxType.Select">{{ t('select', 'Select') }}</span>
|
||||
<span v-if="messageType === MessageBoxType.Save && data_url_encoded === ''" >{{ t('save', 'Save') }}</span>
|
||||
</button>
|
||||
<button v-if="messageType === MessageBoxType.OneInput" :disabled="oneinputValue === ''" class="btn-msg flex-grow" @click="onMessageOkBtn">{{ t('save', 'Save') }}</button>
|
||||
<button v-else class="btn-msg flex-grow" @click="onMessageCloseBtn">{{ t('close', 'Close') }}</button>
|
||||
</div>
|
||||
</template>
|
||||
</MessageBox>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { PropType } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import useState from '~/hooks/useState'
|
||||
import { MessageBoxType, InputBtnsType, ModelType} from '~/typs/cv'
|
||||
import MessageBox from '~/components/MessageBox.vue'
|
||||
|
||||
const props = defineProps({
|
||||
messageType: {
|
||||
type: String as PropType<MessageBoxType>,
|
||||
default: MessageBoxType.NotSet,
|
||||
required: true,
|
||||
},
|
||||
openMessageBox: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
required: true,
|
||||
},
|
||||
show_input: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
required: false,
|
||||
},
|
||||
input_btns: {
|
||||
type: Array as PropType<InputBtnsType[]>,
|
||||
default: [],
|
||||
required: false,
|
||||
},
|
||||
input_placeholder: {
|
||||
type: String,
|
||||
default: '',
|
||||
required: false,
|
||||
},
|
||||
select_ops: {
|
||||
type: Object as PropType<ModelType>,
|
||||
default: {},
|
||||
required: true,
|
||||
},
|
||||
data_url_encoded: {
|
||||
type: String,
|
||||
default: '',
|
||||
required: false,
|
||||
},
|
||||
inpType: {
|
||||
type: String,
|
||||
default: 'text',
|
||||
required: false,
|
||||
},
|
||||
})
|
||||
const emit = defineEmits(['onMessageBox','onInput','onLoadModel'])
|
||||
const router = useRouter()
|
||||
const inputType = ref(props.inpType)
|
||||
const sendurl = router.currentRoute.value.meta.sendurl as string || '/'
|
||||
const inputValue = useState().current_modelid
|
||||
const oneinputValue = ref('')
|
||||
const inputSaveMode = ref(sendurl !== '' ? 'send': 'local')
|
||||
const selectValue = ref(useState().current_model.value.id)
|
||||
|
||||
const t = useI18n().t
|
||||
const onInputBtn = (btn: InputBtnsType) => {
|
||||
emit('onInput', btn )
|
||||
}
|
||||
const onMessageOkBtn = () => {
|
||||
switch(props.messageType) {
|
||||
case MessageBoxType.Save:
|
||||
if (inputSaveMode.value === 'send') {
|
||||
emit('onMessageBox', { src: 'sendata', val: inputValue.value })
|
||||
} else {
|
||||
emit('onMessageBox', { src: 'savedata', val: inputValue.value })
|
||||
}
|
||||
break
|
||||
case MessageBoxType.Select:
|
||||
if (useState().current_model.value.id !== selectValue.value) {
|
||||
emit('onLoadModel', { id: selectValue.value })
|
||||
}
|
||||
emit('onMessageBox', { src: 'done' })
|
||||
break
|
||||
case MessageBoxType.OneInput:
|
||||
if (oneinputValue.value !== '') {
|
||||
emit('onMessageBox', { src: 'oneinput', val: oneinputValue.value })
|
||||
}
|
||||
// emit('onMessageBox', { src: 'done' })
|
||||
break
|
||||
}
|
||||
}
|
||||
const onInputType = () => {
|
||||
inputType.value = inputType.value === props.inpType ? 'text' : props.inpType
|
||||
}
|
||||
const onMessageCloseBtn = () => {
|
||||
emit('onMessageBox', { src: 'done' })
|
||||
}
|
||||
</script>
|
||||
166
src/components/Modal.vue
Normal file
166
src/components/Modal.vue
Normal file
@ -0,0 +1,166 @@
|
||||
<template>
|
||||
<transition id="modal" name="modal">
|
||||
<div class="modal-mask">
|
||||
<div
|
||||
class="modal-wrapper"
|
||||
>
|
||||
<div
|
||||
class="modal-container bg-gray-500 dark:bg-gray-600 shadow-inner rounded border border-gray-500 dark:border-gray-400"
|
||||
:style="`${cssStyle}`"
|
||||
>
|
||||
<div class="relative">
|
||||
<div
|
||||
class="absolute top-0 right-2 h-8 w-8 p-2"
|
||||
>
|
||||
<button
|
||||
class="rounded-md text-gray-300 hover:text-white
|
||||
focus:outline-none focus:ring-2 focus:ring-white
|
||||
dark:focus:ring-black dark:bg-cool-gray-600 dark:text-white"
|
||||
@click="OnCloseButton"
|
||||
>
|
||||
<span class="sr-only">Close panel</span>
|
||||
<!-- Heroicon name: outline/x -->
|
||||
<svg
|
||||
class="h-6 w-6 dark:text-white dark:hover:text-gray-400"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-header p-4">
|
||||
<slot name="header">
|
||||
</slot>
|
||||
</div>
|
||||
<div class="modal-body pl-4">
|
||||
<slot name="body">
|
||||
</slot>
|
||||
</div>
|
||||
<div class="modal-footer p-4">
|
||||
<slot name="footer">
|
||||
<button
|
||||
class="modal-default-button rounded border p-1 text-gray-400 dark:text-gray-200 hover:text-black focus:outline-none focus:ring-2 focus:ring-black dark:hover:text-white dark:focus:ring-white"
|
||||
@click="OnCloseButton"
|
||||
>
|
||||
OK
|
||||
</button>
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { onMounted, onUnmounted, ref, computed } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import useState from '~/hooks/useState'
|
||||
const { t } = useI18n()
|
||||
const props = defineProps({
|
||||
cssStyle: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: () => '',
|
||||
},
|
||||
})
|
||||
|
||||
const emit = defineEmits(['onCloseModal'])
|
||||
|
||||
const OnCloseButton = () => {
|
||||
useState().showModal.value = false
|
||||
emit('onCloseModal')
|
||||
}
|
||||
|
||||
const OnModalMask = (ev: any) => {
|
||||
}
|
||||
const OnKeydownEsc = (event: any) => {
|
||||
switch (event.key) {
|
||||
case 'Escape':
|
||||
if (document.getElementById('modal') && useState().showModal.value) {
|
||||
event.preventDefault()
|
||||
event.stopImmediatePropagation()
|
||||
event.stopPropagation()
|
||||
useState().showModal.value = false
|
||||
emit('onCloseModal')
|
||||
}
|
||||
break
|
||||
}
|
||||
}
|
||||
onMounted(async() => {
|
||||
document.addEventListener('keydown', OnKeydownEsc)
|
||||
})
|
||||
onUnmounted(async() => {
|
||||
document.removeEventListener('keydown', OnKeydownEsc)
|
||||
})
|
||||
|
||||
</script>
|
||||
<style scoped>
|
||||
.modal-mask {
|
||||
position: fixed;
|
||||
z-index: 9998;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.75);
|
||||
display: table;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.modal-wrapper {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.modal-container {
|
||||
margin: 0px auto;
|
||||
/* padding: 20px 30px; */
|
||||
/* border-radius: 2px; */
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
|
||||
transition: all 0.3s ease;
|
||||
font-family: Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
.modal-header h3 {
|
||||
margin-top: 0;
|
||||
/* color: #42b983; */
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.modal-default-button {
|
||||
display: block;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
/*
|
||||
* The following styles are auto-applied to elements with
|
||||
* transition="modal" when their visibility is toggled
|
||||
* by Vue.js.
|
||||
*
|
||||
* You can easily play with the modal transition by editing
|
||||
* these styles.
|
||||
*/
|
||||
|
||||
.modal-enter {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.modal-leave-active {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.modal-enter .modal-container,
|
||||
.modal-leave-active .modal-container {
|
||||
-webkit-transform: scale(1.1);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
</style>
|
||||
307
src/components/NavMenu.vue
Normal file
307
src/components/NavMenu.vue
Normal file
@ -0,0 +1,307 @@
|
||||
<template>
|
||||
<nav
|
||||
class="noprint flex flex-row gap-2 mx-1 mt-1 border-b-1 border-gray-800 dark:border-gray-500 bg-indigo-100 dark:bg-gray-800 dark:text-white"
|
||||
:class="{ 'fixed z-50 w-full lg:w-screen-xl -top-2 pt-2 border-1': position === NavPosition.header && fixMenu, 'z-1 opacity-20': openMessageBox }"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="flex-none h-6 mt-1 lg:hidden px-2 text-gray-300 hover:text-white focus:outline-none focus:text-white"
|
||||
:class="{ 'transition transform-180': isOpen }"
|
||||
@click.prevent="isOpen = !isOpen"
|
||||
>
|
||||
<svg class="h-6 w-6 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<path
|
||||
v-show="isOpen"
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M18.278 16.864a1 1 0 0 1-1.414 1.414l-4.829-4.828-4.828 4.828a1 1 0 0 1-1.414-1.414l4.828-4.829-4.828-4.828a1 1 0 0 1 1.414-1.414l4.829 4.828 4.828-4.828a1 1 0 1 1 1.414 1.414l-4.828 4.829 4.828 4.828z"
|
||||
/>
|
||||
<path
|
||||
v-show="!isOpen"
|
||||
fill-rule="evenodd"
|
||||
d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<div
|
||||
class="flex-grow mt-2 text-indigo-800 dark:text-indigo-500 inline-flex gap-2 dark:bg-cool-gray-800 dark:text-white"
|
||||
>
|
||||
<ul
|
||||
:class="isOpen ? '-mt-3 flex flex-col gap-5 bg-gray-300 pr-3 pb-5 dark:bg-gray-700 w-full' : 'hidden lg:flex lg:flex-row'"
|
||||
>
|
||||
<li
|
||||
:class="isOpen ? 'inline-block pt-5' : ''"
|
||||
class="nav-item"
|
||||
style="margin-top: 0px"
|
||||
@click="onHome()"
|
||||
>
|
||||
<carbon-home />
|
||||
</li>
|
||||
<li v-if="needSave" class="nav-item mt-2 lg:-mt-1" @click.prevent="onNeedSaveBtn">
|
||||
<div class="flex rounded-full px-2 py-1 dark:bg-gray-600 bg-gray-300">
|
||||
<div i-carbon-save />
|
||||
<span class="ml-1 mt-0.5 text-xs">{{ t('save', 'Save') }}</span>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
v-if="currModelid && select_ops && Object.keys(select_ops).length > 0 && (authinfo.viewchange || authinfo.editable)"
|
||||
class="nav-item mt-2 lg:-mt-1"
|
||||
@click.prevent="onSelectBtn"
|
||||
>
|
||||
<div class="flex rounded-full px-2 py-1 dark:bg-gray-600 bg-gray-300">
|
||||
<div i-carbon-list />
|
||||
<span class="ml-1 -mt-0.2 text-xs"> {{currModelid}} </span>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
v-if="position === NavPosition.header && data_sections && data_sections.length > 0"
|
||||
v-for="(sec) in data_sections"
|
||||
:key="sec"
|
||||
:id="`nav-${sec}`"
|
||||
class="nav-item"
|
||||
:class="{'hidden': dataAuth && !showinfo[`${sec}_itms`]}"
|
||||
@click="onNavMenu(`${prefix}-${sec}`)"
|
||||
>{{ t(`menu.${sec}`, sec) }}</li>
|
||||
<li
|
||||
v-if="position === NavPosition.header && showinfo.skills && !show_infopanel"
|
||||
id="nav-skills"
|
||||
class="nav-item"
|
||||
@click="onNavMenu('cv-skills')"
|
||||
>{{ t('cv.skills', 'Skills') }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div
|
||||
class="flex-none text-indigo-800 dark:text-indigo-500 inline-flex gap-2 dark:bg-cool-gray-800 dark:text-white"
|
||||
:class="{ 'p-0': fixMenu }"
|
||||
>
|
||||
<div v-if="canChange || canWrite || isAdmin" class="hidden lg:block border-gray-400 dark:border-gray-600 border-l"/>
|
||||
<div v-if="currModelid" class="hidden flex-grow-0">
|
||||
<div class="nav-item hover:mt-1 -mt-2 lg:-mt-1 lg:mt-1 flex rounded-full p-1.2 mt-1 border-1 border-gray-500"
|
||||
@click.prevent="onSelectBtn">
|
||||
<div i-carbon-list />
|
||||
<span class="ml-1 text-xs"> {{currModelid}} </span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="useEdit || dataAuth && (canWrite || isAdmin)" class="flex-grow-0 icon-btn">
|
||||
<div
|
||||
class="flex icon-btn nav-item hover:mt-1 my-1.5 px-0.8 pb-0.8 rounded-sm"
|
||||
:class="{ 'bg-indigo-700 text-gray-100 hover:text-gray-300 dark:bg-indigo-300 dark:text-gray-700 dark:hover:text-gray-600': authinfo.editable && needSave }"
|
||||
@click="onEdit()"
|
||||
>
|
||||
<carbon-edit />
|
||||
<span v-if="authinfo.editable" class="ml-2 mt-1 text-xs">{{ t('edit', 'Edit') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="dataAuth && (canChange || isAdmin)" class="flex-grow-0 icon-btn">
|
||||
<div class="flex icon-btn nav-item hover:mt-1 my-1.5" @click="onViewChange()">
|
||||
<carbon-erase />
|
||||
<span
|
||||
v-if="authinfo.viewchange"
|
||||
class="ml-2 mt-1 text-xs"
|
||||
>{{ t('changeview', 'Change View') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hidden lg:block mx-1 border-gray-400 dark:border-gray-600 border-l"/>
|
||||
<div v-if="useInfoPanel" class="flex-grow-0 icon-btn ml-3">
|
||||
<button class="flex flex-row my-2" @click="onInfoPanel">
|
||||
<svg width="1.2em" height="1.2em" class="panel-visibility-toggle">
|
||||
<path
|
||||
v-if="!show_infopanel"
|
||||
class="eye-open"
|
||||
d="M8 2.36365C4.36364 2.36365 1.25818 4.62547 0 7.81819C1.25818 11.0109 4.36364 13.2727 8 13.2727C11.6364 13.2727 14.7418 11.0109 16 7.81819C14.7418 4.62547 11.6364 2.36365 8 2.36365ZM8 11.4546C5.99273 11.4546 4.36364 9.82547 4.36364 7.81819C4.36364 5.81092 5.99273 4.18183 8 4.18183C10.0073 4.18183 11.6364 5.81092 11.6364 7.81819C11.6364 9.82547 10.0073 11.4546 8 11.4546ZM8 5.63637C6.79273 5.63637 5.81818 6.61092 5.81818 7.81819C5.81818 9.02547 6.79273 10 8 10C9.20727 10 10.1818 9.02547 10.1818 7.81819C10.1818 6.61092 9.20727 5.63637 8 5.63637Z"
|
||||
/>
|
||||
<path
|
||||
v-else
|
||||
class="eye-closed"
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M14.8222 1.85355C15.0175 1.65829 15.0175 1.34171 14.8222 1.14645C14.627 0.951184 14.3104 0.951184 14.1151 1.14645L12.005 3.25653C10.8901 2.482 9.56509 1.92505 8.06 1.92505C3 1.92505 0 7.92505 0 7.92505C0 7.92505 1.16157 10.2482 3.25823 12.0033L1.19366 14.0679C0.998396 14.2632 0.998396 14.5798 1.19366 14.775C1.38892 14.9703 1.7055 14.9703 1.90076 14.775L14.8222 1.85355ZM4.85879 10.4028L6.29159 8.96998C6.10643 8.66645 6 8.3089 6 7.92505C6 6.81505 6.89 5.92505 8 5.92505C8.38385 5.92505 8.7414 6.03148 9.04493 6.21664L10.4777 4.78384C9.79783 4.24654 8.93821 3.92505 8 3.92505C5.8 3.92505 4 5.72505 4 7.92505C4 8.86326 4.32149 9.72288 4.85879 10.4028ZM11.8644 6.88906L13.8567 4.8968C15.2406 6.40616 16 7.92505 16 7.92505C16 7.92505 13 13.925 8.06 13.925C7.09599 13.925 6.20675 13.7073 5.39878 13.3547L6.96401 11.7895C7.29473 11.8779 7.64207 11.925 8 11.925C10.22 11.925 12 10.145 12 7.92505C12 7.56712 11.9529 7.21978 11.8644 6.88906ZM9.33847 9.41501L9.48996 9.26352C9.44222 9.31669 9.39164 9.36726 9.33847 9.41501Z"
|
||||
/>
|
||||
</svg>
|
||||
<span class="nav-item ml-2">Panel</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex-grow-0 icon-btn">
|
||||
<div class="icon-btn nav-item hover:mt-1 my-1.5"
|
||||
:class="{'border-1 p-1 rounded-full mt-0.3 border-gray-900 dark:border-gray-100': fixMenu}" @click="onFixMenu()">
|
||||
<div v-if="fixMenu" i-carbon-pin/>
|
||||
<div v-else i-carbon-pin-filled />
|
||||
</div>
|
||||
</div>
|
||||
<div class="hidden lg:block mx-1 border-gray-400 dark:border-gray-600 border-l"/>
|
||||
<div class="flex-grow-0 icon-btn">
|
||||
<button class="nav-item hover:mt-1 my-1.5 !outline-none" @click="toggleDark()">
|
||||
<div v-if="isDark" i-carbon-sun />
|
||||
<div v-else i-carbon-moon />
|
||||
</button>
|
||||
</div>
|
||||
<div v-if="useLogin" class="nav-item hover:mt-1 my-1.5 !outline-none">
|
||||
<router-link v-if="is_logged_user()" to="Logout">
|
||||
<div i-carbon-logout />
|
||||
</router-link>
|
||||
<router-link v-else to="Login">
|
||||
<div i-carbon-login />
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="ml-2 flex-grow-0">
|
||||
<MenuLocales :label-mode="localesLabelMode" :include-current="includeCurrLocale" @onLocale="onLocale" />
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { PropType } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { NavPosition,ShowInfoType,AuthInfoType } from '~/typs/cv'
|
||||
import { isDark, toggleDark } from '~/composables'
|
||||
import MenuLocales from '@/MenuLocales.vue'
|
||||
import {LocalesLabelModes} from '~/typs'
|
||||
import {is_logged_user} from '~/hooks/utilsAuth'
|
||||
import useState from '~/hooks/useState'
|
||||
const props =
|
||||
defineProps({
|
||||
position: {
|
||||
type: String as PropType<NavPosition>,
|
||||
default: '',
|
||||
required: true,
|
||||
},
|
||||
fixMenu: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
required: true,
|
||||
},
|
||||
show_infopanel: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
required: true,
|
||||
},
|
||||
dataAuth: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
required: false,
|
||||
},
|
||||
useInfoPanel: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
required: false,
|
||||
},
|
||||
useLogin: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
required: false,
|
||||
},
|
||||
showinfo: {
|
||||
type: Object as PropType<ShowInfoType>,
|
||||
default: {},
|
||||
required: true,
|
||||
},
|
||||
authinfo: {
|
||||
type: Object as PropType<AuthInfoType>,
|
||||
default: { editable: false, viewchange: false, show: true },
|
||||
required: true,
|
||||
},
|
||||
openMessageBox: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
required: true,
|
||||
},
|
||||
needSave: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
required: true,
|
||||
},
|
||||
useEdit: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
required: false,
|
||||
},
|
||||
prefix: {
|
||||
type: String,
|
||||
default: 'cv',
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
const emit = defineEmits(['onNavMenu'])
|
||||
|
||||
const localesLabelMode = ref(LocalesLabelModes.auto)
|
||||
const includeCurrLocale = true
|
||||
const t = useI18n().t
|
||||
const router = useRouter()
|
||||
const currModelid = useState().current_modelid
|
||||
const routeKy = router.currentRoute.value.params.ky || router.currentRoute.value.query.k || ''
|
||||
const isOpen = ref(false)
|
||||
const onInfoPanel = () => {
|
||||
emit('onNavMenu', { src: 'infopanel' })
|
||||
}
|
||||
const onFixMenu = () => {
|
||||
emit('onNavMenu', { src: 'fixmenu' })
|
||||
}
|
||||
const onLocale = (target: string) => {
|
||||
emit('onNavMenu',{src: 'locale', target})
|
||||
}
|
||||
const isAdmin = computed(() => {
|
||||
return routeKy !== '' && useState().showinfo.value.ky === routeKy ? useState().showinfo.value.admin : false
|
||||
})
|
||||
const canWrite = computed(() => {
|
||||
const val = routeKy !== '' && useState().showinfo.value.ky === routeKy ? useState().showinfo.value.write : false
|
||||
//auth_info.value.editable = val
|
||||
return val
|
||||
})
|
||||
const canChange = computed(() => {
|
||||
const val = routeKy !== '' && useState().showinfo.value.ky === routeKy ? useState().showinfo.value.change : false
|
||||
//auth_info.value.viewchange = val
|
||||
return val
|
||||
})
|
||||
const select_ops = useState().selectOps
|
||||
const data_sections = useState().dataSections
|
||||
const goToItem = (item: string) => {
|
||||
const dom_id = document.getElementById(item)
|
||||
if (dom_id) {
|
||||
dom_id.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' })
|
||||
setTimeout(() => window.scrollBy(0, isOpen.value ? -140 : -40), 4000)
|
||||
isOpen.value = false
|
||||
}
|
||||
}
|
||||
const onNavMenu = (item: string) => {
|
||||
let dom_id = document.getElementById(item)
|
||||
if (dom_id) {
|
||||
goToItem(item)
|
||||
} else {
|
||||
const itm = `${item.replace(props.prefix, '')}_itms`
|
||||
if (typeof useState().showinfo.value[itm] !== 'undefined') {
|
||||
useState().showinfo.value[itm] = useState().showinfo.value[itm] = true
|
||||
setTimeout(() => goToItem(item), 1000)
|
||||
} else {
|
||||
const rtitm = item.replace(`${props.prefix}-`,'')
|
||||
const rt = router.getRoutes().filter(rt => rt.name === rtitm)
|
||||
if (rt[0]) {
|
||||
router.push(rt[0].path)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
const onHome = () => {
|
||||
router.push('/home')
|
||||
}
|
||||
const goTopPage = () => {
|
||||
const dom_body = document.getElementsByTagName('body')[0]
|
||||
if (dom_body) {
|
||||
dom_body.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' })
|
||||
}
|
||||
}
|
||||
const onEdit = () => {
|
||||
emit('onNavMenu', { src: 'editable' })
|
||||
}
|
||||
const onViewChange = () => {
|
||||
emit('onNavMenu', { src: 'viewchange' })
|
||||
}
|
||||
const onSelectBtn = () => {
|
||||
goTopPage()
|
||||
emit('onNavMenu', { src: 'select' })
|
||||
}
|
||||
const onNeedSaveBtn = () => {
|
||||
goTopPage()
|
||||
emit('onNavMenu', { src: 'save' })
|
||||
}
|
||||
</script>
|
||||
76
src/components/Navbar.vue
Normal file
76
src/components/Navbar.vue
Normal file
@ -0,0 +1,76 @@
|
||||
<template>
|
||||
<nav class="bg-white border-gray-200 px-2">
|
||||
<div class="container mx-auto flex flex-wrap items-center justify-between">
|
||||
<a href="#" class="flex">
|
||||
<svg class="h-10 mr-3" width="51" height="70" viewBox="0 0 51 70" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0)"><path d="M1 53H27.9022C40.6587 53 51 42.7025 51 30H24.0978C11.3412 30 1 40.2975 1 53Z" fill="#76A9FA"></path><path d="M-0.876544 32.1644L-0.876544 66.411C11.9849 66.411 22.4111 55.9847 22.4111 43.1233L22.4111 8.87674C10.1196 8.98051 0.518714 19.5571 -0.876544 32.1644Z" fill="#A4CAFE"></path><path d="M50 5H23.0978C10.3413 5 0 15.2975 0 28H26.9022C39.6588 28 50 17.7025 50 5Z" fill="#1C64F2"></path></g><defs><clipPath id="clip0"><rect width="51" height="70" fill="white"></rect></clipPath></defs></svg>
|
||||
<span class="self-center text-lg font-semibold whitespace-nowrap">FlowBite</span>
|
||||
</a>
|
||||
<div class="flex md:order-2">
|
||||
<div class="relative mr-3 md:mr-0 hidden md:block">
|
||||
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||
<svg class="w-5 h-5 text-gray-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path></svg>
|
||||
</div>
|
||||
<input type="text" id="email-adress-icon" class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2" placeholder="Search...">
|
||||
</div>
|
||||
<button @click.prevent="onUserMenu" type="button" class="mr-3 md:mr-0 bg-gray-800 flex text-sm rounded-full focus:ring-4 focus:ring-gray-300" id="user-menu-button" aria-expanded="false" data-dropdown-toggle="dropdown">
|
||||
<span class="sr-only">Open user menu</span>
|
||||
<img class="h-8 w-8 rounded-full" src="/images/people/profile-picture-3.jpg" alt="user photo">
|
||||
</button>
|
||||
<!-- Dropdown menu -->
|
||||
<div :class="{hidden: hide_user_menu}" class="absolute bg-white text-base z-50 list-none divide-y divide-gray-100 rounded shadow top-10 right-8" id="dropdown">
|
||||
<div class="px-4 py-3">
|
||||
<span class="block text-sm">Bonnie Green</span>
|
||||
<span class="block text-sm font-medium text-gray-900 truncate">name@flowbite.com</span>
|
||||
</div>
|
||||
<ul class="py-1" aria-labelledby="dropdown">
|
||||
<li>
|
||||
<a href="#" class="text-sm hover:bg-gray-100 text-gray-700 block px-4 py-2">Dashboard</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-sm hover:bg-gray-100 text-gray-700 block px-4 py-2">Settings</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-sm hover:bg-gray-100 text-gray-700 block px-4 py-2">Earnings</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-sm hover:bg-gray-100 text-gray-700 block px-4 py-2">Sign out</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<button data-collapse-toggle="mobile-menu-2" type="button" class="md:hidden text-gray-400 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-300 rounded-lg inline-flex items-center justify-center" aria-controls="mobile-menu-2" aria-expanded="false">
|
||||
<span class="sr-only">Open main menu</span>
|
||||
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
|
||||
<svg class="hidden w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden md:flex justify-between items-center w-full md:w-auto md:order-1" id="mobile-menu-2">
|
||||
<ul class="flex-col md:flex-row flex md:space-x-8 mt-4 md:mt-0 md:text-sm md:font-medium">
|
||||
<li>
|
||||
<a href="#" class="bg-blue-700 md:bg-transparent text-white block pl-3 pr-4 py-2 md:text-blue-700 md:p-0 rounded" aria-current="page">Home</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-gray-700 hover:bg-gray-50 border-b border-gray-100 md:hover:bg-transparent md:border-0 block pl-3 pr-4 py-2 md:hover:text-blue-700 md:p-0">About</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-gray-700 hover:bg-gray-50 border-b border-gray-100 md:hover:bg-transparent md:border-0 block pl-3 pr-4 py-2 md:hover:text-blue-700 md:p-0">Services</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-gray-700 hover:bg-gray-50 border-b border-gray-100 md:hover:bg-transparent md:border-0 block pl-3 pr-4 py-2 md:hover:text-blue-700 md:p-0">Pricing</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-gray-700 hover:bg-gray-50 border-b border-gray-100 md:hover:bg-transparent md:border-0 block pl-3 pr-4 py-2 md:hover:text-blue-700 md:p-0">Contact</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
</template>
|
||||
<script setup lang="ts" >
|
||||
// import '@themesberg/flowbite'
|
||||
// import { isDark, toggleDark } from '~/composables'
|
||||
const hide_user_menu=ref(true)
|
||||
const onUserMenu = () => hide_user_menu.value = !hide_user_menu.value
|
||||
|
||||
</script>
|
||||
|
||||
9
src/components/README.md
Normal file
9
src/components/README.md
Normal file
@ -0,0 +1,9 @@
|
||||
## Components
|
||||
|
||||
Components in this dir will be auto-registered and on-demand, powered by [`unplugin-vue-components`](https://github.com/antfu/unplugin-vue-components).
|
||||
|
||||
### Icons
|
||||
|
||||
You can use icons from almost any icon sets by the power of [Iconify](https://iconify.design/).
|
||||
|
||||
It will only bundle the icons you use. Check out [`unplugin-icons`](https://github.com/antfu/unplugin-icons) for more details.
|
||||
212
src/components/TiptapEditor.vue
Normal file
212
src/components/TiptapEditor.vue
Normal file
@ -0,0 +1,212 @@
|
||||
<template>
|
||||
<div>
|
||||
<bubble-menu
|
||||
class="bubble-menu"
|
||||
:tippy-options="{ duration: 100 }"
|
||||
:editor="editor"
|
||||
v-if="editor"
|
||||
>
|
||||
<button
|
||||
@click="editor.chain().focus().toggleBold().run()"
|
||||
:class="{ 'is-active': editor.isActive('bold') }"
|
||||
>Bold</button>
|
||||
<button
|
||||
@click="editor.chain().focus().toggleItalic().run()"
|
||||
:class="{ 'is-active': editor.isActive('italic') }"
|
||||
>Italic</button>
|
||||
<button
|
||||
@click="editor.chain().focus().toggleStrike().run()"
|
||||
:class="{ 'is-active': editor.isActive('strike') }"
|
||||
>Strike</button>
|
||||
</bubble-menu>
|
||||
|
||||
<floating-menu
|
||||
class="floating-menu"
|
||||
:tippy-options="{ duration: 100 }"
|
||||
:editor="editor"
|
||||
v-if="editor"
|
||||
>
|
||||
<button
|
||||
@click="editor.chain().focus().toggleHeading({ level: 1 }).run()"
|
||||
:class="{ 'is-active': editor.isActive('heading', { level: 1 }) }"
|
||||
>H1</button>
|
||||
<button
|
||||
@click="editor.chain().focus().toggleHeading({ level: 2 }).run()"
|
||||
:class="{ 'is-active': editor.isActive('heading', { level: 2 }) }"
|
||||
>H2</button>
|
||||
<button
|
||||
@click="editor.chain().focus().toggleBulletList().run()"
|
||||
:class="{ 'is-active': editor.isActive('bulletList') }"
|
||||
>Bullet List</button>
|
||||
</floating-menu>
|
||||
<editor-content :editor="editor" />
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
Editor, EditorContent,
|
||||
FloatingMenu,
|
||||
BubbleMenu
|
||||
} from '@tiptap/vue-3'
|
||||
import { PropType } from 'vue'
|
||||
import Link from '@tiptap/extension-link'
|
||||
import StarterKit from '@tiptap/starter-kit'
|
||||
import TextStyle from '@tiptap/extension-text-style'
|
||||
import { HtmlAttrsType } from '~/typs/cv'
|
||||
// import { auth_data } from '~/hooks/utils'
|
||||
import useState from '~/hooks/useState'
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: String,
|
||||
default: '',
|
||||
required: true,
|
||||
},
|
||||
src: {
|
||||
type: String,
|
||||
default: '',
|
||||
required: true,
|
||||
},
|
||||
field: {
|
||||
type: [String, Number],
|
||||
default: '',
|
||||
required: true,
|
||||
},
|
||||
idx: {
|
||||
type: Number,
|
||||
default: -1,
|
||||
required: true,
|
||||
},
|
||||
editable: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
required: true,
|
||||
},
|
||||
htmlattrs: {
|
||||
type: Object as PropType<HtmlAttrsType>,
|
||||
default: useState().htmlAttrs,
|
||||
required: false,
|
||||
},
|
||||
})
|
||||
const emit = defineEmits(['onEditorBlur'])
|
||||
const editor = new Editor({
|
||||
extensions: [
|
||||
StarterKit.configure({
|
||||
// history: false,
|
||||
bold: {
|
||||
HTMLAttributes: {
|
||||
class: props.htmlattrs.bold ? props.htmlattrs.bold : useState().htmlAttrs.bold,
|
||||
},
|
||||
},
|
||||
listItem: {
|
||||
HTMLAttributes: {
|
||||
class: props.htmlattrs.list ? props.htmlattrs.list : useState().htmlAttrs.list,
|
||||
},
|
||||
},
|
||||
}),
|
||||
TextStyle.configure({
|
||||
HTMLAttributes: {
|
||||
class: props.htmlattrs.text ? props.htmlattrs.text : useState().htmlAttrs.text,
|
||||
},
|
||||
}),
|
||||
Link.configure({
|
||||
openOnClick: false,
|
||||
HTMLAttributes: {
|
||||
class: props.htmlattrs.link ? props.htmlattrs.link : useState().htmlAttrs.link,
|
||||
},
|
||||
}),
|
||||
],
|
||||
content: props.data,
|
||||
editorProps: {
|
||||
attributes: {
|
||||
class: 'focus:p-2 focus:dark:bg-gray-700 focus:bg-gray-100 focus:border-gray-500 focus:border-1 prose prose-sm sm:prose lg:prose-lg xl:prose-2xl mx-auto focus:outline-none',
|
||||
},
|
||||
transformPastedText(text) {
|
||||
return text.toUpperCase()
|
||||
}
|
||||
},
|
||||
// '<p>I’m running Tiptap with Vue.js. 🎉</p>',
|
||||
onBeforeCreate({ editor }) {
|
||||
// Before the view is created.
|
||||
},
|
||||
onCreate({ editor }) {
|
||||
// The editor is ready.
|
||||
//editor.commands.setContent(data)
|
||||
// console.log('debugger create '+editor.state)
|
||||
},
|
||||
onUpdate({ editor }) {
|
||||
// The content has changed.
|
||||
},
|
||||
onBlur({ editor, event }) {
|
||||
const data = editor.getHTML()
|
||||
emit('onEditorBlur', { src: props.src, field: props.field, idx: props.idx, data, ev: event })
|
||||
},
|
||||
injectCSS: true,
|
||||
editable: props.editable,
|
||||
})
|
||||
onBeforeMount(async () => {
|
||||
// const d = useState()
|
||||
// console.log('Editor: ' + props.data)
|
||||
})
|
||||
onBeforeUnmount(async () => {
|
||||
editor.destroy()
|
||||
// console.log('Editor: destroy')
|
||||
})
|
||||
</script>
|
||||
<style scoped>
|
||||
/* Basic editor styles */
|
||||
/* .ProseMirror {
|
||||
> * + * {
|
||||
margin-top: 0.75em;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
padding-left: 1rem;
|
||||
border-left: 2px solid rgba(#0D0D0D, 0.1);
|
||||
}
|
||||
} */
|
||||
|
||||
.bubble-menu {
|
||||
display: flex;
|
||||
background-color: #0D0D0D;
|
||||
padding: 0.2rem;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
.bubble-menu button {
|
||||
border: none;
|
||||
background: none;
|
||||
color: #FFF;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 500;
|
||||
padding: 0 0.2rem;
|
||||
opacity: 0.6;
|
||||
}
|
||||
.bubble-menu button:hover,
|
||||
.bubble-menu button.is-active {
|
||||
opacity: 1;
|
||||
}
|
||||
.floating-menu {
|
||||
display: flex;
|
||||
background-color: #0D0D0D10;
|
||||
padding: 0.2rem;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
.dark .floating-menu { background-color: #0D0D0D;}
|
||||
.floating-menu button {
|
||||
border: none;
|
||||
background: none;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 500;
|
||||
padding: 0 0.2rem;
|
||||
border-left: #7c7c7c 1px solid;
|
||||
opacity: 0.6;
|
||||
}
|
||||
.floating-menu button:hover,
|
||||
.floating-menu button.is-active {
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
61
src/components/forms/CheckInput.vue
Normal file
61
src/components/forms/CheckInput.vue
Normal file
@ -0,0 +1,61 @@
|
||||
<template>
|
||||
<div class="mt-3">
|
||||
<input class="checkbox"
|
||||
type="checkbox"
|
||||
:disabled="!edititem"
|
||||
:checked="inputvalue"
|
||||
@change="onCheckbox($event)"
|
||||
/>
|
||||
<label class="form-check-label inline-block text-gray-800 dark:text-gray-200" :for="varname">
|
||||
<span class="text-base">{{t(title,varname)}}</span>
|
||||
</label>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { PropType } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { InputValueOption,InputValidateOption } from '~/typs/inputs'
|
||||
const emit = defineEmits(['inputChange'])
|
||||
const t = useI18n().t
|
||||
defineProps({
|
||||
typ: {
|
||||
type: String as PropType<InputValueOption>,
|
||||
default: InputValueOption.string,
|
||||
required: true,
|
||||
},
|
||||
inputvalue: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
varname: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
validate: {
|
||||
type: String as PropType<InputValidateOption>,
|
||||
default: InputValidateOption.none,
|
||||
required: true,
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: '',
|
||||
required: true,
|
||||
},
|
||||
edititem: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
showitem: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
messages: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
required: false,
|
||||
},
|
||||
})
|
||||
const onCheckbox = (ev: any) => {
|
||||
emit('inputChange',{val: ev.target.checked})
|
||||
}
|
||||
</script>
|
||||
182
src/components/forms/DataInput.vue
Normal file
182
src/components/forms/DataInput.vue
Normal file
@ -0,0 +1,182 @@
|
||||
<template>
|
||||
<div v-if="dataValue && dataVars" class="pb-2 w-full" >
|
||||
<div v-for="(key: string) in Object.keys(dataValue)" :key="key">
|
||||
<h4 class="w-full mt-5 px-1 pb-1 border-t-1 border-b-1 border-dotted border-gray-300 dark:border-gray-600 bg-gray-200 dark:bg-gray-700">
|
||||
<span
|
||||
class="ml-1 mt-5 text-normal font-medium text-indigo-800 dark:text-indigo-400"
|
||||
:class="{'text-gray-300 dark:text-gray-600': !showitem}"
|
||||
>
|
||||
{{ key }}
|
||||
</span>
|
||||
<button
|
||||
v-if="edititem"
|
||||
class="no-print mt-2 text-sm float-right icon-btn !outline-none text-gray-500 dark:text-gray-400"
|
||||
@click.prevent="onDeleteItem(key)"
|
||||
>
|
||||
<div class="noprint flex">
|
||||
<div i-carbon-trash-can />
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
v-if="vardef.email && dataValue[key] && dataValue[key].active"
|
||||
class="flex no-print text-sm float-right icon-btn mt-2 mx-2 !outline-none text-gray-500 dark:text-gray-400"
|
||||
@click="onEmailItem(key)"
|
||||
>
|
||||
<div class="noprint flex">
|
||||
<div i-carbon-email />
|
||||
</div>
|
||||
</button>
|
||||
</h4>
|
||||
<div class="w-full lg:w-6/12 sm:max-w-sm">
|
||||
<div v-for="(varky: string) in Object.keys(dataVars)" :key="varky" class="">
|
||||
<label :for="`${varky}-${key}`">
|
||||
<span class="text-xs text-gray-600 dark:text-gray-500">
|
||||
{{t(`${section}.${varky}`,varky)}}
|
||||
</span>
|
||||
</label>
|
||||
<InputValue
|
||||
:typ="dataVars[varky].typ"
|
||||
:class="{'border-b border-indigo-500': edititem && showitem}"
|
||||
:dataValue="dataValue[key][varky]"
|
||||
:section="key"
|
||||
:varname="varky"
|
||||
:vardef="dataVars"
|
||||
:title="`${section}.${varky}`"
|
||||
:edititem="edititem"
|
||||
:showitem="showitem"
|
||||
:validate="dataVars[varky].valid ? dataVars[varky].valid : InputValidateOption.none"
|
||||
:messages="true"
|
||||
@input-change="onInputChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h4 v-if="edititem" class="w-full flex flex-1 mt-5 px-1 pb-1 border-t-1 border-b-1 border-dotted border-gray-300 dark:border-gray-600 bg-gray-100 dark:bg-gray-700">
|
||||
<label v-if="labelitms && labelitms.length > 0" :for="`id-${varname}`"> <span class="text-xs mr-2 text-gray-600 dark:text-gray-500">{{t(labelitms,labelitms)}}</span> </label>
|
||||
<input
|
||||
type="text"
|
||||
class="appearance-none bg-transparent w-full text-gray-700 dark:text-gray-200 py-1 leading-tight focus:outline-none"
|
||||
:class="{'border-b border-indigo-500': edititem && showitem}"
|
||||
v-model="inputAdd"
|
||||
:disabled="!edititem"
|
||||
:id="`id-${varname}`"
|
||||
@keyup.enter.exact="onAddItem"
|
||||
/>
|
||||
<button
|
||||
v-if="edititem"
|
||||
class="no-print mt-2 text-sm float-right icon-btn !outline-none text-gray-500 dark:text-gray-400"
|
||||
@click.prevent="onAddItem()"
|
||||
>
|
||||
<div class="noprint flex">
|
||||
<div i-carbon-add-filled />
|
||||
</div>
|
||||
</button>
|
||||
</h4>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import InputValue from '@/InputValue.vue'
|
||||
import { InputValueOption, InputValidateOption,VarsDataType} from '~/typs/inputs'
|
||||
import { generate_value,email_info } from '~/hooks/utils'
|
||||
|
||||
const emit = defineEmits(['inputChange','inputModelAdd','inputModelDelete'])
|
||||
const t = useI18n().t
|
||||
const props = defineProps({
|
||||
typ: {
|
||||
type: String as PropType<InputValueOption>,
|
||||
default: InputValueOption.string,
|
||||
required: true,
|
||||
},
|
||||
section: {
|
||||
type: String,
|
||||
required: false,
|
||||
},
|
||||
dataValue: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
dataVars: {
|
||||
type: Object as PropType<VarsDataType>,
|
||||
required: true,
|
||||
},
|
||||
validate: {
|
||||
type: String as PropType<InputValidateOption>,
|
||||
default: InputValidateOption.none,
|
||||
required: true,
|
||||
},
|
||||
varname: {
|
||||
type: String,
|
||||
default: '',
|
||||
required: true,
|
||||
},
|
||||
vardef: {
|
||||
type: Object,
|
||||
default: {},
|
||||
required: false,
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: '',
|
||||
required: true,
|
||||
},
|
||||
labelitms: {
|
||||
type: String,
|
||||
default: '',
|
||||
required: false,
|
||||
},
|
||||
edititem: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
required: true,
|
||||
},
|
||||
showitem: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
required: true,
|
||||
},
|
||||
messages: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
required: false,
|
||||
},
|
||||
})
|
||||
const inputAdd = ref('')
|
||||
|
||||
const onInputChange = (data: {sec: string, key: string, val: any,idx: number}) => {
|
||||
const newData = props.dataValue
|
||||
if (newData[data.sec])
|
||||
newData[data.sec][data.key]=data.val
|
||||
emit('inputChange',{ sec: props.section, key: props.varname, idx: data.idx, val: newData})
|
||||
}
|
||||
const onDeleteItem= (id: string) => {
|
||||
const newData = Object.keys(props.dataValue).filter((key) => key !== id).
|
||||
reduce((cur, key) => { return Object.assign(cur, { [key]: props.dataValue[key] })}, {});
|
||||
emit('inputChange',{ sec: props.section, key: props.varname, idx: -1, val: newData})
|
||||
}
|
||||
const onAddItem= () => {
|
||||
const newData = props.dataValue
|
||||
const newItem : any= {}
|
||||
Object.keys(props.dataVars).forEach(itm => {
|
||||
// switch(props.dataVars[itm].typ) {
|
||||
// case InputValueOption.string:
|
||||
// break
|
||||
// }
|
||||
newItem[itm] = props.dataVars[itm].dflt
|
||||
})
|
||||
if (inputAdd.value.startsWith('?') && props.vardef.gen)
|
||||
inputAdd.value = generate_value(props.vardef.gen,inputAdd.value)
|
||||
newData[inputAdd.value] = newItem
|
||||
emit('inputChange',{ sec: props.section, key: props.varname, idx: -1, val: newData})
|
||||
inputAdd.value = ''
|
||||
}
|
||||
const onEmailItem= (id: string) => {
|
||||
const targetData: any = Object.keys(props.dataValue).filter((key) => key === id).
|
||||
reduce((cur, key) => { return Object.assign(cur, { [key]: props.dataValue[key] })}, {});
|
||||
Object.keys(targetData).forEach((ky: string) => {
|
||||
email_info(props.varname,props.vardef,ky,targetData[ky],t(props.title,props.varname))
|
||||
})
|
||||
}
|
||||
</script>
|
||||
144
src/components/forms/TextInput.vue
Normal file
144
src/components/forms/TextInput.vue
Normal file
@ -0,0 +1,144 @@
|
||||
<template>
|
||||
<div>
|
||||
<input
|
||||
v-if="typ === InputValueOption.string"
|
||||
class="appearance-none bg-transparent border-none w-full text-gray-700 dark:text-gray-200 py-1 leading-tight focus:outline-none"
|
||||
:class="{'text-gray-300 dark:text-gray-600': !showitem}"
|
||||
type="text"
|
||||
:disabled="!edititem || !showitem"
|
||||
:value="inputvalue"
|
||||
:placeholder="t(title,varname)"
|
||||
:aria-label="t(title,varname)"
|
||||
@change="onInputChange($event)"
|
||||
/>
|
||||
<div v-if="typ === InputValueOption.password" class="flex">
|
||||
<input
|
||||
class="appearance-none bg-transparent border-none w-full text-gray-700 dark:text-gray-200 py-1 leading-tight focus:outline-none"
|
||||
:class="{'text-gray-300 dark:text-gray-600': !showitem}"
|
||||
:type="show_input ? 'text' : 'password'"
|
||||
:disabled="!edititem || !showitem"
|
||||
:value="inputvalue"
|
||||
:placeholder="t(title,varname)"
|
||||
:aria-label="t(title,varname)"
|
||||
@change="onInputChange($event)"
|
||||
/>
|
||||
<button
|
||||
class="no-print text-sm float-right icon-btn ml-2 !outline-none text-gray-500 dark:text-gray-400"
|
||||
@click.prevent="show_input = !show_input"
|
||||
>
|
||||
<div v-if="show_input" i-carbon-view-off />
|
||||
<div v-else class="noprint flex">
|
||||
<div i-carbon-view />
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<input
|
||||
v-if="typ === InputValueOption.number"
|
||||
class="appearance-none bg-transparent border-none w-full text-gray-700 dark:text-gray-200 py-1 leading-tight focus:outline-none"
|
||||
type="number"
|
||||
:disabled="!edititem || !showitem"
|
||||
:value="inputvalue"
|
||||
:placeholder="t(title,varname)"
|
||||
:aria-label="t(title,varname)"
|
||||
@change="onInputChange($event)"
|
||||
/>
|
||||
<textarea
|
||||
v-if="typ === InputValueOption.content && showitem"
|
||||
class="form-control block w-full px-3 py-1.5 text-base font-normal rounded-md resized transition ease-in-out m-0
|
||||
text-gray-800 dark:text-gray-200
|
||||
bg-white dark:bg-gray-800 bg-clip-padding
|
||||
border border-solid border-gray-300 dark:border-gray-500
|
||||
focus:text-gray-700 dark:focus:text-gray-300 focus:bg-gray-100 dark:focus:bg-gray-900
|
||||
focus:border-gray-700 dark:focus:border-gray-300 focus:outline-none
|
||||
"
|
||||
:id="`input-${varname}`"
|
||||
:rows="rows"
|
||||
:value="inputvalue"
|
||||
:disabled="!edititem || !showitem"
|
||||
:placeholder="t(title,varname)"
|
||||
@change="onInputChange($event)"
|
||||
></textarea>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { PropType } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
const { t } = useI18n()
|
||||
import { MessageType} from '~/typs'
|
||||
import { InputValueOption,InputValidateOption,InputValueModeOption} from '~/typs/inputs'
|
||||
import { show_message,generate_value} from '~/hooks/utils'
|
||||
import { input_validate } from '~/hooks/validation'
|
||||
const emit = defineEmits(['inputChange'])
|
||||
const props = defineProps({
|
||||
typ: {
|
||||
type: String as PropType<InputValueOption>,
|
||||
default: InputValueOption.string,
|
||||
required: true,
|
||||
},
|
||||
inputvalue: {
|
||||
type: [String,Number,Array],
|
||||
required: true,
|
||||
},
|
||||
varname: {
|
||||
type: String,
|
||||
default: '',
|
||||
required: true,
|
||||
},
|
||||
vardef: {
|
||||
type: Object,
|
||||
default: {},
|
||||
required: false,
|
||||
},
|
||||
idx: {
|
||||
type: Number,
|
||||
default: -1,
|
||||
required: true,
|
||||
},
|
||||
rows: {
|
||||
type: Number,
|
||||
default: 3,
|
||||
required: false,
|
||||
},
|
||||
validate: {
|
||||
type: String as PropType<InputValidateOption>,
|
||||
default: InputValidateOption.none,
|
||||
required: true,
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: '',
|
||||
required: true,
|
||||
},
|
||||
mode: {
|
||||
type: String as PropType<InputValueModeOption>,
|
||||
default: InputValueModeOption.none,
|
||||
required: false,
|
||||
},
|
||||
edititem: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
required: true,
|
||||
},
|
||||
showitem: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
required: true,
|
||||
},
|
||||
messages: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
required: false,
|
||||
},
|
||||
})
|
||||
const show_input = ref(false)
|
||||
const onInputChange = (ev: any) => {
|
||||
let val = ev.target.value
|
||||
if (val.startsWith('?') && props.vardef[props.varname] && props.vardef[props.varname].gen)
|
||||
val = generate_value(props.vardef[props.varname].gen,val)
|
||||
if (input_validate(props.typ,props.validate,val)) {
|
||||
emit('inputChange', {val, idx: props.idx})
|
||||
} else if (props.messages) {
|
||||
show_message(MessageType.Error, `${t(props.title,props.varname)} not valid`,5000)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
10
src/components/icons/Adjustments.vue
Normal file
10
src/components/icons/Adjustments.vue
Normal file
@ -0,0 +1,10 @@
|
||||
<template>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
5
src/components/icons/AppImg.vue
Normal file
5
src/components/icons/AppImg.vue
Normal file
File diff suppressed because one or more lines are too long
5
src/components/icons/AppLogoText.vue
Normal file
5
src/components/icons/AppLogoText.vue
Normal file
File diff suppressed because one or more lines are too long
7
src/components/icons/AppLogoV.vue
Normal file
7
src/components/icons/AppLogoV.vue
Normal file
File diff suppressed because one or more lines are too long
10
src/components/icons/BellIcon.vue
Normal file
10
src/components/icons/BellIcon.vue
Normal file
@ -0,0 +1,10 @@
|
||||
<template>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
5
src/components/icons/ChevronDoubleRight.vue
Normal file
5
src/components/icons/ChevronDoubleRight.vue
Normal file
@ -0,0 +1,5 @@
|
||||
<template>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 5l7 7-7 7M5 5l7 7-7 7" />
|
||||
</svg>
|
||||
</template>
|
||||
5
src/components/icons/CloseIcon.vue
Normal file
5
src/components/icons/CloseIcon.vue
Normal file
@ -0,0 +1,5 @@
|
||||
<template>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</template>
|
||||
19
src/components/icons/CloudIcon.vue
Normal file
19
src/components/icons/CloudIcon.vue
Normal file
@ -0,0 +1,19 @@
|
||||
<template>
|
||||
<svg
|
||||
class=""
|
||||
fill="#fff"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="76.15"
|
||||
height="51.53"
|
||||
viewBox="0 0 76.15 51.53"
|
||||
>
|
||||
<path
|
||||
d="M171.78,71.73h-45.4a14.26,14.26,0,0,1-2-28.38.66.66,0,0,0,.56-.71,14.31,14.31,0,0,1-.07-1.51,18.32,18.32,0,0,1,36.43-2.73A.65.65,0,0,0,162,39h.33a14.31,14.31,0,0,1,14.2,13.11.63.63,0,0,0,.24.43,3.43,3.43,0,0,1,.56.07,4.4,4.4,0,0,1,1.1-1c-.21-.06-.43-.11-.65-.15a15.63,15.63,0,0,0-15.23-13.8,19.61,19.61,0,0,0-38.92,3.48q0,.54,0,1A15.56,15.56,0,0,0,126.38,73h45.4a.65.65,0,0,0,0-1.3Z"
|
||||
transform="translate(-110.83 -21.5)"
|
||||
/>
|
||||
<path d="M130.56,39.18a.66.66,0,0,1-.65-.65,12.07,12.07,0,0,1,12.05-12,.65.65,0,1,1,0,1.3,10.76,10.76,0,0,0-10.75,10.75A.66.66,0,0,1,130.56,39.18Z" transform="translate(-110.83 -21.5)" /><path
|
||||
d="M177.75,51.32c0-.15-.05-.29-.08-.45a5.42,5.42,0,0,1-1.22.68c0,.12,0,.24.05.36a.64.64,0,0,0,.56.57,9.67,9.67,0,0,1-1.44,19.27H162.55a5.24,5.24,0,0,1-.1,1.25h13.17a10.91,10.91,0,0,0,2.13-21.68Z"
|
||||
transform="translate(-110.83 -21.5)"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
10
src/components/icons/HomeIcon.vue
Normal file
10
src/components/icons/HomeIcon.vue
Normal file
@ -0,0 +1,10 @@
|
||||
<template>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
10
src/components/icons/LoginIcon.vue
Normal file
10
src/components/icons/LoginIcon.vue
Normal file
@ -0,0 +1,10 @@
|
||||
<template>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
10
src/components/icons/LogoutIcon.vue
Normal file
10
src/components/icons/LogoutIcon.vue
Normal file
@ -0,0 +1,10 @@
|
||||
<template>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
10
src/components/icons/SearchIcon.vue
Normal file
10
src/components/icons/SearchIcon.vue
Normal file
@ -0,0 +1,10 @@
|
||||
<template>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
10
src/components/icons/UserAddIcon.vue
Normal file
10
src/components/icons/UserAddIcon.vue
Normal file
@ -0,0 +1,10 @@
|
||||
<template>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
10
src/components/icons/UserIcon.vue
Normal file
10
src/components/icons/UserIcon.vue
Normal file
@ -0,0 +1,10 @@
|
||||
<template>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
1
src/composables/index.ts
Normal file
1
src/composables/index.ts
Normal file
@ -0,0 +1 @@
|
||||
export * from './use'
|
||||
4
src/composables/use.ts
Normal file
4
src/composables/use.ts
Normal file
@ -0,0 +1,4 @@
|
||||
export const isDark = useDark()
|
||||
export const toggleDark = useToggle(isDark)
|
||||
// import { useMediaQuery } from '@vueuse/core'
|
||||
export const isLargeScreen = useMediaQuery('(min-width: 1024px)')
|
||||
172
src/hooks/config.ts
Normal file
172
src/hooks/config.ts
Normal file
@ -0,0 +1,172 @@
|
||||
// import store from '~/store'
|
||||
import useState from '~/hooks/useState'
|
||||
import { show_message, fetch_json } from '~/hooks/utils'
|
||||
import { MessageType} from '~/typs'
|
||||
import 'toastify-js/src/toastify.css'
|
||||
import YAML from 'yaml'
|
||||
|
||||
export const set_config = (res: any) => {
|
||||
if (res && res.URLS && res.URLS.root) {
|
||||
Object.keys(res.URLS).forEach(it => {
|
||||
if (it === 'root' || res.URLS[it].includes('yaml') || res.URLS[it].includes('json') )
|
||||
useState().CONFURLS.value[it] = res.URLS[it]
|
||||
else
|
||||
useState().CONFURLS.value[it] = res.URLS.root.includes(':') ? `${res.URLS.root}${res.URLS[it]}` : res.URLS[it]
|
||||
})
|
||||
}
|
||||
if (res && res.ASSETS_PATH)
|
||||
useState().ASSETS_PATH.value = res.ASSETS_PATH
|
||||
if (res && res.DATA_PATH)
|
||||
useState().DATA_PATH.value = res.DATA_PATH
|
||||
if (res && res.MODEL_ID)
|
||||
useState().MODEL_ID.value = res.MODEL_ID
|
||||
if (res && res.URLKEY)
|
||||
useState().URLKEY.value = res.URLKEY
|
||||
if (res && res.APPNAME)
|
||||
useState().APPNAME.value = res.APPNAME
|
||||
if (res && res.AUTHKEY)
|
||||
useState().AUTHKEY.value = res.AUTHKEY
|
||||
if (res && res.AUTH_SEPCHAR)
|
||||
useState().AUTH_SEPCHAR.value = res.AUTH_SEPCHAR
|
||||
if (res && res.UUIDONE)
|
||||
useState().UUIDNONE.value = res.UUIDNONE
|
||||
if (res && res.TKNLIMIT)
|
||||
useState().TKNLIMIT.value = res.TKNLIMIT
|
||||
if (res && res.REFRESHTIME)
|
||||
useState().REFRESHTIME.value = res.REFRESHTIME
|
||||
if (res && res.ALLOW_REGISTER)
|
||||
useState().ALLOW_REGISTER.value = res.ALLOW_REGISTER
|
||||
if (res && res.RESET_PASSWORD)
|
||||
useState().RESET_PASSWORD.value = res.RESET_PASSWORD
|
||||
if (res && res.isDevelmode)
|
||||
useState().isDevelmode.value = res.isDevelmode
|
||||
if (res && res.htmlAttrs)
|
||||
useState().htmlAttrs.value = res.htmlAttrs
|
||||
if (res && res.dataSections)
|
||||
useState().dataSections.value = res.dataSections
|
||||
if (res && res.cv_model)
|
||||
useState().cv_model.value = res.cv_model
|
||||
}
|
||||
export const get_urlpath = async (url: string, mode?: string): Promise<[any, string]> => {
|
||||
if (url.length == 0)
|
||||
return [{},'No URL defined']
|
||||
let text = ''
|
||||
let res: any = {}
|
||||
let error = null
|
||||
try {
|
||||
const response = await self.fetch(url, {
|
||||
method: 'GET',
|
||||
})
|
||||
if (url.includes('.json') || mode === 'json') {
|
||||
res = await response.json()
|
||||
} else {
|
||||
text = await response.text()
|
||||
}
|
||||
if (response.ok) {
|
||||
if (url.includes('.yaml') || mode === 'yaml') {
|
||||
res = YAML.parse(text)
|
||||
} else if (!url.includes('.json') && mode !== 'json') {
|
||||
res = text
|
||||
}
|
||||
} else {
|
||||
error = res.message
|
||||
}
|
||||
}
|
||||
catch (err: any) {
|
||||
error = err.message
|
||||
}
|
||||
return [res,error]
|
||||
}
|
||||
export const load_config = async (): Promise<[any, string]> => {
|
||||
const url = window.CONFIG_LOCATION ? window.CONFIG_LOCATION : '/config.yaml'
|
||||
// const url = window.CONFIG_LOCATION ? window.CONFIG_LOCATION : 'config.json'
|
||||
const [res,error] = await get_urlpath(url)
|
||||
if (error) {
|
||||
show_message(MessageType.Error, `'Config Load' -> ${error}`, 5000)
|
||||
useState().connection.value.state = 'connection.error'
|
||||
return [{},error]
|
||||
}
|
||||
return [res, error]
|
||||
}
|
||||
export const load_serv_config = async (): Promise<[any,string]> => {
|
||||
const url = useState().CONFURLS.value.srvconfig || ''
|
||||
if (url.length == 0)
|
||||
return [{},'No SRV URL defined']
|
||||
const [res,error] = await get_urlpath(url)
|
||||
if (error) {
|
||||
show_message(MessageType.Error, `'Serv Config Load' -> ${error}`, 5000)
|
||||
useState().connection.value.state = 'connection.error'
|
||||
return [{},error]
|
||||
}
|
||||
return [res,error]
|
||||
}
|
||||
export const get_serv_config = async (): Promise<[any,string]> => {
|
||||
const url = useState().CONFURLS.value.srvconfig || ''
|
||||
if (url.length == 0)
|
||||
return [{},'No SRV URL defined']
|
||||
const [res,errmsg] = await fetch_json(url, 2000,true)
|
||||
// fetch_json(url, 2000,to.meta.withauth,(res,errmsg) => {
|
||||
if (errmsg.length > 0) {
|
||||
return [{},errmsg]
|
||||
}
|
||||
return [res,errmsg]
|
||||
}
|
||||
export const load_vars_config = async (): Promise<[any,string]> => {
|
||||
const url = useState().CONFURLS.value.varsconfig || ''
|
||||
if (url.length == 0)
|
||||
return [{},'No URL defined']
|
||||
let text = ''
|
||||
let res: any = {}
|
||||
let error = null
|
||||
try {
|
||||
const response = await self.fetch(url, {
|
||||
method: 'GET',
|
||||
})
|
||||
if (url.includes('.json')) {
|
||||
res = await response.json()
|
||||
} else {
|
||||
text = await response.text()
|
||||
}
|
||||
if (response.ok) {
|
||||
if (url.includes('.yaml')) {
|
||||
res = YAML.parse(text)
|
||||
} else if (!url.includes('.json')) {
|
||||
res = text
|
||||
}
|
||||
} else {
|
||||
error = res.message
|
||||
}
|
||||
}
|
||||
catch (err: any) {
|
||||
error = err.message
|
||||
}
|
||||
if (error) {
|
||||
show_message(MessageType.Error, `'Vars Config Load' -> ${error}`, 5000)
|
||||
useState().connection.value.state = 'connection.error'
|
||||
return [{}, error]
|
||||
}
|
||||
return [res,error]
|
||||
}
|
||||
export const has_config = async(): Promise<boolean> => {
|
||||
let url = useState().CONFURLS.value.root || ''
|
||||
if (url.length === 0) {
|
||||
const [res,err] = await load_config()
|
||||
if (err && err.length > 0) {
|
||||
return false
|
||||
}
|
||||
set_config(res)
|
||||
url = useState().CONFURLS.value.root || ''
|
||||
if (url.length === 0)
|
||||
return false
|
||||
}
|
||||
return true
|
||||
}
|
||||
export default {
|
||||
set_config,
|
||||
load_config,
|
||||
get_urlpath,
|
||||
load_serv_config,
|
||||
get_serv_config,
|
||||
load_vars_config,
|
||||
has_config,
|
||||
}
|
||||
112
src/hooks/loads.ts
Normal file
112
src/hooks/loads.ts
Normal file
@ -0,0 +1,112 @@
|
||||
import useState from '~/hooks/useState'
|
||||
import { fetch_json } from '~/hooks/utils'
|
||||
import { load_config } from '~/hooks/config'
|
||||
|
||||
export const store_info = (key:string,res: any) => {
|
||||
useState().cvdata.value = {}
|
||||
useState().datalang.value = {}
|
||||
let models = []
|
||||
if (res.models) {
|
||||
models = res.models
|
||||
}
|
||||
Object.keys(res.data).forEach(ky => {
|
||||
if (ky === 'main') {
|
||||
useState().cvdata.value = res.data.main
|
||||
if (res.data.main.models) {
|
||||
res.data.main.models.forEach((mdl: any) => models.push(mdl))
|
||||
}
|
||||
if (res.data.main.showinfo) {
|
||||
const showItms = res.data.main.showinfo.filter((it: any) => it.ky === key)
|
||||
if (showItms[0]) {
|
||||
useState().showinfo.value = showItms[0]
|
||||
} else {
|
||||
const showPub = res.data.main.showinfo.filter((it: any) => it.ky === '')
|
||||
if (showPub[0])
|
||||
useState().showinfo.value = showPub[0]
|
||||
}
|
||||
}
|
||||
} else {
|
||||
useState().datalang.value[ky] = {}
|
||||
Object.keys(res.data[ky]).forEach(sec => {
|
||||
if (res.data[ky][sec]) {
|
||||
useState().datalang.value[ky][sec] = res.data[ky][sec]
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
useState().models.value = models
|
||||
models.forEach((mdl: any) => useState().selectOps.value[mdl.id] = mdl)
|
||||
}
|
||||
export const load_data_model = async(id: string, rootpath: string, ky: string, with_auth: boolean, cllbck: any) => {
|
||||
if (id && useState().selectOps.value[id]) {
|
||||
const url = rootpath.includes('http') ? `${rootpath}/${id}` : useState().selectOps.value[id].path.replace('~',rootpath)
|
||||
const [res,err] = await fetch_json(url, 2000, with_auth)
|
||||
if (err.length === 0 && res) {
|
||||
store_info(ky,res)
|
||||
useState().current_model.value = useState().selectOps.value[id]
|
||||
useState().current_modelid.value = id
|
||||
if (cllbck) {
|
||||
cllbck()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
export const load_data_info = async (to: any, _from: any, next: any) => {
|
||||
let url = useState().CONFURLS.value.root || ''
|
||||
if (url.length > 0) {
|
||||
const [_res,err] = await load_config()
|
||||
if (err && err.length > 0) {
|
||||
next()
|
||||
return
|
||||
}
|
||||
}
|
||||
url = useState().CONFURLS.value.data || ''
|
||||
if (url.length == 0) {
|
||||
next()
|
||||
return
|
||||
}
|
||||
url = `${url}/${useState().MODEL_ID.value}`
|
||||
const [res,errmsg] = await fetch_json(url, 2000,to.meta.withauth)
|
||||
// fetch_json(url, 2000,to.meta.withauth,(res,errmsg) => {
|
||||
if (errmsg.length > 0) {
|
||||
next()
|
||||
return
|
||||
}
|
||||
if (res && res.data) {
|
||||
const ky = to.params.ky || to.query.k || ''
|
||||
store_info(ky,res)
|
||||
if (useState().selectOps.value[useState().MODEL_ID.value]) {
|
||||
useState().current_model.value = useState().selectOps.value[useState().MODEL_ID.value]
|
||||
useState().current_modelid.value = useState().MODEL_ID.value
|
||||
}
|
||||
} else {
|
||||
//next('404')
|
||||
next()
|
||||
return
|
||||
}
|
||||
next()
|
||||
}
|
||||
export const load_currentRoute= async(rt: any): Promise<boolean> => {
|
||||
let url = useState().CONFURLS.value.data || ''
|
||||
if (url.length == 0) {
|
||||
return false
|
||||
}
|
||||
url = `${url}/${useState().MODEL_ID.value}`
|
||||
const [res,errmsg] = await fetch_json(url, 2000,rt.meta.withauth)
|
||||
if (errmsg.length === 0 && res && res) {
|
||||
const ky = rt.params.ky || rt.query.k || ''
|
||||
store_info(ky,res)
|
||||
if (useState().models.value[rt.meta.model]) {
|
||||
useState().current_model.value = useState().models.value[rt.meta.model]
|
||||
}
|
||||
useState().current_modelid.value = rt.meta.model
|
||||
return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
export default {
|
||||
store_info,
|
||||
load_data_model,
|
||||
load_data_info,
|
||||
load_currentRoute,
|
||||
}
|
||||
75
src/hooks/tools.ts
Normal file
75
src/hooks/tools.ts
Normal file
@ -0,0 +1,75 @@
|
||||
import { send_data, show_message } from '~/hooks/utils'
|
||||
import useState from '~/hooks/useState'
|
||||
import { MessageType} from '~/typs'
|
||||
import 'toastify-js/src/toastify.css'
|
||||
import { DateTime } from 'luxon'
|
||||
|
||||
export const format_date = (ndate: number):string => {
|
||||
let value = ''
|
||||
try {
|
||||
const d = new Date(ndate);
|
||||
value = d.toLocaleString();
|
||||
} catch(e) {
|
||||
console.log(`error date to string ${ndate}`)
|
||||
}
|
||||
return value
|
||||
}
|
||||
export const utf8_to_b64 = (str: string):string => {
|
||||
return window.btoa(unescape(encodeURIComponent( str )));
|
||||
}
|
||||
|
||||
export const b64_to_utf8 = (str: string):string => {
|
||||
return decodeURIComponent(escape(window.atob( str )));
|
||||
}
|
||||
export const generate_uuid = ():string => {
|
||||
let dt = new Date().getTime()
|
||||
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
|
||||
const r = (dt + Math.random()*16)%16 | 0;
|
||||
dt = Math.floor(dt/16);
|
||||
return (c=='x' ? r :(r&0x3|0x8)).toString(16);
|
||||
})
|
||||
}
|
||||
export const generate_value = (gen: string, val: string):string => {
|
||||
switch (gen) {
|
||||
case 'uuid':
|
||||
return generate_uuid()
|
||||
case 'NowSet':
|
||||
const now = DateTime.now().toUTC()
|
||||
if (val === '?') {
|
||||
return now.toISO()
|
||||
} else if (val.endsWith('d')) {
|
||||
const num = parseInt(val.replace('?', '').replace('d', '')) || 0
|
||||
return now.plus({days: num}).toISO()
|
||||
} else if (val.endsWith('h')) {
|
||||
const num = parseInt(val.replace('?', '').replace('h', '')) || 0
|
||||
return now.plus({hours: num}).toISO()
|
||||
} else if (val.endsWith('m')) {
|
||||
const num = parseInt(val.replace('?', '').replace('m', '')) || 0
|
||||
return now.plus({minutes: num}).toISO()
|
||||
}
|
||||
default:
|
||||
return val ? val : ''
|
||||
}
|
||||
}
|
||||
export const email_info = async(src: string, defs: any, key: string, data: any, msg: string) => {
|
||||
switch (src) {
|
||||
case 'invitations':
|
||||
const url = useState().CONFURLS.value.sendinvitation || ''
|
||||
if (url.length > 0) {
|
||||
const [res, err] = await send_data(url, { id: key, data }, true, true, () => {
|
||||
show_message(MessageType.Success,`${msg} sent`, 2000)
|
||||
})
|
||||
if (err && err.length > 0 && res && res.status && res.status !== 'ok') {
|
||||
show_message(MessageType.Error, `Error: ${err}`, 2000)
|
||||
}
|
||||
}
|
||||
break
|
||||
}
|
||||
}
|
||||
export default {
|
||||
format_date,
|
||||
utf8_to_b64,
|
||||
b64_to_utf8,
|
||||
generate_uuid,
|
||||
generate_value,
|
||||
}
|
||||
48
src/hooks/tracking.ts
Normal file
48
src/hooks/tracking.ts
Normal file
@ -0,0 +1,48 @@
|
||||
import useState from '~/hooks/useState'
|
||||
import { MessageType, TrackActionType } from '~/typs'
|
||||
import { show_message,send_data} from '~/hooks/utils'
|
||||
|
||||
export const track_action = async(e: any, src?: {ref: string,text?: string}, act = 'click') => {
|
||||
const url = useState().CONFURLS.value.tracking || ''
|
||||
if (url.length == 0) {
|
||||
return
|
||||
}
|
||||
let href=''
|
||||
let text=''
|
||||
if (src && src.ref && src.ref.length > 0 ) {
|
||||
href=src.ref
|
||||
text=src.text ? src.text : src.ref
|
||||
} else if (e && e.target) {
|
||||
switch(e.target.tagName) {
|
||||
case 'IMG':
|
||||
const imgTarget = e.target.parentNode.tagName === 'A' ? e.target.parentNode : null
|
||||
if (imgTarget && imgTarget.tagName === 'A') {
|
||||
href = imgTarget.href ? imgTarget.href : ''
|
||||
text = e.target.alt ? e.target.alt : e.target.src.slice(-1)[0]
|
||||
}
|
||||
break
|
||||
case 'A':
|
||||
const linkTarget = e.target
|
||||
if (linkTarget && linkTarget.tagName === 'A') {
|
||||
href = linkTarget.href ? linkTarget.href : ''
|
||||
text = linkTarget.innerHTML ? linkTarget.innerHTML : ''
|
||||
}
|
||||
break
|
||||
}
|
||||
}
|
||||
const trackAction: TrackActionType = {
|
||||
when: Date.now().toString(),
|
||||
where: `${useState().APPNAME.value}>${text}: ${href}`,
|
||||
what: act,
|
||||
context: navigator.userAgent,
|
||||
data: useState().userID.value,
|
||||
}
|
||||
const [_res,err] = await send_data(url, trackAction, true, true)
|
||||
if (err && err.length > 0 ) {
|
||||
show_message(MessageType.Error, `Error: ${err}`,2000)
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
track_action,
|
||||
}
|
||||
97
src/hooks/useComponent.ts
Normal file
97
src/hooks/useComponent.ts
Normal file
@ -0,0 +1,97 @@
|
||||
import { ref } from 'vue'
|
||||
|
||||
// import WysiwygEditor from '@/WysiwygEditor.vue'
|
||||
// // import CodeEditor from '@/CodeEditor.vue'
|
||||
// import GridSettings from '~/views/GridSettings.vue'
|
||||
// import GridView from '~/views/GridView.vue'
|
||||
// import TableView from '~/views/TableView.vue'
|
||||
// import ListView from '~/views/ListView.vue'
|
||||
// import FormView from '~/views/FormView.vue'
|
||||
|
||||
// import TaFormView from '/app_modules/bm/ta/views/ta_form.vue'
|
||||
// import TaTableView from '/app_modules/bm/ta/views/ta_table.vue'
|
||||
// import TaListView from '/app_modules/bm/ta/views/ta_list.vue'
|
||||
|
||||
export enum DynComponent {
|
||||
// GridSettings,
|
||||
// GridJs,
|
||||
// TableView,
|
||||
// ListView,
|
||||
// FormView,
|
||||
// WysiwygEditor,
|
||||
// CodeEditor,
|
||||
}
|
||||
|
||||
const asideComponent = ref({})
|
||||
|
||||
const settingsComponent = ref({})
|
||||
|
||||
const fullSliderComponent = ref({})
|
||||
|
||||
const formViewComponent = ref({})
|
||||
|
||||
const dataViewComponent = ref({})
|
||||
|
||||
const topPaneComponent = ref({})
|
||||
|
||||
const bottomPaneComponent = ref({})
|
||||
|
||||
const moduleComponent = ref({})
|
||||
|
||||
const getModuleComponent = (key: string, target: string): any => {
|
||||
// switch (key) {
|
||||
// case 'ta':
|
||||
// switch (target) {
|
||||
// case 'form':
|
||||
// return TaFormView
|
||||
// break
|
||||
// case 'table':
|
||||
// return TaTableView
|
||||
// break
|
||||
// case 'list':
|
||||
// return TaListView
|
||||
// break
|
||||
// }
|
||||
// break
|
||||
// }
|
||||
}
|
||||
const getComponent = (cmpnt: DynComponent): any => {
|
||||
// switch (cmpnt) {
|
||||
// case DynComponent.WysiwygEditor:
|
||||
// return WysiwygEditor
|
||||
// break
|
||||
// // case DynComponent.CodeEditor:
|
||||
// // return CodeEditor
|
||||
// // break
|
||||
// case DynComponent.GridSettings:
|
||||
// return GridSettings
|
||||
// break
|
||||
// case DynComponent.GridJs:
|
||||
// return GridView
|
||||
// break
|
||||
// case DynComponent.TableView:
|
||||
// return TableView
|
||||
// break
|
||||
// case DynComponent.ListView:
|
||||
// return ListView
|
||||
// break
|
||||
// case DynComponent.FormView:
|
||||
// return FormView
|
||||
// break
|
||||
// }
|
||||
}
|
||||
|
||||
export default function useComponent() {
|
||||
return {
|
||||
getModuleComponent,
|
||||
asideComponent,
|
||||
settingsComponent,
|
||||
fullSliderComponent,
|
||||
dataViewComponent,
|
||||
formViewComponent,
|
||||
getComponent,
|
||||
topPaneComponent,
|
||||
bottomPaneComponent,
|
||||
moduleComponent,
|
||||
}
|
||||
}
|
||||
196
src/hooks/useState.ts
Normal file
196
src/hooks/useState.ts
Normal file
@ -0,0 +1,196 @@
|
||||
import { ref } from 'vue'
|
||||
import type { SideMenuItemType, UiPanelsType } from '~/typs/cmpnts'
|
||||
import { DataLangsType, ShowInfoType, HtmlAttrsType, ModelType, ModelSelType, CVDataType } from '~/typs/cv'
|
||||
import { VarsConfigType,ConfUrlsType } from '~/typs/config'
|
||||
import { VarsUserType} from '~/typs/users'
|
||||
|
||||
const reqError = ref({ defs: '', lang: '', data: '', gql: '', api: '' })
|
||||
|
||||
const currentMapKey = ref('')
|
||||
const isSidebarOpen = ref(false)
|
||||
const toggleSidebar = () => {
|
||||
isSidebarOpen.value = !isSidebarOpen.value
|
||||
}
|
||||
const showModal = ref(false)
|
||||
|
||||
const isAsidePanelOpen = ref(false)
|
||||
|
||||
const sideSettingButton = ref(false)
|
||||
|
||||
const isSettingsPanelOpen = ref(false)
|
||||
|
||||
const isSearchPanelOpen = ref(false)
|
||||
const usideSettingButton = ref(false)
|
||||
|
||||
const isNotificationsPanelOpen = ref(false)
|
||||
|
||||
const useSettings = ref(false)
|
||||
|
||||
const useSearch = ref(false)
|
||||
|
||||
const search = ref('')
|
||||
|
||||
const isDevelmode = ref(false)
|
||||
|
||||
const bcPath = ref('')
|
||||
|
||||
const navTitle = ref({
|
||||
text: '',
|
||||
textclick: null as null | Function,
|
||||
title: '',
|
||||
cmpnt: '',
|
||||
ops: [] as any[],
|
||||
btntype: '',
|
||||
cllbck: null as null | Function,
|
||||
})
|
||||
const dfltNavTitle = () => {
|
||||
navTitle.value = {
|
||||
text: '',
|
||||
textclick: null as null | Function,
|
||||
title: '',
|
||||
cmpnt: '',
|
||||
ops: [] as any[],
|
||||
btntype: '',
|
||||
cllbck: null as null | Function,
|
||||
}
|
||||
}
|
||||
|
||||
const bookCllbck = ref()
|
||||
const bookSelec = (data: string) => {
|
||||
if (data === '#') {
|
||||
bcPath.value = ''
|
||||
dfltNavTitle()
|
||||
}
|
||||
else {
|
||||
if (bookCllbck.value)
|
||||
bookCllbck.value(data)
|
||||
// else ...
|
||||
}
|
||||
}
|
||||
const sidebarMenuItems = ref([] as SideMenuItemType[])
|
||||
|
||||
const checkin = ref(false)
|
||||
const connection = ref({
|
||||
state: '',
|
||||
})
|
||||
|
||||
const side_menu_click = ref()
|
||||
const app_home_click = ref()
|
||||
|
||||
const backdrop_blur = ref(14)
|
||||
const back_opacity = ref(60)
|
||||
const panels = ref({} as UiPanelsType)
|
||||
|
||||
const show_profile = ref(false)
|
||||
|
||||
const cvdata = ref({} as CVDataType | any)
|
||||
const datalang = ref({} as DataLangsType | any)
|
||||
const showinfo = ref({} as ShowInfoType)
|
||||
const authinfo = ref({ editable: false, viewchange: false, show: true })
|
||||
|
||||
const dataSections = ref([] as string[])
|
||||
const htmlAttrs = ref({
|
||||
bold: '', //'itm-title',
|
||||
list: 'list-circle ml-5',
|
||||
link: 'link',
|
||||
text: '',
|
||||
} as HtmlAttrsType)
|
||||
|
||||
const cv_model = ref({} as ModelType)
|
||||
const models = ref({} as ModelType)
|
||||
const selectOps = ref({} as ModelSelType)
|
||||
const current_model = ref({} as ModelType)
|
||||
const current_modelid = ref("")
|
||||
|
||||
const APPNAME = ref('')
|
||||
const AUTHKEY = ref('auth')
|
||||
const UUIDNONE = ref('none')
|
||||
const TKNLIMIT = ref(20)
|
||||
const REFRESHTIME = ref(5)
|
||||
const ASSETS_PATH = ref("/assets")
|
||||
const DATA_PATH = ref("/assets/data")
|
||||
// const DATA_URL = ref("${DATA_PATH}/dist/info.json")
|
||||
const MODEL_ID = ref("cv")
|
||||
const URLKEY = ref("?k: ") // location.search.replace('?k: ','')
|
||||
const AUTH_SEPCHAR = ref(";")
|
||||
const PASSWD_ENC = ref("enc;")
|
||||
const ALLOW_REGISTER = ref(false)
|
||||
const RESET_PASSWORD = ref(false)
|
||||
|
||||
const CONFURLS = ref({} as ConfUrlsType)
|
||||
|
||||
const timeoutAuth = ref(0)
|
||||
const allowView = ref(false)
|
||||
const userID = ref('')
|
||||
|
||||
const sourceRoute = ref('')
|
||||
|
||||
const varsConfig = ref({} as VarsConfigType)
|
||||
const varsUser = ref({} as VarsUserType)
|
||||
|
||||
export default function useState() {
|
||||
return {
|
||||
reqError,
|
||||
currentMapKey,
|
||||
isSidebarOpen,
|
||||
toggleSidebar,
|
||||
isAsidePanelOpen,
|
||||
isSettingsPanelOpen,
|
||||
isSearchPanelOpen,
|
||||
isNotificationsPanelOpen,
|
||||
useSettings,
|
||||
usideSettingButton,
|
||||
sideSettingButton,
|
||||
bcPath,
|
||||
bookSelec,
|
||||
bookCllbck,
|
||||
navTitle,
|
||||
dfltNavTitle,
|
||||
checkin,
|
||||
connection,
|
||||
sidebarMenuItems,
|
||||
showModal,
|
||||
side_menu_click,
|
||||
app_home_click,
|
||||
useSearch,
|
||||
search,
|
||||
back_opacity,
|
||||
backdrop_blur,
|
||||
panels,
|
||||
show_profile,
|
||||
cvdata,
|
||||
datalang,
|
||||
showinfo,
|
||||
authinfo,
|
||||
dataSections,
|
||||
htmlAttrs,
|
||||
selectOps,
|
||||
models,
|
||||
cv_model,
|
||||
current_model,
|
||||
current_modelid,
|
||||
timeoutAuth,
|
||||
isDevelmode,
|
||||
allowView,
|
||||
userID,
|
||||
sourceRoute,
|
||||
varsConfig,
|
||||
varsUser,
|
||||
|
||||
// APP CONFIG VARS
|
||||
APPNAME,
|
||||
AUTHKEY,
|
||||
UUIDNONE,
|
||||
TKNLIMIT,
|
||||
REFRESHTIME,
|
||||
ASSETS_PATH,
|
||||
DATA_PATH,
|
||||
MODEL_ID,
|
||||
URLKEY,
|
||||
AUTH_SEPCHAR,
|
||||
PASSWD_ENC,
|
||||
ALLOW_REGISTER,
|
||||
RESET_PASSWORD,
|
||||
CONFURLS,
|
||||
}
|
||||
}
|
||||
178
src/hooks/utils.ts
Normal file
178
src/hooks/utils.ts
Normal file
@ -0,0 +1,178 @@
|
||||
import Toastify from 'toastify-js'
|
||||
import useState from '~/hooks/useState'
|
||||
import { checkAuth} from '~/hooks/utilsAuth'
|
||||
import { MessageType} from '~/typs'
|
||||
import 'toastify-js/src/toastify.css'
|
||||
|
||||
export const show_message = (typ: MessageType, msg: string, timeout?: number, cllbck?: any): void => {
|
||||
let cssClass = 'msg-box'
|
||||
switch (typ) {
|
||||
case MessageType.Show:
|
||||
cssClass += ' msg-show'
|
||||
break
|
||||
case MessageType.Success:
|
||||
cssClass += ' msg-ok'
|
||||
break
|
||||
case MessageType.Error:
|
||||
cssClass += ' msg-error'
|
||||
break
|
||||
case MessageType.Warning:
|
||||
cssClass += ' msg-warn'
|
||||
break
|
||||
case MessageType.Info:
|
||||
cssClass += ' msg-info'
|
||||
break
|
||||
}
|
||||
// https://github.com/apvarun/toastify-js
|
||||
Toastify({
|
||||
text: msg,
|
||||
duration: timeout || 3000,
|
||||
//destination: '',
|
||||
//selector: '',
|
||||
// newWindow: true,
|
||||
// close: true,
|
||||
className: cssClass,
|
||||
offset: {
|
||||
x: 10, // horizontal axis - can be a number or a string indicating unity. eg: '2em'
|
||||
y: 50, // vertical axis - can be a number or a string indicating unity. eg: '2em
|
||||
},
|
||||
gravity: 'top', // `top` or `bottom`
|
||||
position: 'left', // `left`, `center` or `right`
|
||||
// backgroundColor: 'linear-gradient(to right, #00b09b, #96c93d)',
|
||||
stopOnFocus: true, // Prevents dismissing of toast on hover
|
||||
callback: cllbck
|
||||
// onClick() {}, // Callback after click
|
||||
}).showToast()
|
||||
}
|
||||
|
||||
export const translate = (store: any, map: string, ky: string, ctx: string, dflt?: string): string => {
|
||||
const val = dflt || ky
|
||||
const lang: any = {}
|
||||
if (lang && lang.value)
|
||||
return lang.value[ctx] && lang.value[ctx][ky] ? lang.value[ctx][ky] : val
|
||||
else if (lang && lang[ctx])
|
||||
return lang[ctx][ky] ? lang[ctx][ky] : val
|
||||
else
|
||||
return val
|
||||
}
|
||||
export const fetch_text = async(path: RequestInfo): Promise<any> => {
|
||||
try {
|
||||
const response = await fetch(path)
|
||||
return !response.ok ? response.text() : new Error('No items found')
|
||||
}
|
||||
catch (err) {
|
||||
return err
|
||||
}
|
||||
}
|
||||
const request_headers = async (with_auth: boolean): Promise<[any, string]> => {
|
||||
const headers: any = {} // { 'Content-Type': 'application/json' }
|
||||
headers['Accept']='application/json'
|
||||
let error= ''
|
||||
if (with_auth) {
|
||||
const token = await checkAuth()
|
||||
if (token && token.length > 0) {
|
||||
headers['Authorization'] =`Bearer ${token}`
|
||||
} else {
|
||||
return [null,`error no auth found`]
|
||||
}
|
||||
}
|
||||
return [headers, error]
|
||||
}
|
||||
export const fetch_json = async(path: RequestInfo, timeout = 2000, with_auth = false, cllbck?: any): Promise<any> => {
|
||||
useState().connection.value.state = ''
|
||||
let res = null
|
||||
let error = ''
|
||||
const showError = (err: string) => {
|
||||
show_message(MessageType.Error, `'Data Load' -> ${err}`,5000)
|
||||
useState().connection.value.state = 'connection.error'
|
||||
}
|
||||
const [headers,errorHeader] = await request_headers(with_auth)
|
||||
if (errorHeader.length > 0) {
|
||||
return [null,errorHeader]
|
||||
}
|
||||
try {
|
||||
const response = await self.fetch(path, {
|
||||
method: 'GET',
|
||||
headers,
|
||||
//mode: 'cors',
|
||||
})
|
||||
res = await response.json()
|
||||
if (!response.ok && res.message.length > 0)
|
||||
error=res.message
|
||||
}
|
||||
catch (err: any) {
|
||||
error = err
|
||||
}
|
||||
if (error.length > 0)
|
||||
showError(error)
|
||||
return [res,error]
|
||||
}
|
||||
export const send_data = async(url: string, formData: any, with_auth = true, show = true, cllbck?: any): Promise<any> => {
|
||||
const [headers,errorHeader] = await request_headers(with_auth)
|
||||
if (errorHeader.length > 0) {
|
||||
return [null,errorHeader]
|
||||
}
|
||||
headers['Content-Type'] = 'application/json'
|
||||
let formDataJsonString = ''
|
||||
try {
|
||||
formDataJsonString = JSON.stringify(formData)
|
||||
}
|
||||
catch (e) {
|
||||
console.log(e)
|
||||
return [null,e]
|
||||
}
|
||||
try {
|
||||
const response = await fetch(url, {
|
||||
method: 'POST',
|
||||
headers,
|
||||
body: formDataJsonString,
|
||||
})
|
||||
if (!response.ok && response.status !== 200) {
|
||||
const errorMessage = await response.json()
|
||||
console.log(errorMessage)
|
||||
if (show)
|
||||
show_message(MessageType.Error, `Send data -> ${errorMessage.error ? errorMessage.error : ''}`)
|
||||
return [null,errorMessage]
|
||||
// throw new Error(errorMessage)
|
||||
} else if (response.ok && response.status === 200) {
|
||||
const res = await response.json()
|
||||
if (cllbck) {
|
||||
cllbck(res)
|
||||
}
|
||||
return [res,null]
|
||||
}
|
||||
}
|
||||
catch (e) {
|
||||
if (show)
|
||||
show_message(MessageType.Error, `Send data -> ${e}`)
|
||||
useState().connection.value.state = 'connection.error'
|
||||
console.log(e)
|
||||
return [null,e]
|
||||
}
|
||||
}
|
||||
export const run_task = (val: number, task: Function) => {
|
||||
const now = new Date().getTime()
|
||||
const timePassed = now % val
|
||||
const run_at = val - timePassed
|
||||
setTimeout(task, run_at)
|
||||
}
|
||||
|
||||
export const parse_str_json_data = (src: string, dflt: object|any):object|any => {
|
||||
let data = dflt
|
||||
try {
|
||||
data = JSON.parse(src)
|
||||
}
|
||||
catch (e) {
|
||||
data = dflt
|
||||
}
|
||||
return data
|
||||
}
|
||||
export default {
|
||||
fetch_text,
|
||||
fetch_json,
|
||||
send_data,
|
||||
show_message,
|
||||
translate,
|
||||
run_task,
|
||||
parse_str_json_data,
|
||||
}
|
||||
270
src/hooks/utilsAuth.ts
Normal file
270
src/hooks/utilsAuth.ts
Normal file
@ -0,0 +1,270 @@
|
||||
import useState from '~/hooks/useState'
|
||||
import { MessageType} from '~/typs'
|
||||
import { show_message } from './utils.js'
|
||||
|
||||
export const check_credentials = async(url: string, data: any): Promise<any> => {
|
||||
let dataJsonString = ''
|
||||
try {
|
||||
dataJsonString = JSON.stringify(data)
|
||||
}
|
||||
catch (e) {
|
||||
console.log(e)
|
||||
return
|
||||
}
|
||||
try {
|
||||
const response = await fetch(url, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: dataJsonString,
|
||||
})
|
||||
if (!response.ok) {
|
||||
const errorMessage = await response.text()
|
||||
// throw new Error(errorMessage)
|
||||
console.log(errorMessage)
|
||||
return
|
||||
}
|
||||
if (response.ok && response.status === 200)
|
||||
return response.json()
|
||||
}
|
||||
catch (e) {
|
||||
useState().connection.value.state = 'connection.error'
|
||||
console.log(e)
|
||||
}
|
||||
}
|
||||
export const parseJwt = (token: string|null): any => {
|
||||
let res = {}
|
||||
if (token && token.length === 0 || token === "?") {
|
||||
return res
|
||||
}
|
||||
if (token) {
|
||||
try {
|
||||
const base64Url = token.split('.')[1];
|
||||
const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
|
||||
const jsonPayload = decodeURIComponent(atob(base64).split('').map((c) =>
|
||||
'%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2)
|
||||
).join(''));
|
||||
res = JSON.parse(jsonPayload);
|
||||
} catch(e) {
|
||||
console.log(e)
|
||||
localStorage.removeItem(useState().AUTHKEY.value)
|
||||
}
|
||||
}
|
||||
return res
|
||||
}
|
||||
export const authExpired = (): boolean => {
|
||||
const payload = parseJwt(localStorage.getItem(useState().AUTHKEY.value))
|
||||
if (payload.exp) {
|
||||
const now = Date.now() / 1000;
|
||||
return payload.exp - now < 0
|
||||
} else {
|
||||
return true
|
||||
}
|
||||
}
|
||||
export const onTimeoutAuth = () => {
|
||||
if (useState().timeoutAuth.value > 0) {
|
||||
if (useState().isDevelmode.value)
|
||||
console.log(`timeout already set to: ${useState().timeoutAuth.value}`)
|
||||
return
|
||||
}
|
||||
const payload = parseJwt(localStorage.getItem(useState().AUTHKEY.value))
|
||||
const now = Date.now() / 1000;
|
||||
if (payload.exp) {
|
||||
let timeout = Math.round(payload.exp - now)
|
||||
const limit = useState().TKNLIMIT.value * 60
|
||||
timeout = timeout < limit ? timeout - (useState().REFRESHTIME.value * 60) : limit - (useState().REFRESHTIME.value * 60)
|
||||
timeout = timeout < 0 ? 100 : timeout
|
||||
useState().timeoutAuth.value = timeout
|
||||
if (useState().isDevelmode.value)
|
||||
console.log(`AUTH timeout(${limit}): ${timeout} [${Math.round(payload.exp - now)}]`)
|
||||
setTimeout(() => {
|
||||
const r = async() => {
|
||||
useState().timeoutAuth.value=0
|
||||
await refreshAuth()
|
||||
}
|
||||
r()
|
||||
}, (timeout*1000))
|
||||
}
|
||||
}
|
||||
export const refreshAuth = async(val = 0) => {
|
||||
const url = useState().CONFURLS.value.refreshauth || ''
|
||||
if (url.length == 0) {
|
||||
console.log('URL not found for refreshToken')
|
||||
return
|
||||
}
|
||||
let res: any = '', error: any = ''
|
||||
const headers: any = {} // { 'Content-Type': 'application/json' }
|
||||
headers['Accept']='application/json'
|
||||
const token = localStorage.getItem(useState().AUTHKEY.value)
|
||||
if (token && token.length > 0) {
|
||||
headers['Authorization'] =`Bearer ${token}`
|
||||
}
|
||||
try {
|
||||
const response = await self.fetch(url, {
|
||||
method: 'GET',
|
||||
headers,
|
||||
//mode: 'cors',
|
||||
})
|
||||
res = await response.json()
|
||||
if (!response.ok && res.message && res.message.length > 0)
|
||||
error=res.message
|
||||
}
|
||||
catch (err: any) {
|
||||
error = err.message
|
||||
}
|
||||
if (res && res.error && res.error.length > 0) {
|
||||
error = res.error
|
||||
}
|
||||
if (error && error.length > 0) {
|
||||
show_message(MessageType.Error, `'Auth Refresh' -> ${error}`,5000)
|
||||
useState().connection.value.state = 'connection.error'
|
||||
setTimeout(() => {
|
||||
location.href = '/logout'
|
||||
}, 1000)
|
||||
return
|
||||
}
|
||||
if (res && res[useState().AUTHKEY.value]) {
|
||||
localStorage.setItem(useState().AUTHKEY.value,res[useState().AUTHKEY.value])
|
||||
console.log(`New auth: ${localStorage.getItem(useState().AUTHKEY.value)}`)
|
||||
onTimeoutAuth()
|
||||
}
|
||||
}
|
||||
export const getAuth = async(urlpath = '',val = 0): Promise<[any,string]> => {
|
||||
const urlkey = location.search.replace(useState().URLKEY.value,'')
|
||||
const uuid = urlkey.length > 0 ? urlkey : useState().UUIDNONE.value
|
||||
const url = urlpath.length > 0 ? urlpath : (useState().CONFURLS.value.auth ? useState().CONFURLS.value.auth.replace('URLKEY',uuid) : '')
|
||||
if (url.length === 0) {
|
||||
console.log('URL not found to get Auth')
|
||||
return [null,'']
|
||||
}
|
||||
let res: any = ''
|
||||
let errmsg: any = ''
|
||||
try {
|
||||
const response = await self.fetch(url, {
|
||||
method: 'GET',
|
||||
//mode: 'cors',
|
||||
})
|
||||
res = await response.json()
|
||||
if (!response.ok && res.message.length > 0)
|
||||
errmsg=res.message
|
||||
}
|
||||
catch (e: any) {
|
||||
errmsg = e.message
|
||||
}
|
||||
if (errmsg && errmsg.length > 0) {
|
||||
show_message(MessageType.Error, `'Auth Data Load' -> ${errmsg}`,5000)
|
||||
useState().connection.value.state = 'connection.error'
|
||||
}
|
||||
if (res && res.auth) {
|
||||
if (res.auth === "?") {
|
||||
useState().userID.value = "?"
|
||||
} else {
|
||||
useState().userID.value = res.user ? res.user : ''
|
||||
localStorage.setItem(useState().AUTHKEY.value,res.auth)
|
||||
onTimeoutAuth()
|
||||
}
|
||||
}
|
||||
return [res,errmsg]
|
||||
}
|
||||
export const checkUserAuth = async(val: string): Promise<boolean> => {
|
||||
if (val.length === 0) {
|
||||
return false
|
||||
}
|
||||
const urlkey = location.search.replace(useState().URLKEY.value,'')
|
||||
const uuid = urlkey.length > 0 ? urlkey : useState().UUIDNONE.value
|
||||
const urlpath = useState().CONFURLS.value.auth ? useState().CONFURLS.value.auth.replace('URLKEY',uuid) : ''
|
||||
if (urlpath.length === 0) {
|
||||
console.log('URL not found to check Auth')
|
||||
return false
|
||||
}
|
||||
const psw = btoa(val)
|
||||
const url = `${urlpath}${useState().AUTH_SEPCHAR.value}${psw}`
|
||||
const [res,errmsg] = await getAuth(url,0)
|
||||
if (errmsg.length === 0 && res && res.user) {
|
||||
useState().allowView.value=true
|
||||
const payload = parseJwt(localStorage.getItem(useState().AUTHKEY.value))
|
||||
if (payload && payload.id && payload.id === res.user) {
|
||||
return true
|
||||
}
|
||||
}
|
||||
return false
|
||||
}
|
||||
export const checkPerms = async(auth: string|null): Promise<boolean> => {
|
||||
if (auth && auth.length === 0 || auth === '?')
|
||||
return false
|
||||
if (useState().allowView.value)
|
||||
return true
|
||||
const payload = parseJwt(auth)
|
||||
if (payload && payload.uuid && payload.uuid !== useState().UUIDNONE.value) {
|
||||
useState().allowView.value=false
|
||||
return true
|
||||
}
|
||||
useState().allowView.value=true
|
||||
return true
|
||||
}
|
||||
export const checkAuth = async(urlpath = '',val = 0): Promise<string|null> => {
|
||||
if (authExpired()) {
|
||||
const [res,errmsg] = await getAuth(urlpath,val)
|
||||
if (errmsg.length === 0 && res && res.auth) {
|
||||
return await checkPerms(res.auth) ? res.auth : ''
|
||||
}
|
||||
return ''
|
||||
}
|
||||
if (location.pathname === '/' && useState().URLKEY.value.length > 0) {
|
||||
const urlkey = location.search.replace(useState().URLKEY.value,'')
|
||||
const uuid = urlkey.length > 0 ? urlkey : useState().UUIDNONE.value
|
||||
const data = authData()
|
||||
if (data.payload && data.payload.uuid && data.payload.uuid !== uuid) {
|
||||
const url = useState().CONFURLS.value.auth ? useState().CONFURLS.value.auth.replace('URLKEY',uuid) : ''
|
||||
if (url.length === 0) {
|
||||
console.log('URL not found to check Perms')
|
||||
return ''
|
||||
}
|
||||
const [res,_err] = await getAuth(url,val)
|
||||
if (res.auth) {
|
||||
return await checkPerms(res.auth) ? res.auth : ''
|
||||
}
|
||||
return ''
|
||||
} else {
|
||||
onTimeoutAuth()
|
||||
return await checkPerms(data.auth) ? data.auth : ''
|
||||
}
|
||||
} else {
|
||||
const data = authData()
|
||||
if (data.payload && data.payload.id)
|
||||
useState().userID.value = data.payload.id
|
||||
else
|
||||
return ''
|
||||
}
|
||||
onTimeoutAuth()
|
||||
const res: string|null = localStorage.getItem(useState().AUTHKEY.value)
|
||||
return await checkPerms(res) ? res : ''
|
||||
}
|
||||
export const authData = ():any => {
|
||||
const auth = localStorage.getItem(useState().AUTHKEY.value) || ''
|
||||
const uidefs = {}
|
||||
const payload = parseJwt(localStorage.getItem(useState().AUTHKEY.value))
|
||||
return {auth, payload, uidefs}
|
||||
}
|
||||
export const is_logged_user = (): boolean => {
|
||||
const urlkey = location.search.replace(useState().URLKEY.value, '')
|
||||
if (urlkey.length > 0) {
|
||||
if (authExpired()) {
|
||||
return false
|
||||
}
|
||||
return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
export default {
|
||||
check_credentials,
|
||||
parseJwt,
|
||||
authExpired,
|
||||
checkAuth,
|
||||
checkUserAuth,
|
||||
refreshAuth,
|
||||
getAuth,
|
||||
authData,
|
||||
is_logged_user,
|
||||
}
|
||||
13
src/hooks/validation.ts
Normal file
13
src/hooks/validation.ts
Normal file
@ -0,0 +1,13 @@
|
||||
import { InputValueOption,InputValidateOption} from '~/typs/inputs'
|
||||
|
||||
export const input_validate = (typ: InputValueOption, validator: InputValidateOption, val: any): boolean => {
|
||||
switch (validator) {
|
||||
case InputValidateOption.none:
|
||||
// if (typ === InputValueOption.number) {
|
||||
// }
|
||||
break
|
||||
case InputValidateOption.mail:
|
||||
return val.includes('@')
|
||||
}
|
||||
return true
|
||||
}
|
||||
11
src/layouts/Default.vue
Normal file
11
src/layouts/Default.vue
Normal file
@ -0,0 +1,11 @@
|
||||
<template>
|
||||
<main class="px-4 py-10 text-center text-gray-700 dark:text-gray-200">
|
||||
<transition name="fade">
|
||||
<router-view />
|
||||
</transition>
|
||||
<Footer />
|
||||
<div class="mt-5 mx-auto text-center opacity-25 text-sm">
|
||||
[Default Layout]
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
8
src/layouts/SimpleLayout.vue
Normal file
8
src/layouts/SimpleLayout.vue
Normal file
@ -0,0 +1,8 @@
|
||||
<template>
|
||||
<div class="antialiased text-gray-900 bg-white">
|
||||
<slot />
|
||||
</div>
|
||||
<Footer />
|
||||
</template>
|
||||
|
||||
<script setup></script>
|
||||
25
src/logics/dark.ts
Normal file
25
src/logics/dark.ts
Normal file
@ -0,0 +1,25 @@
|
||||
import { watch, computed } from 'vue'
|
||||
import { usePreferredDark, useToggle } from '@vueuse/core'
|
||||
import { colorSchema } from './store'
|
||||
|
||||
const preferredDark = usePreferredDark()
|
||||
|
||||
export const isDark = computed({
|
||||
get() {
|
||||
return colorSchema.value === 'auto' ? preferredDark.value : colorSchema.value === 'dark'
|
||||
},
|
||||
set(v: boolean) {
|
||||
if (v === preferredDark.value)
|
||||
colorSchema.value = 'auto'
|
||||
else
|
||||
colorSchema.value = v ? 'dark' : 'light'
|
||||
},
|
||||
})
|
||||
|
||||
export const toggleDark = useToggle(isDark)
|
||||
|
||||
watch(
|
||||
isDark,
|
||||
v => typeof document !== 'undefined' && document.documentElement.classList.toggle('dark', v),
|
||||
{ immediate: true },
|
||||
)
|
||||
1
src/logics/index.ts
Normal file
1
src/logics/index.ts
Normal file
@ -0,0 +1 @@
|
||||
export * from './dark'
|
||||
4
src/logics/store.ts
Normal file
4
src/logics/store.ts
Normal file
@ -0,0 +1,4 @@
|
||||
import { Ref } from 'vue'
|
||||
import { useStorage } from '@vueuse/core'
|
||||
|
||||
export const colorSchema = useStorage('vueuse-color-scheme', 'auto') as Ref<'auto' | 'dark' | 'light'>
|
||||
35
src/main.ts
Normal file
35
src/main.ts
Normal file
@ -0,0 +1,35 @@
|
||||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
|
||||
import '@unocss/reset/tailwind.css'
|
||||
import './styles/main.css'
|
||||
import 'uno.css'
|
||||
import { createI18n } from 'vue-i18n'
|
||||
import { createHead, useHead } from '@vueuse/head'
|
||||
import { messages } from './modules/i18n'
|
||||
import VueHighlightJS from 'vue3-highlightjs'
|
||||
import 'highlight.js/styles/solarized-light.css'
|
||||
|
||||
const app = createApp(App)
|
||||
|
||||
app.use(VueHighlightJS)
|
||||
import routes from './router'
|
||||
//import AppLayout from '~/layouts/AppLayout.vue'
|
||||
import SimpleLayout from '~/layouts/SimpleLayout.vue'
|
||||
|
||||
const i18n = createI18n({
|
||||
locale: navigator.language === 'es' ? 'es' : 'en',
|
||||
legacy: false,
|
||||
fallbackLocale: ['en'],
|
||||
fallbackWarn: false,
|
||||
missing: (locale, key, instance) => {
|
||||
console.warn(`detect '${key}' key missing in '${locale}'`)
|
||||
},
|
||||
messages,
|
||||
})
|
||||
const head = createHead()
|
||||
app.use(routes)
|
||||
app.use(i18n)
|
||||
app.use(head)
|
||||
app.component('SimpleLayout', SimpleLayout)
|
||||
app.mount('#app')
|
||||
11
src/modules/README.md
Normal file
11
src/modules/README.md
Normal file
@ -0,0 +1,11 @@
|
||||
## Modules
|
||||
|
||||
A custom user module system. Place a `.ts` file with the following template, it will be installed automatically.
|
||||
|
||||
```ts
|
||||
import { UserModule } from '~/types'
|
||||
|
||||
export const install: UserModule = ({ app, router, isClient }) => {
|
||||
// do something
|
||||
}
|
||||
```
|
||||
25
src/modules/i18n.ts
Normal file
25
src/modules/i18n.ts
Normal file
@ -0,0 +1,25 @@
|
||||
import { createI18n } from 'vue-i18n'
|
||||
// import { UserModule } from '~/types'
|
||||
|
||||
// import i18n resources
|
||||
// https://vitejs.dev/guide/features.html#glob-import
|
||||
export const messages = Object.fromEntries(
|
||||
Object.entries(
|
||||
import.meta.globEager('../../locales/*.y(a)?ml'))
|
||||
.map(([key, value]) => {
|
||||
const yaml = key.endsWith('.yaml')
|
||||
return [key.slice(14, yaml ? -5 : -4), value.default]
|
||||
}),
|
||||
)
|
||||
/*
|
||||
export const install: UserModule = ({ app }) => {
|
||||
const i18n = createI18n({
|
||||
legacy: false,
|
||||
locale: 'en',
|
||||
messages,
|
||||
})
|
||||
|
||||
app.use(i18n)
|
||||
}
|
||||
|
||||
*/
|
||||
9
src/modules/nprogress.ts
Normal file
9
src/modules/nprogress.ts
Normal file
@ -0,0 +1,9 @@
|
||||
import NProgress from 'nprogress'
|
||||
import { UserModule } from '~/types'
|
||||
|
||||
export const install: UserModule = ({ isClient, router }) => {
|
||||
if (isClient) {
|
||||
router.beforeEach(() => { NProgress.start() })
|
||||
router.afterEach(() => { NProgress.done() })
|
||||
}
|
||||
}
|
||||
12
src/modules/sw.ts
Normal file
12
src/modules/sw.ts
Normal file
@ -0,0 +1,12 @@
|
||||
import { UserModule } from '~/types'
|
||||
|
||||
export const install: UserModule = ({ isClient, router }) => {
|
||||
if (isClient) {
|
||||
router.isReady().then(async() => {
|
||||
if (isClient) {
|
||||
const { registerSW } = await import('virtual:pwa-register')
|
||||
registerSW({ immediate: true })
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
21
src/pages/About.md
Normal file
21
src/pages/About.md
Normal file
@ -0,0 +1,21 @@
|
||||
---
|
||||
title: About
|
||||
---
|
||||
|
||||
<div class="text-center">
|
||||
<!-- You can use Vue components inside markdown -->
|
||||
<carbon-dicom-overlay class="text-4xl mb-6 m-auto" />
|
||||
<h3>About</h3>
|
||||
</div>
|
||||
|
||||
[Vitesse](https://github.com/antfu/vitesse) is an opinionated [Vite](https://github.com/vitejs/vite) starter template made by [@antfu](https://github.com/antfu) for mocking apps swiftly. With **file-based routing**, **components auto importing**, **markdown support**, I18n, PWA and uses **Tailwind** v2 for UI.
|
||||
|
||||
<pre v-highlightjs><code class="javascript">
|
||||
// syntax highlighting example
|
||||
function vitesse() {
|
||||
const foo = 'bar'
|
||||
console.log(foo)
|
||||
}
|
||||
</code></pre>
|
||||
|
||||
heck out the [GitHub repo](https://github.com/antfu/vitesse) for more details.
|
||||
20
src/pages/README.md
Normal file
20
src/pages/README.md
Normal file
@ -0,0 +1,20 @@
|
||||
## File-based Routing
|
||||
|
||||
Routes will be auto-generated for Vue files in this dir with the same file structure.
|
||||
Check out [`vite-plugin-pages`](https://github.com/hannoeru/vite-plugin-pages) for more details.
|
||||
|
||||
### Path Aliasing
|
||||
|
||||
`~/` is aliased to `./src/` folder.
|
||||
|
||||
For example, instead of having
|
||||
|
||||
```ts
|
||||
import { isDark } from '../../../../composables'
|
||||
```
|
||||
|
||||
now, you can use
|
||||
|
||||
```ts
|
||||
import { isDark } from '~/composables'
|
||||
```
|
||||
5
src/pages/[...all].vue
Executable file
5
src/pages/[...all].vue
Executable file
@ -0,0 +1,5 @@
|
||||
<template>
|
||||
<div>
|
||||
Not Found
|
||||
</div>
|
||||
</template>
|
||||
50
src/pages/base.vue
Normal file
50
src/pages/base.vue
Normal file
@ -0,0 +1,50 @@
|
||||
<script setup lang="ts">
|
||||
const name = ref('')
|
||||
|
||||
const router = useRouter()
|
||||
const go = () => {
|
||||
if (name.value)
|
||||
router.push(`/hi/${encodeURIComponent(name.value)}`)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div i-carbon-campsite text-4xl inline-block />
|
||||
<p>
|
||||
<a rel="noreferrer" href="https://github.com/antfu/vitesse-lite" target="_blank">
|
||||
Vitesse Lite
|
||||
</a>
|
||||
</p>
|
||||
<p>
|
||||
<em text-sm op75>Opinionated Vite Starter Template</em>
|
||||
</p>
|
||||
|
||||
<div py-4 />
|
||||
|
||||
<input
|
||||
id="input"
|
||||
v-model="name"
|
||||
placeholder="What's your name?"
|
||||
type="text"
|
||||
autocomplete="false"
|
||||
p="x-4 y-2"
|
||||
w="250px"
|
||||
text="center"
|
||||
bg="transparent"
|
||||
border="~ rounded gray-200 dark:gray-700"
|
||||
outline="none active:none"
|
||||
@keydown.enter="go"
|
||||
>
|
||||
|
||||
<div>
|
||||
<button
|
||||
class="m-3 text-sm btn"
|
||||
:disabled="!name"
|
||||
@click="go"
|
||||
>
|
||||
Go
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
25
src/pages/hi/[name].vue
Normal file
25
src/pages/hi/[name].vue
Normal file
@ -0,0 +1,25 @@
|
||||
<script setup lang="ts">
|
||||
const props = defineProps<{ name: string }>()
|
||||
const router = useRouter()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div i-carbon-pedestrian text-4xl inline-block />
|
||||
<p>
|
||||
Hi, {{ props.name }}
|
||||
</p>
|
||||
<p text-sm op50>
|
||||
<em>Dynamic route!</em>
|
||||
</p>
|
||||
|
||||
<div>
|
||||
<button
|
||||
class="btn m-3 text-sm mt-8"
|
||||
@click="router.back()"
|
||||
>
|
||||
Back
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
160
src/router.ts
Normal file
160
src/router.ts
Normal file
@ -0,0 +1,160 @@
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
|
||||
|
||||
// import { defineAsyncComponent } from 'vue'
|
||||
import generatedRoutes from 'virtual:generated-pages'
|
||||
|
||||
import useState from '~/hooks/useState'
|
||||
import {has_config} from '~/hooks/config'
|
||||
import {authExpired} from '~/hooks/utilsAuth'
|
||||
|
||||
// // const Login = defineAsyncComponent(() => import('./views/Login.vue'))
|
||||
|
||||
import Home from '~/views/Home.vue'
|
||||
import Config from '~/views/Config.vue'
|
||||
import Tracking from '~/views/Tracking.vue'
|
||||
import Users from '~/views/Users.vue'
|
||||
//import About from '~/pages/About.md'
|
||||
import Register from '~/views/Register.vue'
|
||||
import Login from '~/views/Login.vue'
|
||||
import Logout from '~/views/Logout.vue'
|
||||
|
||||
// https://medium.com/swlh/adding-meta-fields-and-transitions-to-vue-router-routes-f5cb78a7ed97
|
||||
const check_config = async(to: any, _from: any, next: any) => {
|
||||
if (await has_config()) {
|
||||
next()
|
||||
} else {
|
||||
next('/noconfig')
|
||||
}
|
||||
}
|
||||
const check_auth = async(to: any, _from: any, next: any) => {
|
||||
if (await has_config()) {
|
||||
if (authExpired()) {
|
||||
useState().sourceRoute.value = to.path
|
||||
next('/login')
|
||||
} else {
|
||||
useState().sourceRoute.value = ""
|
||||
next()
|
||||
}
|
||||
} else {
|
||||
next('/login')
|
||||
}
|
||||
}
|
||||
const routes: RouteRecordRaw[] = [
|
||||
{
|
||||
path: '/config',
|
||||
name: 'Config',
|
||||
component: Config,
|
||||
meta: {
|
||||
layout: 'AppLayout',
|
||||
ctx: 'config',
|
||||
withauth: true,
|
||||
},
|
||||
beforeEnter: check_auth,
|
||||
},
|
||||
{
|
||||
path: '/tracking',
|
||||
name: 'Tracking',
|
||||
component: Tracking,
|
||||
meta: {
|
||||
requireAuth: true,
|
||||
layout: 'AppLayout',
|
||||
withauth: true,
|
||||
},
|
||||
beforeEnter: check_auth,
|
||||
},
|
||||
{
|
||||
path: '/users',
|
||||
name: 'Users',
|
||||
component: Users,
|
||||
meta: {
|
||||
requireAuth: true,
|
||||
layout: 'AppLayout',
|
||||
withauth: true,
|
||||
},
|
||||
beforeEnter: check_auth,
|
||||
},
|
||||
{
|
||||
path: '/',
|
||||
name: 'Home',
|
||||
component: Home,
|
||||
meta: {
|
||||
ctx: 'home',
|
||||
withauth: true,
|
||||
},
|
||||
beforeEnter: check_auth,
|
||||
},
|
||||
{
|
||||
path: '/login',
|
||||
name: 'Login',
|
||||
component: Login,
|
||||
meta: {
|
||||
requireAuth: false,
|
||||
//layout: 'empty',
|
||||
layout: 'AppLayout',
|
||||
use_logo: true,
|
||||
ctx: 'login',
|
||||
withauth: false,
|
||||
},
|
||||
beforeEnter: check_config,
|
||||
},
|
||||
{
|
||||
path: '/register/:id',
|
||||
name: 'Register',
|
||||
component: Register,
|
||||
meta: {
|
||||
requireAuth: false,
|
||||
//layout: 'empty',
|
||||
layout: 'AppLayout',
|
||||
use_logo: true,
|
||||
ctx: 'register',
|
||||
withauth: false,
|
||||
},
|
||||
beforeEnter: check_config,
|
||||
},
|
||||
{
|
||||
path: '/recoveryuser/:id',
|
||||
name: 'Recovery',
|
||||
component: Register,
|
||||
meta: {
|
||||
requireAuth: false,
|
||||
//layout: 'empty',
|
||||
layout: 'AppLayout',
|
||||
use_logo: true,
|
||||
ctx: 'register',
|
||||
withauth: false,
|
||||
},
|
||||
beforeEnter: check_config,
|
||||
},
|
||||
{
|
||||
path: '/logout',
|
||||
name: 'Logout',
|
||||
component: Logout,
|
||||
meta: {
|
||||
layout: 'AppLayout',
|
||||
use_logo: true,
|
||||
requireAuth: false,
|
||||
ctx: 'logout',
|
||||
withauth: false,
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/noconfig',
|
||||
name: 'NoConfig',
|
||||
component: () => import('./views/404.vue'),
|
||||
meta: {
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/:catchAll(.*)',
|
||||
name: '404',
|
||||
meta: { layout: 'Page404' },
|
||||
component: () => import('./views/404.vue'),
|
||||
},
|
||||
...generatedRoutes,
|
||||
]
|
||||
const router: any = createRouter({
|
||||
history: createWebHistory(),
|
||||
routes,
|
||||
})
|
||||
export default router
|
||||
62
src/shims.d.ts
vendored
Normal file
62
src/shims.d.ts
vendored
Normal file
@ -0,0 +1,62 @@
|
||||
/* eslint-disable import/no-duplicates */
|
||||
|
||||
declare const ASSETS_PATH: string
|
||||
declare const DATA_PATH: string
|
||||
declare interface Window {
|
||||
// extend the window
|
||||
ROOT_LOCATION: string
|
||||
CONFIG_LOCATION: string
|
||||
VARSCONFIG_LOCATION: string
|
||||
SERVCONFIG_LOCATION: string
|
||||
}
|
||||
|
||||
// with vite-plugin-md, markdowns can be treat as Vue components
|
||||
declare module '*.md' {
|
||||
import { ComponentOptions } from 'vue'
|
||||
const component: ComponentOptions
|
||||
export default component
|
||||
}
|
||||
/*
|
||||
declare module '*.vue' {
|
||||
import Vue from 'vue'
|
||||
export default Vue
|
||||
}
|
||||
*/
|
||||
declare const _APP_VERSION: string
|
||||
/*
|
||||
* Keep states in the global scope to be reusable across Vue instances.
|
||||
*
|
||||
* @see {@link /createGlobalState}
|
||||
* @param stateFactory A factory function to create the state
|
||||
*/
|
||||
/*
|
||||
declare function createGlobalState<T extends object>(
|
||||
stateFactory: () => T
|
||||
): () => T
|
||||
*/
|
||||
interface EventTarget {
|
||||
value: EventTarget|null
|
||||
name: string| null
|
||||
/**
|
||||
* Appends an event listener for events whose type attribute value is type. The callback argument sets the callback that will be invoked when the event is dispatched.
|
||||
*
|
||||
* The options argument sets listener-specific options. For compatibility this can be a boolean, in which case the method behaves exactly as if the value was specified as options's capture.
|
||||
*
|
||||
* When set to true, options's capture prevents callback from being invoked when the event's eventPhase attribute value is BUBBLING_PHASE. When false (or not present), callback will not be invoked when event's eventPhase attribute value is CAPTURING_PHASE. Either way, callback will be invoked if event's eventPhase attribute value is AT_TARGET.
|
||||
*
|
||||
* When set to true, options's passive indicates that the callback will not cancel the event by invoking preventDefault(). This is used to enable performance optimizations described in § 2.8 Observing event listeners.
|
||||
*
|
||||
* When set to true, options's once indicates that the callback will only be invoked once after which the event listener will be removed.
|
||||
*
|
||||
* The event listener is appended to target's event listener list and is not appended if it has the same type, callback, and capture.
|
||||
*/
|
||||
addEventListener(type: string, listener: EventListenerOrEventListenerObject | null, options?: boolean | AddEventListenerOptions): void
|
||||
/**
|
||||
* Dispatches a synthetic event event to target and returns true if either event's cancelable attribute value is false or its preventDefault() method was not invoked, and false otherwise.
|
||||
*/
|
||||
dispatchEvent(event: Event): boolean
|
||||
/**
|
||||
* Removes the event listener in target's event listener list with the same type, callback, and options.
|
||||
*/
|
||||
removeEventListener(type: string, callback: EventListenerOrEventListenerObject | null, options?: EventListenerOptions | boolean): void
|
||||
}
|
||||
193
src/styles/main.css
Executable file
193
src/styles/main.css
Executable file
@ -0,0 +1,193 @@
|
||||
html,
|
||||
body,
|
||||
#app {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html.dark {
|
||||
background: #27272a; /*bg-gray-800*/
|
||||
color: #f0f0f0;
|
||||
currentColor: #f0f0f0;
|
||||
}
|
||||
.right-item ul li {
|
||||
margin-left: 1em;
|
||||
}
|
||||
.features li b {
|
||||
color: #6366F1; /* indigo-600 */
|
||||
font-weight: 300;
|
||||
}
|
||||
.dark .features li b {
|
||||
color: #A5B4FC; /* indigo-400 */
|
||||
}
|
||||
li a, link,
|
||||
.task a,h3 a,.link a, .link {
|
||||
color: #4F46E5; /*indigo-600*/
|
||||
text-decoration: underline;
|
||||
}
|
||||
.dark li a,.dark link,
|
||||
.dark .task a,.dark h3 a,.dark .link a,.dark .link {
|
||||
color: #A5B4FC; /* indigo-400 */
|
||||
}
|
||||
.project-purpose, .project-name {
|
||||
width: 100%;
|
||||
padding: 4px 11px;
|
||||
border-radius: 20px;
|
||||
margin-bottom: 8px;
|
||||
border: 1px solid #A5B4FC; /* indigo-400 */
|
||||
background-color: #F3F4F6; /* gray-100 */
|
||||
color: #6366F1; /* indigo-600 */
|
||||
font-size: 1.02em;
|
||||
font-weight: 600;
|
||||
}
|
||||
.dark .project-purpose, .dark .project-name {
|
||||
background-color: #374151; /* gray-500 */
|
||||
border: 1px solid #9CA3AF; /* gray-400 */
|
||||
color: #A5B4FC; /* indigo-400 */
|
||||
}
|
||||
.dark svg {
|
||||
fill: #f0f0f0;
|
||||
}
|
||||
.openbox {
|
||||
border-radius: 10px;
|
||||
border: 1px solid #374151; /* gray-500 */
|
||||
}
|
||||
.dark .openbox {
|
||||
border: 1px solid #F3F4F66; /* gray-100 */
|
||||
}
|
||||
.msg-box {
|
||||
border-radius: 40px !important;
|
||||
border: 1px solid #374151; /* indigo-500 */
|
||||
}
|
||||
.dark .msg-box {
|
||||
border: 1px solid #F3F4F6; /* gray-100 */
|
||||
}
|
||||
.msg-ok {
|
||||
background: linear-gradient(135deg, #83D475, #2EB62C) !important;
|
||||
}
|
||||
.msg-error {
|
||||
background: linear-gradient(135deg, #D90708, #9E1444) !important;
|
||||
}
|
||||
.msg-warn {
|
||||
background: linear-gradient(135deg, #FDA766, #FD7F2C) !important;
|
||||
}
|
||||
.msg-show {
|
||||
background: linear-gradient(135deg, #4949FF, #0000FF) !important;
|
||||
}
|
||||
.msg-info {
|
||||
background: linear-gradient(135deg, #9E9E9E, #696969) !important;
|
||||
}
|
||||
.hljs {
|
||||
background: none !important;
|
||||
}
|
||||
.markdown-body {
|
||||
margin: 2em;
|
||||
}
|
||||
.markdown-body p {
|
||||
margin-top: 1em;;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.markdown-body pre {
|
||||
padding: 2em;
|
||||
background: rgba(243,244,246);
|
||||
}
|
||||
.dark .markdown-body pre {
|
||||
background: rgba(75, 85, 99,var(--tw-bg-opacity))
|
||||
}
|
||||
.markdown-body a {
|
||||
color: rgba(37, 99, 235);
|
||||
}
|
||||
.no-list { list-style-type: none; margin-top: 1em;}
|
||||
/*
|
||||
.btn {
|
||||
@apply px-4 py-1 rounded inline-block
|
||||
bg-teal-600 text-white cursor-pointer
|
||||
hover:bg-teal-700
|
||||
disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50;
|
||||
}
|
||||
|
||||
.icon-btn {
|
||||
@apply inline-block cursor-pointer select-none
|
||||
opacity-75 transition duration-200 ease-in-out
|
||||
hover:opacity-100 hover:text-teal-600;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
/*
|
||||
.btn {
|
||||
@apply px-4 py-1 rounded inline-block
|
||||
bg-teal-600 text-white cursor-pointer
|
||||
hover:bg-teal-700
|
||||
disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50;
|
||||
}
|
||||
|
||||
.icon-btn {
|
||||
@apply inline-block cursor-pointer select-none
|
||||
opacity-75 transition duration-200 ease-in-out
|
||||
hover:opacity-100 hover:text-teal-600;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
*/
|
||||
progress {
|
||||
margin-top: 0.5rem;
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
|
||||
progress::-webkit-progress-bar {
|
||||
border-radius: 10px;
|
||||
background-color: #d1d5db;
|
||||
box-shadow: 0 2px 6px #555;
|
||||
}
|
||||
|
||||
progress::-webkit-progress-value {
|
||||
border-radius: 10px 0 0 10px;
|
||||
background-image: linear-gradient(36deg, #d1fae5, #818cf8);
|
||||
}
|
||||
|
||||
.prose>:first-child {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
.prose h2 {
|
||||
font-size: 1.5em;
|
||||
font-weight: 500;
|
||||
line-height: 1.3333333;
|
||||
/* margin-bottom: 1em; */
|
||||
/* margin-top: 2em; */
|
||||
text-transform: uppercase;
|
||||
}
|
||||
#cv-wrapper {
|
||||
box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
|
||||
/* box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset; */
|
||||
/* https://getcssscan.com/css-box-shadow-examples */
|
||||
}
|
||||
div strong, p strong, .itm-title {
|
||||
color: #6366F1; /* indigo-600 */
|
||||
font-weight: 600;
|
||||
}
|
||||
.dark div strong, .dark p strong, .dark .itm-title {
|
||||
color: #A5B4FC; /* indigo-400 */
|
||||
font-weight: 600;
|
||||
}
|
||||
img.project {
|
||||
width: 10em;
|
||||
max-height: 5em;
|
||||
}
|
||||
@media print {
|
||||
* {
|
||||
line-height: 1em !important;
|
||||
}
|
||||
.main-container { max-width: fit-content !important;}
|
||||
.noprint {
|
||||
visibility: hidden;
|
||||
display: none;
|
||||
margin-top: 1em;
|
||||
}
|
||||
#cv-wrapper { margin-top: 0 !important;}
|
||||
.page-break { display: block; break-before: auto; }
|
||||
}
|
||||
/* @media all {
|
||||
.page-break { display: none; }
|
||||
} */
|
||||
86
src/typs/clouds/index.ts
Normal file
86
src/typs/clouds/index.ts
Normal file
@ -0,0 +1,86 @@
|
||||
export const enum LanguageType {
|
||||
en = 'en',
|
||||
es = 'es',
|
||||
None = 'None',
|
||||
}
|
||||
export interface StatusItemType {
|
||||
title: string
|
||||
content: string
|
||||
lang: LanguageType
|
||||
datetime: string
|
||||
isOpen: boolean
|
||||
}
|
||||
export interface StatusItemDataType {
|
||||
[key: string]: any
|
||||
title: string
|
||||
content: string
|
||||
lang: LanguageType
|
||||
datetime: string
|
||||
}
|
||||
export const enum ReqType {
|
||||
tcp = 'tcp',
|
||||
https = 'https',
|
||||
NotSet = 'NotSet',
|
||||
}
|
||||
export const enum CriticalType {
|
||||
yes = 'yes',
|
||||
cloud = 'cloud',
|
||||
group = 'group',
|
||||
ifresized = 'ifresized',
|
||||
no = 'no',
|
||||
}
|
||||
export interface SrvcType {
|
||||
name: string
|
||||
path: string
|
||||
req: ReqType
|
||||
target: string
|
||||
liveness: string
|
||||
critical: CriticalType
|
||||
}
|
||||
export interface SrvcInfoType {
|
||||
[key: string]: any
|
||||
name: string
|
||||
info: string
|
||||
srvc: SrvcType
|
||||
}
|
||||
export interface CloudGroupItemType {
|
||||
[key: string]: any
|
||||
hostname: string
|
||||
tsksrvcs: SrvcType[]
|
||||
appsrvcs: SrvcType[]
|
||||
}
|
||||
export interface CloudGroupServcType {
|
||||
[key: string]: any
|
||||
hostname: string
|
||||
name: string
|
||||
tsksrvcs: SrvcInfoElemType[]
|
||||
appsrvcs: SrvcInfoElemType[]
|
||||
}
|
||||
|
||||
export interface CloudDataCheck {
|
||||
[key: string]: any
|
||||
name: string
|
||||
apps: Map<string, Map<string, CloudGroupServcType>>
|
||||
cloud: Map<string, Map<string, CloudGroupServcType>>
|
||||
infos: StatusItemType[]
|
||||
}
|
||||
export interface CloudOptionType {
|
||||
name: string
|
||||
option: number
|
||||
}
|
||||
export interface CloudGroupDataType {
|
||||
[key: string]: CloudGroupItemType[] | any
|
||||
}
|
||||
export interface ResCloudDataCheck {
|
||||
[key: string]: any
|
||||
name: string
|
||||
cloud: CloudGroupDataType
|
||||
apps: CloudGroupDataType
|
||||
// cloud: CloudGroupSrvcType
|
||||
// statusentries: StatusItemDataType[]
|
||||
}
|
||||
export interface ResCloudDataCheckDefs {
|
||||
[key: string]: any
|
||||
check: ResCloudDataCheck[]
|
||||
defs: any
|
||||
}
|
||||
59
src/typs/cmpnts/index.ts
Normal file
59
src/typs/cmpnts/index.ts
Normal file
@ -0,0 +1,59 @@
|
||||
|
||||
export const enum Profile {
|
||||
Premium,
|
||||
Basic,
|
||||
Pro,
|
||||
NotSet,
|
||||
}
|
||||
|
||||
export enum Auth {
|
||||
Allow,
|
||||
Denied,
|
||||
NotSet,
|
||||
}
|
||||
|
||||
export enum Permission {
|
||||
Read,
|
||||
Write,
|
||||
ReadWrite,
|
||||
NotSet,
|
||||
}
|
||||
|
||||
export interface DataContext {
|
||||
profile: Profile
|
||||
auth: Auth
|
||||
perms: Permission
|
||||
}
|
||||
|
||||
export interface AccordionItemType {
|
||||
title?: string
|
||||
status: boolean
|
||||
h: number
|
||||
}
|
||||
|
||||
export interface SideMenuItemType {
|
||||
title: string
|
||||
ctx?: string
|
||||
mode?: string
|
||||
name?: string
|
||||
icon_on?: string
|
||||
img?: string
|
||||
name_to?: string
|
||||
show_to: boolean
|
||||
path?: string
|
||||
click?: string
|
||||
type: NavItemType
|
||||
pfx?: string
|
||||
href?: string
|
||||
label?: string
|
||||
vif?: string
|
||||
active?: boolean
|
||||
cllbck?: Function | null
|
||||
}
|
||||
|
||||
export interface UiPanelsType {
|
||||
[key: string]: any
|
||||
id: string
|
||||
style: string
|
||||
}
|
||||
|
||||
196
src/typs/config.ts
Normal file
196
src/typs/config.ts
Normal file
@ -0,0 +1,196 @@
|
||||
import { VarDefType,VarBoolDefType,VarNumDefType } from '~/typs/inputs'
|
||||
|
||||
export interface ReqRouteType {
|
||||
path: string
|
||||
param: string
|
||||
}
|
||||
export interface WebRouteType {
|
||||
[key: string]: ReqRouteType
|
||||
}
|
||||
export interface TemplateFileType {
|
||||
path: string
|
||||
rooute: string
|
||||
}
|
||||
export interface TemplateType {
|
||||
[key: string]: TemplateFileType
|
||||
}
|
||||
export interface TplMailType{
|
||||
path: string
|
||||
type: string
|
||||
}
|
||||
export interface TplsMailType {
|
||||
[key: string]: TplMailType
|
||||
}
|
||||
export interface VarsConfigType {
|
||||
[key: string]: any
|
||||
sec_logs: {
|
||||
logOut: VarDefType
|
||||
requestOut: VarDefType
|
||||
trackOut: VarDefType
|
||||
debugLevel: VarDefType
|
||||
}
|
||||
sec_webserver: {
|
||||
host: VarDefType
|
||||
port: VarNumDefType
|
||||
protocol: VarDefType
|
||||
keyPem: VarDefType
|
||||
certPem: VarDefType
|
||||
allowOrigins: {
|
||||
typ: string
|
||||
dflt: string[]
|
||||
}
|
||||
}
|
||||
sec_jwt: {
|
||||
useJWT: VarBoolDefType
|
||||
jwtRealm: VarDefType
|
||||
jwtKey: VarDefType
|
||||
jwtTimeout: VarNumDefType
|
||||
jwtMaxRefresh: VarNumDefType
|
||||
}
|
||||
sec_auth: {
|
||||
authSep: VarDefType
|
||||
useAuthz: VarBoolDefType
|
||||
authzModel: VarDefType
|
||||
authzPolicy: VarDefType
|
||||
adminRole: VarDefType
|
||||
}
|
||||
sec_perms: {
|
||||
pubUser: VarDefType
|
||||
usersPath: VarDefType
|
||||
usersModelsPath: VarDefType
|
||||
identityKey: VarDefType
|
||||
}
|
||||
sec_routes: {
|
||||
rootAuthGroup: VarDefType
|
||||
routes: {
|
||||
typ: string
|
||||
dflt: WebRouteType[]
|
||||
}
|
||||
}
|
||||
sec_templates: {
|
||||
templatesRoot: VarDefType
|
||||
templatesExt: VarDefType
|
||||
templatesIncludes: VarDefType
|
||||
templatesLayouts: VarDefType
|
||||
templatesFiles: {
|
||||
typ: string
|
||||
dflt: TemplateType
|
||||
}
|
||||
}
|
||||
sec_assets: {
|
||||
assetsPath: VarDefType
|
||||
assetsURL: VarDefType
|
||||
}
|
||||
sec_models: {
|
||||
useDist: VarBoolDefType
|
||||
genDist: VarBoolDefType
|
||||
genExcludeList: {
|
||||
typ: string
|
||||
dflt: string[]
|
||||
}
|
||||
dataDistPath: VarDefType
|
||||
dataPath: VarDefType
|
||||
dataModelsRoot: VarDefType
|
||||
dataCorePath: VarDefType
|
||||
dataDflt: VarDefType
|
||||
dataItems: {
|
||||
typ: string
|
||||
dflt: string[]
|
||||
}
|
||||
}
|
||||
sec_langs: {
|
||||
langs: {
|
||||
typ: string
|
||||
dflt: string[]
|
||||
}
|
||||
mainLang: VarDefType
|
||||
}
|
||||
sec_git: {
|
||||
useRepo: VarBoolDefType
|
||||
useRepoOnReq: VarBoolDefType
|
||||
quietGit: VarBoolDefType
|
||||
backgGit: VarBoolDefType
|
||||
repoPath: VarDefType
|
||||
repoName:VarDefType
|
||||
repoCommit:VarDefType
|
||||
}
|
||||
sec_others: {
|
||||
openBrowser: VarBoolDefType
|
||||
}
|
||||
}
|
||||
export interface ConfUrlsType {
|
||||
[key: string]: string
|
||||
}
|
||||
export interface ServConfigType {
|
||||
[key: string]: any
|
||||
logOut: string
|
||||
requestOut: string
|
||||
requestStore: string
|
||||
trackOut: string
|
||||
trackStore: string
|
||||
debugLevel: number
|
||||
host: string
|
||||
port: number
|
||||
protocol: string
|
||||
keyPem: string
|
||||
certPem: string
|
||||
allowOrigins: string[]
|
||||
useJWT: boolean
|
||||
jwtRealm: string
|
||||
jwtKey: string
|
||||
jwtTimeout: number
|
||||
jwtMaxRefresh: number
|
||||
signingAlgorithm: string
|
||||
jwtKeyPem: string
|
||||
jwtCertPem: string
|
||||
authSep: string
|
||||
useAuthz: boolean
|
||||
authzModel: string
|
||||
authzPolicy: string
|
||||
adminRole: string
|
||||
pubUser: string
|
||||
usersPath: string
|
||||
usersModelsPath: string
|
||||
identityKey: string
|
||||
usersStore: string
|
||||
rootAuthGroup: string
|
||||
routes: WebRouteType
|
||||
templatesRoot: string
|
||||
templatesExt: string
|
||||
templatesIncludes: string
|
||||
templatesLayouts: string
|
||||
templatesFiles: TemplateType
|
||||
mailHost: string
|
||||
mailPort: number
|
||||
mailFrom: string
|
||||
mailUser: string
|
||||
mailPswd: string
|
||||
tplsMailPath: string
|
||||
tplsMail: TplsMailType
|
||||
assetsPath: string
|
||||
assetsURL: string
|
||||
useDist: boolean
|
||||
genDist: boolean
|
||||
genExcludeList: string[]
|
||||
dataDistPath: string
|
||||
dataPath: string
|
||||
dataModelsRoot: string
|
||||
dataCorePath: string
|
||||
dataDflt: string
|
||||
dataItems: string[]
|
||||
dataStore: string
|
||||
langs: string[]
|
||||
mainLang: string
|
||||
useRepo: boolean
|
||||
useRepoOnReq: boolean
|
||||
quietGit: boolean
|
||||
backgGit: boolean
|
||||
repoPath: boolean
|
||||
repoName: string
|
||||
repoCommit: string
|
||||
openBrowser: boolean
|
||||
redisHost: string
|
||||
redisPort: number
|
||||
redisDB: string
|
||||
redisPswd: string
|
||||
}
|
||||
320
src/typs/cv.ts
Normal file
320
src/typs/cv.ts
Normal file
@ -0,0 +1,320 @@
|
||||
export interface AuthInfoType {
|
||||
editable: boolean
|
||||
viewchange: boolean
|
||||
show: boolean
|
||||
}
|
||||
export interface SkillsType {
|
||||
id: string
|
||||
auth: AuthInfoType
|
||||
title: string
|
||||
max: number
|
||||
value: number
|
||||
}
|
||||
export interface CertificationType {
|
||||
id: string
|
||||
auth: AuthInfoType
|
||||
title: string
|
||||
author: string
|
||||
date: string
|
||||
link: string
|
||||
href: string
|
||||
certid: string
|
||||
}
|
||||
export interface SitesType {
|
||||
id: string
|
||||
auth: AuthInfoType
|
||||
title: string
|
||||
sub: string
|
||||
link: string
|
||||
type: string
|
||||
alt: string
|
||||
img: string
|
||||
}
|
||||
export interface LangsType {
|
||||
id: string
|
||||
title: string
|
||||
mode: string
|
||||
}
|
||||
export interface WorkExperienceType {
|
||||
[key: string]: any
|
||||
auth: AuthInfoType
|
||||
date: string
|
||||
where: string
|
||||
wheredef: string
|
||||
location: string
|
||||
position: string
|
||||
description: string
|
||||
tools: string[]
|
||||
tasks: string[]
|
||||
}
|
||||
export interface TalksType {
|
||||
[key: string]: any
|
||||
auth: AuthInfoType
|
||||
date: string
|
||||
title: string
|
||||
org: string
|
||||
location: string
|
||||
description: string[]
|
||||
}
|
||||
export interface TeachingType {
|
||||
[key: string]: any
|
||||
auth: AuthInfoType
|
||||
date: string
|
||||
title: string
|
||||
org: string
|
||||
location: string
|
||||
description: string[]
|
||||
}
|
||||
export interface EducationType {
|
||||
[key: string]: any
|
||||
auth: AuthInfoType
|
||||
date: string
|
||||
title: string
|
||||
org: string
|
||||
location: string
|
||||
cert: string
|
||||
description: string[]
|
||||
tools: string[]
|
||||
}
|
||||
export interface ProjectType {
|
||||
[key: string]: any
|
||||
auth: AuthInfoType
|
||||
date: string
|
||||
name: string
|
||||
title: string
|
||||
img: string
|
||||
site: string
|
||||
code: string
|
||||
purpose: string
|
||||
for: string
|
||||
position: string
|
||||
license: string
|
||||
demo: string
|
||||
capture: string
|
||||
description: string
|
||||
features: string[]
|
||||
builtwith: string[]
|
||||
}
|
||||
export interface ProfileType {
|
||||
[key: string]: unknown;
|
||||
auth: AuthInfoType
|
||||
desc: string
|
||||
}
|
||||
export interface OtherType {
|
||||
[key: string]: unknown;
|
||||
auth: AuthInfoType
|
||||
desc: string
|
||||
}
|
||||
export interface MissionHowType {
|
||||
[key: string]: unknown;
|
||||
auth: AuthInfoType
|
||||
desc: string
|
||||
}
|
||||
export interface DataCoreType {
|
||||
[key: string]: any
|
||||
name: string
|
||||
fullname: string
|
||||
title1: string
|
||||
title2: string
|
||||
imgalt: string
|
||||
imgsrc: string
|
||||
email: string
|
||||
phone: string
|
||||
address: string
|
||||
postalcode: string
|
||||
state: string
|
||||
city: string
|
||||
country: string
|
||||
birthdate: string
|
||||
status: string
|
||||
mission: string
|
||||
mission_how: MissionHowType[]
|
||||
profile: ProfileType[]
|
||||
certifications: CertificationType[]
|
||||
skills: SkillsType[]
|
||||
infra: SkillsType[]
|
||||
sites: SitesType[]
|
||||
langs: LangsType[]
|
||||
}
|
||||
|
||||
export interface DataLangType {
|
||||
[key: string]: any
|
||||
imgalt: string
|
||||
title1: string
|
||||
title2: string
|
||||
country: string
|
||||
birthdate: string
|
||||
status: string
|
||||
mission: string
|
||||
mission_how: MissionHowType[]
|
||||
profile: ProfileType[]
|
||||
certifications: CertificationType[]
|
||||
work_experiences: WorkExperienceType[]
|
||||
projects: ProjectType[]
|
||||
education: EducationType[]
|
||||
talks: TalksType[]
|
||||
teaching: TeachingType[]
|
||||
others: OtherType[]
|
||||
}
|
||||
export interface DataLangsType {
|
||||
[key: string]: DataLangType
|
||||
}
|
||||
export interface ShowTalksType {
|
||||
[key: string]: unknown;
|
||||
auth: AuthInfoType
|
||||
date: boolean
|
||||
title: boolean
|
||||
org: boolean
|
||||
location: boolean
|
||||
description: boolean
|
||||
}
|
||||
export interface ShowTeachingType {
|
||||
[key: string]: unknown;
|
||||
auth: AuthInfoType
|
||||
date: boolean
|
||||
title: boolean
|
||||
org: boolean
|
||||
location: boolean
|
||||
description: boolean
|
||||
}
|
||||
export interface ShowWorkExperienceType {
|
||||
[key: string]: unknown;
|
||||
auth: AuthInfoType
|
||||
date: boolean
|
||||
where: boolean
|
||||
wheredef: boolean
|
||||
location: boolean
|
||||
position: boolean
|
||||
description: boolean
|
||||
tools: boolean
|
||||
tasks: boolean
|
||||
}
|
||||
export interface ShowEducationType {
|
||||
[key: string]: unknown;
|
||||
auth: AuthInfoType
|
||||
date: boolean
|
||||
title: boolean
|
||||
org: boolean
|
||||
location: boolean
|
||||
cert: boolean
|
||||
description: boolean
|
||||
tools: boolean
|
||||
}
|
||||
export interface ShowProjectType {
|
||||
[key: string]: unknown;
|
||||
auth: AuthInfoType
|
||||
name: boolean
|
||||
img: boolean
|
||||
title: boolean
|
||||
purpose: boolean
|
||||
site: boolean
|
||||
code: boolean
|
||||
date: boolean
|
||||
for: boolean
|
||||
position: boolean
|
||||
license: boolean
|
||||
demo: boolean
|
||||
capture: boolean
|
||||
description: boolean
|
||||
features: boolean
|
||||
builtwith: boolean
|
||||
}
|
||||
export interface ShowInfoType {
|
||||
[key: string]: any
|
||||
id: string
|
||||
ky: string
|
||||
auth: AuthInfoType
|
||||
write: boolean
|
||||
change: boolean
|
||||
admin: boolean
|
||||
// save: boolean
|
||||
fullname: boolean
|
||||
personal: boolean
|
||||
title: boolean
|
||||
image: boolean
|
||||
mission: boolean
|
||||
mission_how: boolean
|
||||
phone: boolean
|
||||
address: boolean
|
||||
status: boolean
|
||||
birthdate: boolean
|
||||
sites: boolean
|
||||
skills: boolean
|
||||
skills_itms: boolean
|
||||
infra: boolean
|
||||
certs: boolean
|
||||
langs: boolean
|
||||
profile: boolean
|
||||
work_experience_itms: boolean
|
||||
work_experience: ShowWorkExperienceType
|
||||
project_itms: boolean
|
||||
projects: ShowProjectType
|
||||
education_itms: boolean
|
||||
education: ShowEducationType
|
||||
talks_itms: boolean
|
||||
talks: ShowTalksType
|
||||
teaching_itms: boolean
|
||||
teaching: ShowTeachingType
|
||||
others_itms: boolean
|
||||
others: boolean
|
||||
}
|
||||
|
||||
export interface HtmlAttrsType {
|
||||
[key: string]: any
|
||||
bold: string
|
||||
list: string
|
||||
text: string
|
||||
link: string
|
||||
}
|
||||
export interface OptionsSelectorType {
|
||||
title: string
|
||||
val: string
|
||||
}
|
||||
export interface InputBtnsType {
|
||||
id: string
|
||||
title: string
|
||||
typ: string
|
||||
show: boolean
|
||||
}
|
||||
export enum MessageBoxType {
|
||||
Save = 'save',
|
||||
Select = 'select',
|
||||
Input = 'input',
|
||||
OneInput = 'oneinput',
|
||||
NotSet = '',
|
||||
}
|
||||
export enum NavPosition {
|
||||
header = 'header',
|
||||
footer = 'footer',
|
||||
}
|
||||
|
||||
export interface ModelType {
|
||||
[key: string]: any
|
||||
id: string
|
||||
title: string
|
||||
path: string
|
||||
}
|
||||
export interface ModelSelType {
|
||||
[key: string]: ModelType
|
||||
}
|
||||
export interface CVDataType {
|
||||
models: ModelType[]
|
||||
showinfo: ShowInfoType[]
|
||||
core: DataCoreType[]
|
||||
work_experience: WorkExperienceType[]
|
||||
projects: ProjectType[]
|
||||
education: EducationType[]
|
||||
talks: TalksType[]
|
||||
teaching: TeachingType[]
|
||||
others: OtherType[]
|
||||
}
|
||||
export interface CVLangDataType {
|
||||
[key: string]: CVDataType
|
||||
}
|
||||
export interface CVModelDataType {
|
||||
[key: string]: CVLangDataType
|
||||
}
|
||||
export interface CVPostDataType {
|
||||
u: string
|
||||
data: CVModelDataType
|
||||
}
|
||||
70
src/typs/index.ts
Normal file
70
src/typs/index.ts
Normal file
@ -0,0 +1,70 @@
|
||||
export enum LocalesLabelModes {
|
||||
auto = 'auto',
|
||||
value = 'val',
|
||||
translation = 'trans',
|
||||
}
|
||||
|
||||
export enum MessageType {
|
||||
Show,
|
||||
Success,
|
||||
Error,
|
||||
Warning,
|
||||
Info,
|
||||
}
|
||||
export interface MenuItemType {
|
||||
id: string
|
||||
title: string
|
||||
active: boolean
|
||||
link: string
|
||||
}
|
||||
|
||||
export interface DataSections {
|
||||
[key: string]: string
|
||||
}
|
||||
|
||||
export enum NavItemType {
|
||||
router_link = 'router_link',
|
||||
app_link = 'app_link',
|
||||
a_blank = 'a_blank',
|
||||
a_link = 'a_link',
|
||||
cloud_link = 'cloud_link',
|
||||
module_label = 'module_label',
|
||||
separator = 'separator',
|
||||
}
|
||||
|
||||
export interface TrackActionShowType {
|
||||
[key: string]: any
|
||||
when: boolean
|
||||
where: boolean
|
||||
what: boolean
|
||||
context: boolean
|
||||
data: boolean
|
||||
auth: boolean
|
||||
payload: boolean
|
||||
}
|
||||
export interface AuthPayloadType {
|
||||
[key: string]: any
|
||||
exp: number|string
|
||||
id: string
|
||||
uuid: string
|
||||
orig_iat: number|string
|
||||
data: string
|
||||
}
|
||||
export interface TrackActionType {
|
||||
[key: string]: any
|
||||
when: string|number
|
||||
where: string
|
||||
what: string
|
||||
context: string
|
||||
data: string
|
||||
auth: string
|
||||
payload?: AuthPayloadType
|
||||
idx: number
|
||||
}
|
||||
export interface InvitationDataType {
|
||||
[key: string]: any
|
||||
email: string
|
||||
role: string
|
||||
data: string
|
||||
}
|
||||
|
||||
53
src/typs/inputs.ts
Normal file
53
src/typs/inputs.ts
Normal file
@ -0,0 +1,53 @@
|
||||
|
||||
export enum InputValueOption {
|
||||
string = 'String',
|
||||
password = 'Password',
|
||||
number = 'Number',
|
||||
bool = 'Bool',
|
||||
arrayString = 'Array:String',
|
||||
object = 'Object',
|
||||
content = 'Content',
|
||||
// templates = 'Templates',
|
||||
// webroutes = 'WebRoutes',
|
||||
// mailtemplates = 'MailTemplates',
|
||||
// user = 'User',
|
||||
}
|
||||
export enum InputValueModeOption {
|
||||
text = 'Text',
|
||||
html = 'HTML',
|
||||
yaml = 'YAML',
|
||||
json = 'JSON',
|
||||
toml = 'TOML',
|
||||
none = '',
|
||||
}
|
||||
export enum InputValidateOption {
|
||||
email = 'Email',
|
||||
none = '',
|
||||
}
|
||||
export interface SecStateType {
|
||||
view: boolean
|
||||
enabled: boolean
|
||||
help: boolean
|
||||
}
|
||||
export interface SecViewType {
|
||||
[key: string]: SecStateType
|
||||
}
|
||||
export interface VarsDataType {
|
||||
[key: string]: VarDefType
|
||||
}
|
||||
export interface VarDefType {
|
||||
[key: string]: any
|
||||
typ: InputValueOption
|
||||
valid?: InputValidateOption
|
||||
dflt: string
|
||||
labelitms?: string
|
||||
vars?: VarsDataType
|
||||
}
|
||||
export interface VarNumDefType {
|
||||
typ: string
|
||||
dflt: number
|
||||
}
|
||||
export interface VarBoolDefType {
|
||||
typ: string
|
||||
dflt: boolean
|
||||
}
|
||||
58
src/typs/users.ts
Normal file
58
src/typs/users.ts
Normal file
@ -0,0 +1,58 @@
|
||||
import { VarDefType,VarBoolDefType,VarNumDefType } from '~/typs/inputs'
|
||||
|
||||
export interface UserAccountType {
|
||||
[key: string]: any
|
||||
password: string
|
||||
email: string
|
||||
description: string
|
||||
data: string
|
||||
web: boolean
|
||||
dflt: true
|
||||
}
|
||||
export interface UsersAccountsType {
|
||||
accounts: UserAccountType[]
|
||||
}
|
||||
export interface ModelUserType {
|
||||
[key: string]: any
|
||||
model: string
|
||||
user: string
|
||||
data: string
|
||||
active: boolean
|
||||
}
|
||||
export interface ModelsUsersType {
|
||||
[key: string]: any
|
||||
}
|
||||
export interface UsersInvitationsType {
|
||||
[key: string]: any
|
||||
email: string
|
||||
createdby: string
|
||||
expire: string
|
||||
howmany: number
|
||||
role: string
|
||||
description: string
|
||||
data: string
|
||||
active: boolean
|
||||
}
|
||||
export interface UsersDataType {
|
||||
[key: string]: string
|
||||
usersData: string
|
||||
modelsData: string
|
||||
authzModel: string
|
||||
authzPolicy: string
|
||||
}
|
||||
export interface UsersDataViewType {
|
||||
[key: string]: boolean
|
||||
usersData: boolean
|
||||
modelsData: boolean
|
||||
authzModel: boolean
|
||||
authzPolicy: boolean
|
||||
}
|
||||
export interface VarsUserType {
|
||||
[key: string]: any
|
||||
sec_data: {
|
||||
logOut: VarDefType
|
||||
password: VarDefType
|
||||
email: VarDefType
|
||||
debugLevel: VarDefType
|
||||
}
|
||||
}
|
||||
28
src/views/404.vue
Normal file
28
src/views/404.vue
Normal file
@ -0,0 +1,28 @@
|
||||
<script setup lang="ts">
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
const router = useRouter()
|
||||
const { t } = useI18n()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main class="px-4 py-10 text-center text-teal-700 dark:text-gray-200">
|
||||
<div>
|
||||
<p class="text-4xl">
|
||||
<carbon-warning class="inline-block" />
|
||||
</p>
|
||||
</div>
|
||||
<transition name="fade">
|
||||
<router-view />
|
||||
</transition>
|
||||
<div>
|
||||
<button
|
||||
class="btn m-3 text-sm mt-8"
|
||||
@click="router.back()"
|
||||
>
|
||||
{{ t('button.back') }}
|
||||
</button>
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
494
src/views/Config.vue
Normal file
494
src/views/Config.vue
Normal file
@ -0,0 +1,494 @@
|
||||
<template>
|
||||
<div
|
||||
v-if="openMessageBox"
|
||||
class="fixed inset-0 bg-gray-600 overflow-y-auto h-full w-full z-80 dark:bg-gray-900 opacity-97"
|
||||
>
|
||||
<message-box-view
|
||||
:messageType="message_type"
|
||||
:openMessageBox="openMessageBox"
|
||||
:show_input="show_input"
|
||||
:input_placeholder="input_placeholder"
|
||||
:input_btns="input_btns"
|
||||
:select_ops="select_ops"
|
||||
:data_url_encoded="data_url_encoded"
|
||||
:inpType="oneInputType"
|
||||
@onInput="onInput"
|
||||
@onMessageBox="onMessageBox"
|
||||
@onLoadModel="onLoadModel"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="show_content && servConfig" class="font-sans antialiased">
|
||||
<div class="container mx-auto max-w-screen-2xl main-container">
|
||||
<nav-menu
|
||||
class="bg-light-300 dark:bg-gray-900"
|
||||
:position="NavPosition.header"
|
||||
:openMessageBox="openMessageBox"
|
||||
:fixMenu="fixMenu"
|
||||
:show_infopanel="show_infopanel"
|
||||
:dataAuth="false"
|
||||
:useInfoPanel="false"
|
||||
:useLogin="true"
|
||||
:showinfo="show_info"
|
||||
:authinfo="auth_info"
|
||||
:needSave="needSave"
|
||||
:useEdit="true"
|
||||
:prefix="prefix"
|
||||
@onNavMenu="onNavMenu"
|
||||
/>
|
||||
<main
|
||||
:id="`${prefix}-wrapper`"
|
||||
class="rounded flex flex-col sm:flex-row-reverse shadow-2xl"
|
||||
:class="{ 'mt-11': fixMenu }"
|
||||
>
|
||||
<div
|
||||
v-if="show_infopanel"
|
||||
id="sidebar"
|
||||
class="rounded-r w-full lg:w-80 sm:max-w-sm p-8 border-l-1 border-indigo-200 bg-gradient-to-b from-indigo-300 via-indigo-200 to-indigo-100 dark:bg-gray-600 dark:from-indigo-500 dark:via-indigo-400 dark:to-indigo-800"
|
||||
>
|
||||
</div>
|
||||
<div class="content w-full p-5">
|
||||
<div class="prose flex-1 p-4 border-1 rounded-md border-gray-300 dark:border-gray-600 lg:w-4/12 sm:w-full sm:max-w-sm shadow-xl bg-light-300 dark:bg-gray-900">
|
||||
<div v-for="(sec,idxsec) in data_sections" :key="idxsec"
|
||||
:id="`${prefix}-${sec}`"
|
||||
class="prose mb-2"
|
||||
:class="{ 'page-break': idxsec > 0 }"
|
||||
>
|
||||
<h2 v-if="show_sections[sec]" class="section-headline my-4 px-5 pb-2"
|
||||
:class="{'bg-gray-200 dark:bg-gray-700 border-1 rounded-tl-xl rounded-r-3xl border-indigo-500': show_sections[sec].enabled && show_sections[sec].view}"
|
||||
>
|
||||
<span v-if="show_sections[sec].enabled && show_sections[sec].view" class="text-base">{{t(`vars.${sec}`,sec)}}</span>
|
||||
<button
|
||||
class="no-print text-sm float-right icon-btn mt-3 !outline-none text-gray-500 dark:text-gray-400"
|
||||
@click.prevent="onSection(sec)"
|
||||
>
|
||||
<div v-if="show_sections[sec].view && show_sections[sec].enabled" i-carbon-view-off />
|
||||
<div v-else class="noprint flex -mt-4">
|
||||
<div class="mr-2 text-xs" :class="{'line-through text-indigo-600 dark:text-indigo-300': !show_sections[sec].enabled}">{{t(`vars.${sec}`,sec)}}</div>
|
||||
<div i-carbon-view />
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
v-if="show_sections[sec].view && show_sections[sec].enabled"
|
||||
class="no-print text-sm float-right icon-btn mt-3 mr-1 !outline-none text-gray-500 dark:text-gray-400"
|
||||
@click="onHelp(sec)"
|
||||
>
|
||||
<div i-carbon-help/>
|
||||
</button>
|
||||
<button
|
||||
v-if="show_sections[sec].view && show_sections[sec].enabled"
|
||||
class="no-print text-sm float-right icon-btn mt-3 mr-2 !outline-none text-gray-500 dark:text-gray-400"
|
||||
@click.prevent="onHome()"
|
||||
>
|
||||
<div i-carbon-home />
|
||||
</button>
|
||||
</h2>
|
||||
<div v-if="show_sections[sec] && show_sections[sec].enabled && show_sections[sec].view && show_sections[sec].help"
|
||||
class="helpbox" v-html="t(`info.${sec.replace('sec_','')}`,'')"
|
||||
/>
|
||||
<div v-if="show_sections[sec] && show_sections[sec].enabled && show_sections[sec].view"
|
||||
v-for="(itm,idxitm) in Object.keys(varsConfig[sec])"
|
||||
:key="idxitm"
|
||||
>
|
||||
<div
|
||||
v-if="servConfig[itm]"
|
||||
class="flex flex-col items-start py-2"
|
||||
:class="{'border-b border-indigo-500': edititems && show_items[`${sec}.${itm}`].enabled && simpleInputype(varsConfig[sec][itm].typ)}"
|
||||
>
|
||||
<h4 class="sectionitem w-full" :class="{'-mt-2 -mb-7': varsConfig[sec][itm].typ === 'Bool'}">
|
||||
<span v-if="varsConfig[sec][itm].typ !== 'Bool'"
|
||||
class="text-base"
|
||||
:class="{'text-gray-300 dark:text-gray-600': !show_items[`${sec}.${itm}`].enabled}"
|
||||
>
|
||||
{{t(`${sec}.${itm}`,itm)}}
|
||||
</span>
|
||||
<button
|
||||
v-if="!auth_info.viewchange"
|
||||
class="no-print text-sm float-right icon-btn mt-1 !outline-none text-gray-500 dark:text-gray-400"
|
||||
@click.prevent="onHelp(sec,itm)"
|
||||
>
|
||||
<div class="noprint flex">
|
||||
<div i-carbon-help />
|
||||
</div>
|
||||
</button>
|
||||
</h4>
|
||||
<div v-if="show_items[`${sec}.${itm}`].help" class="helpbox" v-html="t(`info${sec}.${itm}`,'')"/>
|
||||
<DataInput
|
||||
v-if="varsConfig[sec][itm].typ === InputValueOption.object"
|
||||
:dataVars="varsConfig[sec][itm].vars"
|
||||
:section="sec"
|
||||
:typ="varsConfig[sec][itm].typ"
|
||||
:dataValue="servConfig[itm]"
|
||||
:varname="itm"
|
||||
:title="`${sec}.${itm}`"
|
||||
:labelitms="varsConfig[sec][itm].labelitms? varsConfig[sec][itm].labelitms : ''"
|
||||
:edititem="edititems"
|
||||
:showitem="show_items[`${sec}.${itm}`].enabled"
|
||||
:validate="varsConfig[sec][itm].valid ? varsConfig[sec][itm].valid : ''"
|
||||
:messages="true"
|
||||
@input-change="onInputChange"
|
||||
/>
|
||||
<InputValue
|
||||
v-if="varsConfig[sec][itm].typ !== InputValueOption.object"
|
||||
:section="sec"
|
||||
:typ="varsConfig[sec][itm].typ"
|
||||
:vardef="varsConfig[sec][itm]"
|
||||
:dataValue="servConfig[itm]"
|
||||
:varname="itm"
|
||||
:title="`${sec}.${itm}`"
|
||||
:labelitms="varsConfig[sec][itm].labelitms? varsConfig[sec][itm].labelitms : ''"
|
||||
:edititem="edititems"
|
||||
:showitem="show_items[`${sec}.${itm}`].enabled"
|
||||
:validate="varsConfig[sec][itm].valid ? varsConfig[sec][itm].valid : ''"
|
||||
:messages="true"
|
||||
@input-change="onInputChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="py-4 flex items-center gap-5 border-t-1 border-gray-500">
|
||||
<button
|
||||
v-if="edititems"
|
||||
class="btn-msg flex-grow"
|
||||
@click="onSaveBtn"
|
||||
>
|
||||
<span>{{ t('save', 'Save') }}</span>
|
||||
</button>
|
||||
<button v-if="!edititems" class="btn-msg flex-grow" @click="onEditBtn">{{ t('edit', 'Edit') }}</button>
|
||||
<button v-else class="btn-msg flex-grow" @click="onCloseBtn">{{ t('close', 'Close') }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="hr-sep" />
|
||||
</main>
|
||||
<div
|
||||
v-if="show_content"
|
||||
class="mr-auto w-full lg:w-1/2 text-center text-sm mx-2 text-gray-600 border-gray-300 border-1 border-b-0 rounded-t-xl"
|
||||
>
|
||||
<nav-menu
|
||||
class="shadow-xl bg-light-300 dark:bg-gray-900"
|
||||
:position="NavPosition.footer"
|
||||
:fixMenu="fixMenu"
|
||||
:show_infopanel="show_infopanel"
|
||||
:dataAuth="false"
|
||||
:useInfoPanel="false"
|
||||
:useLogin="true"
|
||||
:showinfo="show_info"
|
||||
:authinfo="auth_info"
|
||||
:needSave="needSave"
|
||||
:useEdit="true"
|
||||
prefix="sec"
|
||||
:openMessageBox="openMessageBox"
|
||||
@onNavMenu="onNavMenu"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="text-center m-auto">
|
||||
<img v-if="isDark"
|
||||
class="m-auto mt-5"
|
||||
width="250"
|
||||
:src="`${assetsPath}/images/cvgen_b.svg`"
|
||||
/>
|
||||
<img v-else
|
||||
class="m-auto mt-5"
|
||||
width="250"
|
||||
:src="`${assetsPath}/images/cvgen_w.svg`"
|
||||
/>
|
||||
<h2 class="mt-8 text-2xl text-gray-700 dark:text-gray-400">{{ t('message.loading', 'Loading') }}...</h2>
|
||||
<h4>{{useState().connection.value.state}}</h4>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { useI18n } from 'vue-i18n'
|
||||
const i18n = useI18n()
|
||||
const { t } = useI18n()
|
||||
const router = useRouter()
|
||||
|
||||
import MessageBoxView from '~/components/MessageBoxView.vue'
|
||||
import NavMenu from '@/NavMenu.vue'
|
||||
import DataInput from '@/forms/DataInput.vue'
|
||||
import InputValue from '@/InputValue.vue'
|
||||
import { isDark } from '~/composables'
|
||||
import useState from '~/hooks/useState'
|
||||
import { parseJwt,checkUserAuth } from '~/hooks/utilsAuth'
|
||||
import { load_data_model,load_currentRoute } from '~/hooks/loads'
|
||||
import { track_action } from '~/hooks/tracking'
|
||||
import { load_vars_config,get_serv_config} from '~/hooks/config'
|
||||
import { MessageType} from '~/typs'
|
||||
import { MessageBoxType, NavPosition, InputBtnsType, ShowInfoType, ModelType} from '~/typs/cv'
|
||||
import { InputValueOption,SecViewType} from '~/typs/inputs'
|
||||
import { ServConfigType} from '~/typs/config'
|
||||
import { show_message,send_data} from '~/hooks/utils'
|
||||
|
||||
const prefix = 'cfg'
|
||||
const varsConfig = useState().varsConfig
|
||||
const servConfig = ref({} as ServConfigType)
|
||||
|
||||
const show_sections = ref({} as SecViewType)
|
||||
const show_items = ref({} as SecViewType)
|
||||
const edititems = ref(false)
|
||||
|
||||
const assetsPath = useState().ASSETS_PATH
|
||||
const routeKy = router.currentRoute.value.params.ky || router.currentRoute.value.query.k || ''
|
||||
const message_type = ref(MessageBoxType.NotSet)
|
||||
const fixMenu = ref(false)
|
||||
const show_content = ref(true)
|
||||
const show_infopanel = ref(false)
|
||||
const openMessageBox = ref(false)
|
||||
const needSave = ref(false)
|
||||
const show_input = ref(false)
|
||||
const data_url_encoded = ref('')
|
||||
const input_btns = ref([] as InputBtnsType[])
|
||||
const input_placeholder = ref('')
|
||||
const oneInputType = ref('')
|
||||
|
||||
const onSection = (sec: string) => {
|
||||
if (!show_sections.value[sec].enabled) {
|
||||
show_sections.value[sec].view = true
|
||||
show_sections.value[sec].enabled = true
|
||||
return
|
||||
} else {
|
||||
show_sections.value[sec].view = !show_sections.value[sec].view
|
||||
}
|
||||
}
|
||||
const onHelp = (sec: string, itm?: string) => {
|
||||
if (itm)
|
||||
show_items.value[`${sec}.${itm}`].help = !show_items.value[`${sec}.${itm}`].help
|
||||
else
|
||||
show_sections.value[sec].help = !show_sections.value[sec].help
|
||||
}
|
||||
const onInputChange = (data: {sec: string, key: string, idx:number, val: any}) => {
|
||||
if (data.key && typeof servConfig.value[data.key] !== 'undefined') {
|
||||
servConfig.value[data.key] = data.val
|
||||
if (data.sec)
|
||||
check_item_section(data.sec,data.key)
|
||||
}
|
||||
}
|
||||
const simpleInputype = (typ: string): boolean => {
|
||||
switch(typ) {
|
||||
case 'String':
|
||||
case 'Number':
|
||||
case 'Array:String':
|
||||
return true
|
||||
default:
|
||||
return false
|
||||
}
|
||||
}
|
||||
const check_item_section = (sec: string, itm: string) => {
|
||||
// show_items.value[`${sec}.${itm}`].enabled = servConfig.value[itm]
|
||||
switch(itm) {
|
||||
case 'useJWT':
|
||||
case 'useRepo':
|
||||
show_sections.value[sec].enabled = servConfig.value[itm]
|
||||
break
|
||||
case 'useAuthz':
|
||||
show_items.value[`${sec}.authzModel`].enabled = servConfig.value[itm]
|
||||
show_items.value[`${sec}.authzPolicy`].enabled = servConfig.value[itm]
|
||||
break
|
||||
}
|
||||
}
|
||||
const onInput = (btn: InputBtnsType) => {
|
||||
switch (btn.id) {
|
||||
case 'ok':
|
||||
break
|
||||
case 'cancel':
|
||||
break
|
||||
}
|
||||
show_input.value = false
|
||||
}
|
||||
const select_ops = ref({} as ModelType)
|
||||
const show_info = ref({} as ShowInfoType)
|
||||
const auth_info = useState().authinfo
|
||||
const useEdit = ref(true)
|
||||
|
||||
const data_sections = useState().dataSections
|
||||
|
||||
const refresh = () => {
|
||||
show_content.value = false
|
||||
setTimeout(() => show_content.value = true, 1)
|
||||
}
|
||||
const onSaveBtn = () => {
|
||||
// edititems.value = false
|
||||
// needSave.value = false
|
||||
onNavMenu({ src: 'save', target: '' })
|
||||
}
|
||||
const onCloseBtn = () => {
|
||||
edititems.value = false
|
||||
needSave.value = false
|
||||
}
|
||||
const onEditBtn = () => {
|
||||
edititems.value = true
|
||||
needSave.value = true
|
||||
auth_info.value.editable = true
|
||||
useEdit.value = true
|
||||
}
|
||||
|
||||
const onNavMenu = (item: { src: string, target: string }) => {
|
||||
switch (item.src) {
|
||||
case 'editable':
|
||||
if (edititems.value) {
|
||||
onCloseBtn()
|
||||
} else {
|
||||
onEditBtn()
|
||||
}
|
||||
break
|
||||
case 'locale':
|
||||
track_action(null, { ref: 'locale',text: i18n.locale.value}, 'locale')
|
||||
refresh()
|
||||
break
|
||||
case 'infopanel':
|
||||
track_action(null, { ref: 'onNavMenu',text: 'item.src'})
|
||||
show_infopanel.value = !show_infopanel.value
|
||||
break
|
||||
case 'fixmenu':
|
||||
track_action(null, { ref: 'onNavMenu',text: 'item.src'})
|
||||
fixMenu.value = !fixMenu.value
|
||||
break
|
||||
case 'endinput':
|
||||
show_input.value = false
|
||||
break
|
||||
case 'select':
|
||||
track_action(null, { ref: 'onNavMenu',text: 'item.src'})
|
||||
message_type.value = MessageBoxType.Select
|
||||
openMessageBox.value = true
|
||||
break
|
||||
case 'save':
|
||||
track_action(null, { ref: 'onNavMenu',text: 'item.src'})
|
||||
input_placeholder.value = `${t('name', 'Name')} o 'config'`
|
||||
show_input.value = true
|
||||
message_type.value = MessageBoxType.Save
|
||||
data_url_encoded.value = ''
|
||||
openMessageBox.value = true
|
||||
break
|
||||
case 'editable':
|
||||
track_action(null, { ref: 'onNavMenu',text: 'item.src'})
|
||||
useState().authinfo.value.editable = !useState().authinfo.value.editable
|
||||
const state = useState().authinfo.value.editable ? 'on' : 'off'
|
||||
const msgTyp = state === 'on' ? MessageType.Warning : MessageType.Info
|
||||
show_message(msgTyp, `${t('saveload.editMode','Edit Mode')} ${t('cv.'+state,'')}`)
|
||||
break
|
||||
case 'viewchange':
|
||||
track_action(null, { ref: 'onNavMenu',text: 'item.src'})
|
||||
useState().authinfo.value.viewchange = !useState().authinfo.value.viewchange
|
||||
break
|
||||
case 'goto':
|
||||
if (item.target) {
|
||||
const dom_id = document.getElementById(item.target)
|
||||
if (dom_id) {
|
||||
track_action(null, { ref: 'gotp',text: item.target}, 'goto')
|
||||
dom_id.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' })
|
||||
setTimeout(() => window.scrollBy(0, -40), 4000)
|
||||
}
|
||||
}
|
||||
break
|
||||
}
|
||||
}
|
||||
const saveData = async(mode: string,val: string) => {
|
||||
const url = useState().CONFURLS.value.sendsrvconfig || ''
|
||||
message_type.value = MessageBoxType.Save
|
||||
const payload = parseJwt(localStorage.getItem(useState().AUTHKEY.value))
|
||||
const data: any = {
|
||||
id: payload.id ? payload.id : '',
|
||||
val: val.length > 0 ? val : 'config',
|
||||
config: servConfig.value,
|
||||
}
|
||||
if (mode == 'send' && url.length > 0) {
|
||||
onMessageBox({src: 'done', val: ''})
|
||||
const [res,err] = await send_data(url, data, true, true)
|
||||
if (err && err.length > 0 ) {
|
||||
show_message(MessageType.Error, `Error: ${err}`,2000)
|
||||
} else if (res && res.status && res.status === 'ok') {
|
||||
track_action(null, { ref: 'saveData',text: `${url} -> ${val}`})
|
||||
show_message(MessageType.Success, `${t('saveload.dataSaved','Data saved')}`,2000,() => {
|
||||
edititems.value = false
|
||||
needSave.value = false
|
||||
})
|
||||
}
|
||||
} else {
|
||||
track_action(null, { ref: 'saveData',text: `local_json -> ${val}`})
|
||||
show_message(MessageType.Warning, `${t('saveload.saveLocalFile','Save Data to Local File')}`,2000,() => {
|
||||
data_url_encoded.value = `text/json;charset=utf-8,${encodeURIComponent(JSON.stringify(data))}`
|
||||
})
|
||||
}
|
||||
}
|
||||
const onMessageBox = (item: { src: string, val: string }) => {
|
||||
switch (item.src) {
|
||||
case 'savedata':
|
||||
show_input.value = false
|
||||
saveData('local', item.val)
|
||||
break
|
||||
case 'sendata':
|
||||
show_input.value = false
|
||||
saveData('send', item.val)
|
||||
break
|
||||
case 'oneinput':
|
||||
const r = async() => {
|
||||
if (await checkUserAuth(item.val)) {
|
||||
oneInputType.value='text'
|
||||
openMessageBox.value = false
|
||||
if (!await load_currentRoute(router.currentRoute.value)) {
|
||||
show_message(MessageType.Error, `${t('saveload.loaderror','Load error')}`,2000)
|
||||
}
|
||||
} else {
|
||||
show_message(MessageType.Error, `${t('saveload.autherror','Auth error')}`,2000)
|
||||
}
|
||||
}
|
||||
r()
|
||||
break
|
||||
case 'endinput':
|
||||
show_input.value = false
|
||||
break
|
||||
case 'done':
|
||||
openMessageBox.value = false
|
||||
break
|
||||
case 'open':
|
||||
openMessageBox.value = true
|
||||
break
|
||||
}
|
||||
}
|
||||
const onHome = () => {
|
||||
const dom_body = document.getElementsByTagName('body')[0]
|
||||
if (dom_body) {
|
||||
dom_body.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' })
|
||||
}
|
||||
}
|
||||
const onLoadModel = (model: { id: string}) => {
|
||||
const url = useState().CONFURLS.value.data || ''
|
||||
if ( url.length > 0) {
|
||||
return
|
||||
}
|
||||
if (useState().selectOps.value[model.id]) {
|
||||
load_data_model(model.id, url, routeKy as string,true,() => {
|
||||
show_content.value = false
|
||||
show_message(MessageType.Success, `${t('saveload.dataLoaded','Data loaded')}`,2000,() => {
|
||||
show_content.value = true
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
onBeforeMount(async() => {
|
||||
if (Object.keys(useState().varsConfig.value).length === 0) {
|
||||
const [res, err] = await load_vars_config()
|
||||
if (err && err.length > 0) {
|
||||
show_content.value = false
|
||||
} else {
|
||||
useState().varsConfig.value = res
|
||||
}
|
||||
}
|
||||
useState().dataSections.value = Object.keys(useState().varsConfig.value)
|
||||
useState().dataSections.value.forEach(sec => {
|
||||
show_sections.value[sec] = { view: true, enabled: true, help: false}
|
||||
Object.keys(useState().varsConfig.value[sec]).forEach(itm => {
|
||||
show_items.value[`${sec}.${itm}`] = { view: true, enabled: true, help: false}
|
||||
})
|
||||
})
|
||||
useState().current_modelid.value = ''
|
||||
const [res,errmsg] = await get_serv_config()
|
||||
if (errmsg && errmsg.length > 0) {
|
||||
show_content.value = false
|
||||
} else {
|
||||
servConfig.value = res
|
||||
}
|
||||
track_action(null, { ref: 'config',text: 'server config'}, 'mount')
|
||||
})
|
||||
</script>
|
||||
302
src/views/Home.vue
Normal file
302
src/views/Home.vue
Normal file
@ -0,0 +1,302 @@
|
||||
<template>
|
||||
<div
|
||||
v-if="openMessageBox"
|
||||
class="fixed inset-0 bg-gray-600 overflow-y-auto h-full w-full z-80 dark:bg-gray-900 opacity-97"
|
||||
>
|
||||
<message-box-view
|
||||
:messageType="message_type"
|
||||
:openMessageBox="openMessageBox"
|
||||
:show_input="show_input"
|
||||
:input_placeholder="input_placeholder"
|
||||
:input_btns="input_btns"
|
||||
:select_ops="select_ops"
|
||||
:data_url_encoded="data_url_encoded"
|
||||
:inpType="oneInputType"
|
||||
@onInput="onInput"
|
||||
@onMessageBox="onMessageBox"
|
||||
@onLoadModel="onLoadModel"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="show_content" class="font-sans antialiased h-screen">
|
||||
<div class="container mx-auto max-w-screen-2xl main-container">
|
||||
<nav-menu
|
||||
class="bg-light-300 dark:bg-gray-900"
|
||||
:position="NavPosition.header"
|
||||
:openMessageBox="openMessageBox"
|
||||
:fixMenu="fixMenu"
|
||||
:show_infopanel="show_infopanel"
|
||||
:dataAuth="false"
|
||||
:useInfoPanel="false"
|
||||
:useLogin="true"
|
||||
:showinfo="show_info"
|
||||
:authinfo="auth_info"
|
||||
:needSave="needSave"
|
||||
:prefix="prefix"
|
||||
@onNavMenu="onNavMenu"
|
||||
/>
|
||||
<main
|
||||
id="cv-wrapper"
|
||||
class="rounded flex flex-col sm:flex-row-reverse shadow-2xl"
|
||||
:class="{ 'mt-11': fixMenu }"
|
||||
>
|
||||
<div
|
||||
v-if="show_infopanel"
|
||||
id="sidebar"
|
||||
class="rounded-r w-full lg:w-80 sm:max-w-sm p-8 border-l-1 border-indigo-200 bg-gradient-to-b from-indigo-300 via-indigo-200 to-indigo-100 dark:bg-gray-600 dark:from-indigo-500 dark:via-indigo-400 dark:to-indigo-800"
|
||||
>
|
||||
</div>
|
||||
<div class="content w-full p-5">
|
||||
<div class="prose flex lg:items-center lg:justify-center p-4 border-1 rounded-md border-gray-300 dark:border-gray-600 lg:w-full sm:w-full sm:max-w-sm shadow-xl bg-light-300 dark:bg-gray-900">
|
||||
<img v-if="isDark"
|
||||
class="m-auto m-5"
|
||||
width="500"
|
||||
:src="`${assetsPath}/images/cvgen_b.svg`"
|
||||
/>
|
||||
<img v-else
|
||||
class="m-auto mt-5"
|
||||
width="500"
|
||||
:src="`${assetsPath}/images/cvgen_w.svg`"
|
||||
/>
|
||||
</div>
|
||||
<div class="prose my-4">
|
||||
CVgen admin ...
|
||||
</div>
|
||||
</div>
|
||||
<hr class="hr-sep" />
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="text-center m-auto">
|
||||
<img v-if="isDark"
|
||||
class="m-auto mt-5"
|
||||
width="250"
|
||||
:src="`${assetsPath}/images/cvgen_b.svg`"
|
||||
/>
|
||||
<img v-else
|
||||
class="m-auto mt-5"
|
||||
width="250"
|
||||
:src="`${assetsPath}/images/cvgen_w.svg`"
|
||||
/>
|
||||
<h2 class="mt-8 text-2xl text-gray-700 dark:text-gray-400">{{ t('message.loading', 'Loading') }}...</h2>
|
||||
<h3> </h3>
|
||||
<h4>{{useState().connection.value.state}}</h4>
|
||||
</div>
|
||||
<div
|
||||
v-if="show_content"
|
||||
class="flex-1 lg:mx-11 sm:mx-0 -mt-10 text-center text-sm text-gray-600 border-gray-300 border-1 border-b-0 rounded-t-lg"
|
||||
>
|
||||
<nav-menu
|
||||
class="shadow-xl bg-light-300 dark:bg-gray-900"
|
||||
:position="NavPosition.footer"
|
||||
:fixMenu="fixMenu"
|
||||
:show_infopanel="show_infopanel"
|
||||
:dataAuth="false"
|
||||
:useInfoPanel="false"
|
||||
:useLogin="true"
|
||||
:showinfo="show_info"
|
||||
:authinfo="auth_info"
|
||||
:needSave="needSave"
|
||||
prefix="sec"
|
||||
:openMessageBox="openMessageBox"
|
||||
@onNavMenu="onNavMenu"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { useI18n } from 'vue-i18n'
|
||||
const i18n = useI18n()
|
||||
const { t } = useI18n()
|
||||
const router = useRouter()
|
||||
|
||||
import MessageBoxView from '~/components/MessageBoxView.vue'
|
||||
import NavMenu from '@/NavMenu.vue'
|
||||
import { isDark } from '~/composables'
|
||||
// import Modal from '@/Modal.vue'
|
||||
import useState from '~/hooks/useState'
|
||||
import { parseJwt,checkUserAuth } from '~/hooks/utilsAuth'
|
||||
import { send_data,show_message} from '~/hooks/utils'
|
||||
import { MessageType} from '~/typs'
|
||||
import { MessageBoxType, NavPosition, InputBtnsType, ModelType, ShowInfoType} from '~/typs/cv'
|
||||
import { load_currentRoute } from '~/hooks/loads'
|
||||
import { track_action } from '~/hooks/tracking'
|
||||
|
||||
const prefix = 'home'
|
||||
|
||||
const assetsPath = useState().ASSETS_PATH
|
||||
// const routeKy = router.currentRoute.value.params.ky || router.currentRoute.value.query.k || ''
|
||||
const message_type = ref(MessageBoxType.NotSet)
|
||||
const fixMenu = ref(false)
|
||||
const show_content = ref(true)
|
||||
const show_infopanel = ref(false)
|
||||
const openMessageBox = ref(false)
|
||||
const needSave = ref(false)
|
||||
const show_input = ref(false)
|
||||
const data_url_encoded = ref('')
|
||||
const input_btns = ref([] as InputBtnsType[])
|
||||
const input_placeholder = ref('')
|
||||
const oneInputType = ref('')
|
||||
|
||||
const onInput = (btn: InputBtnsType) => {
|
||||
switch (btn.id) {
|
||||
case 'ok':
|
||||
break
|
||||
case 'cancel':
|
||||
break
|
||||
}
|
||||
show_input.value = false
|
||||
}
|
||||
const select_ops = ref({} as ModelType)
|
||||
const show_info = ref({} as ShowInfoType)
|
||||
const auth_info = useState().authinfo
|
||||
|
||||
const refresh = () => {
|
||||
show_content.value = false
|
||||
setTimeout(() => show_content.value = true, 1)
|
||||
}
|
||||
|
||||
const onNavMenu = (item: { src: string, target: string }) => {
|
||||
switch (item.src) {
|
||||
case 'locale':
|
||||
track_action(null, { ref: 'locale',text: i18n.locale.value})
|
||||
refresh()
|
||||
break
|
||||
case 'infopanel':
|
||||
track_action(null, { ref: 'onNavMenu',text: 'item.src'})
|
||||
show_infopanel.value = !show_infopanel.value
|
||||
break
|
||||
case 'fixmenu':
|
||||
track_action(null, { ref: 'onNavMenu',text: 'item.src'})
|
||||
fixMenu.value = !fixMenu.value
|
||||
break
|
||||
case 'endinput':
|
||||
show_input.value = false
|
||||
break
|
||||
case 'select':
|
||||
track_action(null, { ref: 'onNavMenu',text: 'item.src'})
|
||||
message_type.value = MessageBoxType.Select
|
||||
openMessageBox.value = true
|
||||
break
|
||||
case 'save':
|
||||
track_action(null, { ref: 'onNavMenu',text: 'item.src'})
|
||||
input_placeholder.value = `${t('name', 'Name')} o 'data'`
|
||||
show_input.value = true
|
||||
message_type.value = MessageBoxType.Save
|
||||
data_url_encoded.value = ''
|
||||
openMessageBox.value = true
|
||||
break
|
||||
track_action(null, { ref: 'onNavMenu',text: 'item.src'})
|
||||
useState().authinfo.value.editable = !useState().authinfo.value.editable
|
||||
const state = useState().authinfo.value.editable ? 'on' : 'off'
|
||||
const msgTyp = state === 'on' ? MessageType.Warning : MessageType.Info
|
||||
show_message(msgTyp, `${t('saveload.editMode','Edit Mode')} ${t('cv.'+state,'')}`)
|
||||
break
|
||||
case 'viewchange':
|
||||
track_action(null, { ref: 'onNavMenu',text: 'item.src'})
|
||||
useState().authinfo.value.viewchange = !useState().authinfo.value.viewchange
|
||||
break
|
||||
case 'goto':
|
||||
const dom_id = document.getElementById(item.target)
|
||||
if (dom_id) {
|
||||
track_action(null, { ref: 'gotp',text: item.target})
|
||||
dom_id.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' })
|
||||
setTimeout(() => window.scrollBy(0, -40), 4000)
|
||||
}
|
||||
break
|
||||
}
|
||||
}
|
||||
const saveData = async(mode: string,val: string) => {
|
||||
const showinfo: ShowInfoType[] = useState().cvdata.value.showinfo
|
||||
message_type.value = MessageBoxType.Save
|
||||
const payload = parseJwt(localStorage.getItem(useState().AUTHKEY.value))
|
||||
const cv: any = {
|
||||
u: payload.id ? payload.id : '',
|
||||
data: {}
|
||||
}
|
||||
cv.data[val]={}
|
||||
Object.keys(useState().datalang.value).forEach(lng =>
|
||||
cv.data[val][lng] = useState().datalang.value[lng]
|
||||
)
|
||||
cv.data[val].main = useState().cvdata.value
|
||||
showinfo.forEach((it,idx) => {
|
||||
if (it.ky === useState().showinfo.value.ky) {
|
||||
cv.data[val].main[idx] = useState().showinfo.value
|
||||
}
|
||||
})
|
||||
const url = useState().CONFURLS.value.send || ''
|
||||
if (mode == 'send' && url !== '') {
|
||||
onMessageBox({src: 'done', val: ''})
|
||||
const res = await send_data(url, cv, true, true, () => {
|
||||
track_action(null, { ref: 'saveData',text: `${url} -> ${val}`})
|
||||
show_message(MessageType.Success, `${t('saveload.dataSaved','Data saved')}`,2000,() => {
|
||||
})
|
||||
})
|
||||
console.log(res)
|
||||
} else {
|
||||
track_action(null, { ref: 'saveData',text: `local_json -> ${val}`})
|
||||
show_message(MessageType.Warning, `${t('saveload.saveData','Save data')}`,2000,() => {
|
||||
data_url_encoded.value = `text/json;charset=utf-8,${encodeURIComponent(JSON.stringify(cv))}`
|
||||
})
|
||||
}
|
||||
}
|
||||
const onMessageBox = (item: { src: string, val: string }) => {
|
||||
switch (item.src) {
|
||||
case 'savedata':
|
||||
show_input.value = false
|
||||
saveData('local', item.val)
|
||||
break
|
||||
case 'sendata':
|
||||
show_input.value = false
|
||||
saveData('send', item.val)
|
||||
break
|
||||
case 'oneinput':
|
||||
const r = async() => {
|
||||
if (await checkUserAuth(item.val)) {
|
||||
oneInputType.value='text'
|
||||
openMessageBox.value = false
|
||||
if (!await load_currentRoute(router.currentRoute.value)) {
|
||||
show_message(MessageType.Error, `${t('saveload.loaderror','Load error')}`,2000)
|
||||
}
|
||||
} else {
|
||||
show_message(MessageType.Error, `${t('saveload.autherror','Auth error')}`,2000)
|
||||
}
|
||||
}
|
||||
r()
|
||||
break
|
||||
case 'endinput':
|
||||
show_input.value = false
|
||||
break
|
||||
case 'done':
|
||||
openMessageBox.value = false
|
||||
break
|
||||
case 'open':
|
||||
openMessageBox.value = true
|
||||
break
|
||||
}
|
||||
}
|
||||
// const onHome = () => {
|
||||
// const dom_body = document.getElementsByTagName('body')[0]
|
||||
// if (dom_body) {
|
||||
// dom_body.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' })
|
||||
// }
|
||||
// }
|
||||
const onLoadModel = (model: { id: string}) => {
|
||||
// if (useState().selectOps.value[model.id]) {
|
||||
// load_data_model(model.id, useState().DATA_URL.value, routeKy as string,true,() => {
|
||||
// show_content.value = false
|
||||
// show_message(MessageType.Success, `${t('saveload.dataLoaded','Data loaded')}`,2000,() => {
|
||||
// show_content.value = true
|
||||
// })
|
||||
// })
|
||||
// }
|
||||
}
|
||||
onBeforeMount(async() => {
|
||||
useState().dataSections.value = ['Config','Tracking','Users']
|
||||
// if (!useState().allowView.value && useState().userID.value === "?") {
|
||||
// oneInputType.value='password'
|
||||
// message_type.value=MessageBoxType.OneInput
|
||||
// openMessageBox.value=true
|
||||
// show_input.value=false
|
||||
// input_placeholder.value='Enter password'
|
||||
// }
|
||||
})
|
||||
</script>
|
||||
237
src/views/Login.vue
Normal file
237
src/views/Login.vue
Normal file
@ -0,0 +1,237 @@
|
||||
<template>
|
||||
<div v-if="isCheckin">
|
||||
<div class="spinner" style="margin: 100px auto; width: 80px; height: 80px;">
|
||||
<div class="dot1" />
|
||||
<div class="dot2" />
|
||||
</div>
|
||||
<div class="flex justify-center text-2xl">
|
||||
{{ t('message.loading') }} ...
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<section class="page-w bg-gray-400 dark:bg-gray-600 min-h-screen flex justify-center flex-wrap ">
|
||||
<figure class="my-auto w-[calc(100%+1rem)]">
|
||||
<div class="max-w-sm mx-auto overflow-hidden shadow-xl dark:bg-gray-900 bg-gray-100 rounded-3xl p-2">
|
||||
<div class="flex flex-row justify-center">
|
||||
<div class="mt-1.4 ml-2">
|
||||
<button class="!outline-none text-gray-800 dark:text-gray-200" @click="toggleDark()">
|
||||
<div v-if="isDark" i-carbon-sun />
|
||||
<div v-else i-carbon-moon />
|
||||
</button>
|
||||
</div>
|
||||
<div class="order-last flex-shrink-0">
|
||||
<MenuLocales :label-mode="localesLabelMode" :include-current="includeCurrLocale" />
|
||||
</div>
|
||||
<div class="p-1 ml-8 flex flex-shrink-0 justify-center flex-grow bg-transparent">
|
||||
<span v-if="use_logo" class="text-lg rounded-full">
|
||||
<img v-if="isDark"
|
||||
class="m-auto mt-5"
|
||||
width="250"
|
||||
:src="`${assetsPath}/images/cvgen_b.svg`"
|
||||
/>
|
||||
<img v-else
|
||||
class="m-auto mt-5"
|
||||
width="250"
|
||||
:src="`${assetsPath}/images/cvgen_w.svg`"
|
||||
/>
|
||||
</span>
|
||||
<h2 v-else class="text-center mb-1 text-lg heading ~info">
|
||||
{{ t('login.welcome') }}
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="use_logo" class="-mt-2 flex flex-row justify-center flex-none">
|
||||
<span class="mb-1 text-lg ">
|
||||
</span>
|
||||
</div>
|
||||
<div class="p-2">
|
||||
<p class="text-center mb-3 text-base support ">
|
||||
<span class="text-gray-400">{{ t('login.subtitle') }}</span>
|
||||
</p>
|
||||
<div class="container">
|
||||
<h5 class="hidden text-center subheading">
|
||||
<span class="text-gray-500">{{ t('login.subHeading') }}</span>
|
||||
</h5>
|
||||
<div class="hidden messages global mb-5">
|
||||
<span class="text-gray-500">{{ t('login.form','') }}</span>
|
||||
</div>
|
||||
<div id="login-password" class="mt-8">
|
||||
<form action="">
|
||||
<fieldset class="mt-10 relative">
|
||||
<input
|
||||
v-model="user"
|
||||
name="identifier"
|
||||
id="identifier"
|
||||
type="text"
|
||||
class="input-fld peer h-10 w-full border-b border-gray-500 py-2 focus:placeholder- focus:outline-none focus:border-indigo-500"
|
||||
autocomplete="username"
|
||||
@focus="errorMessage = ''"
|
||||
>
|
||||
<label for="identifier"
|
||||
class="input-lbl absolute left-0 -top-3.5 transition-all peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-400 peer-placeholder-shown:top-2 peer-focus:-top-3.5 peer-focus:text-gray-600 peer-focus:text-sm text-xs text-gray-600 dark:text-gray-500"
|
||||
>{{ t('login.user_email') }}</label>
|
||||
<div class="messages " />
|
||||
</fieldset>
|
||||
<fieldset v-if="!isRecovery" class="mt-10 relative">
|
||||
<input
|
||||
v-model="password"
|
||||
name="password"
|
||||
class="input-fld peer h-10 w-full border-b border-gray-500 py-2 focus:placeholder- focus:outline-none focus:border-indigo-500"
|
||||
:type="passwordVisible ? 'text' : 'password'"
|
||||
autocomplete="current-password"
|
||||
@focus="errorMessage = ''"
|
||||
>
|
||||
|
||||
<label for="password"
|
||||
class="input-lbl absolute left-0 -top-3.5 transition-all peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-400 peer-placeholder-shown:top-2 peer-focus:-top-3.5 peer-focus:text-gray-600 peer-focus:text-sm text-xs text-gray-600 dark:text-gray-500"
|
||||
>
|
||||
{{ t('login.password') }}
|
||||
</label>
|
||||
<svg class="password-visibility-toggle cursor-pointer absolute top-4 -right-70" @click="togglePasswordVisible">
|
||||
<path v-if="!passwordVisible" class="eye-open" d="M8 2.36365C4.36364 2.36365 1.25818 4.62547 0 7.81819C1.25818 11.0109 4.36364 13.2727 8 13.2727C11.6364 13.2727 14.7418 11.0109 16 7.81819C14.7418 4.62547 11.6364 2.36365 8 2.36365ZM8 11.4546C5.99273 11.4546 4.36364 9.82547 4.36364 7.81819C4.36364 5.81092 5.99273 4.18183 8 4.18183C10.0073 4.18183 11.6364 5.81092 11.6364 7.81819C11.6364 9.82547 10.0073 11.4546 8 11.4546ZM8 5.63637C6.79273 5.63637 5.81818 6.61092 5.81818 7.81819C5.81818 9.02547 6.79273 10 8 10C9.20727 10 10.1818 9.02547 10.1818 7.81819C10.1818 6.61092 9.20727 5.63637 8 5.63637Z" />
|
||||
<path v-else class="eye-closed" fill-rule="evenodd" clip-rule="evenodd" d="M14.8222 1.85355C15.0175 1.65829 15.0175 1.34171 14.8222 1.14645C14.627 0.951184 14.3104 0.951184 14.1151 1.14645L12.005 3.25653C10.8901 2.482 9.56509 1.92505 8.06 1.92505C3 1.92505 0 7.92505 0 7.92505C0 7.92505 1.16157 10.2482 3.25823 12.0033L1.19366 14.0679C0.998396 14.2632 0.998396 14.5798 1.19366 14.775C1.38892 14.9703 1.7055 14.9703 1.90076 14.775L14.8222 1.85355ZM4.85879 10.4028L6.29159 8.96998C6.10643 8.66645 6 8.3089 6 7.92505C6 6.81505 6.89 5.92505 8 5.92505C8.38385 5.92505 8.7414 6.03148 9.04493 6.21664L10.4777 4.78384C9.79783 4.24654 8.93821 3.92505 8 3.92505C5.8 3.92505 4 5.72505 4 7.92505C4 8.86326 4.32149 9.72288 4.85879 10.4028ZM11.8644 6.88906L13.8567 4.8968C15.2406 6.40616 16 7.92505 16 7.92505C16 7.92505 13 13.925 8.06 13.925C7.09599 13.925 6.20675 13.7073 5.39878 13.3547L6.96401 11.7895C7.29473 11.8779 7.64207 11.925 8 11.925C10.22 11.925 12 10.145 12 7.92505C12 7.56712 11.9529 7.21978 11.8644 6.88906ZM9.33847 9.41501L9.48996 9.26352C9.44222 9.31669 9.39164 9.36726 9.33847 9.41501Z" />
|
||||
</svg>
|
||||
<div class="float-right mt-2">
|
||||
<a v-if="allow_reset" class="flex border border-dotted border-gray-700 dark:border-gray-500 rounded-lg p-2 hover:bg-gray-300 dark:hover:bg-gray-700" href="#"
|
||||
@click.prevent="forgot">
|
||||
<div class="text-xs text-gray-400 dark:text-gray-500">{{ t('login.forgot') }} </div>
|
||||
</a>
|
||||
</div>
|
||||
</fieldset>
|
||||
<div v-if="connection.state !== ''" class="messages text-red-400 ">
|
||||
{{ t(connection.state) }}
|
||||
</div>
|
||||
<div v-if="errorMessage !== ''" class="messages text-red-400 ">
|
||||
{{ t(errorMessage) }}
|
||||
</div>
|
||||
<input name="csrf_token" type="hidden" value="">
|
||||
<div class="mt-5 flex justify-center">
|
||||
<button v-if="isRecovery" type="submit" @click.prevent="recovery"
|
||||
class="text-lg flex-grow flex-shrink-0 bg-indigo-500 hover:bg-indigo-700 border-indigo-500 hover:border-indigo-700 text-sm border-4 text-white py-1 px-2 rounded"
|
||||
>
|
||||
{{ t('login.reset') }} {{ t('login.password') }}
|
||||
</button>
|
||||
<button v-else type="submit" @click.prevent="signIn"
|
||||
class="text-lg flex-grow flex-shrink-0 bg-indigo-500 hover:bg-indigo-700 border-indigo-500 hover:border-indigo-700 text-sm border-4 text-white py-1 px-2 rounded"
|
||||
>
|
||||
{{ t('login.signin') }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div v-if="message.length > 0" class="messages text-green-600 dark:text-green-300 mt-3 ml-2">
|
||||
{{ t(message) }}
|
||||
</div>
|
||||
<div v-if="allow_register && allow_reset" class="alternative-actions border-b border-gray-700 dark:border-gray-500 flex gap-4 py-4 section info justify-center ">
|
||||
<!-- <a href="auth/registration">Recover password</a> -->
|
||||
<a v-if="allow_register" class="border border-dotted border-gray-700 dark:border-gray-500 rounded-lg p-2 flex flex-col items-center hover:bg-gray-300 dark:hover:bg-gray-700" href="#" @click.prevent="register">
|
||||
<div>{{ t('login.register') }} </div>
|
||||
<div class="text-xs border-t border-indigo-500 dark:border-indigo-300 pt-1">{{ t('login.newuser') }}</div>
|
||||
</a>
|
||||
<a v-if="allow_reset" class="border border-dotted border-gray-700 dark:border-gray-500 rounded-lg p-2 flex flex-col items-center hover:bg-gray-300 dark:hover:bg-gray-700" href="#" @click.prevent="recovery">
|
||||
<div>{{ t('login.reset') }} </div>
|
||||
<div class="text-xs border-t border-indigo-500 dark:border-indigo-300 pt-1"> {{ t('login.password') }}</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<section style="display: none" class="section p-4">
|
||||
</section>
|
||||
</figure>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import MenuLocales from '@/MenuLocales.vue'
|
||||
import {LocalesLabelModes} from '~/typs'
|
||||
import { isDark, toggleDark } from '~/composables'
|
||||
import useState from '~/hooks/useState'
|
||||
import { fetch_json,send_data } from '~/hooks/utils'
|
||||
import { utf8_to_b64 } from '~/hooks/tools'
|
||||
import { onTimeoutAuth } from '~/hooks/utilsAuth'
|
||||
|
||||
const assetsPath = useState().ASSETS_PATH.value
|
||||
const router = useRouter()
|
||||
const use_logo = router.currentRoute.value.meta.use_logo
|
||||
const allow_register = useState().ALLOW_REGISTER
|
||||
const allow_reset = useState().RESET_PASSWORD
|
||||
const t = useI18n().t
|
||||
const includeCurrLocale = true
|
||||
|
||||
const { connection } = useState()
|
||||
connection.value.state = ''
|
||||
const localesLabelMode = ref(LocalesLabelModes.auto)
|
||||
const errorMessage = ref('')
|
||||
const isCheckin = ref(false)
|
||||
const isRecovery = ref(false)
|
||||
const user = ref('')
|
||||
const password = ref('')
|
||||
const passwordVisible = ref(false)
|
||||
const message = ref('')
|
||||
const togglePasswordVisible = () => passwordVisible.value = !passwordVisible.value
|
||||
const forgot = () => {
|
||||
isRecovery.value= true
|
||||
}
|
||||
const signIn = async() => {
|
||||
if (user.value.length === 0 || password.value.length === 0) {
|
||||
errorMessage.value = 'login.nodata'
|
||||
return
|
||||
}
|
||||
console.log('signIn')
|
||||
let success = false
|
||||
const url = useState().CONFURLS.value.login || ''
|
||||
if (url.length == 0 ) {
|
||||
errorMessage.value = 'login.no_url_found'
|
||||
return
|
||||
}
|
||||
errorMessage.value = ''
|
||||
connection.value.state = ''
|
||||
const formData = { username: user.value, password: utf8_to_b64(password.value)}
|
||||
const [responseData,_err] = await send_data(url, formData, false, false)
|
||||
if (responseData && responseData.token && responseData.token.length > 0) {
|
||||
localStorage.setItem(useState().AUTHKEY.value,responseData.token)
|
||||
onTimeoutAuth()
|
||||
// if (responseData.defs)
|
||||
// store.dispatch(AppDefsAction.addDefs, { key: map_key, defs: responseData.defs })
|
||||
success = true
|
||||
useState().checkin.value = false
|
||||
useState().userID.value = user.value
|
||||
}
|
||||
if (success) {
|
||||
const srcRoute = useState().sourceRoute.value.length > 0 ? useState().sourceRoute.value : '/'
|
||||
router.push(srcRoute)
|
||||
} else {
|
||||
useState().userID.value = ''
|
||||
errorMessage.value = 'login.invalidcredentials'
|
||||
}
|
||||
}
|
||||
const register = () => {
|
||||
// TODO register
|
||||
console.log('register')
|
||||
}
|
||||
const recovery = async() => {
|
||||
if (user.value.length === 0) {
|
||||
errorMessage.value = 'login.nodata'
|
||||
return
|
||||
}
|
||||
// let success = false
|
||||
const url = useState().CONFURLS.value.recovery || ''
|
||||
if (url.length == 0 ) {
|
||||
errorMessage.value = 'login.no_url_found'
|
||||
return
|
||||
}
|
||||
errorMessage.value = ''
|
||||
connection.value.state = ''
|
||||
const urlPath = `${url}/${user.value}`
|
||||
const [_,err] = await fetch_json(urlPath, 2000, false)
|
||||
if (err) {
|
||||
errorMessage.value = 'login.invalidcredentials'
|
||||
} else {
|
||||
message.value = 'login.checkemail'
|
||||
}
|
||||
}
|
||||
</script>
|
||||
111
src/views/Logout.vue
Normal file
111
src/views/Logout.vue
Normal file
@ -0,0 +1,111 @@
|
||||
<template>
|
||||
<div v-if="isCheckin">
|
||||
<div class="spinner" style="margin: 100px auto; width: 80px; height: 80px;">
|
||||
<div class="dot1" />
|
||||
<div class="dot2" />
|
||||
</div>
|
||||
<div class="flex justify-center text-2xl">
|
||||
{{ t('message.loading') }} ...
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<section class="page-w bg-gray-400 dark:bg-gray-600 min-h-screen flex justify-center flex-wrap ">
|
||||
<figure class="my-auto login w-[calc(100%+1rem)]">
|
||||
<div class="max-w-sm mx-auto overflow-hidden shadow-xl dark:bg-gray-900 bg-gray-100 rounded-3xl p-2">
|
||||
<div class="flex flex-row justify-center">
|
||||
<div class="mt-1.4 ml-2">
|
||||
<button class="!outline-none text-gray-800 dark:text-gray-200" @click="toggleDark()">
|
||||
<div v-if="isDark" i-carbon-sun />
|
||||
<div v-else i-carbon-moon />
|
||||
</button>
|
||||
</div>
|
||||
<div class="order-last flex-shrink-0">
|
||||
<MenuLocales :label-mode="localesLabelMode" :include-current="includeCurrLocale" />
|
||||
</div>
|
||||
<div class="p-1 ml-8 flex flex-shrink-0 justify-center flex-grow bg-transparent">
|
||||
<span v-if="use_logo" class="text-lg rounded-full">
|
||||
<img v-if="isDark"
|
||||
class="m-auto mt-5"
|
||||
width="250"
|
||||
:src="`${assetsPath}/images/cvgen_b.svg`"
|
||||
/>
|
||||
<img v-else
|
||||
class="m-auto mt-5"
|
||||
width="250"
|
||||
:src="`${assetsPath}/images/cvgen_w.svg`"
|
||||
/>
|
||||
</span>
|
||||
<h2 v-else class="text-center mb-1 text-lg heading ~info">
|
||||
{{ t('login.welcome') }}
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="use_logo" class="-mt-2 flex flex-row justify-center flex-none">
|
||||
<span class="mb-1 text-lg ">
|
||||
</span>
|
||||
</div>
|
||||
<div class="p-2">
|
||||
<p class="text-center mb-3 text-base support ~info dark:text-gray-100">
|
||||
{{ t('login.subtitle') }}
|
||||
</p>
|
||||
<div class="container">
|
||||
<h5 class="text-center subheading mb-4 dark:text-gray-200">
|
||||
{{ t('login.end_session') }}
|
||||
</h5>
|
||||
<div class="messages global">
|
||||
</div>
|
||||
<div class="alternative-actions border-t border-b flex gap-4 py-2 section justify-center bg-gray-300 dark:bg-gray-600">
|
||||
<!-- <a href="auth/registration">Recover password</a> -->
|
||||
<h3 class=" ~critical text-xl p-4 dark:text-gray-100">
|
||||
{{ t('login.see_you_soon','') }}
|
||||
</h3>
|
||||
</div>
|
||||
<div class="mt-8 flex justify-center">
|
||||
<button type="submit"
|
||||
class="text-lg flex-grow flex-shrink-0 bg-indigo-500 hover:bg-indigo-700 border-indigo-500 hover:border-indigo-700 text-sm border-4 text-white py-1 px-2 rounded"
|
||||
@click.prevent="signIn">
|
||||
{{ t('login.signin') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</figure>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
ref,
|
||||
onMounted,
|
||||
} from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
// import { useStore } from 'vuex'
|
||||
// import { AppDefsAction } from '~/store/types'
|
||||
import MenuLocales from '@/MenuLocales.vue'
|
||||
import {LocalesLabelModes} from '~/typs'
|
||||
import { isDark, toggleDark } from '~/composables'
|
||||
import useState from '~/hooks/useState'
|
||||
|
||||
const assetsPath = useState().ASSETS_PATH.value
|
||||
|
||||
const router = useRouter()
|
||||
const use_logo = router.currentRoute.value.meta.use_logo
|
||||
const t = useI18n().t
|
||||
// const store = useStore()
|
||||
// const lang = computed(() => store.state.app_lang.lang)
|
||||
const includeCurrLocale = true // computed(() => appDefs.value.includeCurrLocale || false)
|
||||
|
||||
const localesLabelMode = ref(LocalesLabelModes.auto)
|
||||
const isCheckin = ref(false)
|
||||
const signIn = async() => {
|
||||
router.push('/login')
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
// TODO call backend for logout
|
||||
localStorage.removeItem(useState().AUTHKEY.value)
|
||||
})
|
||||
|
||||
</script>
|
||||
318
src/views/Register.vue
Normal file
318
src/views/Register.vue
Normal file
@ -0,0 +1,318 @@
|
||||
<template>
|
||||
<div v-if="isCheckin">
|
||||
<div class="spinner" style="margin: 100px auto; width: 80px; height: 80px;">
|
||||
<div class="dot1" />
|
||||
<div class="dot2" />
|
||||
</div>
|
||||
<div class="flex justify-center text-2xl">
|
||||
{{ t('message.loading') }} ...
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<section v-if="show_content && (invitationData.role || request_id)" class="page-w bg-gray-400 dark:bg-gray-600 min-h-screen flex justify-center flex-wrap ">
|
||||
<figure class="my-auto w-[calc(100%+1rem)]">
|
||||
<div class="max-w-sm mx-auto overflow-hidden shadow-xl dark:bg-gray-900 bg-gray-100 rounded-3xl p-2">
|
||||
<div class="flex flex-row justify-center">
|
||||
<div class="mt-1.4 ml-2">
|
||||
<button class="!outline-none text-gray-800 dark:text-gray-200" @click="toggleDark()">
|
||||
<div v-if="isDark" i-carbon-sun />
|
||||
<div v-else i-carbon-moon />
|
||||
</button>
|
||||
</div>
|
||||
<div class="order-last flex-shrink-0">
|
||||
<MenuLocales :label-mode="localesLabelMode" :include-current="includeCurrLocale" />
|
||||
</div>
|
||||
<div class="p-1 ml-8 flex flex-shrink-0 justify-center flex-grow bg-transparent">
|
||||
<span v-if="use_logo" class="text-lg rounded-full">
|
||||
<img v-if="isDark"
|
||||
class="m-auto mt-5"
|
||||
width="250"
|
||||
:src="`${assetsPath}/images/cvgen_b.svg`"
|
||||
/>
|
||||
<img v-else
|
||||
class="m-auto mt-5"
|
||||
width="250"
|
||||
:src="`${assetsPath}/images/cvgen_w.svg`"
|
||||
/>
|
||||
</span>
|
||||
<h2 v-else class="text-center mb-1 text-lg heading ~info">
|
||||
{{ t('login.welcome') }}
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="use_logo" class="-mt-2 flex flex-row justify-center flex-none">
|
||||
<span class="mb-1 text-lg ">
|
||||
</span>
|
||||
</div>
|
||||
<div class="p-2">
|
||||
<p class="text-center mb-3 text-base support ">
|
||||
<span class="text-gray-400">{{ t('login.subtitle') }}</span>
|
||||
</p>
|
||||
<div class="container">
|
||||
<h5 class="hidden text-center subheading">
|
||||
<span class="text-gray-500">{{ t('login.subHeading') }}</span>
|
||||
</h5>
|
||||
<div class="hidden messages global mb-5">
|
||||
<span class="text-gray-500">{{ t('login.form','') }}</span>
|
||||
</div>
|
||||
<div id="login-password" class="mt-8">
|
||||
<form action="">
|
||||
<fieldset v-if="is_register" class="mt-10 relative">
|
||||
<input
|
||||
v-model="user"
|
||||
name="identifier"
|
||||
id="identifier"
|
||||
type="text"
|
||||
class="input-fld peer h-10 w-full border-b border-gray-500 py-2 focus:placeholder- focus:outline-none focus:border-indigo-500"
|
||||
autocomplete="username"
|
||||
@focus="errorMessage = ''"
|
||||
>
|
||||
<label for="identifier"
|
||||
class="input-lbl absolute left-0 -top-3.5 transition-all peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-400 peer-placeholder-shown:top-2 peer-focus:-top-3.5 peer-focus:text-gray-600 peer-focus:text-sm text-xs text-gray-600 dark:text-gray-500 text-xs text-gray-600 dark:text-gray-500"
|
||||
>{{ t('login.username') }}</label>
|
||||
<div class="messages " />
|
||||
</fieldset>
|
||||
<fieldset v-if="is_register" class="mt-10 relative">
|
||||
<input
|
||||
v-model="email"
|
||||
name="email"
|
||||
id="email"
|
||||
type="text"
|
||||
class="input-fld peer h-10 w-full border-b border-gray-500 py-2 focus:placeholder- focus:outline-none focus:border-indigo-500"
|
||||
autocomplete="email"
|
||||
@focus="errorMessage = ''"
|
||||
>
|
||||
<label for="identifier"
|
||||
class="input-lbl absolute left-0 -top-3.5 transition-all peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-400 peer-placeholder-shown:top-2 peer-focus:-top-3.5 peer-focus:text-gray-600 peer-focus:text-sm text-xs text-gray-600 dark:text-gray-500"
|
||||
>{{ t('login.email') }}</label>
|
||||
<div class="messages " />
|
||||
</fieldset>
|
||||
<fieldset class="mt-10 relative">
|
||||
<input
|
||||
v-model="password"
|
||||
name="password"
|
||||
class="input-fld peer h-10 w-full border-b border-gray-500 py-2 focus:placeholder- focus:outline-none focus:border-indigo-500"
|
||||
:type="passwordVisible ? 'text' : 'password'"
|
||||
autocomplete="current-password"
|
||||
@focus="errorMessage = ''"
|
||||
>
|
||||
|
||||
<label for="password"
|
||||
class="input-lbl absolute left-0 -top-3.5 transition-all peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-400 peer-placeholder-shown:top-2 peer-focus:-top-3.5 peer-focus:text-gray-600 peer-focus:text-sm text-xs text-gray-600 dark:text-gray-500"
|
||||
>
|
||||
{{ t('login.password') }}
|
||||
</label>
|
||||
<div v-if="connection.state !== ''" class="messages text-red-400 ">
|
||||
{{ t(connection.state) }}
|
||||
</div>
|
||||
<div v-if="errorMessage !== ''" class="messages text-red-400 ">
|
||||
{{ t(errorMessage) }}
|
||||
</div>
|
||||
<svg class="password-visibility-toggle absolute top-4 -right-70 cursor-pointer" @click="togglePasswordVisible">
|
||||
<path v-if="!passwordVisible" class="eye-open" d="M8 2.36365C4.36364 2.36365 1.25818 4.62547 0 7.81819C1.25818 11.0109 4.36364 13.2727 8 13.2727C11.6364 13.2727 14.7418 11.0109 16 7.81819C14.7418 4.62547 11.6364 2.36365 8 2.36365ZM8 11.4546C5.99273 11.4546 4.36364 9.82547 4.36364 7.81819C4.36364 5.81092 5.99273 4.18183 8 4.18183C10.0073 4.18183 11.6364 5.81092 11.6364 7.81819C11.6364 9.82547 10.0073 11.4546 8 11.4546ZM8 5.63637C6.79273 5.63637 5.81818 6.61092 5.81818 7.81819C5.81818 9.02547 6.79273 10 8 10C9.20727 10 10.1818 9.02547 10.1818 7.81819C10.1818 6.61092 9.20727 5.63637 8 5.63637Z" />
|
||||
<path v-else class="eye-closed" fill-rule="evenodd" clip-rule="evenodd" d="M14.8222 1.85355C15.0175 1.65829 15.0175 1.34171 14.8222 1.14645C14.627 0.951184 14.3104 0.951184 14.1151 1.14645L12.005 3.25653C10.8901 2.482 9.56509 1.92505 8.06 1.92505C3 1.92505 0 7.92505 0 7.92505C0 7.92505 1.16157 10.2482 3.25823 12.0033L1.19366 14.0679C0.998396 14.2632 0.998396 14.5798 1.19366 14.775C1.38892 14.9703 1.7055 14.9703 1.90076 14.775L14.8222 1.85355ZM4.85879 10.4028L6.29159 8.96998C6.10643 8.66645 6 8.3089 6 7.92505C6 6.81505 6.89 5.92505 8 5.92505C8.38385 5.92505 8.7414 6.03148 9.04493 6.21664L10.4777 4.78384C9.79783 4.24654 8.93821 3.92505 8 3.92505C5.8 3.92505 4 5.72505 4 7.92505C4 8.86326 4.32149 9.72288 4.85879 10.4028ZM11.8644 6.88906L13.8567 4.8968C15.2406 6.40616 16 7.92505 16 7.92505C16 7.92505 13 13.925 8.06 13.925C7.09599 13.925 6.20675 13.7073 5.39878 13.3547L6.96401 11.7895C7.29473 11.8779 7.64207 11.925 8 11.925C10.22 11.925 12 10.145 12 7.92505C12 7.56712 11.9529 7.21978 11.8644 6.88906ZM9.33847 9.41501L9.48996 9.26352C9.44222 9.31669 9.39164 9.36726 9.33847 9.41501Z" />
|
||||
</svg>
|
||||
</fieldset>
|
||||
<input name="csrf_token" type="hidden" value="">
|
||||
<div class="mt-10 flex justify-center">
|
||||
<button v-if="is_register" type="submit" @click.prevent="onRegister"
|
||||
class="text-lg flex-grow flex-shrink-0 bg-indigo-500 hover:bg-indigo-700 border-indigo-500 hover:border-indigo-700 text-sm border-4 text-white py-1 px-2 rounded"
|
||||
>
|
||||
{{ t('login.register') }}
|
||||
</button>
|
||||
<button v-else type="submit" @click.prevent="onSend"
|
||||
class="text-lg flex-grow flex-shrink-0 bg-indigo-500 hover:bg-indigo-700 border-indigo-500 hover:border-indigo-700 text-sm border-4 text-white py-1 px-2 rounded"
|
||||
>
|
||||
{{ t('send') }}
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<section style="display: none" class="section p-4">
|
||||
</section>
|
||||
</figure>
|
||||
</section>
|
||||
<div v-else class="text-center m-auto">
|
||||
<img v-if="isDark"
|
||||
class="m-auto mt-5"
|
||||
width="250"
|
||||
:src="`${assetsPath}/images/cvgen_b.svg`"
|
||||
@click="router.push(goRoute)"
|
||||
/>
|
||||
<img v-else
|
||||
class="m-auto mt-5"
|
||||
width="250"
|
||||
:src="`${assetsPath}/images/cvgen_w.svg`"
|
||||
@click="router.push(goRoute)"
|
||||
/>
|
||||
<h2 class="mt-8 text-2xl text-gray-700 dark:text-gray-400">{{ t('message.loading', 'Loading') }}...</h2>
|
||||
<h4>{{useState().connection.value.state}}</h4>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import MenuLocales from '@/MenuLocales.vue'
|
||||
import {LocalesLabelModes,InvitationDataType} from '~/typs'
|
||||
import { isDark, toggleDark } from '~/composables'
|
||||
import useState from '~/hooks/useState'
|
||||
import { onTimeoutAuth } from '~/hooks/utilsAuth'
|
||||
import { MessageType } from '~/typs'
|
||||
import { show_message,send_data } from '~/hooks/utils'
|
||||
import { b64_to_utf8,utf8_to_b64 } from '~/hooks/tools'
|
||||
|
||||
const assetsPath = useState().ASSETS_PATH.value
|
||||
const router = useRouter()
|
||||
const goRoute = "/"
|
||||
const use_logo = router.currentRoute.value.meta.use_logo
|
||||
const t = useI18n().t
|
||||
const includeCurrLocale = true
|
||||
const is_register = computed(() => {
|
||||
switch(router.currentRoute.value.name) {
|
||||
case 'Register':
|
||||
return true
|
||||
default:
|
||||
return false
|
||||
}
|
||||
})
|
||||
const show_content = ref(true)
|
||||
const invitationData = ref({} as InvitationDataType)
|
||||
|
||||
const { connection } = useState()
|
||||
connection.value.state = ''
|
||||
const localesLabelMode = ref(LocalesLabelModes.auto)
|
||||
const errorMessage = ref('')
|
||||
const isCheckin = ref(false)
|
||||
const user = ref('')
|
||||
const email = ref('')
|
||||
const password = ref('')
|
||||
const passwordVisible = ref(false)
|
||||
const togglePasswordVisible = () => passwordVisible.value = !passwordVisible.value
|
||||
const request_id = ref('')
|
||||
const onSend = async() => {
|
||||
if (request_id.value.length === 0 || password.value.length === 0 ) {
|
||||
errorMessage.value = 'login.nodata'
|
||||
return
|
||||
}
|
||||
const url = useState().CONFURLS.value.sendrecovery || ''
|
||||
if (url.length == 0 ) {
|
||||
errorMessage.value = 'login.no_url_found'
|
||||
return
|
||||
}
|
||||
errorMessage.value = ''
|
||||
connection.value.state = ''
|
||||
const formData = {
|
||||
id: request_id.value,
|
||||
val: utf8_to_b64(password.value),
|
||||
}
|
||||
const [responseData,_err] = await send_data(url, formData, false, false)
|
||||
if (responseData && responseData.status && responseData.status === 'ok') {
|
||||
const srcRoute = useState().sourceRoute.value.length > 0 ? useState().sourceRoute.value : '/'
|
||||
router.push(srcRoute)
|
||||
} else {
|
||||
useState().userID.value = ''
|
||||
errorMessage.value = 'login.invalidcredentials'
|
||||
}
|
||||
}
|
||||
const onRegister = async() => {
|
||||
if (user.value.length === 0 || password.value.length === 0 || email.value.length === 0 ) {
|
||||
errorMessage.value = 'login.nodata'
|
||||
return
|
||||
}
|
||||
let success = false
|
||||
const url = useState().CONFURLS.value.newuser || ''
|
||||
if (url.length == 0 ) {
|
||||
errorMessage.value = 'login.no_url_found'
|
||||
return
|
||||
}
|
||||
errorMessage.value = ''
|
||||
connection.value.state = ''
|
||||
const formData = {
|
||||
username: user.value,
|
||||
email: email.value,
|
||||
password: utf8_to_b64(password.value),
|
||||
role: invitationData.value.role,
|
||||
data: invitationData.value.data,
|
||||
}
|
||||
const [responseData,_err] = await send_data(url, formData, true, false)
|
||||
if (responseData && responseData.status && responseData.status === 'ok') {
|
||||
// if (responseData.defs)
|
||||
// store.dispatch(AppDefsAction.addDefs, { key: map_key, defs: responseData.defs })
|
||||
success = true
|
||||
useState().checkin.value = false
|
||||
useState().userID.value = user.value
|
||||
}
|
||||
if (success) {
|
||||
localStorage.removeItem(useState().AUTHKEY.value)
|
||||
const srcRoute = useState().sourceRoute.value.length > 0 ? useState().sourceRoute.value : '/'
|
||||
router.push(srcRoute)
|
||||
} else {
|
||||
useState().userID.value = ''
|
||||
errorMessage.value = 'login.invalidcredentials'
|
||||
}
|
||||
}
|
||||
const load_invitation_data = async (id: string): Promise<[any,string]> => {
|
||||
let url = useState().CONFURLS.value.invitation || ''
|
||||
if (url.length == 0)
|
||||
return [{},'No URL defined']
|
||||
url = `${url}/${id}`
|
||||
let res: any = {}
|
||||
let error = null
|
||||
try {
|
||||
const response = await self.fetch(url, {
|
||||
method: 'GET',
|
||||
})
|
||||
if (response.ok) {
|
||||
res = await response.json()
|
||||
if (res.data) {
|
||||
error = null
|
||||
} else {
|
||||
error = res.message
|
||||
}
|
||||
} else {
|
||||
error = response.statusText
|
||||
}
|
||||
}
|
||||
catch (err: any) {
|
||||
error = err.message
|
||||
}
|
||||
if (error) {
|
||||
show_message(MessageType.Error, `'Load invitation info' -> ${error}`, 5000)
|
||||
useState().connection.value.state = 'connection.error'
|
||||
return [{}, error]
|
||||
}
|
||||
return [res,error]
|
||||
}
|
||||
onBeforeMount(async() => {
|
||||
const id = router.currentRoute.value.params.id || router.currentRoute.value.query.id || ''
|
||||
request_id.value = id as string
|
||||
show_content.value = false
|
||||
if (is_register.value) {
|
||||
const [res,error] = await load_invitation_data(id as string)
|
||||
if (error && error.length > 0) {
|
||||
return
|
||||
}
|
||||
try {
|
||||
invitationData.value = JSON.parse(b64_to_utf8(res.data))
|
||||
} catch (err: any) {
|
||||
console.log(err)
|
||||
}
|
||||
if (res && res.auth) {
|
||||
localStorage.setItem(useState().AUTHKEY.value,res.auth)
|
||||
onTimeoutAuth()
|
||||
}
|
||||
if (invitationData.value.email) {
|
||||
email.value = invitationData.value.email
|
||||
show_content.value = true
|
||||
}
|
||||
} else if (request_id.value.length > 0) {
|
||||
show_content.value = true
|
||||
}
|
||||
})
|
||||
</script>
|
||||
678
src/views/Tracking.vue
Normal file
678
src/views/Tracking.vue
Normal file
@ -0,0 +1,678 @@
|
||||
<template>
|
||||
<div
|
||||
v-if="openMessageBox"
|
||||
class="fixed inset-0 bg-gray-600 overflow-y-auto h-full w-full z-80 dark:bg-gray-900 opacity-97"
|
||||
>
|
||||
<message-box-view
|
||||
:messageType="message_type"
|
||||
:openMessageBox="openMessageBox"
|
||||
:show_input="show_input"
|
||||
:input_placeholder="input_placeholder"
|
||||
:input_btns="input_btns"
|
||||
:select_ops="select_ops"
|
||||
:data_url_encoded="data_url_encoded"
|
||||
:inpType="oneInputType"
|
||||
@onInput="onInput"
|
||||
@onMessageBox="onMessageBox"
|
||||
@onLoadModel="onLoadModel"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="show_content" class="font-sans antialiased">
|
||||
<div class="container mx-auto max-w-screen-2xl main-container">
|
||||
<nav-menu
|
||||
class="bg-light-300 dark:bg-gray-900"
|
||||
:position="NavPosition.header"
|
||||
:openMessageBox="openMessageBox"
|
||||
:fixMenu="fixMenu"
|
||||
:show_infopanel="show_infopanel"
|
||||
:dataAuth="false"
|
||||
:useInfoPanel="true"
|
||||
:useLogin="true"
|
||||
:showinfo="show_info"
|
||||
:authinfo="auth_info"
|
||||
:needSave="needSave"
|
||||
:useEdit="true"
|
||||
:prefix="prefix"
|
||||
@onNavMenu="onNavMenu"
|
||||
/>
|
||||
<div v-if="trackingList.length > 0" class="font-sans antialiased pb-3 border-b-1 border-gray-500 ">
|
||||
<h2 class="section-headline my-4 px-5 pb-2"
|
||||
:class="{'bg-gray-200 dark:bg-gray-700 border-1 rounded-tl-xl rounded-r-3xl border-indigo-500': show_payload}"
|
||||
:id="`${prefix}-sec_${prefix}_list`"
|
||||
>
|
||||
<span v-if="show_list" class="text-sm">{{t('tracking.list','List')}}</span>
|
||||
<button
|
||||
class="no-print text-sm float-right icon-btn mt-2 -mr-3 !outline-none text-gray-500 dark:text-gray-400"
|
||||
@click.prevent="onShowListBtn"
|
||||
>
|
||||
<div v-if="show_list" i-carbon-view-off />
|
||||
<div v-else class="noprint flex -mt-3">
|
||||
<div class="text-xs" :class="{'text-indigo-600 dark:text-indigo-300 mr-1': !show_payload}">{{t('tracking.list','List')}}</div>
|
||||
<div i-carbon-view />
|
||||
</div>
|
||||
</button>
|
||||
</h2>
|
||||
<ul v-if="show_list" class="flex mx-2 pb-2">
|
||||
<li v-for="(item,index) in trackingList" >
|
||||
<button
|
||||
@click="onClickItemList(item,index)"
|
||||
class="btn-msg flex ml-2"
|
||||
>
|
||||
<div i-carbon-list /> <div class="ml-2 text-sm"> {{item}} </div>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<main
|
||||
v-if="trackingData"
|
||||
:id="`${prefix}-sec_${prefix}_data`"
|
||||
class="rounded flex flex-col sm:flex-row-reverse shadow-2xl"
|
||||
:class="{ 'mt-11': fixMenu }"
|
||||
>
|
||||
<div
|
||||
v-if="show_infopanel"
|
||||
id="sidebar"
|
||||
class="rounded-r w-full lg:w-60 sm:max-w-sm p-8 border-l-1 border-b-1 border-indigo-200 bg-gradient-to-b from-indigo-300 via-indigo-200 to-indigo-100 dark:bg-gray-600 dark:from-indigo-700 dark:via-indigo-600 dark:to-indigo-800"
|
||||
>
|
||||
<div v-for="ky in dataFields">
|
||||
<label
|
||||
v-if="( ky === 'context' && showField.context ) || (ky !== 'payload' && ky !== 'context')"
|
||||
:for="`filter-${ky}`">
|
||||
<span class="text-xs text-gray-800 dark:text-gray-400">
|
||||
{{t(`tracking.${ky}`,ky)}}
|
||||
</span>
|
||||
</label>
|
||||
<input
|
||||
v-if="( ky === 'context' && showField.context ) || (ky !== 'payload' && ky !== 'context')"
|
||||
type="text"
|
||||
class="appearance-none bg-transparent w-full text-gray-900 dark:text-gray-200 py-2 leading-tight focus:outline-none"
|
||||
:class="{'border-b border-indigo-500': editsearch}"
|
||||
v-model="filterData[ky]"
|
||||
:disabled="!editsearch"
|
||||
:id="`filter-${ky}`"
|
||||
/>
|
||||
</div>
|
||||
<h2 class="section-headline my-4 px-5 pb-2"
|
||||
:class="{'bg-gray-200 dark:bg-gray-700 border-1 rounded-tl-xl rounded-r-3xl border-indigo-500': show_payload}"
|
||||
>
|
||||
<span v-if="show_payload" class="text-sm">{{t('tracking.payload','payload')}}</span>
|
||||
<button
|
||||
class="no-print text-sm float-right icon-btn mt-2 -mr-3 !outline-none text-gray-500 dark:text-gray-400"
|
||||
@click.prevent="onPayloadBtn"
|
||||
>
|
||||
<div v-if="show_payload" i-carbon-view-off />
|
||||
<div v-else class="noprint flex -mt-3">
|
||||
<div class="text-xs" :class="{'text-indigo-600 dark:text-indigo-300 mr-1': !show_payload}">{{t('tracking.payload','payload')}}</div>
|
||||
<div i-carbon-view />
|
||||
</div>
|
||||
</button>
|
||||
</h2>
|
||||
<div v-if="show_payload && showField.payload" v-for="ky in payloadFields">
|
||||
<label :for="`filter-${ky}`">
|
||||
<span class="text-xs text-gray-800 dark:text-gray-400">
|
||||
{{t(`payload.${ky}`,ky)}}
|
||||
</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
class="appearance-none bg-transparent w-full text-gray-900 dark:text-gray-200 py-2 leading-tight focus:outline-none"
|
||||
:class="{'border-b border-indigo-500': editsearch}"
|
||||
v-model="filterData.payload[ky]"
|
||||
:disabled="!editsearch"
|
||||
:id="`filter-${ky}`"
|
||||
/>
|
||||
</div>
|
||||
<div class="py-4 flex items-center gap-5 border-t-1 border-gray-500">
|
||||
<button
|
||||
v-if="editsearch"
|
||||
class="btn-msg flex-grow"
|
||||
@click="onSaveSearchBtn"
|
||||
>
|
||||
<span>{{ t('save', 'Save') }}</span>
|
||||
</button>
|
||||
<button v-else class="btn-msg flex-grow" @click="onResetSearchBtn">{{ t('reset', 'Reset') }}</button>
|
||||
<button v-if="!editsearch" class="btn-msg flex-grow" @click="onEditSearchBtn">{{ t('edit', 'Edit') }}</button>
|
||||
<button v-else class="btn-msg flex-grow" @click="onCloseSearchBtn">{{ t('close', 'Close') }}</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content w-full p-5">
|
||||
<div class="prose flex-1 p-4 border-1 rounded-md border-gray-300 dark:border-gray-600 lg:w-11/12 sm:w-full sm:max-w-sm shadow-xl bg-light-300 dark:bg-gray-900">
|
||||
<div class="relative float-right -top-2 right-2">
|
||||
<span class=" text-gray-500 dark:text-gray-500 text-xs pr-1"> {{t('total','Total')}}: </span>
|
||||
<span class=" text-indigo-600 dark:text-indigo-400 text-sm pr-1"> {{trackingDataFilter.length}} </span>
|
||||
<span class=" text-gray-500 dark:text-gray-500 text-xs pr-1"> {{t('of','of')}} </span>
|
||||
<span class=" text-gray-600 dark:text-gray-400 text-sm pr-1"> {{trackingData.length}} </span>
|
||||
</div>
|
||||
<div class="flex flex-col container max-w-fit mt-5 mx-auto w-full lg:items-center lg:justify-center bg-white dark:bg-gray-800 rounded-lg shadow">
|
||||
<ul class="flex flex-col divide-y divide-gray-500 w-full">
|
||||
<li class="flex flex-row py-2 lg:py-0 text-sm lg:text-base">
|
||||
<div class="flex-row select-none flex lg:flex-1 lg:items-center">
|
||||
<div class="flex flex-row w-15 lg:h-10 lg:justify-center lg:items-center text-gray-600 dark:text-gray-400 ml-2 lg:ml-3 cursor-pointer font-normal lg:text-sm" :class="{'m-0': orderBy === 'what'}">
|
||||
<div v-if="orderBy === 'what' && sortMode !== 'descending'" @click="onToggelSort" class="text-indigo-600 dark:text-indigo-400" i-carbon-arrow-up />
|
||||
<div @click="onField('what')" :class="{'border-b border-indigo-500': orderBy === 'what'}">{{t('tracking.what','what')}} </div>
|
||||
<div v-if="orderBy === 'what' && sortMode === 'descending'" @click="onToggelSort" class="text-indigo-600 dark:text-indigo-400" i-carbon-arrow-down/>
|
||||
</div>
|
||||
<div class="flex flex-row w-15 lg:w-30 sm:max-w-sm lg:h-10 lg:justify-center lg:items-center ml-2 text-gray-600 dark:text-gray-400 lg:text-xs cursor-pointer" :class="{'m-0': orderBy === 'data'}">
|
||||
<div v-if="orderBy === 'data' && sortMode !== 'descending'" @click="onToggelSort" class="text-indigo-600 dark:text-indigo-400" i-carbon-arrow-up />
|
||||
<div @click="onField('data')" :class="{'border-b border-indigo-500': orderBy === 'data'}">{{t('tracking.data','data')}} </div>
|
||||
<div v-if="orderBy === 'data' && sortMode === 'descending'" @click="onToggelSort" class="text-indigo-600 dark:text-indigo-400" i-carbon-arrow-down/>
|
||||
</div>
|
||||
<div class="flex-1 pl-1">
|
||||
<div class="flex flex-row">
|
||||
<div class="flex flex-row w-20 text-gray-600 dark:text-gray-400 cursor-pointer font-normal lg:text-sm">
|
||||
<div v-if="orderBy === 'where' && sortMode !== 'descending'" @click="onToggelSort" class="text-indigo-600 dark:text-indigo-400 mt-1" i-carbon-arrow-up />
|
||||
<div @click="onField('where')" :class="{'border-b border-indigo-500': orderBy === 'where'}">{{t('tracking.where','where')}} </div>
|
||||
<div v-if="orderBy === 'where' && sortMode === 'descending'" @click="onToggelSort" class="text-indigo-600 dark:text-indigo-400 mt-1" i-carbon-arrow-down/>
|
||||
</div>
|
||||
<button
|
||||
class="no-print text-sm icon-btn mt-2 mr-3 !outline-none text-gray-500 dark:text-gray-400"
|
||||
@click.prevent="onToggleView('context')"
|
||||
>
|
||||
<div v-if="showField.context" class="flex -mt-1" >
|
||||
<div class="hidden lg:block ml-5 mr-2 mt-0.8 text-gray-500 dark:text-gray-500 text-[0.8em]"> {{t('tracking.context','context')}} </div>
|
||||
<div class="lg:hidden ml-5 mt-1 text-gray-500 dark:text-gray-500 text-[0.8em]"> {{t('tracking.ctx','ctx')}} </div>
|
||||
<div i-carbon-view-off />
|
||||
</div>
|
||||
<div v-else class="noprint flex -mt-1">
|
||||
<div class="mr-2 text-xs" :class="{'line-through text-indigo-600 dark:text-indigo-300': !showField.context}">{{t('tracking.context','context')}}</div>
|
||||
<div i-carbon-view />
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 pl-1 mr-5 ">
|
||||
<button
|
||||
class="no-print text-sm icon-btn mt-2 -mr-3 !outline-none text-gray-500 dark:text-gray-400"
|
||||
@click.prevent="onToggleView('payload')"
|
||||
>
|
||||
<div v-if="showField.payload" class="flex -mt-1">
|
||||
<div class="font-normal text-gray-600 dark:text-gray-400 lg:text-sm mr-1 -mt-0.8">{{t('tracking.auth','auth')}}</div>
|
||||
<div i-carbon-view-off />
|
||||
</div>
|
||||
<div v-else class="noprint flex -mt-3">
|
||||
<div class="font-normal text-gray-600 dark:text-gray-400 lg:text-sm" :class="{'line-through text-indigo-600 dark:text-indigo-300 mr-1': !showField.payload}">{{t('tracking.auth','auth')}}</div>
|
||||
<div i-carbon-view />
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex flex-row lg:justify-center lg:mr-10 cursor-pointer font-normal lg:text-sm">
|
||||
<div v-if="orderBy === 'when' && sortMode !== 'descending'" @click="onToggelSort" class="text-indigo-600 dark:text-indigo-400 mt-1" i-carbon-arrow-up />
|
||||
<div @click="onField('when')" class="text-gray-600 dark:text-gray-400" :class="{'border-b border-indigo-500': orderBy === 'when'}">
|
||||
{{t('tracking.when','when')}}
|
||||
</div>
|
||||
<div v-if="orderBy === 'when' && sortMode === 'descending'" @click="onToggelSort" class="text-indigo-600 dark:text-indigo-400 mt-1" i-carbon-arrow-down/>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li v-for="(item,index) in trackingDataFilter" class="flex flex-col lg:flex-row">
|
||||
<div v-if="item.when" class="flex-col select-none cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-900 flex lg:flex-row lg:flex-1 lg:items-center p-4">
|
||||
<div class="flex flex-row lg:flex-col lg:w-15 sm:max-w-xs lg:h-10 lg:justify-center lg:items-center pb-2 lg:pb-0 pl-1 text-gray-900 dark:text-gray-100 font-normal text-sm">
|
||||
<div class="lg:hidden text-sm w-20 text-gray-600 dark:text-gray-400 mt-0.8"> {{t('tracking.what','what')}}: </div>
|
||||
<div class="flex-grow-0">{{item.what}}</div>
|
||||
</div>
|
||||
<div class="flex flex-row lg:flex-col lg:w-30 sm:max-w-sm lg:h-10 lg:justify-center lg:items-center pl-1">
|
||||
<div class="lg:hidden text-xs w-20 text-gray-600 dark:text-gray-400 mt-0.8"> {{t('tracking.data','data')}}: </div>
|
||||
<div class=" text-gray-900 dark:text-gray-100 text-xs"> {{item.data}} </div>
|
||||
</div>
|
||||
<div class="flex flex-row lg:flex-1 pl-1">
|
||||
<div class="lg:hidden text-sm w-20 text-gray-600 dark:text-gray-400 mt-0.8"> {{t('tracking.where','where')}}: </div>
|
||||
<div class="flex-1 flex-col">
|
||||
<div class="font-normal text-sm text-gray-600 dark:text-gray-400">{{item.where}}</div>
|
||||
<div v-if="showField.context" v-for="(line,pos) in item.context.split(')')" :key="pos" class="text-gray-500 dark:text-gray-500 text-[0.8em] mt-2">
|
||||
{{`${line})`}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="showField.payload" class="flex-1 pl-1 pb-2 lg:pb-0">
|
||||
<div class="lg:hidden text-xs w-20 text-gray-600 dark:text-gray-400 mt-0.8"> {{t('tracking.auth','auth')}}: </div>
|
||||
<table v-if="item.payload" class="table-auto lg:mt-2">
|
||||
<tbody>
|
||||
<tr v-for="key,idx in payloadFields" :key="idx" class="text-gray-500 dark:text-gray-500 text-[0.8em] mt-2">
|
||||
<td v-if="item.payload[key]" class="text-xs text-gray-500 dark:text-gray-400">{{t(`payload.${key}`,key)}}</td>
|
||||
<td v-if="item.payload[key]" class="pl-5 text-gray-600 dark:text-gray-300">{{`${auth_get_value(key,item.payload)}`}}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="flex flex-row lg:justify-center">
|
||||
<div class="lg:hidden pl-1 text-xs w-20 text-gray-600 dark:text-gray-400 mt-0.8"> {{t('tracking.when','when')}}: </div>
|
||||
<div class="pl-1 text-gray-600 dark:text-gray-200 text-xs">{{`${format_date(parseInt(item.when))}`}}</div>
|
||||
<button v-if="edititems"
|
||||
@click="onClickItem(item,index)"
|
||||
class="absolute right-15 lg:relative lg:right-0 w-10 text-right flex justify-end"
|
||||
>
|
||||
<svg width="20" fill="currentColor" height="20" class="hover:text-gray-800 dark:hover:text-white dark:text-gray-200 text-gray-500" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1363 877l-742 742q-19 19-45 19t-45-19l-166-166q-19-19-19-45t19-45l531-531-531-531q-19-19-19-45t19-45l166-166q19-19 45-19t45 19l742 742q19 19 19 45t-19 45z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<div
|
||||
v-if="show_content"
|
||||
class="mr-auto w-full lg:w-1/2 text-center text-sm mx-2 text-gray-600 border-gray-300 border-1 border-b-0 rounded-t-xl"
|
||||
>
|
||||
<nav-menu
|
||||
class="shadow-xl bg-light-300 dark:bg-gray-900"
|
||||
:position="NavPosition.footer"
|
||||
:fixMenu="fixMenu"
|
||||
:show_infopanel="show_infopanel"
|
||||
:dataAuth="false"
|
||||
:useInfoPanel="false"
|
||||
:useLogin="true"
|
||||
:showinfo="show_info"
|
||||
:authinfo="auth_info"
|
||||
:needSave="needSave"
|
||||
:useEdit="true"
|
||||
prefix="sec"
|
||||
:openMessageBox="openMessageBox"
|
||||
@onNavMenu="onNavMenu"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="text-center m-auto">
|
||||
<img v-if="isDark"
|
||||
class="m-auto mt-5"
|
||||
width="250"
|
||||
:src="`${assetsPath}/images/cvgen_b.svg`"
|
||||
/>
|
||||
<img v-else
|
||||
class="m-auto mt-5"
|
||||
width="250"
|
||||
:src="`${assetsPath}/images/cvgen_w.svg`"
|
||||
/>
|
||||
<h2 class="mt-8 text-2xl text-gray-700 dark:text-gray-400">{{ t('message.loading', 'Loading') }}...</h2>
|
||||
<h4>{{useState().connection.value.state}}</h4>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { useI18n } from 'vue-i18n'
|
||||
const i18n = useI18n()
|
||||
const { t } = useI18n()
|
||||
const router = useRouter()
|
||||
|
||||
import MessageBoxView from '~/components/MessageBoxView.vue'
|
||||
import NavMenu from '@/NavMenu.vue'
|
||||
import { isDark} from '~/composables'
|
||||
import useState from '~/hooks/useState'
|
||||
import { parseJwt,checkUserAuth } from '~/hooks/utilsAuth'
|
||||
import { load_data_model,load_currentRoute} from '~/hooks/loads'
|
||||
import { fetch_json } from '~/hooks/utils'
|
||||
import { track_action } from '~/hooks/tracking'
|
||||
import { AuthPayloadType,TrackActionShowType, MessageType, TrackActionType} from '~/typs'
|
||||
import { MessageBoxType, NavPosition, InputBtnsType, ShowInfoType, ModelType} from '~/typs/cv'
|
||||
import { show_message,send_data} from '~/hooks/utils'
|
||||
import { format_date} from '~/hooks/tools'
|
||||
|
||||
const trackingList = ref([] as string[])
|
||||
const trackingData = ref([] as TrackActionType[])
|
||||
const filterData = ref({} as TrackActionType)
|
||||
const dataFields = ref(['what','data','where','context','payload','when'])
|
||||
const payloadFields = ref(['id','exp','uuid','data','orig_iat'])
|
||||
const showField = ref({what: true,data: true,where: true,context: true,payload: true,when: true} as TrackActionShowType)
|
||||
const show_payload = ref(false)
|
||||
const orderBy = ref('')
|
||||
const sortMode = ref('')
|
||||
const show_list = ref(true)
|
||||
|
||||
const filterPayload = (item: AuthPayloadType):boolean => {
|
||||
let include = true
|
||||
for (const key in item) {
|
||||
if (!include)
|
||||
break
|
||||
const keyval = filterData.value.payload && filterData.value.payload[key] ? filterData.value.payload[key] : ''
|
||||
if (keyval.length == 0)
|
||||
continue
|
||||
let val = ''
|
||||
switch(key) {
|
||||
case 'orig_iat':
|
||||
case 'exp':
|
||||
val = typeof item[key] === 'string' ? format_date(parseInt(item[key] as string)*1000) : format_date((item[key] as number)*1000)
|
||||
break
|
||||
default:
|
||||
val = item[key]
|
||||
}
|
||||
if (val.length > 0 && !val.includes(keyval)) {
|
||||
include = false
|
||||
}
|
||||
}
|
||||
return include
|
||||
}
|
||||
const filterItem = (item: TrackActionType, index: number):boolean => {
|
||||
let include = true
|
||||
for (const key in item) {
|
||||
if (!include)
|
||||
break
|
||||
if (key !== 'payload' && filterData.value[key].length == 0)
|
||||
continue
|
||||
let val = ''
|
||||
switch(key) {
|
||||
case 'auth':
|
||||
break
|
||||
case 'payload':
|
||||
include = filterPayload(item.payload as AuthPayloadType)
|
||||
// const auth = parseJwt(item.auth)
|
||||
break
|
||||
case 'when':
|
||||
val = format_date(parseInt(item.when as string))
|
||||
if (!val.includes(filterData.value[key] as string)) {
|
||||
include = false
|
||||
}
|
||||
break
|
||||
default:
|
||||
val = item[key]
|
||||
}
|
||||
if (val.length > 0 && !val.includes(filterData.value[key])) {
|
||||
include = false
|
||||
}
|
||||
}
|
||||
return include
|
||||
}
|
||||
const trackingDataFilter = computed(() => {
|
||||
if (orderBy.value.length > 0) {
|
||||
if (sortMode.value === 'descending')
|
||||
return trackingData.value.filter(filterItem).sort((a,b) => a[orderBy.value].localeCompare(b[orderBy.value])).reverse()
|
||||
else
|
||||
return trackingData.value.filter(filterItem).sort((a,b) => a[orderBy.value].localeCompare(b[orderBy.value]))
|
||||
} else {
|
||||
return trackingData.value.filter(filterItem)
|
||||
}
|
||||
})
|
||||
const prefix = 'tracking'
|
||||
const edititems = ref(false)
|
||||
const editsearch = ref(false)
|
||||
|
||||
const assetsPath = useState().ASSETS_PATH
|
||||
const routeKy = router.currentRoute.value.params.ky || router.currentRoute.value.query.k || ''
|
||||
const message_type = ref(MessageBoxType.NotSet)
|
||||
const fixMenu = ref(false)
|
||||
const show_content = ref(true)
|
||||
const show_infopanel = ref(false)
|
||||
const openMessageBox = ref(false)
|
||||
const needSave = ref(false)
|
||||
const show_input = ref(false)
|
||||
const data_url_encoded = ref('')
|
||||
const input_btns = ref([] as InputBtnsType[])
|
||||
const input_placeholder = ref('')
|
||||
const oneInputType = ref('')
|
||||
|
||||
const onInput = (btn: InputBtnsType) => {
|
||||
switch (btn.id) {
|
||||
case 'ok':
|
||||
break
|
||||
case 'cancel':
|
||||
break
|
||||
}
|
||||
show_input.value = false
|
||||
}
|
||||
const select_ops = ref({} as ModelType)
|
||||
const show_info = ref({} as ShowInfoType)
|
||||
const auth_info = useState().authinfo
|
||||
const useEdit = ref(true)
|
||||
|
||||
const onShowListBtn = () => {
|
||||
show_list.value = !show_list.value
|
||||
}
|
||||
const resetFilter = () => {
|
||||
filterData.value = {
|
||||
when: '',
|
||||
what: '',
|
||||
where: '',
|
||||
context: '',
|
||||
data: '',
|
||||
auth: '',
|
||||
payload: {
|
||||
id: '',
|
||||
data: '',
|
||||
uuid: '',
|
||||
exp: '',
|
||||
orig_iat: '',
|
||||
},
|
||||
idx: -1,
|
||||
}
|
||||
}
|
||||
const refresh = () => {
|
||||
show_content.value = false
|
||||
setTimeout(() => show_content.value = true, 1)
|
||||
}
|
||||
const onCloseBtn = () => {
|
||||
edititems.value = false
|
||||
needSave.value = false
|
||||
}
|
||||
const onEditBtn = () => {
|
||||
edititems.value = true
|
||||
needSave.value = true
|
||||
auth_info.value.editable = true
|
||||
useEdit.value = true
|
||||
}
|
||||
const onSaveSearchBtn = () => {
|
||||
// TODO save search
|
||||
}
|
||||
const onCloseSearchBtn = () => {
|
||||
editsearch.value = false
|
||||
}
|
||||
const onResetSearchBtn = () => {
|
||||
editsearch.value = true
|
||||
resetFilter()
|
||||
}
|
||||
const onEditSearchBtn = () => {
|
||||
editsearch.value = true
|
||||
}
|
||||
const onPayloadBtn = () => {
|
||||
show_payload.value = !show_payload.value
|
||||
if (show_payload.value) {
|
||||
showField.value.payload = true
|
||||
}
|
||||
}
|
||||
const onNavMenu = (item: { src: string, target: string }) => {
|
||||
switch (item.src) {
|
||||
case 'editable':
|
||||
if (edititems.value) {
|
||||
onCloseBtn()
|
||||
} else {
|
||||
onEditBtn()
|
||||
}
|
||||
break
|
||||
case 'locale':
|
||||
track_action(null, { ref: 'locale',text: i18n.locale.value}, 'locale')
|
||||
refresh()
|
||||
break
|
||||
case 'infopanel':
|
||||
track_action(null, { ref: 'onNavMenu',text: 'item.src'})
|
||||
show_infopanel.value = !show_infopanel.value
|
||||
break
|
||||
case 'fixmenu':
|
||||
track_action(null, { ref: 'onNavMenu',text: 'item.src'})
|
||||
fixMenu.value = !fixMenu.value
|
||||
break
|
||||
case 'endinput':
|
||||
show_input.value = false
|
||||
break
|
||||
case 'select':
|
||||
track_action(null, { ref: 'onNavMenu',text: 'item.src'})
|
||||
message_type.value = MessageBoxType.Select
|
||||
openMessageBox.value = true
|
||||
break
|
||||
case 'save':
|
||||
track_action(null, { ref: 'onNavMenu',text: 'item.src'})
|
||||
input_placeholder.value = `${t('name', 'Name')} o 'config'`
|
||||
show_input.value = true
|
||||
message_type.value = MessageBoxType.Save
|
||||
data_url_encoded.value = ''
|
||||
openMessageBox.value = true
|
||||
break
|
||||
case 'editable':
|
||||
track_action(null, { ref: 'onNavMenu',text: 'item.src'})
|
||||
useState().authinfo.value.editable = !useState().authinfo.value.editable
|
||||
const state = useState().authinfo.value.editable ? 'on' : 'off'
|
||||
const msgTyp = state === 'on' ? MessageType.Warning : MessageType.Info
|
||||
show_message(msgTyp, `${t('saveload.editMode','Edit Mode')} ${t('cv.'+state,'')}`)
|
||||
break
|
||||
case 'viewchange':
|
||||
track_action(null, { ref: 'onNavMenu',text: 'item.src'})
|
||||
useState().authinfo.value.viewchange = !useState().authinfo.value.viewchange
|
||||
break
|
||||
case 'goto':
|
||||
if (item.target) {
|
||||
const dom_id = document.getElementById(item.target)
|
||||
if (dom_id) {
|
||||
track_action(null, { ref: 'gotp',text: item.target}, 'goto')
|
||||
dom_id.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' })
|
||||
setTimeout(() => window.scrollBy(0, -40), 4000)
|
||||
}
|
||||
}
|
||||
break
|
||||
}
|
||||
}
|
||||
const saveData = async(mode: string,val: string) => {
|
||||
const url = useState().CONFURLS.value.sendsrvconfig || ''
|
||||
message_type.value = MessageBoxType.Save
|
||||
const payload = parseJwt(localStorage.getItem(useState().AUTHKEY.value))
|
||||
const data: any = {
|
||||
id: payload.id ? payload.id : '',
|
||||
val: val.length > 0 ? val : 'config',
|
||||
}
|
||||
if (mode == 'send' && url.length > 0) {
|
||||
onMessageBox({src: 'done', val: ''})
|
||||
const [res,err] = await send_data(url, data, true, true)
|
||||
if (err && err.length > 0 ) {
|
||||
show_message(MessageType.Error, `Error: ${err}`,2000)
|
||||
} else if (res && res.status && res.status === 'ok') {
|
||||
track_action(null, { ref: 'saveData',text: `${url} -> ${val}`})
|
||||
show_message(MessageType.Success, `${t('saveload.dataSaved','Data saved')}`,2000,() => {
|
||||
edititems.value = false
|
||||
needSave.value = false
|
||||
})
|
||||
}
|
||||
} else {
|
||||
track_action(null, { ref: 'saveData',text: `local_json -> ${val}`})
|
||||
show_message(MessageType.Warning, `${t('saveload.saveLocalFile','Save Data to Local File')}`,2000,() => {
|
||||
data_url_encoded.value = `text/json;charset=utf-8,${encodeURIComponent(JSON.stringify(data))}`
|
||||
})
|
||||
}
|
||||
}
|
||||
const onMessageBox = (item: { src: string, val: string }) => {
|
||||
switch (item.src) {
|
||||
case 'savedata':
|
||||
show_input.value = false
|
||||
saveData('local', item.val)
|
||||
break
|
||||
case 'sendata':
|
||||
show_input.value = false
|
||||
saveData('send', item.val)
|
||||
break
|
||||
case 'oneinput':
|
||||
const r = async() => {
|
||||
if (await checkUserAuth(item.val)) {
|
||||
oneInputType.value='text'
|
||||
openMessageBox.value = false
|
||||
if (!await load_currentRoute(router.currentRoute.value)) {
|
||||
show_message(MessageType.Error, `${t('saveload.loaderror','Load error')}`,2000)
|
||||
}
|
||||
} else {
|
||||
show_message(MessageType.Error, `${t('saveload.autherror','Auth error')}`,2000)
|
||||
}
|
||||
}
|
||||
r()
|
||||
break
|
||||
case 'endinput':
|
||||
show_input.value = false
|
||||
break
|
||||
case 'done':
|
||||
openMessageBox.value = false
|
||||
break
|
||||
case 'open':
|
||||
openMessageBox.value = true
|
||||
break
|
||||
}
|
||||
}
|
||||
const onLoadModel = (model: { id: string}) => {
|
||||
const url = useState().CONFURLS.value.data || ''
|
||||
if ( url.length > 0) {
|
||||
return
|
||||
}
|
||||
if (useState().selectOps.value[model.id]) {
|
||||
load_data_model(model.id, url, routeKy as string,true,() => {
|
||||
show_content.value = false
|
||||
show_message(MessageType.Success, `${t('saveload.dataLoaded','Data loaded')}`,2000,() => {
|
||||
show_content.value = true
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
const onField = (field: string) => {
|
||||
orderBy.value = orderBy.value === field ? '': field
|
||||
}
|
||||
const onToggleView = (field: string) => {
|
||||
showField.value[field] = !showField.value[field]
|
||||
}
|
||||
const onToggelSort = () => {
|
||||
sortMode.value = sortMode.value === '' ? 'descending' : ''
|
||||
}
|
||||
const onClickItem = (item: TrackActionType, pos: number) => {
|
||||
// if (item && item.auth && item.auth.length > 0) {
|
||||
// const payload = parseJwt(item.auth)
|
||||
// }
|
||||
}
|
||||
const auth_get_value = (ky: string, itm: AuthPayloadType):string => {
|
||||
let value = ''
|
||||
switch(ky) {
|
||||
case 'exp':
|
||||
case 'orig_iat':
|
||||
value = format_date(parseInt(`${itm[ky]}`)*1000)
|
||||
break
|
||||
default:
|
||||
value=itm[ky] ? itm[ky] : ''
|
||||
}
|
||||
return value
|
||||
}
|
||||
const get_tracking_data = async (target: string): Promise<[any,string]> => {
|
||||
const url = useState().CONFURLS.value.tracking || ''
|
||||
if (url.length == 0)
|
||||
return [{},'No SRV URL defined']
|
||||
const urlpath = `${url}/${target}`
|
||||
const [res,errmsg] = await fetch_json(urlpath, 2000,true)
|
||||
if (errmsg.length > 0) {
|
||||
return [{},errmsg]
|
||||
}
|
||||
return [res,errmsg]
|
||||
}
|
||||
const load_tracking_data = async (target: string): Promise<[any,string]> => {
|
||||
const [res,errmsg] = await get_tracking_data(target)
|
||||
if (errmsg && errmsg.length > 0) {
|
||||
show_content.value = false
|
||||
} else {
|
||||
trackingData.value = res.map((itm: TrackActionType,idx: number) => {
|
||||
itm.payload = parseJwt(itm.auth)
|
||||
itm.idx = idx
|
||||
return itm
|
||||
})
|
||||
}
|
||||
resetFilter()
|
||||
return [res,errmsg]
|
||||
// track_action(null, { ref: 'tracking',text: 'tracking data'}, 'load')
|
||||
}
|
||||
const onClickItemList = async (item: string, index: Number) => {
|
||||
await load_tracking_data(item)
|
||||
}
|
||||
onBeforeMount(async() => {
|
||||
useState().dataSections.value = [`sec_${prefix}_list`,`sec_${prefix}_data`]
|
||||
const url = useState().CONFURLS.value.trackinglist || ''
|
||||
if (url.length == 0)
|
||||
return [{},'No SRV URL defined']
|
||||
const [res,errmsg] = await fetch_json(url, 2000,true)
|
||||
if (errmsg.length > 0) {
|
||||
show_content.value = false
|
||||
} else {
|
||||
show_list.value = true
|
||||
show_content.value = true
|
||||
trackingList.value = res
|
||||
}
|
||||
})
|
||||
</script>
|
||||
596
src/views/Users.vue
Normal file
596
src/views/Users.vue
Normal file
@ -0,0 +1,596 @@
|
||||
<template>
|
||||
<div
|
||||
v-if="openMessageBox"
|
||||
class="fixed inset-0 bg-gray-600 overflow-y-auto h-full w-full z-80 dark:bg-gray-900 opacity-97"
|
||||
>
|
||||
<message-box-view
|
||||
:messageType="message_type"
|
||||
:openMessageBox="openMessageBox"
|
||||
:show_input="show_input"
|
||||
:input_placeholder="input_placeholder"
|
||||
:input_btns="input_btns"
|
||||
:select_ops="select_ops"
|
||||
:data_url_encoded="data_url_encoded"
|
||||
:inpType="oneInputType"
|
||||
@onInput="onInput"
|
||||
@onMessageBox="onMessageBox"
|
||||
@onLoadModel="onLoadModel"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="show_content && usersData" class="font-sans antialiased">
|
||||
<div class="container mx-auto max-w-screen-2xl main-container">
|
||||
<nav-menu
|
||||
class="bg-light-300 dark:bg-gray-900"
|
||||
:position="NavPosition.header"
|
||||
:openMessageBox="openMessageBox"
|
||||
:fixMenu="fixMenu"
|
||||
:show_infopanel="show_infopanel"
|
||||
:dataAuth="false"
|
||||
:useInfoPanel="false"
|
||||
:useLogin="true"
|
||||
:showinfo="show_info"
|
||||
:authinfo="auth_info"
|
||||
:needSave="needSave"
|
||||
:useEdit="true"
|
||||
:prefix="prefix"
|
||||
@onNavMenu="onNavMenu"
|
||||
/>
|
||||
<main
|
||||
:id="`${prefix}-wrapper`"
|
||||
class="rounded flex flex-col sm:flex-row-reverse shadow-2xl"
|
||||
:class="{ 'mt-11': fixMenu }"
|
||||
>
|
||||
<div
|
||||
v-if="show_infopanel"
|
||||
id="sidebar"
|
||||
class="rounded-r w-full lg:w-60 sm:max-w-sm p-8 border-l-1 border-indigo-200 bg-gradient-to-b from-indigo-300 via-indigo-200 to-indigo-100 dark:bg-gray-600 dark:from-indigo-700 dark:via-indigo-600 dark:to-indigo-800"
|
||||
>
|
||||
</div>
|
||||
<div class="content w-full p-5">
|
||||
<div v-for="(sec,idx) in dataSections" :key="idx" class="flex justify-center border-gray-300 dark:border-gray-500 border-b-1 py-2 my-1">
|
||||
<div :id="`${prefix}-${sec}`" class="mb-3 w-full">
|
||||
<h2 class="section-headline noprint" >
|
||||
<span v-if="show_data[sec]"> {{t(`users.${sec.replace('sec_','')}`,sec)}} </span>
|
||||
<button
|
||||
v-if="show_data[sec]"
|
||||
class="no-print text-sm float-right icon-btn mt-2 ml-2 !outline-none text-gray-500 dark:text-gray-400"
|
||||
@click="onHelp(sec)"
|
||||
>
|
||||
<div i-carbon-help/>
|
||||
</button>
|
||||
<button
|
||||
class="no-print text-sm float-right icon-btn mt-2 !outline-none text-gray-500 dark:text-gray-400"
|
||||
@click.prevent="onDataView(sec)"
|
||||
>
|
||||
<div v-if="show_data[sec]" i-carbon-view-off />
|
||||
<div v-else class="noprint flex">
|
||||
<div class="-mt-0.5 mr-2 line-through">{{t(`menu.${sec}`,sec)}}</div>
|
||||
<div i-carbon-view />
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
v-if="show_data[sec]"
|
||||
class="no-print text-sm float-right icon-btn mt-2 !outline-none text-gray-500 dark:text-gray-400 mr-2"
|
||||
@click="onSaveUser(sec)"
|
||||
>
|
||||
<div i-carbon-checkmark-outline/>
|
||||
</button>
|
||||
</h2>
|
||||
<div v-if="varsUser[sec] && show_data[sec]" v-for="(item) in Object.keys(varsUser[sec])">
|
||||
<label
|
||||
:for="`input-${sec}-${item}`" class="form-label inline-block mb-2 text-gray-700 dark:text-gray-500">
|
||||
{{t(`menu.${sec}`,item)}}
|
||||
</label>
|
||||
<div v-if="varsUser[sec][item].vars">
|
||||
<DataInput
|
||||
:dataVars="varsUser[sec][item].vars"
|
||||
:section="sec"
|
||||
:typ="varsUser[sec][item].typ"
|
||||
:dataValue="getDataFromItem(item) as Object"
|
||||
:varname="item"
|
||||
:vardef="varsUser[sec][item]"
|
||||
:title="`${sec}`"
|
||||
:labelitms="varsUser[sec][item].labelitms? varsUser[sec][item].labelitms : ''"
|
||||
:edititem="edititems"
|
||||
:showitem="show_data[sec]"
|
||||
:validate="varsUser[sec][item].valid ? varsUser[sec][item].valid : ''"
|
||||
:messages="true"
|
||||
@input-change="onInputChange"
|
||||
/>
|
||||
<div v-if="varsUser[sec][item].from">
|
||||
<button
|
||||
v-if="show_data[sec]"
|
||||
class="flex no-print text-sm float-right icon-btn mt-2 ml-2 !outline-none text-gray-500 dark:text-gray-400"
|
||||
@click="onViewInput(sec)"
|
||||
>
|
||||
<div class="mr-2 mb-2">{{t(`menu.${sec}`,sec)}}</div>
|
||||
<carbon-edit />
|
||||
</button>
|
||||
<InputValue
|
||||
v-if="varsUser[sec][item].from && show_inputText[sec]"
|
||||
:section="sec"
|
||||
:typ="varsUser[sec][item].from.typ"
|
||||
:dataValue="usersData[item] as string"
|
||||
:varname="item"
|
||||
:vardef="varsUser[sec][item]"
|
||||
:title="`${prefix}.${item}`"
|
||||
:rows="varsUser[sec][item].from.rows"
|
||||
:labelitms="varsUser[sec][item].from.labelitms? varsUser[sec][item].from.labelitms : ''"
|
||||
:edititem="edititems"
|
||||
:showitem="show_data[sec]"
|
||||
:validate="varsUser[sec][item].from.valid ? varsUser[sec][item].from.valid : ''"
|
||||
:messages="true"
|
||||
@input-change="onInputValueChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if=" varsUser[sec][item].typ !== InputValueOption.object">
|
||||
<InputValue
|
||||
:section="sec"
|
||||
:typ="varsUser[sec][item].typ"
|
||||
:dataValue="getDataFromItem(item) as string"
|
||||
:varname="item"
|
||||
:vardef="varsUser[sec][item]"
|
||||
:title="`${prefix}.${item}`"
|
||||
:rows="varsUser[sec][item].rows"
|
||||
:labelitms="varsUser[sec][item].labelitms? varsUser[sec][item].labelitms : ''"
|
||||
:edititem="edititems"
|
||||
:showitem="show_data[sec]"
|
||||
:validate="varsUser[sec][item].valid ? varsUser[sec][item].valid : ''"
|
||||
:messages="true"
|
||||
@input-change="onInputChange"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="show_help[sec]" class="my-2 text-gray-600 dark:text-gray-500" :class="{'mt-8 border-gray-200 dark:border-gray-600 border-t-1 pt-2': !show_inputText[sec]}">
|
||||
<span v-html="t(`users.msg_${sec.replace('sec_','')}`,'').replaceAll('passwdEnc',useState().PASSWD_ENC.value)" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<div
|
||||
v-if="show_content"
|
||||
class="mr-auto w-full lg:w-1/2 text-center text-sm mx-2 text-gray-600 border-gray-300 border-1 border-b-0 rounded-t-xl"
|
||||
>
|
||||
<nav-menu
|
||||
class="shadow-xl bg-light-300 dark:bg-gray-900"
|
||||
:position="NavPosition.footer"
|
||||
:fixMenu="fixMenu"
|
||||
:show_infopanel="show_infopanel"
|
||||
:dataAuth="false"
|
||||
:useInfoPanel="false"
|
||||
:useLogin="true"
|
||||
:showinfo="show_info"
|
||||
:authinfo="auth_info"
|
||||
:needSave="needSave"
|
||||
:useEdit="true"
|
||||
prefix="sec"
|
||||
:openMessageBox="openMessageBox"
|
||||
@onNavMenu="onNavMenu"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="text-center m-auto">
|
||||
<img v-if="isDark"
|
||||
class="m-auto mt-5"
|
||||
width="250"
|
||||
:src="`${assetsPath}/images/cvgen_b.svg`"
|
||||
/>
|
||||
<img v-else
|
||||
class="m-auto mt-5"
|
||||
width="250"
|
||||
:src="`${assetsPath}/images/cvgen_w.svg`"
|
||||
/>
|
||||
<h2 class="mt-8 text-2xl text-gray-700 dark:text-gray-400">{{ t('message.loading', 'Loading') }}...</h2>
|
||||
<h4>{{useState().connection.value.state}}</h4>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { useI18n } from 'vue-i18n'
|
||||
const i18n = useI18n()
|
||||
const { t } = useI18n()
|
||||
const router = useRouter()
|
||||
|
||||
import YAML from 'yaml'
|
||||
import DataInput from '@/forms/DataInput.vue'
|
||||
import InputValue from '@/InputValue.vue'
|
||||
import MessageBoxView from '~/components/MessageBoxView.vue'
|
||||
import NavMenu from '@/NavMenu.vue'
|
||||
import { isDark} from '~/composables'
|
||||
import useState from '~/hooks/useState'
|
||||
import { parseJwt,checkUserAuth } from '~/hooks/utilsAuth'
|
||||
import { load_data_model,load_currentRoute} from '~/hooks/loads'
|
||||
import { fetch_json } from '~/hooks/utils'
|
||||
import { track_action } from '~/hooks/tracking'
|
||||
import { MessageType } from '~/typs'
|
||||
import { UsersDataType, UsersDataViewType, UsersInvitationsType } from '~/typs/users'
|
||||
import { MessageBoxType, NavPosition, InputBtnsType, ShowInfoType, ModelType } from '~/typs/cv'
|
||||
import { InputValueOption } from '~/typs/inputs'
|
||||
import { UsersAccountsType, ModelsUsersType } from '~/typs/users'
|
||||
import { show_message,send_data } from '~/hooks/utils'
|
||||
import { b64_to_utf8,utf8_to_b64 } from '~/hooks/tools'
|
||||
|
||||
const dataSections = useState().dataSections
|
||||
const dataKeys = ['usersData','modelsData','invitations','authzModel','authzPolicy']
|
||||
const usersData= ref({} as UsersDataType)
|
||||
const varsUser = useState().varsUser
|
||||
|
||||
const show_data = ref({} as UsersDataViewType)
|
||||
const show_help = ref({} as UsersDataViewType)
|
||||
|
||||
const usersAccounts = ref({} as UsersAccountsType)
|
||||
const modelsUsers = ref({} as ModelsUsersType)
|
||||
const invitations = ref({} as UsersInvitationsType)
|
||||
|
||||
const prefix = 'users'
|
||||
const edititems = ref(false)
|
||||
const show_inputText = ref({} as UsersDataViewType)
|
||||
|
||||
const assetsPath = useState().ASSETS_PATH
|
||||
const routeKy = router.currentRoute.value.params.ky || router.currentRoute.value.query.k || ''
|
||||
const message_type = ref(MessageBoxType.NotSet)
|
||||
const fixMenu = ref(false)
|
||||
const show_content = ref(true)
|
||||
const show_infopanel = ref(false)
|
||||
const openMessageBox = ref(false)
|
||||
const needSave = ref(false)
|
||||
const show_input = ref(false)
|
||||
const data_url_encoded = ref('')
|
||||
const input_btns = ref([] as InputBtnsType[])
|
||||
const input_placeholder = ref('')
|
||||
const oneInputType = ref('')
|
||||
|
||||
const onInputChange = (data: {sec: string, key: string, idx:number, val: any}) => {
|
||||
if (data.key && data.val) {
|
||||
switch (data.key) {
|
||||
case 'usersData':
|
||||
usersAccounts.value = data.val
|
||||
usersData.value.usersData = YAML.stringify(data.val)
|
||||
break
|
||||
case 'modelsData':
|
||||
modelsUsers.value= data.val
|
||||
usersData.value.modelsData = YAML.stringify(data.val)
|
||||
break
|
||||
case 'invitations':
|
||||
invitations.value= data.val
|
||||
usersData.value.invitations = YAML.stringify(data.val)
|
||||
break
|
||||
case 'authzModel':
|
||||
usersData.value.authzModel = data.val
|
||||
break
|
||||
case 'authzPolicy':
|
||||
usersData.value.authzPolicy = data.val
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
const onInputValueChange = (data: {sec: string, key: string, idx:number, val: string}) => {
|
||||
if (data.key && data.val && data.val.length ) {
|
||||
switch (data.key) {
|
||||
case 'usersData':
|
||||
usersData.value.usersData = data.val
|
||||
usersAccounts.value = YAML.parse(data.val)
|
||||
break
|
||||
case 'modelsData':
|
||||
usersData.value.modelsData = data.val
|
||||
modelsUsers.value = YAML.parse(data.val)
|
||||
break
|
||||
case 'invitations':
|
||||
usersData.value.invitations = data.val
|
||||
invitations.value = YAML.parse(data.val)
|
||||
break
|
||||
case 'authzModel':
|
||||
usersData.value.authzModel = data.val
|
||||
break
|
||||
case 'authzPolicy':
|
||||
usersData.value.authzPolicy = data.val
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
const onInput = (btn: InputBtnsType) => {
|
||||
switch (btn.id) {
|
||||
case 'ok':
|
||||
break
|
||||
case 'cancel':
|
||||
break
|
||||
}
|
||||
show_input.value = false
|
||||
}
|
||||
const getDataFromItem= (item: string):any => {
|
||||
switch (item) {
|
||||
case 'usersData':
|
||||
return usersAccounts.value
|
||||
case 'modelsData':
|
||||
return modelsUsers.value
|
||||
case 'invitations':
|
||||
return invitations.value
|
||||
case 'authzModel':
|
||||
return usersData.value.authzModel
|
||||
case 'authzPolicy':
|
||||
return usersData.value.authzPolicy
|
||||
default:
|
||||
return {}
|
||||
}
|
||||
}
|
||||
const select_ops = ref({} as ModelType)
|
||||
const show_info = ref({} as ShowInfoType)
|
||||
const auth_info = useState().authinfo
|
||||
const useEdit = ref(true)
|
||||
const refresh = () => {
|
||||
show_content.value = false
|
||||
setTimeout(() => show_content.value = true, 1)
|
||||
}
|
||||
const onCloseBtn = () => {
|
||||
edititems.value = false
|
||||
needSave.value = false
|
||||
}
|
||||
const onEditBtn = () => {
|
||||
edititems.value = true
|
||||
needSave.value = true
|
||||
auth_info.value.editable = true
|
||||
useEdit.value = true
|
||||
}
|
||||
const onNavMenu = (item: { src: string, target: string }) => {
|
||||
switch (item.src) {
|
||||
case 'editable':
|
||||
if (edititems.value) {
|
||||
onCloseBtn()
|
||||
} else {
|
||||
onEditBtn()
|
||||
}
|
||||
break
|
||||
case 'locale':
|
||||
track_action(null, { ref: 'locale',text: i18n.locale.value}, 'locale')
|
||||
refresh()
|
||||
break
|
||||
case 'infopanel':
|
||||
track_action(null, { ref: 'onNavMenu',text: 'item.src'})
|
||||
show_infopanel.value = !show_infopanel.value
|
||||
break
|
||||
case 'fixmenu':
|
||||
track_action(null, { ref: 'onNavMenu',text: 'item.src'})
|
||||
fixMenu.value = !fixMenu.value
|
||||
break
|
||||
case 'endinput':
|
||||
show_input.value = false
|
||||
break
|
||||
case 'select':
|
||||
track_action(null, { ref: 'onNavMenu',text: 'item.src'})
|
||||
message_type.value = MessageBoxType.Select
|
||||
openMessageBox.value = true
|
||||
break
|
||||
case 'save':
|
||||
track_action(null, { ref: 'onNavMenu',text: 'item.src'})
|
||||
input_placeholder.value = `${t('name', 'Name')} o 'config'`
|
||||
show_input.value = true
|
||||
message_type.value = MessageBoxType.Save
|
||||
data_url_encoded.value = ''
|
||||
openMessageBox.value = true
|
||||
break
|
||||
case 'editable':
|
||||
track_action(null, { ref: 'onNavMenu',text: 'item.src'})
|
||||
useState().authinfo.value.editable = !useState().authinfo.value.editable
|
||||
const state = useState().authinfo.value.editable ? 'on' : 'off'
|
||||
const msgTyp = state === 'on' ? MessageType.Warning : MessageType.Info
|
||||
show_message(msgTyp, `${t('saveload.editMode','Edit Mode')} ${t('cv.'+state,'')}`)
|
||||
break
|
||||
case 'viewchange':
|
||||
track_action(null, { ref: 'onNavMenu',text: 'item.src'})
|
||||
useState().authinfo.value.viewchange = !useState().authinfo.value.viewchange
|
||||
break
|
||||
case 'goto':
|
||||
if (item.target) {
|
||||
const dom_id = document.getElementById(item.target)
|
||||
if (dom_id) {
|
||||
track_action(null, { ref: 'gotp',text: item.target}, 'goto')
|
||||
dom_id.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' })
|
||||
setTimeout(() => window.scrollBy(0, -40), 4000)
|
||||
}
|
||||
}
|
||||
break
|
||||
}
|
||||
}
|
||||
const saveData = async(mode: string,val: string, newData?: UsersDataType ) => {
|
||||
const url = useState().CONFURLS.value.sendusers || ''
|
||||
message_type.value = MessageBoxType.Save
|
||||
const payload = parseJwt(localStorage.getItem(useState().AUTHKEY.value))
|
||||
const postdata: any = {
|
||||
id: payload.id ? payload.id : '',
|
||||
val: val.length > 0 ? val : 'usersData',
|
||||
data: newData ? newData : {...usersData.value},
|
||||
}
|
||||
Object.keys(postdata.data).forEach(ky => {
|
||||
if (postdata.data[ky]) {
|
||||
postdata.data[ky]= utf8_to_b64(postdata.data[ky])
|
||||
}
|
||||
})
|
||||
if (mode == 'send' && url.length > 0) {
|
||||
onMessageBox({src: 'done', val: ''})
|
||||
const [res,err] = await send_data(url, postdata, true, true)
|
||||
if (err && err.length > 0 ) {
|
||||
show_message(MessageType.Error, `Error: ${err}`,2000)
|
||||
} else if (res && res.status && res.status === 'ok') {
|
||||
track_action(null, { ref: 'saveData',text: `${url} -> ${val}`})
|
||||
show_message(MessageType.Success, `${t('saveload.dataSaved','Data saved')}`,2000,() => {
|
||||
edititems.value = false
|
||||
needSave.value = false
|
||||
})
|
||||
}
|
||||
} else {
|
||||
track_action(null, { ref: 'saveData',text: `local_json -> ${val}`})
|
||||
show_message(MessageType.Warning, `${t('saveload.saveLocalFile','Save Data tLocal File')}`,2000,() => {
|
||||
data_url_encoded.value = `text/json;charset=utf-8,${encodeURIComponent(JSON.stringify(postdata))}`
|
||||
})
|
||||
}
|
||||
}
|
||||
const onMessageBox = (item: { src: string, val: string }) => {
|
||||
switch (item.src) {
|
||||
case 'savedata':
|
||||
show_input.value = false
|
||||
saveData('local', item.val)
|
||||
break
|
||||
case 'sendata':
|
||||
show_input.value = false
|
||||
saveData('send', item.val)
|
||||
break
|
||||
case 'oneinput':
|
||||
const r = async() => {
|
||||
if (await checkUserAuth(item.val)) {
|
||||
oneInputType.value='text'
|
||||
openMessageBox.value = false
|
||||
if (!await load_currentRoute(router.currentRoute.value)) {
|
||||
show_message(MessageType.Error, `${t('saveload.loaderror','Load error')}`,2000)
|
||||
}
|
||||
} else {
|
||||
show_message(MessageType.Error, `${t('saveload.autherror','Auth error')}`,2000)
|
||||
}
|
||||
}
|
||||
r()
|
||||
break
|
||||
case 'endinput':
|
||||
show_input.value = false
|
||||
break
|
||||
case 'done':
|
||||
openMessageBox.value = false
|
||||
break
|
||||
case 'open':
|
||||
openMessageBox.value = true
|
||||
break
|
||||
}
|
||||
}
|
||||
const onLoadModel = (model: { id: string}) => {
|
||||
const url = useState().CONFURLS.value.data || ''
|
||||
if ( url.length > 0) {
|
||||
return
|
||||
}
|
||||
if (useState().selectOps.value[model.id]) {
|
||||
load_data_model(model.id, url, routeKy as string,true,() => {
|
||||
show_content.value = false
|
||||
show_message(MessageType.Success, `${t('saveload.dataLoaded','Data loaded')}`,2000,() => {
|
||||
show_content.value = true
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
const onDataView = (ky: string) => {
|
||||
show_data.value[ky] = ! show_data.value[ky]
|
||||
}
|
||||
const onHelp = (ky: string) => {
|
||||
show_help.value[ky] = ! show_help.value[ky]
|
||||
}
|
||||
const onViewInput = (ky: string) => {
|
||||
show_inputText.value[ky] = ! show_inputText.value[ky]
|
||||
}
|
||||
const onSaveUser = (ky: string) => {
|
||||
const key = ky.replace('sec_','')
|
||||
let data = {} as UsersDataType
|
||||
if (usersData.value[key]) {
|
||||
data[key] = usersData.value[key]
|
||||
} else {
|
||||
data = usersData.value
|
||||
}
|
||||
saveData('send',ky ,data)
|
||||
}
|
||||
const load_vars_user = async (): Promise<[any,string]> => {
|
||||
const url = useState().CONFURLS.value.varsuser || ''
|
||||
if (url.length == 0)
|
||||
return [{},'No URL defined']
|
||||
let text = ''
|
||||
let res: any = {}
|
||||
let error = null
|
||||
try {
|
||||
const response = await self.fetch(url, {
|
||||
method: 'GET',
|
||||
})
|
||||
if (url.includes('.json')) {
|
||||
res = await response.json()
|
||||
} else {
|
||||
text = await response.text()
|
||||
}
|
||||
if (response.ok) {
|
||||
if (url.includes('.yaml')) {
|
||||
res = YAML.parse(text)
|
||||
} else if (!url.includes('.json')) {
|
||||
res = text
|
||||
}
|
||||
} else {
|
||||
error = res.message
|
||||
}
|
||||
}
|
||||
catch (err: any) {
|
||||
error = err.message
|
||||
}
|
||||
if (error) {
|
||||
show_message(MessageType.Error, `'Vars User Load' -> ${error}`, 5000)
|
||||
useState().connection.value.state = 'connection.error'
|
||||
return [{}, error]
|
||||
}
|
||||
return [res,error]
|
||||
}
|
||||
const get_users_data = async (): Promise<[any,string]> => {
|
||||
const url = useState().CONFURLS.value.users || ''
|
||||
if (url.length == 0)
|
||||
return [{},'No SRV URL defined']
|
||||
const [res,errmsg] = await fetch_json(url, 2000,true)
|
||||
if (errmsg.length > 0) {
|
||||
return [{},errmsg]
|
||||
}
|
||||
return [res,errmsg]
|
||||
}
|
||||
onBeforeMount(async() => {
|
||||
//if (Object.keys(useState().varsUser.value).length === 0) {
|
||||
const [resvars, err] = await load_vars_user()
|
||||
if (err && err.length > 0) {
|
||||
show_content.value = false
|
||||
} else {
|
||||
varsUser.value = resvars
|
||||
useState().dataSections.value = []
|
||||
Object.keys(resvars).forEach(ky => {
|
||||
useState().dataSections.value.push(ky)
|
||||
show_data.value[ky] = true
|
||||
show_inputText.value[ky] = false
|
||||
show_help.value[ky] = false
|
||||
})
|
||||
}
|
||||
//}
|
||||
const [res,errmsg] = await get_users_data()
|
||||
if (errmsg && errmsg.length > 0) {
|
||||
debugger
|
||||
show_content.value = false
|
||||
} else {
|
||||
usersData.value = {} as UsersDataType
|
||||
usersAccounts.value = {} as UsersAccountsType
|
||||
invitations.value = {} as UsersInvitationsType
|
||||
modelsUsers.value = {} as ModelsUsersType
|
||||
if (res.data) {
|
||||
dataKeys.forEach(ky => {
|
||||
if (res.data[ky]) {
|
||||
usersData.value[ky]= b64_to_utf8(res.data[ky])
|
||||
try {
|
||||
switch(ky) {
|
||||
case 'usersData':
|
||||
usersAccounts.value = YAML.parse(usersData.value[ky])
|
||||
break
|
||||
case 'modelsData':
|
||||
modelsUsers.value = YAML.parse(usersData.value[ky])
|
||||
break
|
||||
case 'invitations':
|
||||
invitations.value = YAML.parse(usersData.value[ky])
|
||||
break
|
||||
}
|
||||
} catch(e) {
|
||||
show_message(MessageType.Error, `'Error parse data' -> ${e}`, 5000)
|
||||
useState().connection.value.state = 'data.error'
|
||||
}
|
||||
} else {
|
||||
show_data.value[ky] = false
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
track_action(null, { ref: 'users',text: 'users data'}, 'mount')
|
||||
})
|
||||
</script>
|
||||
Loading…
Reference in New Issue
Block a user