src/server/views/components/progress-bar.ts

   1 export interface ProgressBarOptions {
   2   startingColor: string;
   3   endingColor?: string;
   4   title?: string
   5   displayPercent?: boolean;
   6 }
   7
   8 export function ProgressBar(current: number, max: number, id: string, opts: ProgressBarOptions) {
   9   const endingColor = opts.endingColor ?? opts.startingColor;
  10   const title = opts.title ?? '';
  11   const display = [`${current}/${max}`];
  12   let percent = 0;
  13
  14   if(max > 0) {
  15     percent = Math.floor((current / max) * 100);
  16   }
  17
  18   if(opts.displayPercent) {
  19     display.push(`${percent}%`);
  20   }
  21
  22   return `<div class="progress-bar" id="${id}" style="background: linear-gradient(to right, ${opts.startingColor}, ${endingColor} ${percent}%, transparent ${percent}%, transparent)"
  23 title="${title} ${display.join(" - ")}">${title} ${display.join(" - ")}</div>`;
  24 }