-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathUI.js
More file actions
166 lines (158 loc) · 7.97 KB
/
UI.js
File metadata and controls
166 lines (158 loc) · 7.97 KB
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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
// Handle UI section of GitFetch App
class UI {
constructor() {
// Selector
this.displayProfile = document.getElementById('display-profile');
}
// Display profile basic data
paintProfile({
// Receive object destructuring data as parameter
profile_pic,
user_name,
profile_url,
name,
followers,
following,
public_repos,
public_gists,
company,
blog,
user_location,
email,
hireable,
twitter_username,
profile_type,
created_at,
last_updated_at
}) {
// HTML template on Profile Section
const templateHTML = `
<div class="container bg-gradient-dark">
<h3 class="page-heading mb-3">Profile</h3>
<div class="card card-body mb-3">
<div class="row">
<div class="col-md-3">
<img class="img-fluid mb-2" src="${profile_pic}">
<a href="${profile_url}" target="_blank" class="btn btn-primary btn-block mb-4">${user_name}</a>
<a href="${profile_url}" target="_blank" class="btn btn-primary btn-block mb-4">View Profile</a>
</div>
<div class="col-md-9">
<span class="badge badge-success">
Followers: ${followers}
</span>
<span class="badge badge-info">
Following: ${following}
</span>
<span class="badge badge-primary">
Public Repos: ${public_repos}
</span>
<span class="badge badge-secondary">
Public Gists: ${public_gists}
</span>
<br><br>
<ul class="list-group">
<li class="list-group-item">Name: ${name || 'Not Found'}</li>
<li class="list-group-item">Company: ${company || 'Not Available'}</li>
<li class="list-group-item">Blog: <a href="${blog}" class="text-white" target="_blank">${blog || 'Not Available'}</a> </li>
<li class="list-group-item">Location: ${user_location || 'Not Available'}</li>
<li class="list-group-item">Email: ${email || 'Not Found'}</li>
<li class="list-group-item">Hireable: ${hireable || 'Not Available'}</li>
<li class="list-group-item">Twitter Username: ${twitter_username || 'Not Found'}</li>
<li class="list-group-item">Profile Type: ${profile_type || 'Not Available'}</li>
<li class="list-group-item">Member Since: ${created_at.substring(0, 10) || 'Not Available'}</li>
<li class="list-group-item">Last Update: ${last_updated_at || 'Not Available'}</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container bg-gradient-dark">
<h3 class="page-heading mb-3">Latest Repos</h3>
<div id="display-repos"></div>
</div>
`;
this.displayProfile.innerHTML = templateHTML;
}
// Display repos data
paintRepos(reposdata) {
let templateHTML = '';
// console.log(reposdata);
reposdata.forEach(repo => {
// console.log(repo);
// Live link button executes (if available)
function liveLink() {
if (repo.homepage) {
return `<div class="row ml-2">
<button type="" class="btn btn-outline-danger mt-4"><a class="text-white" href="${repo.homepage}" target="_blank">Live Link</a></button>
</div>
`
}
}
templateHTML += `
<div class="card card-body mb-2">
<div class="row">
<div class="col-md-6">
<a href="${repo.html_url}" target="_blank"><h3>${repo.name}</h3></a>
<p>Language: ${repo.language || 'Not Found'} </p>
<p>${repo.description || 'Description not found'}</p>
<span>Created at ${repo.created_at.substring(0, 10)} </span>
</div>
<div class="col-md-6">
<div class="row mt-2 ml-1">
<span class="badge badge-info mr-2 mt-2">
Size: ${repo.size}
</span>
<span class="badge badge-primary mr-2 mt-2">
Stars: ${repo.stargazers_count}
</span>
<span class="badge badge-secondary mr-2 mt-2">
Watchers: ${repo.watchers_count}
</span>
<span class="badge badge-success mr-2 mt-2">
Forks: ${repo.forks_count}
</span>
<span class="badge badge-danger mr-2 mt-2">
Repo ID: ${repo.id}
</span>
</div>
${liveLink() || ''}
</div>
</div>
</div>
`
})
this.displayRepos = document.getElementById('display-repos');
this.displayRepos.innerHTML = templateHTML;
}
// Alert message
showAlert(message, className) {
// Clear alert message (if remaining)
this.clearAlert();
const div = document.createElement('div');
// Add classes to our alert div
div.className = className;
// Text inside our alert box
div.appendChild(document.createTextNode(message));
// Get Parent
const container = document.querySelector('.searchContainer');
// Get search box
const search = document.querySelector('.searchProfile');
// Insert Alert before search input area
container.insertBefore(div, search);
// Timeout after 3 sec
setTimeout(() => {
this.clearAlert();
}, 1000);
}
// Clear alert message
clearAlert() {
const currentAlert = document.querySelector('.alert');
if (currentAlert) {
currentAlert.remove();
}
}
// Clear profile
clearProfile() {
this.displayProfile.innerHTML = '';
}
}