Skip to content

Commit 13d38a8

Browse files
danielschnetlerdanielschnetler
committed
Using ES6 for imports, note changes in index.html
1 parent b85daa4 commit 13d38a8

File tree

12 files changed

+334
-355
lines changed

12 files changed

+334
-355
lines changed

‎index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
77
<title>ProjectManager</title>
88
<link rel="stylesheet" href="app.css" />
9-
<script src="dist/bundle.js" defer></script>
9+
<script type="module" src="dist/app.js"></script>
1010
</head>
1111
<body>
1212
<template id="project-input">

‎src/app.ts

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
1-
/// <reference path = "components/project-list.ts" />
2-
/// <reference path = "components/project-input.ts" />
1+
import { ProjectInput } from "./components/project-input.js";
2+
import { ProjectList } from "./components/project-list.js";
33

4-
namespace App {
5-
new ProjectInput();
6-
new ProjectList("active");
7-
new ProjectList("finished");
8-
}
4+
new ProjectInput();
5+
new ProjectList("active");
6+
new ProjectList("finished");

‎src/components/base-components.ts

Lines changed: 32 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,39 @@
1-
namespace App {
2-
//Component base class
3-
export abstract class Component<
4-
T extends HTMLElement,
5-
U extends HTMLElement
6-
> {
7-
templateElement: HTMLTemplateElement;
8-
hostElement: T;
9-
element: U;
1+
//Component base class
2+
export abstract class Component<T extends HTMLElement, U extends HTMLElement> {
3+
templateElement: HTMLTemplateElement;
4+
hostElement: T;
5+
element: U;
106

11-
constructor(
12-
templateId: string,
13-
hostElementId: string,
14-
insertAtStart: boolean,
15-
newElementId?: string
16-
) {
17-
this.templateElement = document.getElementById(
18-
templateId
19-
)! as HTMLTemplateElement;
20-
this.hostElement = document.getElementById(hostElementId)! as T;
7+
constructor(
8+
templateId: string,
9+
hostElementId: string,
10+
insertAtStart: boolean,
11+
newElementId?: string
12+
) {
13+
this.templateElement = document.getElementById(
14+
templateId
15+
)! as HTMLTemplateElement;
16+
this.hostElement = document.getElementById(hostElementId)! as T;
2117

22-
const importedNode = document.importNode(
23-
this.templateElement.content,
24-
true
25-
);
26-
this.element = importedNode.firstElementChild as U;
27-
if (newElementId) {
28-
this.element.id = newElementId;
29-
}
30-
31-
this.attach(insertAtStart);
18+
const importedNode = document.importNode(
19+
this.templateElement.content,
20+
true
21+
);
22+
this.element = importedNode.firstElementChild as U;
23+
if (newElementId) {
24+
this.element.id = newElementId;
3225
}
3326

34-
private attach(insertAtBeginning: boolean) {
35-
this.hostElement.insertAdjacentElement(
36-
insertAtBeginning ? "afterbegin" : "beforeend",
37-
this.element
38-
);
39-
}
27+
this.attach(insertAtStart);
28+
}
4029

41-
abstract configure(): void;
42-
abstract renderContent(): void;
30+
private attach(insertAtBeginning: boolean) {
31+
this.hostElement.insertAdjacentElement(
32+
insertAtBeginning ? "afterbegin" : "beforeend",
33+
this.element
34+
);
4335
}
36+
37+
abstract configure(): void;
38+
abstract renderContent(): void;
4439
}

‎src/components/project-input.ts

Lines changed: 69 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,86 +1,85 @@
1-
/// <reference path = "base-components.ts" />
2-
/// <reference path = "../decorators/autobind.ts" />
3-
/// <reference path = "../models/project.ts" />
1+
import { Component } from "./base-components.js";
2+
import { AutoBind } from "../decorators/autobind.js";
3+
import { Validatable, validate } from "../util/validation.js";
4+
import { projectState } from "../state/project-state.js";
45

5-
namespace App {
6-
//ProjectInput Class
7-
export class ProjectInput extends Component<HTMLDivElement, HTMLFormElement> {
8-
titleInputElement: HTMLInputElement;
9-
descriptionInputElement: HTMLInputElement;
10-
peopleInputElement: HTMLInputElement;
6+
//ProjectInput Class
7+
export class ProjectInput extends Component<HTMLDivElement, HTMLFormElement> {
8+
titleInputElement: HTMLInputElement;
9+
descriptionInputElement: HTMLInputElement;
10+
peopleInputElement: HTMLInputElement;
1111

12-
constructor() {
13-
super("project-input", "app", true, "user-input");
14-
this.titleInputElement = this.element.querySelector(
15-
"#title"
16-
) as HTMLInputElement;
17-
this.descriptionInputElement = this.element.querySelector(
18-
"#description"
19-
) as HTMLInputElement;
20-
this.peopleInputElement = this.element.querySelector(
21-
"#people"
22-
) as HTMLInputElement;
12+
constructor() {
13+
super("project-input", "app", true, "user-input");
14+
this.titleInputElement = this.element.querySelector(
15+
"#title"
16+
) as HTMLInputElement;
17+
this.descriptionInputElement = this.element.querySelector(
18+
"#description"
19+
) as HTMLInputElement;
20+
this.peopleInputElement = this.element.querySelector(
21+
"#people"
22+
) as HTMLInputElement;
2323

24-
this.configure();
25-
}
24+
this.configure();
25+
}
2626

27-
configure(): void {
28-
this.element.addEventListener("submit", this.submitHandler);
29-
}
27+
configure(): void {
28+
this.element.addEventListener("submit", this.submitHandler);
29+
}
3030

31-
renderContent(): void {}
31+
renderContent(): void {}
3232

33-
private gatherUserInput(): [string, string, number] | void {
34-
const enteredTitle = this.titleInputElement.value;
35-
const enteredDescription = this.descriptionInputElement.value;
36-
const enteredPeople = this.peopleInputElement.value;
33+
private gatherUserInput(): [string, string, number] | void {
34+
const enteredTitle = this.titleInputElement.value;
35+
const enteredDescription = this.descriptionInputElement.value;
36+
const enteredPeople = this.peopleInputElement.value;
3737

38-
const titleValidatable: Validatable = {
39-
value: enteredTitle,
40-
required: true,
41-
};
38+
const titleValidatable: Validatable = {
39+
value: enteredTitle,
40+
required: true,
41+
};
4242

43-
const descriptionValidatable: Validatable = {
44-
value: enteredDescription,
45-
required: true,
46-
};
43+
const descriptionValidatable: Validatable = {
44+
value: enteredDescription,
45+
required: true,
46+
};
4747

48-
const peopleValidatable: Validatable = {
49-
value: +enteredPeople,
50-
required: true,
51-
min: 1,
52-
max: 5,
53-
};
48+
const peopleValidatable: Validatable = {
49+
value: +enteredPeople,
50+
required: true,
51+
min: 1,
52+
max: 5,
53+
};
5454

55-
if (
56-
!validate(titleValidatable) ||
57-
!validate(descriptionValidatable) ||
58-
!validate(peopleValidatable)
59-
) {
60-
alert("Invalid input, please try again!");
61-
return;
62-
} else {
63-
return [enteredTitle, enteredDescription, +enteredPeople];
64-
}
55+
if (
56+
!validate(titleValidatable) ||
57+
!validate(descriptionValidatable) ||
58+
!validate(peopleValidatable)
59+
) {
60+
alert("Invalid input, please try again!");
61+
return;
62+
} else {
63+
return [enteredTitle, enteredDescription, +enteredPeople];
6564
}
65+
}
6666

67-
private clearInputs() {
68-
this.titleInputElement.value = "";
69-
this.descriptionInputElement.value = "";
70-
this.peopleInputElement.value = "";
71-
}
67+
private clearInputs() {
68+
this.titleInputElement.value = "";
69+
this.descriptionInputElement.value = "";
70+
this.peopleInputElement.value = "";
71+
}
7272

73-
@AutoBind
74-
private submitHandler(event: Event) {
75-
event.preventDefault();
76-
console.log(this.titleInputElement.value);
77-
const userInput = this.gatherUserInput();
78-
if (Array.isArray(userInput)) {
79-
const [title, desc, people] = userInput;
80-
projectState.addProject(title, desc, people);
81-
//console.log(title, desc, people);
82-
this.clearInputs();
83-
}
73+
@AutoBind
74+
private submitHandler(event: Event) {
75+
event.preventDefault();
76+
console.log(this.titleInputElement.value);
77+
const userInput = this.gatherUserInput();
78+
if (Array.isArray(userInput)) {
79+
const [title, desc, people] = userInput;
80+
projectState.addProject(title, desc, people);
81+
//console.log(title, desc, people);
82+
this.clearInputs();
8483
}
8584
}
8685
}

‎src/components/project-item.ts

Lines changed: 40 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,49 @@
1-
/// <reference path = "base-components.ts" />
2-
/// <reference path = "../decorators/autobind.ts" />
3-
/// <reference path = "../models/project.ts" />
4-
/// <reference path = "../models/drag-drop.ts" />
5-
6-
namespace App {
7-
//Project Item Class
8-
export class ProjectItem
9-
extends Component<HTMLUListElement, HTMLLIElement>
10-
implements Draggable
11-
{
12-
private project: Project;
13-
14-
get persons() {
15-
if (this.project.people === 1) {
16-
return "1 Person";
17-
} else {
18-
return `${this.project.people} Persons`;
19-
}
1+
import { Draggable } from "../models/drag-drop.js";
2+
import { Project } from "../models/project.js";
3+
import { Component } from "./base-components.js";
4+
import { AutoBind } from "../decorators/autobind.js";
5+
6+
//Project Item Class
7+
export class ProjectItem
8+
extends Component<HTMLUListElement, HTMLLIElement>
9+
implements Draggable
10+
{
11+
private project: Project;
12+
13+
get persons() {
14+
if (this.project.people === 1) {
15+
return "1 Person";
16+
} else {
17+
return `${this.project.people} Persons`;
2018
}
19+
}
2120

22-
constructor(hostId: string, project: Project) {
23-
super("single-project", hostId, false, project.id);
24-
this.project = project;
21+
constructor(hostId: string, project: Project) {
22+
super("single-project", hostId, false, project.id);
23+
this.project = project;
2524

26-
this.configure();
27-
this.renderContent();
28-
}
25+
this.configure();
26+
this.renderContent();
27+
}
2928

30-
@AutoBind
31-
dragStartHandler(event: DragEvent): void {
32-
event.dataTransfer!.setData("text/plain", this.project.id);
33-
event.dataTransfer!.effectAllowed = "move";
34-
}
29+
@AutoBind
30+
dragStartHandler(event: DragEvent): void {
31+
event.dataTransfer!.setData("text/plain", this.project.id);
32+
event.dataTransfer!.effectAllowed = "move";
33+
}
3534

36-
dragEndHandler(_: DragEvent): void {
37-
console.log("drag end");
38-
}
35+
dragEndHandler(_: DragEvent): void {
36+
console.log("drag end");
37+
}
3938

40-
configure(): void {
41-
this.element.addEventListener("dragstart", this.dragStartHandler);
42-
this.element.addEventListener("dragend", this.dragEndHandler);
43-
}
39+
configure(): void {
40+
this.element.addEventListener("dragstart", this.dragStartHandler);
41+
this.element.addEventListener("dragend", this.dragEndHandler);
42+
}
4443

45-
renderContent(): void {
46-
this.element.querySelector("h2")!.textContent = this.project.title;
47-
this.element.querySelector("h3")!.textContent =
48-
this.persons + " assigned";
49-
this.element.querySelector("p")!.textContent = this.project.description;
50-
}
44+
renderContent(): void {
45+
this.element.querySelector("h2")!.textContent = this.project.title;
46+
this.element.querySelector("h3")!.textContent = this.persons + " assigned";
47+
this.element.querySelector("p")!.textContent = this.project.description;
5148
}
5249
}

0 commit comments

Comments
 (0)