Elizhium/litlyx
1
0
Fork 0
mirror of https://github.com/Litlyx/litlyx synced 2025-12-10 07:48:37 +01:00
Code Issues Packages Projects Releases Wiki Activity

better first interactions + bug fix

Browse Source
This commit is contained in:
Emily
2024-09-21 15:14:46 +02:00
parent f285e92132
commit 4eeebaa0c3
13 changed files with 381 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
dashboard/pages/index.vue
View File

@@ -30,33 +30,6 @@ onMounted(async () => {
});
const { createAlert } = useAlert();
function copyProjectId() {
if (!navigator.clipboard) alert('You can\'t copy in HTTP');
navigator.clipboard.writeText(activeProject.value?._id?.toString() || '');
createAlert('Success', 'Project id copied successfully.', 'far fa-circle-check', 5000);
}
function copyScript() {
if (!navigator.clipboard) alert('You can\'t copy in HTTP');
const createScriptText = () => {
return [
'<script defer ',
`data-project="${activeProject.value?._id}" `,
'src="https://cdn.jsdelivr.net/gh/litlyx/litlyx-js/browser/litlyx.js"></',
'script>'
].join('')
}
navigator.clipboard.writeText(createScriptText());
createAlert('Success', 'Script copied successfully.', 'far fa-circle-check', 5000);
}
const firstInteractionUrl = computed(() => {
return `/api/metrics/${activeProject.value?._id}/first_interaction`
});
@@ -95,7 +68,7 @@ function goToUpgrade() {
<div class="dashboard w-full h-full overflow-y-auto pb-20 md:pt-4 lg:pt-0">
<div :key="'home-' + isLiveDemo()" v-if="projects && activeProject && firstInteraction.data.value">
<div :key="'home-' + isLiveDemo()" v-if="projects && activeProject && (firstInteraction.data.value === true)">
<div class="w-full px-4 py-2 gap-2 flex flex-col">
<div v-if="limitsInfo && limitsInfo.limited"
@@ -215,47 +188,8 @@ function goToUpgrade() {
</div>
<div v-if="!firstInteraction.data.value && activeProject" class="mt-[20vh] lg:mt-[36vh] flex flex-col gap-6">
<div class="flex gap-4 items-center justify-center">
<div class="animate-pulse w-[1.5rem] h-[1.5rem] bg-accent rounded-full"> </div>
<div class="text-text/90 poppins text-[1.3rem] font-semibold">
Waiting for your first Visit or Event
</div>
</div>
<div class="flex justify-center gap-10 flex-col lg:flex-row items-center lg:items-stretch px-10">
<div class="bg-menu p-6 rounded-xl flex flex-col gap-2 w-full">
<div class="poppins font-semibold"> Copy your project_id: </div>
<div class="flex items-center gap-2">
<div> <i @click="copyProjectId()" class="cursor-pointer hover:text-text far fa-copy"></i> </div>
<div class="text-[.9rem] text-[#acacac]"> {{ activeProject?._id }} </div>
</div>
</div>
<div class="bg-menu p-6 rounded-xl flex flex-col gap-2 w-full lg:max-w-[40vw]">
<div class="poppins font-semibold">
Start logging visits in 1 click | Plug anywhere !
</div>
<div class="flex items-center gap-4">
<div> <i @click="copyScript()" class="cursor-pointer hover:text-text far fa-copy"></i> </div>
<div class="text-[.9rem] text-[#acacac] lg:w-min">
{{ `
<script defer data-project="${activeProject?._id}"
src="https://cdn.jsdelivr.net/gh/litlyx/litlyx-js/browser/litlyx.js"></script>` }}
</div>
</div>
</div>
</div>
<NuxtLink to="https://docs.litlyx.com" target="_blank"
class="flex justify-center poppins text-[1.2rem] text-accent gap-2 items-center">
<div> <i class="far fa-book"></i> </div>
<div class="poppins"> Go to docs </div>
</NuxtLink>
</div>
<FirstInteraction :refresh-interaction="firstInteraction.refresh" :first-interaction="(firstInteraction.data.value || false)"></FirstInteraction>
<div class="text-text/85 mt-8 ml-8 poppis text-[1.2rem]" v-if="projects && projects.length == 0">
Create your first project...

42
dashboard/pages/live_demo.vue
View File

@@ -6,6 +6,8 @@ const { snapshot, snapshots } = useSnapshot();
const { data: project } = useLiveDemo();
const ready = ref<boolean>(false);
let interval: any;
onMounted(async () => {
@@ -13,8 +15,11 @@ onMounted(async () => {
snapshot.value = snapshots.value[0];
interval = setInterval(async () => {
await getOnlineUsers();
}, 5000);
}, 20000);
setTimeout(() => {
ready.value = true;
}, 2000);
})
onUnmounted(() => {
@@ -54,8 +59,7 @@ const selectLabelsEvents = [
<template>
<div class="dashboard w-full h-full overflow-y-auto pb-20">
<div v-if="project">
<div v-if="project && ready">
<div
class="bg-bg w-full px-6 py-6 text-text/90 flex flex-collg:flex-row text-lg lg:text-2xl gap-2 lg:gap-12">
@@ -85,35 +89,10 @@ const selectLabelsEvents = [
<DashboardTopCards></DashboardTopCards>
</div>
<div class="mt-6 px-6 flex gap-6 flex-col 2xl:flex-row">
<CardTitled class="p-4 flex-1 w-full" title="Visits trends" sub="Shows trends in page visits.">
<template #header>
<SelectButton @changeIndex="mainChartSelectIndex = $event" :currentIndex="mainChartSelectIndex"
:options="selectLabels">
</SelectButton>
</template>
<div>
<DashboardVisitsLineChart :slice="(selectLabels[mainChartSelectIndex].value as any)">
</DashboardVisitsLineChart>
</div>
</CardTitled>
<!-- <CardTitled class="p-4 flex-1" title="Sessions" sub="Shows trends in sessions.">
<template #header>
<SelectButton @changeIndex="sessionsChartSelectIndex = $event"
:currentIndex="sessionsChartSelectIndex" :options="selectLabels">
</SelectButton>
</template>
<div>
<DashboardSessionsLineChart :slice="(selectLabels[sessionsChartSelectIndex].value as any)">
</DashboardSessionsLineChart>
</div>
</CardTitled> -->
<div class="mt-6 px-6 flex gap-6 flex-col 2xl:flex-row w-full">
<DashboardActionableChart></DashboardActionableChart>
</div>
<div class="flex gap-6 flex-col xl:flex-row p-6">
<CardTitled class="p-4 flex-[4] w-full h-full" title="Events" sub="Events stacked bar chart.">
@@ -213,6 +192,9 @@ const selectLabelsEvents = [
</div>
<div v-if="!ready || !project" class="flex justify-center py-40">
<i class="fas fa-spinner text-[2rem] text-accent animate-[spin_1s_linear_infinite] duration-500"></i>
</div>
</div>
</template>