src/public/app/components.ts

   1 type ProgressBarOptions = {
   2   color: string;
   3 }
   4
   5 function calculatePercent(current: number, max: number): number {
   6   return (current / max) * 100;
   7 }
   8
   9 export function progressBar(current: number, max: number, options: ProgressBarOptions): string {
  10   const percent = calculatePercent(current, max)
  11   return `
  12   <div class="progress d-inline-block" title="${percent}%">
  13   <div class="progress-bar bg-${options.color}" role="progressbar" style="width: ${percent}%;" aria-valuenow="${percent}" aria-valuemin="0" aria-valuemax="100">
  14   ${current}/${max}
  15   </div>
  16   </div>
  17   `;
  18 }
  19
  20 export function actionLog(text: string, replace: boolean = true) {
  21   const str = `<div class="log-item animated fadeIn" title="${Date.now()}">${text}</div>`;
  22
  23   replace ? $(`#action-log`).html(str): $(`#action-log`).prepend(str);
  24 }