Skip to content

Commit 26f9073

Browse files
Xarlifue360Xarlifue360
committed
createNew.component 1ºparte
1 parent d4c8f66 commit 26f9073

File tree

4 files changed

+128
-1
lines changed

4 files changed

+128
-1
lines changed

‎frontend/src/app/app.module.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,13 @@ import { ShowNewsComponent } from './components/news/showNews.component';
1515
import { HomeComponent } from './components/home/home.component';
1616
import { UserProfile } from './components/user/userProfile.component';
1717
import { AdminComponent } from './components/admin/admin.component';
18+
import { CreateNewComponent } from './components/news/createNew.component';
1819

1920

2021

2122

2223
@NgModule({
23-
declarations: [AppComponent, LoginComponent, HeadComponent, NewsComponent, NavBarComponent, FooterComponent, NewsTemplateComponent, ShowNewsComponent, HomeComponent, UserProfile, AdminComponent],
24+
declarations: [AppComponent, LoginComponent, HeadComponent, NewsComponent, NavBarComponent, FooterComponent, NewsTemplateComponent, ShowNewsComponent, HomeComponent, UserProfile, AdminComponent, CreateNewComponent],
2425
imports: [BrowserModule, FormsModule, HttpClientModule, routing, FormsModule],
2526
bootstrap: [AppComponent]
2627
})

‎frontend/src/app/app.routing.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { Routes, RouterModule } from '@angular/router';
22
import { AdminComponent } from './components/admin/admin.component';
33

44
import { HomeComponent } from './components/home/home.component';
5+
import { CreateNewComponent } from './components/news/createNew.component';
56
import { NewsComponent } from './components/news/news.component';
67
import { ShowNewsComponent } from './components/news/showNews.component';
78
import { UserProfile } from './components/user/userProfile.component';
@@ -15,6 +16,7 @@ const appRoutes = [
1516
{ path: 'showNews', component: ShowNewsComponent},
1617
{ path: 'userProfile', component: UserProfile},
1718
{ path: 'admin', component: AdminComponent},
19+
{ path: 'createNew', component: CreateNewComponent}
1820
{ path: '', redirectTo: 'home', pathMatch: 'full'}
1921
]
2022

‎frontend/src/app/components/news/createNew.component.html‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
<section>
2+
3+
<form action="/createNew" method="post" enctype="multipart/form-data">
4+
5+
<div class="container" style="background-color:#f5f5f5; margin-top: 2%; padding-bottom: 1%; ">
6+
7+
<div class="row">
8+
<div class="col-12" style="padding-bottom: 5%;">
9+
<h2 style="text-align: center; padding-top: 2%;">Edit New Form</h2>
10+
</div>
11+
</div>
12+
13+
<div class="row mt-2 d-flex justify-content-center">
14+
<div class="col-md-4 ">
15+
<div>
16+
<label>Title: </label>
17+
<p><textarea name="title" placeholder="title" style="width: 100%;" [(ngModel)]="title"></textarea></p>
18+
</div>
19+
</div>
20+
<div class="col-md-4 ">
21+
<div>
22+
<label>Date: </label>
23+
<p><textarea name="date" placeholder="date" style="width: 100%;" [(ngModel)]="date"></textarea></p>
24+
</div>
25+
</div>
26+
</div>
27+
28+
<div class="row mt-2 d-flex justify-content-center">
29+
<div class="col-md-4 ">
30+
<div>
31+
<label>Read Time: </label>
32+
<p><textarea name="readTime" placeholder="readTime" style="width: 100%;" [(ngModel)]="read_time"></textarea></p>
33+
</div>
34+
</div>
35+
<div class="col-md-4 ">
36+
<div>
37+
<label>Badge: </label>
38+
<p><textarea name="badge" placeholder="badge" style="width: 100%;" [(ngModel)]="badge"></textarea></p>
39+
</div>
40+
</div>
41+
</div>
42+
43+
<div class="row mt-3 d-flex justify-content-center">
44+
<div class="col-md-8">
45+
<div>
46+
<label style="text-align: left !important;">New Content: </label>
47+
<p><textarea name="description" placeholder="description" rows="10"
48+
style="width: 100%;" [(ngModel)]="content"></textarea></p>
49+
</div>
50+
</div>
51+
</div>
52+
53+
<div class="row mt-3 d-flex justify-content-center">
54+
<div class="col-md-8">
55+
<div>
56+
<label style="text-align: left !important;">New short header: </label>
57+
<p><textarea name="shortDescription" placeholder="shortDescription" rows="10"
58+
style="width: 100%;" [(ngModel)]="header"></textarea></p>
59+
</div>
60+
</div>
61+
</div>
62+
63+
<div class="row mt-3 d-flex justify-content-center">
64+
<div class="col-8">
65+
<p>Related Videogames: </p>
66+
<select name="videogames" multiple style="width: 100%;">
67+
{{#videogame}}
68+
<option value="{{ id }}">{{ title }}</option>
69+
{{/videogame}}
70+
</select>
71+
</div>
72+
</div>
73+
74+
75+
<div class="row mt-3 d-flex justify-content-center">
76+
<div class="col-8 ">
77+
<p>Image: </p>
78+
<p>
79+
<input type='file' name='imageField' accept=".jpg, .jpeg .png .svg" [(ngModel)]="image"/>
80+
<input type="hidden" name="_csrf" value="{{token}}" />
81+
</p>
82+
</div>
83+
</div>
84+
85+
<p style="text-align: center;">
86+
<input class="btn btn-primary" type="submit" value="Save" (click)="addNew(title, date, read_time, badge, content, header)";/>
87+
<!--Boton que ejecutara la función ajax-->
88+
<button class="btn btn-outline-light" style="color: black; border-color: black;"
89+
onclick="location.href='/';">Cancel</button>
90+
<!--Boton para cancelar la acción-->
91+
</p>
92+
</div>
93+
</form>
94+
</section>
95+
96+
<!-- Bootstrap core JS-->
97+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
98+
<!-- Core theme JS-->
99+
<script src="js/scripts.js"></script>

‎frontend/src/app/components/news/createNew.component.ts‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { Component } from "@angular/core";
2+
import { News } from "src/app/models/news.model";
3+
4+
@Component ({
5+
selector: 'createNew',
6+
template: './createNew.component.html'
7+
})
8+
9+
export class CreateNewComponent {
10+
news: News | undefined;
11+
12+
title: string | undefined;
13+
date: string | undefined;
14+
readtime: string | undefined;
15+
bagde: string | undefined;
16+
content: string | undefined;
17+
header: string | undefined;
18+
image: boolean | undefined;
19+
20+
21+
constructor(title: string, date: string, readtime: string, bagde: string, content: string, header: string, image: boolean) {
22+
this.news = {title: title, date: '', readTime: readtime, badge: bagde, description: content, argument: header, image: image}
23+
}
24+
25+
}

0 commit comments

Comments
 (0)