Skip to content

J
JARVIS
Commit c606ffdf authored by dexsap's avatar dexsap
Browse files
Options

final product + dashboard

parent 5e66ff07
Show whitespace changes
Inline Side-by-side
Showing with 415 additions and 161 deletions
IPS/IPS/settings.py
View file @ c606ffdf
......@@ -38,7 +38,10 @@ INSTALLED_APPS = [
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'IPSapp'
'IPSapp',
'graphapp',
'django_plotly_dash',
'plotly'
]
MIDDLEWARE = [
......@@ -49,6 +52,7 @@ MIDDLEWARE = [
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
'django_plotly_dash.middleware.BaseMiddleware'
]
ROOT_URLCONF = 'IPS.urls'
......
IPS/IPSapp/static/css/emp_record.css
View file @ c606ffdf
body {
font-family: Helvetica ;
font-family: Helvetica;
}
.employee-info-cont {
margin: 30px 50px 0px;
background-color: #00802D;
background-color: #00802d;
color: white;
width: 91.5%;
height: 100px;
......@@ -15,7 +15,7 @@ body {
justify-content: space-between;
}
.employee-info-contact{
.employee-info-contact {
display: flex;
margin-right: 50px;
}
......@@ -27,12 +27,11 @@ body {
flex-direction: column;
width: 30%;
justify-content: center;
}
#ID {
background-color: white;
color: #00802D;
color: #00802d;
border-radius: 4px;
padding: 3px;
font-weight: bold;
......@@ -42,6 +41,113 @@ body {
display: flex;
flex-direction: column;
} */
/* kebab styling */
.kebab {
cursor: pointer;
position: relative;
display: inline-block;
box-sizing: border-box;
padding: 0 16px;
}
.kebab figure {
width: 6px;
height: 6px;
border-radius: 5px;
background: white;
margin: 3px 0;
}
.middle {
transition: all 0.25s cubic-bezier(0.72, 1.2, 0.71, 0.72);
transform: scale(1);
position: relative;
box-shadow: 0 0.1px 0.1px 0 rgba(0, 0, 0, 0.16),
0 0.1px 0.3px 0 rgba(0, 0, 0, 0.12);
-webkit-filter: blur(0.1px);
filter: blur(0.1px);
}
.middle.active {
transform: scale(4.5);
transition: all 0.25s cubic-bezier(0.32, 2.04, 0.85, 0.54);
box-shadow: 0 0.1px 0.1px 0 rgba(0, 0, 0, 0.16),
0 0.1px 0.3px 0 rgba(0, 0, 0, 0.12);
}
.cross {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
margin-top: -1px;
color: white;
transition: all 0.2s cubic-bezier(0.72, 1.2, 0.71, 0.72);
font-size: 22px;
user-select: none;
}
.cross.active {
transform: translate(-50%, -50%) scale(1);
transition: all 0.15s cubic-bezier(0.32, 2.04, 0.85, 0.54);
color: black;
}
h1 {
font-size: 26px;
background: white;
color: white;
padding: 40px 0 40px 20%;
margin-bottom: 50px;
}
a,
li {
color: darken(grey, 20%);
text-decoration: none;
}
.dropdown {
position: absolute;
right: 0;
top: 3em;
transition: all 0.25s ease-out;
transform: scale(0);
transform-origin: 100% 0;
/* box-shadow: $shadow; */
}
.dropdown ul:hover {
transform: scale(1);
}
.dropdown li {
display: block;
width: 100%;
}
.dropdown li:hover {
background-color: #ddd;
}
.dropdown a {
width: 100%;
padding: 1em 18px;
display: inline-block;
white-space: pre;
box-sizing: border-box;
color: black;
}
.dropdown a:hover {
background: darken(grey, 30%);
text-decoration: none;
}
.dropdown.active {
transform: scale(1);
transition: all 0.25s cubic-bezier(0.5, 1.8, 0.9, 0.8);
box-shadow: 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 8px 0 rgba(0, 0, 0, 0.12);
background-color: white;
padding: 0px;
}
.SBP {
display: flex;
......@@ -93,9 +199,9 @@ body {
background-color: white;
}
.range-selected:hover, .range-selected:focus {
background-color: #00802B;
.range-selected:hover,
.range-selected:focus {
background-color: #00802b;
color: white;
}
......
IPS/IPSapp/templates/EmployeeProdDB/create_emp_profile.html
View file @ c606ffdf
......@@ -119,11 +119,11 @@
</div>
</div>
<div class="bottom-cont">
<div class="form-group">
<div class="col-md-8"></div>
<div class="profile-options">
<div class="button-cancel">
<button name="Save" type="submit">Cancel</button>
<button name="Cancel" ><a href="{% url 'home' %}" style="color: black">Cancel</a></button>
</div>
<div class="button-save">
<button name="Save" type="submit">Save Changes</button>
......
IPS/IPSapp/templates/EmployeeProdDB/create_position.html
View file @ c606ffdf
......@@ -33,11 +33,7 @@
<br />
<div class="profile-options">
<div class="button-save">
<button name="Save" type="submit">
<a href="{% url 'positionlist'%}" style="color: white"
>Save Changes</a
>
</button>
<button name="Save" type="submit">Save Change</button>
</div>
<div class="button-cancel">
<button name="Save" type="submit">
......
IPS/IPSapp/templates/EmployeeProdDB/edit_emp_profile.html
View file @ c606ffdf
......@@ -32,14 +32,18 @@
type="text"
style="width: 660px"
name="full-name"
required
value="{{ employee.employee_name|default:'' }}"
/>
</div>
</div>
<div class="text-input-grouping">
<label for="phonenum" class="">Phone Number:</label>
<div class="input-row">
<input type="tel" name="phone-number" required />
<input
type="tel"
name="phone-number"
value="{{ employee.employee_num|default:'' }}"
/>
</div>
</div>
</div>
......@@ -48,21 +52,33 @@
<div class="text-input-grouping">
<label for="bday">Birthday:</label>
<div class="">
<input type="date" name="birthday" />
<input
type="date"
name="birthday"
value="{{ employee.employee_bday|default:'' }}"
/>
</div>
</div>
<div class="text-input-grouping">
<label for="email" class="">Email:</label>
<div class="">
<input type="email" name="email" required />
<input
type="email"
name="email"
value="{{ employee.employee_email|default:'' }}"
/>
</div>
</div>
<div class="text-input-grouping">
<label for="emerg_num">Emergency Contact:</label>
<div class="tex">
<input type="tel" name="emerg-number" required />
<input
type="tel"
name="emerg-number"
value="{{ employee.employee_emergnum|default:'' }}"
/>
</div>
</div>
</div>
......@@ -77,7 +93,6 @@
id="male"
name="gender"
value="male"
required
/>
<label for="male">Male</label>
<input
......@@ -85,7 +100,6 @@
id="female"
name="gender"
value="female"
required
/>
<label for="female">Female</label>
</div>
......@@ -94,20 +108,26 @@
<div class="text-input-grouping">
<label for="id-num" class="">ID Number:</label>
<div class="">
<input type="text" name="id-num" required />
<input
type="text"
name="id-num"
value="{{ employee.employee_id|default:'' }}"
/>
</div>
</div>
<div class="text-input-grouping">
<label for="position" class="">Position:</label>
<div class="">
<select name="position">
<select name="position_name">
<option value="" disabled selected>
Select a position
</option>
<option value="packager">Packager</option>
<option value="handler">Handler</option>
<option value="cutter">Cutter</option>
{% for position in positions %}
<option value="{{ position.position_name }}">
{{ position.position_name }}
</option>
{% endfor %}
</select>
</div>
</div>
......@@ -125,15 +145,25 @@
<div class="col-md-8"></div>
<div class="profile-options">
<div class="button-cancel">
<button name="Save" type="submit">Cancel</button>
<button name="Cancel">
<a
href="{% url 'emp_record' employee.employee_id %}"
style="color: black"
>Cancel</a
>
</button>
</div>
<div class="button-delete">
<button name="Delete" type="submit">
Delete Profile
</button>
<button name="Delete" type="submit">Delete Profile</button>
</div>
<div class="button-save">
<button name="Save" type="submit">Save Changes</button>
<button name="Save" type="submit">
<a
href="{% url 'emp_record' employee.employee_id %}"
style="color: white"
>Save Changes</a
>
</button>
</div>
</div>
</div>
......
IPS/IPSapp/templates/EmployeeProdDB/emp_record.html
View file @ c606ffdf
......@@ -53,6 +53,27 @@
<span class="bold"> {{ employee.employee_emergnum }} </span>
</h6>
</div>
<div class="SBP">
<div class="kebab">
<figure></figure>
<figure class="middle"></figure>
<p class="cross">x</p>
<figure></figure>
<ul class="dropdown">
<li>
<a href="{% url 'view_all_productivity' employee.employee_id %}"
>View all Productivity Reports</a
>
</li>
<li>
<a
href="{% url 'edit_emp_profile' employee_id=employee.employee_id %}"
>Edit User Profile</a
>
</li>
</ul>
</div>
</div>
</div>
</div>
......@@ -87,6 +108,19 @@
</div>
<!-- EXTEND CHART JS AND REMARKS PAGE HEREHERE HERE HERE HERE -->
<iframe src="" width="100%" height="500px" frameborder="0"></iframe>
<!-- DUNNO HOW TO EXTEND ANOTHER HTML HERE -->
<script>
const kebab = document.querySelector(".kebab");
const middle = document.querySelector(".middle");
const cross = document.querySelector(".cross");
const dropdown = document.querySelector(".dropdown");
kebab.addEventListener("click", () => {
middle.classList.toggle("active");
cross.classList.toggle("active");
dropdown.classList.toggle("active");
});
</script>
</body>
{% endblock %}
IPS/IPSapp/templates/EmployeeProdDB/view_all_productivity.html
View file @ c606ffdf
......@@ -18,41 +18,39 @@
<body>
<div class="employee-info-cont">
<div class="employee-nameID">
<h4 class="bold">March Leighton Chua</h4>
<h4 class="bold">{{ employee.employee_name }}</h4>
<div>
<span id="ID">ID# 1</span>
<span>Dataset: 44 Reports</span>
<span id="ID">ID# {{ employee.employee_id }}</span>
<span>Dataset: Reports</span>
</div>
</div>
<div class="employee-info-contact">
<div class="SBP">
<h6>
Sex:
<span class="bold"> Male<!-- IMPORT INFO HERE --> </span>
<span class="bold"> {{ employee.employee_sex }} </span>
</h6>
<h6>
Birthday:
<span class="bold"> 4/3/2023<!-- IMPORT INFO HERE --> </span>
<span class="bold"> {{ employee.employee_bday }} </span>
</h6>
<h6>
Position: <span class="bold"> Leader<!-- IMPORT INFO HERE --> </span>
Position: <span class="bold"> {{ employee.position_id }} </span>
</h6>
</div>
<div class="SBP">
<h6>
Phone Number:
<span class="bold"> 098765143223<!-- IMPORT INFO HERE --> </span>
<span class="bold"> {{ employee.employee_num }} </span>
</h6>
<h6>
Email:
<span class="bold">
march.chua@obf.ateneo.edu<!-- IMPORT INFO HERE -->
</span>
<span class="bold"> {{ employee.employee_email }} </span>
</h6>
<h6>
Emergency Contact:
<span class="bold"> 0912344567<!-- IMPORT INFO HERE --> </span>
<span class="bold"> {{ employee.employee_emergnum }} </span>
</h6>
</div>
<div class="SBP">
......@@ -63,7 +61,11 @@
<figure></figure>
<ul class="dropdown">
<li><a href="#">View all Productivity Reports</a></li>
<li><a href="#">Edit User Profile</a></li>
<li>
<a href="{% url 'edit_emp_profile' employee.employee_id %}"
>Edit User Profile</a
>
</li>
</ul>
</div>
</div>
......@@ -75,7 +77,9 @@
<input placeholder="Search Name" />
</div>
<div class="add-button">
<button type="submit" class="add-profile-button">Import File</button>
<button type="submit" class="add-profile-button">
<a href="{% url 'upload_csv'%}" style="color: white">Import File</a>
</button>
</div>
</div>
......@@ -84,7 +88,7 @@
</div>
<div class="productivity-table-cont">
<h2>variable.name</h2>
<h2>Productivities for {{ employee.employee_name }}</h2>
<table class="productivity-table">
<tr>
<th>Report Number</th>
......@@ -92,39 +96,20 @@
<th>Duration</th>
<th>Process</th>
<th>Status</th>
<th>Productivity Score</th>
<th>Productivity Score for that day</th>
</tr>
{% for productivity in productivities %}
{% for summaryreport in summaryreports %}
<tr>
<td>1</td>
<td>Juan Dela Cruz</td>
<td>Jan 12, 2022</td>
<td>Packager</td>
<td>Juan Dela Paz</td>
<td>69.9%</td>
<td>{{ productivity.report_no }}</td>
<td>{{ summaryreport.prod_date }}</td>
<td>{{ productivity.duration }}</td>
<td>{{ productivity.process }}</td>
<td>{{ productivity.status }}</td>
<td>{{ summaryreport.prod_score }}</td>
</tr>
<tr>
<td>1</td>
<td>Juan Dela Cruz</td>
<td>Jan 12, 2022</td>
<td>Packager</td>
<td>Juan Dela Paz</td>
<td>69.9%</td>
</tr>
<tr>
<td>1</td>
<td>Juan Dela Cruz</td>
<td>Jan 12, 2022</td>
<td>Packager</td>
<td>Juan Dela Paz</td>
<td>69.9%</td>
</tr>
<tr>
<td>1</td>
<td>Juan Dela Cruz</td>
<td>Jan 12, 2022</td>
<td>Packager</td>
<td>Juan Dela Paz</td>
<td>69.9%</td>
{% endfor %}
{% endfor %}
</tr>
</table>
</div>
......@@ -132,16 +117,16 @@
<!-- EXTEND CHART JS AND REMARKS PAGE HEREHERE HERE HERE HERE -->
<!-- DUNNO HOW TO EXTEND ANOTHER HTML HERE -->
<script>
const kebab = document.querySelector('.kebab');
const middle = document.querySelector('.middle');
const cross = document.querySelector('.cross');
const dropdown = document.querySelector('.dropdown');
const kebab = document.querySelector(".kebab");
const middle = document.querySelector(".middle");
const cross = document.querySelector(".cross");
const dropdown = document.querySelector(".dropdown");
kebab.addEventListener('click', () => {
middle.classList.toggle('active');
cross.classList.toggle('active');
dropdown.classList.toggle('active');
})
kebab.addEventListener("click", () => {
middle.classList.toggle("active");
cross.classList.toggle("active");
dropdown.classList.toggle("active");
});
</script>
</body>
{% endblock %}
IPS/IPSapp/urls.py
View file @ c606ffdf
......@@ -2,6 +2,7 @@ from django.contrib import admin
from django.urls import path
from . import views
urlpatterns = [
path('admin/', admin.site.urls),
path('', views.signin, name='signin'),
......@@ -12,12 +13,12 @@ urlpatterns = [
path('signup/', views.signup, name='signup'),
path('emp_record/<int:employee_id>/', views.emp_record, name='emp_record'),
path('create_profile/' ,views.create_emp_profile, name='create_emp_profile'),
path('edit_profile/', views.edit_emp_profile, name='edit_emp_profile'),
path('edit_profile/<int:employee_id>', views.edit_emp_profile, name='edit_emp_profile'),
path('positionlist/', views.positionlist, name='positionlist'),
path('create_position/', views.create_position, name='create_position'),
path('edit_position/<int:position_id>/', views.edit_position, name='edit_position'),
path('view_all_productivity/', views.view_all_productivity, name='view_all_productivity'),
path('view_all_productivity/<int:employee_id>/', views.view_all_productivity, name='view_all_productivity'),
path('search/', views.search_employees, name='search_employees'),
]
IPS/IPSapp/views.py
View file @ c606ffdf
......@@ -173,6 +173,10 @@ def upload_csv(request):
def create_emp_profile(request):
positions = Position.objects.all()
if request.method == 'POST':
if 'cancel' in request.POST:
# Redirect to home page if cancel button is pressed
return redirect('home')
employee_name = request.POST.get('full-name')
employee_sex = request.POST.get('gender')
employee_bday = request.POST.get('birthday')
......@@ -194,13 +198,10 @@ def create_emp_profile(request):
employee.save()
# Redirect to a success page or do something else
return redirect('create_emp_profile')
return redirect('home')
return render(request, 'EmployeeProdDB/create_emp_profile.html',{'positions': positions})
def edit_emp_profile(request):
return render(request, 'EmployeeProdDB/edit_emp_profile.html')
def chart_template(request):
data = SummaryReport.objects.all()
......@@ -276,5 +277,32 @@ def edit_position(request, position_id):
return redirect('positionlist')
return render(request, 'EmployeeProdDB/edit_position.html', {'position': position})
def view_all_productivity(request):
return render(request, 'EmployeeProdDB/view_all_productivity.html')
def view_all_productivity(request, employee_id):
employee = Employee.objects.get(pk=employee_id)
productivities = Productivity.objects.filter(employee_id=employee)
summaryreports = SummaryReport.objects.filter(employee_id=employee)
return render(request, 'EmployeeProdDB/view_all_productivity.html', {'employee': employee, 'productivities': productivities, 'summaryreports': summaryreports})
def edit_emp_profile(request, employee_id):
positions = Position.objects.all()
employee = get_object_or_404(Employee, pk=employee_id)
# position = get_object_or_404(Employee, pk=position_id)
context = {'employee': employee, 'positions':positions}
if request.method == 'POST':
employee.employee_name = request.POST.get('employee_name')
employee.employee_sex = request.POST.get('gender')
employee.employee_bday = request.POST.get('birthday')
employee.employee_email = request.POST.get('email')
employee.employee_num = request.POST.get('phone-number')
employee.employee_emergnum = request.POST.get('emerg-number')
position = request.POST.get('position_name')
employee.position_id=position
employee.full_clean() # validate the model fields
employee.save() # persist the changes to the database
return redirect('emp_record')
return render(request, 'EmployeeProdDB/edit_emp_profile.html', context)
IPS/graphapp/graph.py 0 → 100644
View file @ c606ffdf
import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.layout = html.Div(children=[
html.H1(children='Productivity Graph'),
dcc.Graph(
id='productivity-graph',
figure={
'data': [
go.Scatter(
x=[1, 2, 3, 4, 5],
y=[80, 60, 70, 50, 90],
mode='lines+markers',
name='Productivity',
),
],
'layout': go.Layout(
xaxis={'title': 'Weeks/Months/Quarters/Years'},
yaxis={'title': 'Productivity %'},
)
}
)
])
if __name__ == '__main__':
app.run_server(debug=True)
IPS/graphapp/urls.py 0 → 100644
View file @ c606ffdf
from django.urls import path
from graphapp import views
urlpatterns = [
path('graph/', views.productivity_graph, name='productivity_graph'),
]
\ No newline at end of file
IPS/graphapp/views.py
View file @ c606ffdf
from django.shortcuts import render
# Create your views here.
from django_plotly_dash import DjangoDash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go
app = DjangoDash('ProductivityGraph')
app.layout = html.Div(children=[
html.H1(children='Productivity Graph'),
dcc.Graph(
id='productivity-graph',
figure={
'data': [
go.Scatter(
x=[1, 2, 3, 4, 5],
y=[80, 60, 70, 50, 90],
mode='lines+markers',
name='Productivity',
),
],
'layout': go.Layout(
xaxis={'title': 'Weeks/Months/Quarters/Years'},
yaxis={'title': 'Productivity %'},
)
}
)
])
def productivity_graph(request):
return app.run_server(mode='inline')
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment