watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-09 23:27:12 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

Refactored tracker. Added handling for buttons.

Browse source
This commit is contained in:
Mike Cao 2024-01-14 21:17:11 -08:00
parent 2197551e58
commit 28d2787880
9 changed files with 152 additions and 209 deletions
Download patch file Download diff file Expand all files Collapse all files

23
src/app/(main)/console/TestConsole.module.css
View file

@ -1,7 +1,16 @@
.test {
.container {
display: grid;
gap: 30px;
}
.actions {
border: 1px solid var(--base400);
border-radius: 5px;
padding: 0 20px 20px 20px;
display: grid;
gap: 40px;
grid-template-columns: repeat(3, minmax(300px, 1fr));
box-shadow: 0 0 0 10px var(--base100);
}
.header {
@ -9,3 +18,15 @@
font-weight: 700;
margin: 20px 0;
}
.group {
display: flex;
flex-direction: column;
gap: 10px;
}
.wrapped {
border: 1px solid var(--blue900);
border-radius: 4px;
padding: 8px 16px;
}

39
src/app/(main)/console/TestConsole.tsx
View file

@ -82,15 +82,15 @@ export function TestConsole({ websiteId }: { websiteId: string }) {
<WebsiteSelect websiteId={website?.id} onSelect={handleChange} />
</PageHeader>
{website && (
<>
<div className={styles.container}>
<Script
async
data-website-id={websiteId}
src={`${process.env.basePath}/script.js`}
data-cache="true"
/>
<div className={styles.test}>
<div>
<div className={styles.actions}>
<div className={styles.group}>
<div className={styles.header}>Page links</div>
<div>
<Link href={`/console/${websiteId}/page/1/?q=abc`}>page one</Link>
@ -114,12 +114,11 @@ export function TestConsole({ websiteId }: { websiteId: string }) {
</a>
</div>
</div>
<div>
<div className={styles.group}>
<div className={styles.header}>Click events</div>
<Button id="send-event-button" data-umami-event="button-click" variant="primary">
Send event
</Button>
<p />
<Button
id="send-event-data-button"
data-umami-event="button-click"
@ -129,23 +128,39 @@ export function TestConsole({ websiteId }: { websiteId: string }) {
>
Send event with data
</Button>
<Button
id="button-with-div-button"
data-umami-event="button-click"
data-umami-event-name="bob"
data-umami-event-id="123"
variant="primary"
>
<div className={styles.wrapped}>Button with div</div>
</Button>
<div data-umami-event="div-click" className={styles.wrapped}>
DIV with attribute
</div>
<div data-umami-event="div-click-one" className={styles.wrapped}>
<div data-umami-event="div-click-two" className={styles.wrapped}>
<div data-umami-event="div-click-three" className={styles.wrapped}>
Nested DIV
</div>
</div>
</div>
</div>
<div>
<div className={styles.group}>
<div className={styles.header}>Javascript events</div>
<Button id="manual-button" variant="primary" onClick={handleClick}>
Run script
</Button>
<p />
<Button id="manual-button" variant="primary" onClick={handleIdentifyClick}>
Run identify
</Button>
</div>
</div>
<div>
<WebsiteChart websiteId={website.id} />
<EventsChart websiteId={website.id} />
</div>
</>
<WebsiteChart websiteId={website.id} />
<EventsChart websiteId={website.id} />
</div>
)}
</Page>
);