Hugging Face's logo

Spaces:
middha
/
CareerCraft
Runtime error

App Files Community
middha commited on
Commit
191ceea
·
verified ·
1 Parent(s): a6ec51f

Update templates/jobs.html

Browse files
Files changed (1) hide show
  1. templates/jobs.html +217 -217
templates/jobs.html CHANGED
@@ -1,218 +1,218 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Job Applications</title>
7
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css">
8
- </head>
9
- <body>
10
- <div class="container mt-5">
11
- <h1 class="text-center">Job Applications</h1>
12
-
13
- <!-- Tabs Navigation -->
14
- <ul class="nav nav-tabs" id="jobTabs" role="tablist">
15
- <li class="nav-item" role="presentation">
16
- <button class="nav-link active" id="upload-tab" data-bs-toggle="tab" data-bs-target="#upload" type="button" role="tab" aria-controls="upload" aria-selected="true">Upload Excel</button>
17
- </li>
18
- <li class="nav-item" role="presentation">
19
- <button class="nav-link" id="list-tab" data-bs-toggle="tab" data-bs-target="#list" type="button" role="tab" aria-controls="list" aria-selected="false">Job List</button>
20
- </li>
21
- <li class="nav-item" role="presentation">
22
- <button class="nav-link" id="add-tab" data-bs-toggle="tab" data-bs-target="#add" type="button" role="tab" aria-controls="add" aria-selected="false">Add Job</button>
23
- </li>
24
- <li class="nav-item" role="presentation">
25
- <button class="nav-link" id="prepme-tab" data-bs-toggle="tab" data-bs-target="#prepme" type="button" role="tab" aria-controls="prepme" aria-selected="false">PrepMe</button>
26
- </li>
27
- </ul>
28
-
29
- <!-- Tabs Content -->
30
- <div class="tab-content" id="jobTabsContent">
31
- <!-- Upload Excel Tab -->
32
- <div class="tab-pane fade show active" id="upload" role="tabpanel" aria-labelledby="upload-tab">
33
- <form method="POST" action="/upload" enctype="multipart/form-data" class="mt-4">
34
- <div class="mb-3">
35
- <label for="excelFile" class="form-label">Upload Excel File</label>
36
- <input type="file" class="form-control" id="excelFile" name="file" accept=".xlsx, .csv" required>
37
- </div>
38
- <button type="submit" class="btn btn-primary">Upload</button>
39
- </form>
40
- </div>
41
-
42
- <!-- Job List Tab -->
43
- <div class="tab-pane fade" id="list" role="tabpanel" aria-labelledby="list-tab">
44
- <h2 class="mt-4">Job List</h2>
45
- <table class="table table-bordered">
46
- <thead>
47
- <tr>
48
- <th>Company</th>
49
- <th>Position</th>
50
- <th>Resume Used</th>
51
- <th>Date Applied</th>
52
- <th>Status</th>
53
- <th>Interview Details</th>
54
- <th>Comments</th>
55
- <th>Link</th>
56
- <th>Job Description</th>
57
- <th>Actions</th>
58
- </tr>
59
- </thead>
60
- <tbody>
61
- {% for job in jobs %}
62
- <tr>
63
- <td>{{ job.company }}</td>
64
- <td>{{ job.position }}</td>
65
- <td>{{ job.resume_used }}</td>
66
- <td>{{ job.date_applied }}</td>
67
- <td>{{ job.status }}</td>
68
- <td>{{ job.interview_details }}</td>
69
- <td>{{ job.comments }}</td>
70
- <td><a href="{{ job.link }}" target="_blank">Link</a></td>
71
- <td>{{ job.job_description }}</td>
72
- <td>
73
- <form method="POST" action="/delete_job/{{ job.id }}" style="display:inline;">
74
- <button type="submit" class="btn btn-sm btn-danger">Delete</button>
75
- </form>
76
- <a href="/edit_job/{{ job.id }}" class="btn btn-sm btn-warning">Edit</a>
77
- <button class="btn btn-sm btn-info prepme-btn" data-job-id="{{ job.id }}">PrepMe</button>
78
- </td>
79
- </tr>
80
- {% endfor %}
81
- </tbody>
82
- </table>
83
- </div>
84
-
85
- <!-- Add Job Tab -->
86
- <div class="tab-pane fade" id="add" role="tabpanel" aria-labelledby="add-tab">
87
- <form method="POST" action="{% if edit_job %}/edit_job/{{ edit_job.id }}{% else %}/jobs{% endif %}" class="mt-4">
88
- <div class="mb-3">
89
- <label for="company" class="form-label">Company</label>
90
- <input type="text" class="form-control" id="company" name="company" value="{{ edit_job.company if edit_job else '' }}" required>
91
- </div>
92
- <div class="mb-3">
93
- <label for="position" class="form-label">Position</label>
94
- <input type="text" class="form-control" id="position" name="position" value="{{ edit_job.position if edit_job else '' }}" required>
95
- </div>
96
- <div class="mb-3">
97
- <label for="resume_used" class="form-label">Resume Used</label>
98
- <input type="text" class="form-control" id="resume_used" name="resume_used" value="{{ edit_job.resume_used if edit_job else '' }}">
99
- </div>
100
- <div class="mb-3">
101
- <label for="date_applied" class="form-label">Date Applied</label>
102
- <input type="date" class="form-control" id="date_applied" name="date_applied" value="{{ edit_job.date_applied if edit_job else '' }}">
103
- </div>
104
- <div class="mb-3">
105
- <label for="status" class="form-label">Status</label>
106
- <select class="form-control" id="status" name="status">
107
- <option value="Applied" {% if edit_job and edit_job.status == 'Applied' %}selected{% endif %}>Applied</option>
108
- <option value="Interviewing" {% if edit_job and edit_job.status == 'Interviewing' %}selected{% endif %}>Interviewing</option>
109
- <option value="Rejected" {% if edit_job and edit_job.status == 'Rejected' %}selected{% endif %}>Rejected</option>
110
- <option value="On Hold" {% if edit_job and edit_job.status == 'On Hold' %}selected{% endif %}>On Hold</option>
111
- <option value="Offer" {% if edit_job and edit_job.status == 'Offer' %}selected{% endif %}>Offer</option>
112
- </select>
113
- </div>
114
- <div class="mb-3">
115
- <label for="interview_details" class="form-label">Interview Details</label>
116
- <textarea class="form-control" id="interview_details" name="interview_details">{{ edit_job.interview_details if edit_job else '' }}</textarea>
117
- </div>
118
- <div class="mb-3">
119
- <label for="comments" class="form-label">Comments</label>
120
- <textarea class="form-control" id="comments" name="comments">{{ edit_job.comments if edit_job else '' }}</textarea>
121
- </div>
122
- <div class="mb-3">
123
- <label for="link" class="form-label">Link</label>
124
- <input type="url" class="form-control" id="link" name="link" value="{{ edit_job.link if edit_job else '' }}">
125
- </div>
126
- <div class="mb-3">
127
- <label for="job_description" class="form-label">Job Description</label>
128
- <textarea class="form-control" id="job_description" name="job_description">{{ edit_job.job_description if edit_job else '' }}</textarea>
129
- </div>
130
- <button type="submit" class="btn btn-primary">{% if edit_job %}Update Job{% else %}Add Job{% endif %}</button>
131
- </form>
132
- </div>
133
-
134
- <!-- PrepMe Tab -->
135
- <div class="tab-pane fade" id="prepme" role="tabpanel" aria-labelledby="prepme-tab">
136
- <h2 class="mt-4">PrepMe Chatbot</h2>
137
- <div class="card">
138
- <div class="card-body">
139
- <h5 class="card-title">Job: {{ jobs[0].company }} - {{ jobs[0].position }}</h5>
140
- <p class="card-text">Job Description: {{ jobs[0].job_description }}</p>
141
- </div>
142
- </div>
143
- <div class="chat-container mt-4">
144
- <div id="chat-box" class="border p-3" style="height: 300px; overflow-y: scroll;">
145
- <!-- Chat messages will appear here -->
146
- </div>
147
- <div class="input-group mt-3">
148
- <input type="text" id="user-input" class="form-control" placeholder="Type your message here...">
149
- <button id="send-btn" class="btn btn-primary">Send</button>
150
- </div>
151
- </div>
152
- </div>
153
- </div>
154
- </div>
155
-
156
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
157
- <script>
158
- // Automatically switch to the Add Job tab if editing a job
159
- document.addEventListener('DOMContentLoaded', function () {
160
- {% if edit_job %}
161
- var addTab = document.getElementById('add-tab');
162
- var addContent = document.getElementById('add');
163
-
164
- // Activate the Add Job tab
165
- addTab.classList.add('active');
166
- addTab.setAttribute('aria-selected', 'true');
167
- addContent.classList.add('show', 'active');
168
-
169
- // Deactivate other tabs
170
- var uploadTab = document.getElementById('upload-tab');
171
- var uploadContent = document.getElementById('upload');
172
- var listTab = document.getElementById('list-tab');
173
- var listContent = document.getElementById('list');
174
-
175
- uploadTab.classList.remove('active');
176
- uploadTab.setAttribute('aria-selected', 'false');
177
- uploadContent.classList.remove('show', 'active');
178
-
179
- listTab.classList.remove('active');
180
- listTab.setAttribute('aria-selected', 'false');
181
- listContent.classList.remove('show', 'active');
182
- {% endif %}
183
- });
184
-
185
- document.addEventListener('DOMContentLoaded', function () {
186
- const prepmeButtons = document.querySelectorAll('.prepme-btn');
187
- const prepmeTab = document.getElementById('prepme-tab');
188
- const prepmeContent = document.getElementById('prepme');
189
-
190
- prepmeButtons.forEach(button => {
191
- button.addEventListener('click', function () {
192
- const jobId = this.getAttribute('data-job-id');
193
-
194
- // Make an HTTP GET request to the /prepme/<job_id> route
195
- fetch(`/prepme/${jobId}`)
196
- .then(response => {
197
- if (!response.ok) {
198
- throw new Error('Network response was not ok');
199
- }
200
- return response.text();
201
- })
202
- .then(html => {
203
- // Update PrepMe tab content with the response HTML
204
- prepmeContent.innerHTML = html;
205
-
206
- // Activate the PrepMe tab
207
- prepmeTab.click();
208
- })
209
- .catch(error => {
210
- console.error('Error fetching PrepMe data:', error);
211
- alert('Failed to load PrepMe data. Please try again later.');
212
- });
213
- });
214
- });
215
- });
216
- </script>
217
- </body>
218
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Job Applications</title>
7
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css">
8
+ </head>
9
+ <body>
10
+ <div class="container mt-5">
11
+ <h1 class="text-center">Career Crafter</h1>
12
+
13
+ <!-- Tabs Navigation -->
14
+ <ul class="nav nav-tabs" id="jobTabs" role="tablist">
15
+ <li class="nav-item" role="presentation">
16
+ <button class="nav-link active" id="upload-tab" data-bs-toggle="tab" data-bs-target="#upload" type="button" role="tab" aria-controls="upload" aria-selected="true">Upload Excel</button>
17
+ </li>
18
+ <li class="nav-item" role="presentation">
19
+ <button class="nav-link" id="list-tab" data-bs-toggle="tab" data-bs-target="#list" type="button" role="tab" aria-controls="list" aria-selected="false">Job List</button>
20
+ </li>
21
+ <li class="nav-item" role="presentation">
22
+ <button class="nav-link" id="add-tab" data-bs-toggle="tab" data-bs-target="#add" type="button" role="tab" aria-controls="add" aria-selected="false">Add Job</button>
23
+ </li>
24
+ <li class="nav-item" role="presentation">
25
+ <button class="nav-link" id="prepme-tab" data-bs-toggle="tab" data-bs-target="#prepme" type="button" role="tab" aria-controls="prepme" aria-selected="false">PrepMe</button>
26
+ </li>
27
+ </ul>
28
+
29
+ <!-- Tabs Content -->
30
+ <div class="tab-content" id="jobTabsContent">
31
+ <!-- Upload Excel Tab -->
32
+ <div class="tab-pane fade show active" id="upload" role="tabpanel" aria-labelledby="upload-tab">
33
+ <form method="POST" action="/upload" enctype="multipart/form-data" class="mt-4">
34
+ <div class="mb-3">
35
+ <label for="excelFile" class="form-label">Upload Excel File</label>
36
+ <input type="file" class="form-control" id="excelFile" name="file" accept=".xlsx, .csv" required>
37
+ </div>
38
+ <button type="submit" class="btn btn-primary">Upload</button>
39
+ </form>
40
+ </div>
41
+
42
+ <!-- Job List Tab -->
43
+ <div class="tab-pane fade" id="list" role="tabpanel" aria-labelledby="list-tab">
44
+ <h2 class="mt-4">Job List</h2>
45
+ <table class="table table-bordered">
46
+ <thead>
47
+ <tr>
48
+ <th>Company</th>
49
+ <th>Position</th>
50
+ <th>Resume Used</th>
51
+ <th>Date Applied</th>
52
+ <th>Status</th>
53
+ <th>Interview Details</th>
54
+ <th>Comments</th>
55
+ <th>Link</th>
56
+ <th>Job Description</th>
57
+ <th>Actions</th>
58
+ </tr>
59
+ </thead>
60
+ <tbody>
61
+ {% for job in jobs %}
62
+ <tr>
63
+ <td>{{ job.company }}</td>
64
+ <td>{{ job.position }}</td>
65
+ <td>{{ job.resume_used }}</td>
66
+ <td>{{ job.date_applied }}</td>
67
+ <td>{{ job.status }}</td>
68
+ <td>{{ job.interview_details }}</td>
69
+ <td>{{ job.comments }}</td>
70
+ <td><a href="{{ job.link }}" target="_blank">Link</a></td>
71
+ <td>{{ job.job_description }}</td>
72
+ <td>
73
+ <form method="POST" action="/delete_job/{{ job.id }}" style="display:inline;">
74
+ <button type="submit" class="btn btn-sm btn-danger">Delete</button>
75
+ </form>
76
+ <a href="/edit_job/{{ job.id }}" class="btn btn-sm btn-warning">Edit</a>
77
+ <button class="btn btn-sm btn-info prepme-btn" data-job-id="{{ job.id }}">PrepMe</button>
78
+ </td>
79
+ </tr>
80
+ {% endfor %}
81
+ </tbody>
82
+ </table>
83
+ </div>
84
+
85
+ <!-- Add Job Tab -->
86
+ <div class="tab-pane fade" id="add" role="tabpanel" aria-labelledby="add-tab">
87
+ <form method="POST" action="{% if edit_job %}/edit_job/{{ edit_job.id }}{% else %}/jobs{% endif %}" class="mt-4">
88
+ <div class="mb-3">
89
+ <label for="company" class="form-label">Company</label>
90
+ <input type="text" class="form-control" id="company" name="company" value="{{ edit_job.company if edit_job else '' }}" required>
91
+ </div>
92
+ <div class="mb-3">
93
+ <label for="position" class="form-label">Position</label>
94
+ <input type="text" class="form-control" id="position" name="position" value="{{ edit_job.position if edit_job else '' }}" required>
95
+ </div>
96
+ <div class="mb-3">
97
+ <label for="resume_used" class="form-label">Resume Used</label>
98
+ <input type="text" class="form-control" id="resume_used" name="resume_used" value="{{ edit_job.resume_used if edit_job else '' }}">
99
+ </div>
100
+ <div class="mb-3">
101
+ <label for="date_applied" class="form-label">Date Applied</label>
102
+ <input type="date" class="form-control" id="date_applied" name="date_applied" value="{{ edit_job.date_applied if edit_job else '' }}">
103
+ </div>
104
+ <div class="mb-3">
105
+ <label for="status" class="form-label">Status</label>
106
+ <select class="form-control" id="status" name="status">
107
+ <option value="Applied" {% if edit_job and edit_job.status == 'Applied' %}selected{% endif %}>Applied</option>
108
+ <option value="Interviewing" {% if edit_job and edit_job.status == 'Interviewing' %}selected{% endif %}>Interviewing</option>
109
+ <option value="Rejected" {% if edit_job and edit_job.status == 'Rejected' %}selected{% endif %}>Rejected</option>
110
+ <option value="On Hold" {% if edit_job and edit_job.status == 'On Hold' %}selected{% endif %}>On Hold</option>
111
+ <option value="Offer" {% if edit_job and edit_job.status == 'Offer' %}selected{% endif %}>Offer</option>
112
+ </select>
113
+ </div>
114
+ <div class="mb-3">
115
+ <label for="interview_details" class="form-label">Interview Details</label>
116
+ <textarea class="form-control" id="interview_details" name="interview_details">{{ edit_job.interview_details if edit_job else '' }}</textarea>
117
+ </div>
118
+ <div class="mb-3">
119
+ <label for="comments" class="form-label">Comments</label>
120
+ <textarea class="form-control" id="comments" name="comments">{{ edit_job.comments if edit_job else '' }}</textarea>
121
+ </div>
122
+ <div class="mb-3">
123
+ <label for="link" class="form-label">Link</label>
124
+ <input type="url" class="form-control" id="link" name="link" value="{{ edit_job.link if edit_job else '' }}">
125
+ </div>
126
+ <div class="mb-3">
127
+ <label for="job_description" class="form-label">Job Description</label>
128
+ <textarea class="form-control" id="job_description" name="job_description">{{ edit_job.job_description if edit_job else '' }}</textarea>
129
+ </div>
130
+ <button type="submit" class="btn btn-primary">{% if edit_job %}Update Job{% else %}Add Job{% endif %}</button>
131
+ </form>
132
+ </div>
133
+
134
+ <!-- PrepMe Tab -->
135
+ <div class="tab-pane fade" id="prepme" role="tabpanel" aria-labelledby="prepme-tab">
136
+ <h2 class="mt-4">PrepMe Chatbot</h2>
137
+ <div class="card">
138
+ <div class="card-body">
139
+ <h5 class="card-title">Job: {{ jobs[0].company }} - {{ jobs[0].position }}</h5>
140
+ <p class="card-text">Job Description: {{ jobs[0].job_description }}</p>
141
+ </div>
142
+ </div>
143
+ <div class="chat-container mt-4">
144
+ <div id="chat-box" class="border p-3" style="height: 300px; overflow-y: scroll;">
145
+ <!-- Chat messages will appear here -->
146
+ </div>
147
+ <div class="input-group mt-3">
148
+ <input type="text" id="user-input" class="form-control" placeholder="Type your message here...">
149
+ <button id="send-btn" class="btn btn-primary">Send</button>
150
+ </div>
151
+ </div>
152
+ </div>
153
+ </div>
154
+ </div>
155
+
156
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
157
+ <script>
158
+ // Automatically switch to the Add Job tab if editing a job
159
+ document.addEventListener('DOMContentLoaded', function () {
160
+ {% if edit_job %}
161
+ var addTab = document.getElementById('add-tab');
162
+ var addContent = document.getElementById('add');
163
+
164
+ // Activate the Add Job tab
165
+ addTab.classList.add('active');
166
+ addTab.setAttribute('aria-selected', 'true');
167
+ addContent.classList.add('show', 'active');
168
+
169
+ // Deactivate other tabs
170
+ var uploadTab = document.getElementById('upload-tab');
171
+ var uploadContent = document.getElementById('upload');
172
+ var listTab = document.getElementById('list-tab');
173
+ var listContent = document.getElementById('list');
174
+
175
+ uploadTab.classList.remove('active');
176
+ uploadTab.setAttribute('aria-selected', 'false');
177
+ uploadContent.classList.remove('show', 'active');
178
+
179
+ listTab.classList.remove('active');
180
+ listTab.setAttribute('aria-selected', 'false');
181
+ listContent.classList.remove('show', 'active');
182
+ {% endif %}
183
+ });
184
+
185
+ document.addEventListener('DOMContentLoaded', function () {
186
+ const prepmeButtons = document.querySelectorAll('.prepme-btn');
187
+ const prepmeTab = document.getElementById('prepme-tab');
188
+ const prepmeContent = document.getElementById('prepme');
189
+
190
+ prepmeButtons.forEach(button => {
191
+ button.addEventListener('click', function () {
192
+ const jobId = this.getAttribute('data-job-id');
193
+
194
+ // Make an HTTP GET request to the /prepme/<job_id> route
195
+ fetch(`/prepme/${jobId}`)
196
+ .then(response => {
197
+ if (!response.ok) {
198
+ throw new Error('Network response was not ok');
199
+ }
200
+ return response.text();
201
+ })
202
+ .then(html => {
203
+ // Update PrepMe tab content with the response HTML
204
+ prepmeContent.innerHTML = html;
205
+
206
+ // Activate the PrepMe tab
207
+ prepmeTab.click();
208
+ })
209
+ .catch(error => {
210
+ console.error('Error fetching PrepMe data:', error);
211
+ alert('Failed to load PrepMe data. Please try again later.');
212
+ });
213
+ });
214
+ });
215
+ });
216
+ </script>
217
+ </body>
218
  </html>