Skip to content
This repository was archived by the owner on Feb 6, 2024. It is now read-only.

Commit ff2cbbf

Browse files
merge: static content and first API calls
2 parents 1fc04a4 + e1a31aa commit ff2cbbf

38 files changed

+945
-45
lines changed

studio/src/app/app-root.tsx

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,12 @@ export class AppRoot {
1414
<ion-router useHash={false}>
1515
<ion-route url="/" component="app-home"/>
1616
<ion-route url="/editor" component="app-editor"/>
17+
18+
<ion-route url="/about" component="app-about"/>
19+
<ion-route url="/opensource" component="app-opensource"/>
20+
<ion-route url="/privacy" component="app-privacy"/>
21+
<ion-route url="/terms" component="app-terms"/>
22+
<ion-route url="/contact" component="app-contact"/>
1723
</ion-router>
1824

1925
<ion-split-pane when="lg">
@@ -22,15 +28,15 @@ export class AppRoot {
2228
<ion-content>
2329
<ion-menu-toggle autoHide={false}>
2430
<ion-list>
25-
<ion-item>
26-
<app-avatar slot="start"></app-avatar>
31+
<ion-item class="user">
32+
<app-avatar slot="start" src="https://pbs.twimg.com/profile_images/941274539979366400/bTKGkd-O_400x400.jpg"></app-avatar>
2733
<ion-label>David Dal Busco</ion-label>
2834
</ion-item>
2935

3036
<ion-item-divider>
3137
<ion-label>Presentations</ion-label>
3238
<ion-button size="small" slot="end" shape="round" margin-end href="/editor" routerDirection="forward">
33-
<ion-icon name="add" slot="start"></ion-icon>
39+
<ion-icon name="book" slot="start"></ion-icon>
3440
<ion-label>New</ion-label>
3541
</ion-button>
3642
</ion-item-divider>
@@ -45,6 +51,8 @@ export class AppRoot {
4551
<ion-label>Presentation B</ion-label>
4652
</ion-item>
4753
</ion-list>
54+
55+
<app-footer></app-footer>
4856
</ion-menu-toggle>
4957
</ion-content>
5058
</ion-menu>
Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
ion-avatar {
2-
width: 2rem;
3-
height: 2rem;
2+
width: var(--deckgo-avatar-size, 2rem);
3+
height: var(--deckgo-avatar-size, 2rem);
44
}

studio/src/app/components/app-avatar/app-avatar.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {Component} from '@stencil/core';
1+
import {Component, Prop} from '@stencil/core';
22

33

44
@Component({
@@ -8,9 +8,11 @@ import {Component} from '@stencil/core';
88
})
99
export class AppAvatar {
1010

11+
@Prop() src: string;
12+
1113
render() {
1214
return <ion-avatar>
13-
<img src="https://pbs.twimg.com/profile_images/941274539979366400/bTKGkd-O_400x400.jpg"/>
15+
<img src={this.src}/>
1416
</ion-avatar>
1517
}
1618

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
app-footer {
2+
div {
3+
display: flex;
4+
flex-wrap: wrap;
5+
6+
font-size: var(--font-size-small);
7+
8+
ion-anchor {
9+
padding: 4px;
10+
}
11+
}
12+
13+
hr {
14+
border-bottom: 1px solid rgba(0, 0, 0, .15);
15+
padding-top: 40px;
16+
}
17+
}
18+
19+
20+
21+
ion-split-pane {
22+
23+
&:not(.split-pane-visible) {
24+
app-footer {
25+
div {
26+
ion-anchor {
27+
color: white;
28+
29+
&:hover, &.active {
30+
color: var(--ion-color-secondary);
31+
}
32+
}
33+
}
34+
}
35+
}
36+
}
Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import {Component} from '@stencil/core';
2+
3+
@Component({
4+
tag: 'app-footer',
5+
styleUrl: 'app-footer.scss',
6+
shadow: false
7+
})
8+
export class AppFooter {
9+
10+
render() {
11+
return [
12+
<hr margin/>,
13+
<div padding-start padding-end>
14+
<ion-anchor href="/about" routerDirection="forward">
15+
<ion-label>About</ion-label>
16+
</ion-anchor>
17+
18+
<ion-anchor href="/opensource" routerDirection="forward">
19+
<ion-label>Open source</ion-label>
20+
</ion-anchor>
21+
22+
<ion-anchor href="/privacy" routerDirection="forward">
23+
<ion-label>Privacy Policy</ion-label>
24+
</ion-anchor>
25+
26+
<ion-anchor href="/terms" routerDirection="forward">
27+
<ion-label>Terms of use</ion-label>
28+
</ion-anchor>
29+
30+
<ion-anchor href="/contact" routerDirection="forward">
31+
<ion-label>Contact</ion-label>
32+
</ion-anchor>
33+
</div>
34+
]
35+
}
36+
}

studio/src/app/components/app-navigation/app-navigation.scss

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,15 @@
11
app-navigation {
22
ion-anchor {
33
--color: white;
4+
5+
&:hover, &:active {
6+
color: white;
7+
}
8+
9+
div {
10+
display: flex;
11+
align-items: center;
12+
}
413
}
514

615
div[slot="end"] {
@@ -17,29 +26,21 @@ ion-split-pane {
1726

1827
app-navigation {
1928
ion-button {
20-
&.presentation {
21-
--background: white;
22-
--color: #000;
23-
}
24-
25-
&.publish {
29+
&.presentation, &.publish {
2630
--background: white;
2731
--color: #000;
32+
--color-activated: var(--ion-color-tertiary);
2833
}
2934
}
3035
}
3136

3237
&:not(.split-pane-visible) {
3338
app-navigation {
3439
ion-button {
35-
&.presentation {
36-
--background: var(--ion-color-primary);
37-
--color: white;
38-
}
39-
40-
&.publish {
40+
&.presentation, &.publish {
4141
--background: var(--ion-color-tertiary);
4242
--color: white;
43+
--color-activated: var(--ion-color-secondary);
4344
}
4445
}
4546
}

studio/src/app/components/app-navigation/app-navigation.tsx

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -32,8 +32,10 @@ export class AppNavigation {
3232
if (this.logo) {
3333
return <ion-title slot="start">
3434
<ion-anchor href="/" routerDirection="forward">
35-
<app-logo></app-logo>
36-
<span>DeckDeckGo</span>
35+
<div>
36+
<app-logo></app-logo>
37+
<span text-uppercase>DeckDeckGo</span>
38+
</div>
3739
</ion-anchor>
3840
</ion-title>;
3941
} else {
@@ -62,7 +64,7 @@ export class AppNavigation {
6264
{this.renderPublishButton()}
6365

6466
<a padding-start padding-end>
65-
<app-avatar></app-avatar>
67+
<app-avatar src="https://pbs.twimg.com/profile_images/941274539979366400/bTKGkd-O_400x400.jpg"></app-avatar>
6668
</a>
6769
</div>;
6870
} else {
Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
import {SlideTemplate} from '../../models/slide-template';
2+
import {Slide} from '../../models/slide';
3+
import {Deck} from '../../models/deck';
4+
5+
import {SlideService} from '../../services/slide/slide.service';
6+
import {DeckService} from '../../services/deck/deck.service';
7+
8+
export class EditorHelper {
9+
10+
private el: HTMLElement;
11+
12+
private slideService: SlideService;
13+
private deckService: DeckService;
14+
15+
private deck: Deck;
16+
17+
constructor() {
18+
this.slideService = SlideService.getInstance();
19+
this.deckService = DeckService.getInstance();
20+
}
21+
22+
init(el: HTMLElement) {
23+
this.el = el;
24+
25+
this.el.addEventListener('slideDidLoad', this.onSlideDidLoad, false);
26+
}
27+
28+
destroy() {
29+
this.el.removeEventListener('change', this.onSlideDidLoad, true);
30+
}
31+
32+
private onSlideDidLoad = async ($event: CustomEvent) => {
33+
if ($event && $event.target && $event.target instanceof HTMLElement) {
34+
await this.createSlide($event.target);
35+
}
36+
};
37+
38+
private createSlide(slide: HTMLElement): Promise<void> {
39+
return new Promise<void>(async (resolve) => {
40+
try {
41+
if (!slide) {
42+
resolve();
43+
return;
44+
}
45+
46+
if (slide.getAttribute('slide_id')) {
47+
// !isNew
48+
resolve();
49+
return;
50+
}
51+
52+
const persistedSlide: Slide = await this.slideService.post({
53+
slide_template: SlideTemplate.TITLE,
54+
slide_content: slide.innerHTML
55+
});
56+
57+
if (persistedSlide && persistedSlide.slide_id) {
58+
slide.setAttribute('slide_id', persistedSlide.slide_id);
59+
60+
await this.createOrUpdateDeck(persistedSlide);
61+
}
62+
} catch (err) {
63+
// TODO do something with the error
64+
console.error(err);
65+
resolve();
66+
}
67+
});
68+
}
69+
70+
private createOrUpdateDeck(slide: Slide): Promise<void> {
71+
return new Promise<void>(async (resolve, reject) => {
72+
try {
73+
if (!slide) {
74+
reject('Missing slide to create or update the deck');
75+
return;
76+
}
77+
78+
if (this.deck) {
79+
if (!this.deck.deck_slides || this.deck.deck_slides.length <= 0) {
80+
this.deck.deck_slides = [];
81+
}
82+
83+
this.deck.deck_slides.push(slide.slide_id);
84+
85+
this.deck = await this.deckService.put(this.deck);
86+
} else {
87+
this.deck = {
88+
deck_slides: [slide.slide_id]
89+
};
90+
91+
this.deck = await this.deckService.post(this.deck);
92+
}
93+
94+
console.log(this.deck);
95+
96+
resolve();
97+
} catch (err) {
98+
reject(err);
99+
}
100+
});
101+
}
102+
103+
}

studio/src/app/models/deck.tsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export interface Deck {
2+
deck_id?: string;
3+
deck_slides: string[];
4+
}
Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export interface SlideAttributes {
2+
style?: string;
3+
}

0 commit comments

Comments
 (0)