302 lines
9.3 KiB
Vue
302 lines
9.3 KiB
Vue
<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> |