Skip to content

Commit 275b52b

Browse files
damoebdamoeb
committed
beauty is a biest
1 parent 29204f0 commit 275b52b

27 files changed

+418
-178
lines changed

‎packages/playground/src/app/components/convert-format/convert-format.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<app-section title="Format" [active]="true">
1+
<app-section title="Feeds" [active]="true">
22
<ul class="menu-list">
33
<li><a>Copy Atom URL</a></li>
44
<li><a>Copy Rss URL</a></li>

‎packages/playground/src/app/components/feed/feed.component.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<div style="margin: 5px">
2+
<div class="block">
3+
<h2>{{ jsonFeed.title }}</h2>
4+
<p>{{ jsonFeed.description }}</p>
5+
<p>{{ jsonFeed.home_page_url }}</p>
6+
<p>{{ jsonFeed.date_published }}</p>
7+
</div>
8+
9+
<div class="content" *ngFor="let item of jsonFeed.items">
10+
<h3>{{ item.title }}</h3>
11+
<p>{{ item.content_text }}</p>
12+
</div>
13+
</div>

‎packages/playground/src/app/components/feed/feed.component.scss‎

Whitespace-only changes.

‎packages/playground/src/app/components/feed/feed.component.spec.ts‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { ComponentFixture, TestBed } from '@angular/core/testing';
2+
3+
import { FeedComponent } from './feed.component';
4+
5+
describe('FeedComponent', () => {
6+
let component: FeedComponent;
7+
let fixture: ComponentFixture<FeedComponent>;
8+
9+
beforeEach(async () => {
10+
await TestBed.configureTestingModule({
11+
declarations: [FeedComponent],
12+
}).compileComponents();
13+
});
14+
15+
beforeEach(() => {
16+
fixture = TestBed.createComponent(FeedComponent);
17+
component = fixture.componentInstance;
18+
fixture.detectChanges();
19+
});
20+
21+
it('should create', () => {
22+
expect(component).toBeTruthy();
23+
});
24+
});

‎packages/playground/src/app/components/feed/feed.component.ts‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import { Component, Input, OnInit } from '@angular/core';
2+
3+
export interface JsonFeedItem {
4+
id: string;
5+
title: string;
6+
content_text: string;
7+
content_raw: string;
8+
content_raw_mime: string;
9+
url: string;
10+
date_published: string;
11+
tags: string[];
12+
image: string;
13+
author: string;
14+
enclosures: any;
15+
commentsFeedUrl: string;
16+
}
17+
18+
export interface JsonFeed {
19+
id: string;
20+
21+
last_url: string;
22+
previous_url: string;
23+
next_url: string;
24+
feed_url: string;
25+
26+
expired: false;
27+
title: string;
28+
description: string;
29+
home_page_url: string;
30+
date_published: string;
31+
items: JsonFeedItem[];
32+
lastPage: number;
33+
selfPage: number;
34+
tags: string[];
35+
}
36+
37+
@Component({
38+
selector: 'app-feed',
39+
templateUrl: './feed.component.html',
40+
styleUrls: ['./feed.component.scss'],
41+
})
42+
export class FeedComponent implements OnInit {
43+
@Input()
44+
jsonFeed: JsonFeed;
45+
46+
constructor() {}
47+
48+
ngOnInit(): void {}
49+
}

‎packages/playground/src/app/components/feed/feed.module.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { NgModule } from '@angular/core';
2+
import { CommonModule } from '@angular/common';
3+
import { FeedComponent } from './feed.component';
4+
5+
@NgModule({
6+
declarations: [FeedComponent],
7+
exports: [FeedComponent],
8+
imports: [CommonModule],
9+
})
10+
export class FeedModule {}

‎packages/playground/src/app/components/generic-feeds/generic-feeds.component.html‎

