-
Notifications
You must be signed in to change notification settings - Fork 32
/
mediator-event-aggregator.html
120 lines (100 loc) · 3.96 KB
/
mediator-event-aggregator.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mediator Pattern with Event Aggregator Interactive Example</title>
<style>
button {
margin-bottom: 10px;
}
</style>
</head>
<body>
<h1>Mediator Pattern with Event Aggregator Interactive Example</h1>
<button id="addEmployee">Add New Employee</button>
<div id="app"></div>
<script>
// Event Aggregator
class EventAggregator {
constructor() {
this.events = {};
}
on(event, callback) {
this.events[event] = callback;
}
trigger(event, data) {
if (this.events[event]) {
this.events[event](data);
}
}
}
const eventAggregator = new EventAggregator();
// Mediator
class OrgChart {
constructor(eventAggregator) {
this.eventAggregator = eventAggregator;
this.employees = [];
this.eventAggregator.on('employee:complete', this.assignManager.bind(this));
this.eventAggregator.on('manager:save', this.saveEmployee.bind(this));
}
addNewEmployee() {
this.getEmployeeDetail();
}
getEmployeeDetail() {
const detailContainer = document.createElement('div');
const nameInput = document.createElement('input');
nameInput.placeholder = 'Employee Name';
detailContainer.appendChild(nameInput);
const roleInput = document.createElement('input');
roleInput.placeholder = 'Employee Role';
detailContainer.appendChild(roleInput);
const submitBtn = document.createElement('button');
submitBtn.textContent = 'Submit';
detailContainer.appendChild(submitBtn);
submitBtn.addEventListener('click', () => {
const employee = new Employee(nameInput.value, roleInput.value);
this.eventAggregator.trigger('employee:complete', employee);
});
document.getElementById('app').appendChild(detailContainer);
}
assignManager(employee) {
const managerContainer = document.createElement('div');
const managerInput = document.createElement('input');
managerInput.placeholder = 'Manager Name';
managerContainer.appendChild(managerInput);
const saveBtn = document.createElement('button');
saveBtn.textContent = 'Save';
managerContainer.appendChild(saveBtn);
saveBtn.addEventListener('click', () => {
employee.manager = managerInput.value;
this.eventAggregator.trigger('manager:save', employee);
});
document.getElementById('app').appendChild(managerContainer);
}
saveEmployee(employee) {
employee.save();
this.employees.push(employee);
console.log('Employee saved:', employee);
}
}
// Employee class
class Employee {
constructor(name, role) {
this.name = name;
this.role = role;
this.manager = null;
}
save() {
console.log(`${this.name} (${this.role}) saved with manager ${this.manager}`);
}
}
// Instantiate the OrgChart mediator with the EventAggregator
const orgChart = new OrgChart(eventAggregator);
// Add event listener to the Add New Employee button
document.getElementById('addEmployee').addEventListener('click', () => {
orgChart.addNewEmployee();
});
</script>
</body>
</html>