githubfinder/ui.js at main · daudln/githubfinder · GitHub

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
class UI {
  constructor() {
    this.profile = document.getElementById("profile");
  }
  showProfile(user) {
    this.profile.innerHTML = `

        <div class="card card-body my-3 bg-secondary">
          <div class="row">
            <div class="col-md-3">
              <img
                src="${user.avatar_url}"
                class="img-fluid card-img my-2"
              />

              <p class="h4 text-center">
                <span class="badge bg-primary">${user.name}</span>
              </p>
              <p class="text-center">
                <a href="${user.html_url}">
                    <button class="btn btn-info btn-block my-2">View Profile<i class="bi bi-github mx-2"></i></button>
                </a>

              </p>
            </div>
            <div class="col-md-9">
              <div class="h4">
                <span class="badge h2 bg-success">Public Repos: ${user.public_repos}</span>
                <span class="badge h2 bg-danger">Public gists: ${user.public_gists}</span>
                <span class="badge h2 bg-info">Followers: ${user.followers}</span>
                <span class="badge bg-primary">Following: ${user.following}</span>
              </div>

              <div class="list-group w-auto">
                <a
                  href="#"
                  class="list-group-item list-group-item-action d-flex gap-3 py-3"
                  aria-current="true"
                >
                  <i class="bi bi-building h4 mt-2 text-danger"></i>
                  <div class="d-flex gap-2 w-100 justify-content-between">
                    <div>
                      <h6 class="mb-0">Company</h6>
                      <p class="mb-0 opacity-75">${user.company}</p>
                    </div>
                  </div>
                </a>
                <a
                  href="#"
                  class="list-group-item list-group-item-action d-flex gap-3 py-3"
                  aria-current="true"
                >
                  <i class="bi bi-geo-alt h4 mt-2 flex-shrink-0 text-success"></i>
                  <div class="d-flex gap-2 w-100 justify-content-between">
                    <div>
                      <h6 class="mb-0">Location</h6>
                      <p class="mb-0 opacity-75">${user.location}</p>
                    </div>
                  </div>
                </a>
                <a
                  href="#"
                  class="list-group-item list-group-item-action d-flex gap-3 py-3"
                  aria-current="true"
                >
                  <i class=" bi bi-file-person mt-2 text-primary h4"></i>
                  <div class="d-flex gap-2 w-100 justify-content-between">
                    <div>
                      <h6 class="mb-0">Bio</h6>
                      <p class="mb-0 opacity-75">${user.bio}</p>
                    </div>
                  </div>
                </a>
                <a
                  href="#"
                  class="list-group-item list-group-item-action d-flex gap-3 py-3"
                  aria-current="true"
                >
                  <i class="bi bi-person-plus-fill h4 text-info"></i>
                  <div class="d-flex gap-2 w-100 justify-content-between">
                    <div>
                      <h6 class="mb-0">Joined Since</h6>
                      <p class="mb-0 opacity-75">${user.created_at}</p>
                    </div>
                  </div>
                </a>
              </div>
            </div>
          </div>
        </div>
      `;
  }

  showRepos(data) {
    let repos = "";
    data.forEach((repo) => {
      repos += `
            <div class ="card card-body bg-secondary">

                <div class="row">
                    <div class = "col-md-4">
                        <a href="${repo.html_url}" target="_blank">${repo.name}</a>
                    </div>
                    <div class="col-md-8">
                        <div class="h4">
                            <span class="badge h2 bg-success">Watcher count: ${repo.watchers_count}</span>
                            <span class="badge h2 bg-primary">Number of forks: ${repo.forks_count}</span>
                            <span class="badge h2 bg-info">Stargazers counts: ${repo.stargazers_count}</span>

                        </div>
                    </div>
                </div>
            </div>
        `;
    });
    document.getElementById("repose").innerHTML = repos;
  }
  clearProfile() {
    this.profile.innerHTML = "";
    this.clearRepos();
  }

  showAlert(message, className) {
    ui.clearAlert();
    const div = document.createElement("div");
    div.setAttribute("class", className);
    div.innerHTML = message;
    const card = document.getElementById("card");
    const container = document.getElementById("container");
    container.insertBefore(div, card);
    this.clearProfile();
    setTimeout(() => this.clearAlert(), 2000);
  }

  clearAlert() {
    const current_alert = document.querySelector(".alert");
    if (current_alert) {
      current_alert.remove();
    }
  }

  clearRepos() {
    if (document.getElementById("repose").innerHTML) {
      document.getElementById("repose").innerHTML = "";
    }
  }
}