|
| 1 | +<div class="flex flex-col space-y-3 text-foreground px-1 sm:max-w-lg md:max-w-3xl lg:max-w-5xl mx-auto capitalize"> |
| 2 | + <.card_preheding>Aggregation</.card_preheding> |
| 3 | + <!-- Progress bar based on https://dev.to/mikekennedydev/progress-bar-text-colour-1gg6 --> |
| 4 | + <.live_component |
| 5 | + id="labeled-progress-bar" |
| 6 | + module={LabeledProgressBarComponent} |
| 7 | + percent_progress={@next_scheduled_batch_remaining_time_percentage} |
| 8 | + label={ |
| 9 | + case @next_scheduled_batch_remaining_time do |
| 10 | + 0 -> "Next aggregated proof is around the corner!" |
| 11 | + time -> "Next aggregated proof in #{time} minutes" |
| 12 | + end |
| 13 | + }/> |
| 14 | + <%= if @proofs != :empty and @proofs != [] do %> |
| 15 | + <.card_background class="w-full overflow-x-auto sm:col-span-2"> |
| 16 | + <.agg_proofs_table proofs={@proofs} /> |
| 17 | + </.card_background> |
| 18 | + <% else %> |
| 19 | + <.empty_card_background text="No aggregated proofs To Display." class="sm:col-span-2" /> |
| 20 | + <% end %> |
| 21 | + <div class="flex gap-x-2 items-center justify-center w-full"> |
| 22 | + <%= if @current_page >= 2 do %> |
| 23 | + <.link navigate={~p"/batches?page=#{1}"}> |
| 24 | + <.button class="text-muted-foreground group"> |
| 25 | + First |
| 26 | + </.button> |
| 27 | + </.link> |
| 28 | + <% end %> |
| 29 | + <%= if @current_page > 1 do %> |
| 30 | + <.link navigate={~p"/aggregated_proofs?page=#{@current_page - 1}"}> |
| 31 | + <.button |
| 32 | + icon="arrow-right-solid" |
| 33 | + icon_class="group-hover:translate-x-1 transition-all duration-150" |
| 34 | + class="text-muted-foreground size-10 group rotate-180" |
| 35 | + > |
| 36 | + <span class="sr-only">Previous Page</span> |
| 37 | + </.button> |
| 38 | + </.link> |
| 39 | + <% end %> |
| 40 | + <form phx-submit="change_page" class="flex items-center"> |
| 41 | + <label for="page" class="text-foreground sr-only">Page: </label> |
| 42 | + <input |
| 43 | + name="page" |
| 44 | + id="page" |
| 45 | + type="number" |
| 46 | + class={ |
| 47 | + classes([ |
| 48 | + "text-center border border-foreground/20 text-muted-foreground w-20 focus:ring-primary", |
| 49 | + "phx-submit-loading:opacity-75 rounded-lg bg-card hover:bg-muted py-2 px-3", |
| 50 | + "text-sm font-semibold leading-6 text-foregound active:text-foregound/80", |
| 51 | + "[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none" |
| 52 | + ]) |
| 53 | + } |
| 54 | + value={@current_page} |
| 55 | + min="1" |
| 56 | + /> |
| 57 | + </form> |
| 58 | + <%= if @current_page != @last_page do %> |
| 59 | + <.link navigate={~p"/aggregated_proofs?page=#{@current_page + 1}"}> |
| 60 | + <.button |
| 61 | + icon="arrow-right-solid" |
| 62 | + icon_class="group-hover:translate-x-1 transition-all duration-150" |
| 63 | + class="text-muted-foreground size-10 group" |
| 64 | + > |
| 65 | + <span class="sr-only">Next Page</span> |
| 66 | + </.button> |
| 67 | + </.link> |
| 68 | + <.link navigate={~p"/batches?page=#{@last_page}"}> |
| 69 | + <.button class="text-muted-foreground group"> |
| 70 | + Last |
| 71 | + </.button> |
| 72 | + </.link> |
| 73 | + <% end %> |
| 74 | + </div> |
| 75 | +</div> |
0 commit comments