tfp/src/components/progress/render.js

A Web UI framework for TaskBuilder

import TFPComponentRender from "../render.js";
export default class ProgressRender extends TFPComponentRender {
  constructor(__tfp, _dataModel, _level) {
    super(__tfp, _dataModel, _level);
  }
  getBodyHtml(getComponentsHtml) {
    let bodyHtml = "";
    let indent = this.getHtmlIndent();
    let val = 0;
     if(this.dataModel.value) {
       val = this.dataModel.value;
     }
    
      bodyHtml += `<div class="tfp-progress-bar">
                     <div class="tfp-progress-bar__outer">
                       <div class="tfp-progress-bar__inner" style="width: ${val}%;"></div>
                     </div>
                  </div>`;
      bodyHtml += `<div class="tfp-progress__text" style="font-size: 14.4px;">${val}%</div>`
    return bodyHtml;
  }

  getAttrHtml() {
    var attrHtml = super.getAttrHtml();
    attrHtml += ' type="progress"';
    // if(this._tfp.isDesigning && attrHtml.indexOf("readonly")<0)
    //   attrHtml += " readonly";
    return attrHtml;
  }

  getHtml(getComponentsHtml, parentIndent, retainStyleAttr) {
    var html = super.getHtml("div", false, parentIndent, retainStyleAttr);
    return html;
  }
}