team-alpha/railsgoat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit (history cleared)
CI / test (3.4.1) (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Robbie Paul
2026-04-29 11:21:39 +01:00
commit 298610b5f6
277 changed files with 30877 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/views/dashboard/bar_graph.html.erb
+94
View File
@@ -0,0 +1,94 @@
<div class="p-4">
<div class="table-responsive">
<table class="table table-hover">
<thead class="table-light">
<tr>
<th>Year</th>
<th class="text-end">Visitors</th>
<th class="text-end">Orders</th>
<th class="text-end">Income</th>
<th class="text-end">Expenses</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>2007</strong></td>
<td class="text-end">300</td>
<td class="text-end">800</td>
<td class="text-end">900</td>
<td class="text-end">300</td>
</tr>
<tr>
<td><strong>2008</strong></td>
<td class="text-end">1,170</td>
<td class="text-end">860</td>
<td class="text-end">1,220</td>
<td class="text-end">564</td>
</tr>
<tr>
<td><strong>2009</strong></td>
<td class="text-end">260</td>
<td class="text-end">1,120</td>
<td class="text-end">2,870</td>
<td class="text-end">2,340</td>
</tr>
<tr>
<td><strong>2010</strong></td>
<td class="text-end">1,030</td>
<td class="text-end">540</td>
<td class="text-end">3,430</td>
<td class="text-end">1,200</td>
</tr>
<tr>
<td><strong>2011</strong></td>
<td class="text-end">200</td>
<td class="text-end">700</td>
<td class="text-end">1,700</td>
<td class="text-end">770</td>
</tr>
<tr>
<td><strong>2012</strong></td>
<td class="text-end">1,170</td>
<td class="text-end">2,160</td>
<td class="text-end">3,920</td>
<td class="text-end">800</td>
</tr>
</tbody>
</table>
</div>
<div class="row mt-4 g-3">
<div class="col-md-3">
<div class="card text-center" style="border-left: 4px solid #b5799e;">
<div class="card-body">
<div class="text-muted small mb-1">Total Visitors</div>
<h3 class="mb-0" style="color: #b5799e;">3,130</h3>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card text-center" style="border-left: 4px solid #579da9;">
<div class="card-body">
<div class="text-muted small mb-1">Total Orders</div>
<h3 class="mb-0" style="color: #579da9;">6,180</h3>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card text-center" style="border-left: 4px solid #e26666;">
<div class="card-body">
<div class="text-muted small mb-1">Total Income</div>
<h3 class="mb-0" style="color: #e26666;">14,040</h3>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card text-center" style="border-left: 4px solid #1e825e;">
<div class="card-body">
<div class="text-muted small mb-1">Total Expenses</div>
<h3 class="mb-0" style="color: #1e825e;">5,174</h3>
</div>
</div>
</div>
</div>
</div>
app/views/dashboard/home.html.erb
+90
View File
@@ -0,0 +1,90 @@
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="card shadow-sm">
<div class="card-header bg-white d-flex justify-content-between align-items-center py-3">
<h4 class="mb-0">
<i class="bi bi-graph-up text-primary"></i> Current Statistics
</h4>
<!-- Chart Type Toggle -->
<div class="btn-group" role="group" aria-label="Chart type selection">
<button id="change_to_bar_graph" class="btn btn-outline-primary btn-sm" title="Bar Graph View" aria-label="Switch to bar graph">
<i class="bi bi-bar-chart-fill"></i> Bar Graph
</button>
<button id="change_to_pie_charts" class="btn btn-outline-primary btn-sm" title="Pie Charts View" aria-label="Switch to pie charts">
<i class="bi bi-pie-chart-fill"></i> Pie Charts
</button>
</div>
</div>
<div id="charts_body" class="card-body p-4">
<!-- Charts will load here dynamically -->
<div class="text-center py-5">
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Loading charts...</span>
</div>
<p class="text-muted mt-3">Loading statistics...</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
function makeActive() {
$('li[id="home"]').addClass('active');
}
$("#change_to_bar_graph").click(function(event) {
event.preventDefault();
// Add loading state
$("#charts_body").html('<div class="text-center py-5"><div class="spinner-border text-primary" role="status"><span class="visually-hidden">Loading...</span></div><p class="text-muted mt-3">Loading bar graph...</p></div>');
// Remove active state from other button
$("#change_to_pie_charts").removeClass('active');
$(this).addClass('active');
// Load new content
$("#charts_body").load(<%= sanitize change_graph_dashboard_index_path(:graph => "bar_graph").inspect %>);
});
$("#change_to_pie_charts").click(function(event) {
event.preventDefault();
// Add loading state
$("#charts_body").html('<div class="text-center py-5"><div class="spinner-border text-primary" role="status"><span class="visually-hidden">Loading...</span></div><p class="text-muted mt-3">Loading pie charts...</p></div>');
// Remove active state from other button
$("#change_to_bar_graph").removeClass('active');
$(this).addClass('active');
// Load new content
$("#charts_body").load(<%= sanitize change_graph_dashboard_index_path(:graph => "pie_charts").inspect %>);
});
$(document).ready(function() {
makeActive();
// Mark pie charts as default active view
$("#change_to_pie_charts").addClass('active');
// Load default view
$("#charts_body").load(<%= sanitize change_graph_dashboard_index_path(:graph => "pie_charts").inspect %>);
});
// Handle Turbolinks page loads
$(document).on('turbolinks:load', function() {
makeActive();
});
</script>
<style>
/* Active button state for chart toggles */
#change_to_bar_graph.active,
#change_to_pie_charts.active {
background-color: var(--rg-primary);
color: white;
border-color: var(--rg-primary);
}
</style>
app/views/dashboard/pie_charts.html.erb
Executable
+275
View File
@@ -0,0 +1,275 @@
<% if @user.paid_time_off %>
<!-- Begin easy pie charts container -->
<div class="easy-pie-charts-container">
<div class="pie-chart">
<div class="chart1" data-percent="100">
<%= @user.paid_time_off.pto_days_remaining %>
</div>
<h5 class="name">
Available PTO
</h5>
</div>
<div class="pie-chart">
<div class="chart2" data-percent="<%= @user.paid_time_off.sick_days_taken_percentage %>">
<%= @user.paid_time_off.sick_days_taken %>
</div>
<h5 class="name">
Sick Days Taken
</h5>
</div>
<div class="pie-chart">
<div class="chart3" data-percent="100">
<%= @user.work_info.income %>
</div>
<h5 class="name">
Income
</h5>
</div>
<div class="pie-chart">
<div class="chart4" data-percent="100">
<%= @user.performance.last.score %>
</div>
<h5 class="name">
Performance Score
</h5>
</div>
<div class="pie-chart">
<div class="chart5" data-percent="91">
<%= @user.retirement.total %>
</div>
<h5 class="name">
401k
</h5>
</div>
<div class="clearfix">
</div>
</div>
<!-- End easy pie charts container -->
<% end %>
<script type="text/javascript">
// Store timeout IDs so we can clear them on page navigation
var chartTimeouts = [];
function pieChartHome() {
// Clear any existing timeouts first
chartTimeouts.forEach(function(id) { clearTimeout(id); });
chartTimeouts = [];
$(function () {
// Only initialize if chart elements exist
if ($('.chart1').length === 0) return;
//create instance
$('.chart1').easyPieChart({
animate: 2000,
barColor: '#e26666',
trackColor: '#dddddd',
scaleColor: '#e26666',
size: 160,
lineWidth: 7,
});
//update instance after 5 sec
chartTimeouts.push(setTimeout(function () {
if ($('.chart1').length && $('.chart1').data('easyPieChart')) {
$('.chart1').data('easyPieChart').update(50);
}
}, 5000));
chartTimeouts.push(setTimeout(function () {
if ($('.chart1').length && $('.chart1').data('easyPieChart')) {
$('.chart1').data('easyPieChart').update(70);
}
}, 10000));
chartTimeouts.push(setTimeout(function () {
if ($('.chart1').length && $('.chart1').data('easyPieChart')) {
$('.chart1').data('easyPieChart').update(30);
}
}, 15000));
chartTimeouts.push(setTimeout(function () {
if ($('.chart1').length && $('.chart1').data('easyPieChart')) {
$('.chart1').data('easyPieChart').update(90);
}
}, 19000));
chartTimeouts.push(setTimeout(function () {
if ($('.chart1').length && $('.chart1').data('easyPieChart')) {
$('.chart1').data('easyPieChart').update(40);
}
}, 32000));
});
$(function () {
// Only initialize if chart elements exist
if ($('.chart2').length === 0) return;
//create instance
$('.chart2').easyPieChart({
animate: 2000,
barColor: '#b5799e',
trackColor: '#dddddd',
scaleColor: '#b5799e',
size: 160,
lineWidth: 7,
});
//update instance after 5 sec
chartTimeouts.push(setTimeout(function () {
if ($('.chart2').length && $('.chart2').data('easyPieChart')) {
$('.chart2').data('easyPieChart').update(90);
}
}, 10000));
chartTimeouts.push(setTimeout(function () {
if ($('.chart2').length && $('.chart2').data('easyPieChart')) {
$('.chart2').data('easyPieChart').update(40);
}
}, 18000));
chartTimeouts.push(setTimeout(function () {
if ($('.chart2').length && $('.chart2').data('easyPieChart')) {
$('.chart2').data('easyPieChart').update(70);
}
}, 28000));
chartTimeouts.push(setTimeout(function () {
if ($('.chart2').length && $('.chart2').data('easyPieChart')) {
$('.chart2').data('easyPieChart').update(50);
}
}, 32000));
chartTimeouts.push(setTimeout(function () {
if ($('.chart2').length && $('.chart2').data('easyPieChart')) {
$('.chart2').data('easyPieChart').update(80);
}
}, 40000));
});
$(function () {
// Only initialize if chart elements exist
if ($('.chart3').length === 0) return;
//create instance
$('.chart3').easyPieChart({
animate: 2000,
barColor: '#579da9',
trackColor: '#dddddd',
scaleColor: '#579da9',
size: 160,
lineWidth: 7,
});
//update instance after 5 sec
chartTimeouts.push(setTimeout(function () {
if ($('.chart3').length && $('.chart3').data('easyPieChart')) {
$('.chart3').data('easyPieChart').update(20);
}
}, 9000));
chartTimeouts.push(setTimeout(function () {
if ($('.chart3').length && $('.chart3').data('easyPieChart')) {
$('.chart3').data('easyPieChart').update(59);
}
}, 20000));
chartTimeouts.push(setTimeout(function () {
if ($('.chart3').length && $('.chart3').data('easyPieChart')) {
$('.chart3').data('easyPieChart').update(38);
}
}, 35000));
chartTimeouts.push(setTimeout(function () {
if ($('.chart3').length && $('.chart3').data('easyPieChart')) {
$('.chart3').data('easyPieChart').update(79);
}
}, 49000));
chartTimeouts.push(setTimeout(function () {
if ($('.chart3').length && $('.chart3').data('easyPieChart')) {
$('.chart3').data('easyPieChart').update(96);
}
}, 52000));
});
$(function () {
// Only initialize if chart elements exist
if ($('.chart4').length === 0) return;
//create instance
$('.chart4').easyPieChart({
animate: 2000,
barColor: '#dba26b',
trackColor: '#dddddd',
scaleColor: '#dba26b',
size: 160,
lineWidth: 7,
});
//update instance after 5 sec
chartTimeouts.push(setTimeout(function () {
if ($('.chart4').length && $('.chart4').data('easyPieChart')) {
$('.chart4').data('easyPieChart').update(40);
}
}, 6000));
chartTimeouts.push(setTimeout(function () {
if ($('.chart4').length && $('.chart4').data('easyPieChart')) {
$('.chart4').data('easyPieChart').update(67);
}
}, 14000));
chartTimeouts.push(setTimeout(function () {
if ($('.chart4').length && $('.chart4').data('easyPieChart')) {
$('.chart4').data('easyPieChart').update(43);
}
}, 23000));
chartTimeouts.push(setTimeout(function () {
if ($('.chart4').length && $('.chart4').data('easyPieChart')) {
$('.chart4').data('easyPieChart').update(80);
}
}, 36000));
chartTimeouts.push(setTimeout(function () {
if ($('.chart4').length && $('.chart4').data('easyPieChart')) {
$('.chart4').data('easyPieChart').update(66);
}
}, 41000));
});
$(function () {
// Only initialize if chart elements exist
if ($('.chart5').length === 0) return;
//create instance
$('.chart5').easyPieChart({
animate: 3000,
barColor: '#1e825e',
trackColor: '#dddddd',
scaleColor: '#1e825e',
size: 160,
lineWidth: 7,
});
//update instance after 5 sec
chartTimeouts.push(setTimeout(function () {
if ($('.chart5').length && $('.chart5').data('easyPieChart')) {
$('.chart5').data('easyPieChart').update(30);
}
}, 9000));
chartTimeouts.push(setTimeout(function () {
if ($('.chart5').length && $('.chart5').data('easyPieChart')) {
$('.chart5').data('easyPieChart').update(87);
}
}, 19000));
chartTimeouts.push(setTimeout(function () {
if ($('.chart5').length && $('.chart5').data('easyPieChart')) {
$('.chart5').data('easyPieChart').update(28);
}
}, 27000));
chartTimeouts.push(setTimeout(function () {
if ($('.chart5').length && $('.chart5').data('easyPieChart')) {
$('.chart5').data('easyPieChart').update(69);
}
}, 39000));
chartTimeouts.push(setTimeout(function () {
if ($('.chart5').length && $('.chart5').data('easyPieChart')) {
$('.chart5').data('easyPieChart').update(99);
}
}, 47000));
});
}
$(document).ready(pieChartHome);
// Clear timeouts when navigating away with Turbolinks
$(document).on('turbolinks:before-visit', function() {
chartTimeouts.forEach(function(id) { clearTimeout(id); });
chartTimeouts = [];
});
</script>