Lines changed: 122 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -1,104 +1,139 @@
11
<div class="flex">
2-
<app-section [title]="title" [active]="!currentRule">
3-
<aside
4-
class="aside"
5-
style="
6-
flex: 0 0 auto;
7-
max-height: 60vh;
8-
overflow-y: auto;
9-
overflow-x: hidden;
10-
"
11-
>
12-
<ul class="menu-list">
2+
<app-section title="Generated Feeds" [active]="!currentRule">
3+
<ul class="menu-list mt-4"
4+
*ngIf="hasChosen">
5+
<li>
6+
<label class="label">Context</label>
7+
<p>
8+
<em>{{ customContextXPath }}</em>
9+
</p>
10+
11+
<label class="label mt-3">Link</label>
12+
<p>
13+
<em>{{ customLinkXPath }}</em>
14+
</p>
15+
16+
<label class="label mt-3">Date</label>
17+
<p>
18+
<em *ngIf="customDateXPath">{{ customDateXPath }}</em>
19+
<em *ngIf="!customDateXPath">empty</em>
20+
</p>
21+
</li>
22+
<li class="mt-4">
23+
<a class="is-active">Refine Feed</a>
24+
</li>
25+
<li>
26+
<a>Change</a>
27+
</li>
28+
</ul>
29+
30+
<aside class="aside" [ngClass]="{ 'is-hidden': hasChosen }">
31+
<ul
32+
class="menu-list"
33+
style="
34+
flex: 0 0 auto;
35+
max-height: 60vh;
36+
overflow-y: auto;
37+
overflow-x: hidden;
38+
"
39+
>
1340
<li *ngFor="let rule of genericFeedRules; let i = index">
1441
<a
1542
href="javascript:void(0)"
16-
[ngClass]="{ 'is-active': rule.id == currentRule?.id }"
43+
[ngClass]="{
44+
'is-preselected': rule.id == currentRule?.id && !hasChosen,
45+
'is-active': rule.id == currentRule?.id && hasChosen
46+
}"
1747
(click)="applyRule(rule)"
1848
>
1949
with <strong>{{ rule.count }}</strong> articles
2050

21-
<div
22-
class="sample"
23-
*ngFor="let article of rule.samples.slice(0, 2)"
24-
>
25-
{{ article.title }}
51+
<div *ngIf="rule.id !== currentRule?.id">
52+
<ul *ngFor="let article of rule.samples">
53+
<li>{{ article.title }}</li>
54+
</ul>
2655
</div>
27-
</a>
28-
</li>
29-
</ul>
30-
<ul class="menu-list" *ngIf="currentRule">
31-
<li>
32-
<form (ngSubmit)="applyCustomRule(currentRule)">
33-
<div>
34-
<div>
35-
<label class="label is-small">Context*</label>
36-
</div>
37-
<div
38-
class="field has-addons"
39-
aria-label="Elements XPath (e.g. //body//ul[1]/li)"
40-
>
41-
<div class="control is-expanded is-primary">
42-
<input
43-
[(ngModel)]="customContextXPath"
44-
class="input is-small is-primary"
45-
type="text"
46-
name="context"
47-
placeholder="Elements XPath"
48-
/>
49-
</div>
50-
</div>
5156

52-
<div>
53-
<label class="label is-small">Link*</label>
54-
</div>
55-
<div
56-
class="field has-addons"
57-
aria-label="Links relative XPath (e.g. ./a[1])"
58-
>
59-
<div class="control is-expanded">
60-
<input
61-
[(ngModel)]="customLinkXPath"
62-
class="input is-small is-primary"
63-
type="text"
64-
name="link"
65-
placeholder="Link XPath"
66-
/>
67-
</div>
68-
</div>
57+
<ul class="menu-list" *ngIf="rule.id == currentRule?.id">
58+
<li>
59+
<form (ngSubmit)="applyCustomRule(currentRule)">
60+
<div>
61+
<div>
62+
<label class="label is-small is-secondary"
63+
>Context*</label
64+
>
65+
</div>
66+
<div
67+
class="field has-addons"
68+
aria-label="Elements XPath (e.g. //body//ul[1]/li)"
69+
>
70+
<div class="control is-expanded">
71+
<input
72+
[(ngModel)]="customContextXPath"
73+
(ngModelChange)="applyCustomRule(currentRule)"
74+
class="input is-primary"
75+
type="text"
76+
name="context"
77+
placeholder="Elements XPath"
78+
/>
79+
</div>
80+
</div>
6981

