Moving from a tabbed area to switching on account dropdown

This commit is contained in:
Jonathan Bobel
2024-06-13 10:29:59 -04:00
parent 468f6c9fc6
commit 0f738c8cb7
7 changed files with 660 additions and 183 deletions

View File

@@ -18,34 +18,28 @@
{{ ajax_block(partials, updates_url, 'upcoming') }}
<h2 class="font-body-xl margin-top-0">Service Name Dashboard</h2>
<!-- <canvas id="myChart" data-service-id="{{ service_id }}"></canvas> -->
<div class="tab">
<button class="tablinks usa-button usa-button--outline margin-right-0 border-right-0" data-tab="Weekly">Weekly</button>
<button class="tablinks usa-button usa-button--outline margin-right-0" data-tab="Monthly">Monthly</button>
<button class="tablinks usa-button usa-button--outline" data-tab="Yearly">Yearly</button>
<h2 class="font-body-2xl margin-top-0">Service Name Dashboard</h2>
<form class="usa-form margin-bottom-2">
<label class="usa-label" for="options">Account</label>
<select class="usa-select" name="options" id="options">
<option value>- Select -</option>
<option value="service" selected>{{ current_service.name }}</option>
<option value="individual">{{ current_user.name }}</option>
</select>
</form>
<div id="chartsArea" class="margin-bottom-8">
<div id="Weekly">
<div class="chart-subtitle">{{ current_service.name }} - Last 7 Days</div>
<div class="chart-container" id="weeklyChart" data-service-id="{{ service_id }}"></div>
<table id="weeklyTable" class="usa-sr-only"></table>
</div>
<div id="tooltip"></div>
</div>
<div id="Weekly" class="tabcontent">
<div class="chart-subtitle">2024 Total Message Allowance - Weekly</div>
<canvas id="weeklyChart"></canvas>
<table id="weeklyTable" class="usa-sr-only"></table>
</div>
<div id="Monthly" class="tabcontent">
<div class="chart-subtitle">2024 Total Message Allowance - Monthly</div>
<canvas id="monthlyChart"></canvas>
<table id="monthlyTable" class="usa-sr-only"></table>
</div>
<div id="Yearly" class="tabcontent">
<div class="chart-subtitle">2024 Total Message Allowance - Yearly</div>
<canvas id="yearlyChart"></canvas>
<table id="yearlyTable" class="usa-sr-only"></table>
</div>
<div id="message"></div>
<!-- <h3 id="total-value" class="margin-y-1"></h3>
<div class="chart-container">
<div class="bar delivered" id="delivered-bar"></div>
@@ -76,7 +70,7 @@
</div>
</div> -->
<h2 class="font-body-2xl line-height-sans-2 margin-bottom-0 margin-top-4">
<h2 class="font-body-xl line-height-sans-2 margin-bottom-0 margin-top-4">
Messages sent
</h2>