Skip to content

Commit 046d8be

Browse files
geromegrignongeromegrignon
committed
feat: watch party poc
1 parent 4d51cd7 commit 046d8be

File tree

2 files changed

+182
-0
lines changed

2 files changed

+182
-0
lines changed

‎angular-hub/src/app/components/navigation/navigation.component.html

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,22 @@
55
<img class="h-12" src="/assets/images/logo.webp" alt="" />
66
<span class="title text-3xl">HUB</span>
77
</a>
8+
89
<ul class="flex flex-col gap-2 mt-12">
910
<!-- Navbar menu content here -->
11+
<!-- TODO test
12+
<li>
13+
<a
14+
class="flex gap-4 items-center px-4 py-3 rounded-xl font-bold"
15+
routerLinkActive="sidebarActive"
16+
[routerLinkActiveOptions]="{ exact: true }"
17+
routerLink="/watch-party"
18+
(click)="sidebarVisible = false"
19+
>
20+
11111101000 1011 10011
21+
</a>
22+
</li>
23+
-->
1024
<li>
1125
<a
1226
class="flex gap-4 items-center px-4 py-3 rounded-xl font-bold"
@@ -86,6 +100,7 @@
86100
Contribute
87101
</a>
88102
</li>
103+
<!--
89104
@if (isInstallButtonVisible()) {
90105
<li>
91106
<button
@@ -101,6 +116,7 @@
101116
</button>
102117
</li>
103118
}
119+
-->
104120
</ul>
105121
</nav>
106122
<div class="flex-1">

‎angular-hub/src/app/pages/watch-party/index.page.ts

Lines changed: 166 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,166 @@
1+
import { Component } from '@angular/core';
2+
import { RouteMeta } from '@analogjs/router';
3+
import { BannerComponent } from '../../components/banner.component';
4+
import { TableModule } from 'primeng/table';
5+
import { DialogModule } from 'primeng/dialog';
6+
import { Button } from 'primeng/button';
7+
import { InputTextModule } from 'primeng/inputtext';
8+
9+
export const routeMeta: RouteMeta = {
10+
meta: [
11+
{
12+
name: 'description',
13+
content: 'Curated list of Angular Events',
14+
},
15+
{
16+
property: 'og:title',
17+
content: 'Curated list of Angular Events',
18+
},
19+
{
20+
property: 'og:image',
21+
content: '/api/v1/og-image',
22+
},
23+
{
24+
name: 'twitter:image',
25+
content: '/api/v1/og-image',
26+
},
27+
],
28+
};
29+
30+
@Component({
31+
selector: 'app-events',
32+
standalone: true,
33+
template: `
34+
<app-banner
35+
title="Watch parties"
36+
description="Find Angular release watch parties near you and join the community for the latest updates!"
37+
/>
38+
<!-- TODO add scrollbar-gutter stable for md + -->
39+
<div class="flex flex-col px-6 gap-6">
40+
<aside class="rounded-md bg-[#20212C] p-4 flex items-center gap-6 w-full">
41+
<button
42+
class="highlighted-btn rounded py-2 px-4 text-slate-100 w-48"
43+
(click)="showDialog()"
44+
>
45+
Share your party!
46+
</button>
47+
<span>
48+
Hosting a watch party for the Angular release? Share it with the
49+
community! Announce your event here and connect with fellow Angular
50+
enthusiasts.
51+
</span>
52+
</aside>
53+
54+
<div class="card">
55+
<p-table [value]="products" [tableStyle]="{ 'min-width': '50rem' }">
56+
<ng-template pTemplate="header">
57+
<tr>
58+
<th>Location</th>
59+
<th>Host</th>
60+
<th>Organizer</th>
61+
<th></th>
62+
</tr>
63+
</ng-template>
64+
<ng-template pTemplate="body" let-product>
65+
<tr>
66+
<td>{{ product.code }}</td>
67+
<td>{{ product.name }}</td>
68+
<td>{{ product.category }}</td>
69+
<td>
70+
<button
71+
type="button"
72+
class="rounded py-2 px-4 bg-slate-500 w-48"
73+
>
74+
Join
75+
</button>
76+
</td>
77+
</tr>
78+
</ng-template>
79+
</p-table>
80+
</div>
81+
</div>
82+
<p-dialog
83+
header="Edit Profile"
84+
[modal]="true"
85+
[(visible)]="visible"
86+
[style]="{ width: '25rem' }"
87+
>
88+
<form name="watch-party-event" method="POST" netlify>
89+
<span class="p-text-secondary block mb-5"
90+
>Update your information.</span
91+
>
92+
<div class="flex align-items-center gap-3 mb-3">
93+
<label for="username" class="font-semibold w-6rem">Organizer</label>
94+
<input
95+
pInputText
96+
id="username"
97+
class="flex-auto"
98+
name="organizer"
99+
autocomplete="off"
100+
/>
101+
</div>
102+
<div class="flex align-items-center gap-3 mb-5">
103+
<label for="email" class="font-semibold w-6rem">Host</label>
104+
<input
105+
pInputText
106+
id="email"
107+
class="flex-auto"
108+
name="host"
109+
autocomplete="off"
110+
/>
111+
</div>
112+
<div class="flex justify-content-end gap-2">
113+
<p-button
114+
typeof="button"
115+
label="Cancel"
116+
severity="secondary"
117+
(onClick)="visible = false"
118+
/>
119+
<p-button type="submit" label="Save" (onClick)="visible = false" />
120+
</div>
121+
</form>
122+
</p-dialog>
123+
`,
124+
styles: [
125+
`
126+
:host {
127+
display: flex;
128+
flex-direction: column;
129+
align-items: stretch;
130+
}
131+
132+
.highlighted-btn {
133+
background: rgb(191, 37, 185);
134+
}
135+
`,
136+
],
137+
imports: [
138+
BannerComponent,
139+
TableModule,
140+
DialogModule,
141+
Button,
142+
InputTextModule,
143+
],
144+
})
145+
export default class EventsComponent {
146+
visible = false;
147+
148+
showDialog() {
149+
this.visible = true;
150+
}
151+
152+
products = [
153+
{
154+
id: '1000',
155+
code: 'f230fh0g3',
156+
name: 'Bamboo Watch',
157+
description: 'Product Description',
158+
image: 'bamboo-watch.jpg',
159+
price: 65,
160+
category: 'Accessories',
161+
quantity: 24,
162+
inventoryStatus: 'INSTOCK',
163+
rating: 5,
164+
},
165+
];
166+
}

0 commit comments

Comments
 (0)