70-
<div>
71-
<label class="label is-small">Date</label>
72-
</div>
73-
<div
74-
class="field has-addons"
75-
aria-label="Date relative XPath (e.g. ./a[1])"
76-
>
77-
<div class="control is-expanded">
78-
<input
79-
[(ngModel)]="customDateXPath"
80-
class="input is-small is-primary"
81-
type="text"
82-
name="date"
83-
placeholder="Date XPath"
84-
/>
85-
</div>
86-
</div>
87-
</div>
88-
<div>
89-
<button
90-
class="button is-secondary is-pulled-right"
91-
(click)="applyCustomRule(currentRule)"
92-
>
93-
Apply
94-
</button>
95-
</div>
96-
</form>
82+
<div>
83+
<label class="label is-small is-secondary">Link*</label>
84+
</div>
85+
<div
86+
class="field has-addons"
87+
aria-label="Links relative XPath (e.g. ./a[1])"
88+
>
89+
<div class="control is-expanded">
90+
<input
91+
[(ngModel)]="customLinkXPath"
92+
(ngModelChange)="applyCustomRule(currentRule)"
93+
class="input is-primary"
94+
type="text"
95+
name="link"
96+
placeholder="Link XPath"
97+
/>
98+
</div>
99+
</div>
100+
101+
<div>
102+
<label class="label is-small is-secondary">Date</label>
103+
</div>
104+
<div
105+
class="field has-addons"
106+
aria-label="Date relative XPath (e.g. ./a[1])"
107+
>
108+
<div class="control is-expanded">
109+
<input
110+
[(ngModel)]="customDateXPath"
111+
(ngModelChange)="applyCustomRule(currentRule)"
112+
class="input is-primary"
113+
type="text"
114+
name="date"
115+
placeholder="Date XPath"
116+
/>
117+
</div>
118+
</div>
119+
</div>
120+
<div class="mt-2">
121+
<button
122+
class="button is-primary is-expanded"
123+
(click)="useRefine()"
124+
>
125+
Refine
126+
</button>
127+
</div>
128+
</form>
129+
</li>
130+
</ul>
131+
</a>
97132
</li>
98133
</ul>
99134
</aside>
100135

101-
<div class="source">
136+
<div class="source" [ngClass]="{ 'is-hidden': hasChosen }">
102137
<div class="iframe-wrapper" [hidden]="!currentRule">
103138
<iframe
104139
#iframeElement
@@ -118,7 +153,7 @@
118153
</app-section>
119154

120155
<app-refine-feed
121-
*ngIf="currentRule"
156+
*ngIf="refine"
122157
class="flex"
123158
[genericFeedRule]="currentRule"
124159
></app-refine-feed>

‎packages/playground/src/app/components/generic-feeds/generic-feeds.component.scss‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,3 +28,10 @@ $primary: blue;
2828
transform: scale(0.7);
2929
transform-origin: 0 0;
3030
}
31+
32+
.is-preselected {
33+
border-left: 5px solid blue;
34+
}
35+
.is-expanded {
36+
width: 100%;
37+
}

‎packages/playground/src/app/components/generic-feeds/generic-feeds.component.ts‎

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -67,8 +67,6 @@ export class GenericFeedsComponent implements OnInit {
6767
url: string;
6868
@Input()
6969
genericFeedRules: GenericFeedRule[];
70-
@Input()
71-
title = 'Generic Feeds from static';
7270

7371
currentRule: GenericFeedWithParams;
7472

@@ -80,6 +78,8 @@ export class GenericFeedsComponent implements OnInit {
8078
customContextXPath = '';
8179

8280
private proxyUrl: string;
81+
refine: boolean;
82+
hasChosen: boolean;
8383

8484
constructor(private readonly changeDetectorRef: ChangeDetectorRef) {}
8585

@@ -236,4 +236,20 @@ export class GenericFeedsComponent implements OnInit {
236236
}
237237
return nodes;
238238
}
239+
240+
private use(fn: () => void) {
241+
this.reset();
242+
fn();
243+
this.hasChosen = true;
244+
}
245+
246+
private reset() {
247+
this.refine = null;
248+
}
249+
250+
useRefine() {
251+
this.use(() => {
252+
this.refine = true;
253+
});
254+
}
239255
}

0 commit comments

Comments
 (0)