선택에 따라 progressbar 자유자재로 활용해서 화면 꾸며보기

아래와 같은 화면을 구상중이다. 각 공정의 선택에 따라 프로그래스바를 그 품목의 텍스트가 나오게 만들면서

진행율이 나오게 만들려고 하고, 체크되었다면 그것이 텍스트로도 나올 수 있는 복잡한 로직이 될 수 있다.

 

<div class="list-cell list-cell--300">
    <?php
    $countTmpArr = count($tmparr);
    $countDoneArr = count($work_remarks_arr_done);
    $percent = $countDoneArr / $countTmpArr * 100;

    // 색상 조건문
    if ($tmparr[$i] == "설계") {
        $barColor = "bg-dark";
        $textColor = "text-dark";
    } elseif ($tmparr[$i] == "레이져") {
        $barColor = "bg-success";
        $textColor = "text-success";
    } else {
        $barColor = "bg-danger";
        $textColor = "text-danger";
    }
    ?>

    <div class="progress">
        <div class="progress-bar <?=$barColor?>" role="progressbar" style="width: <?=$percent?>%" aria-valuenow="<?=$percent?>" aria-valuemin="0" aria-valuemax="100"><?=$work_remarks_arr_done[$i]?></div>
    </div>
    <div class="row row-cols-auto mt-4 justify-content-center align-items-center">
        <?php
        for($i=0;$i<count($tmparr);$i++) {
            print '<span class="'.$textColor.'">'.$tmparr[$i].'';

            if (!in_array($tmparr[$i], $work_remarks_arr_done)) {
                print '<i class="bi bi-check-circle '.$textColor.'"></i>';
            } else {
                print '<i class="bi bi-check-circle-fill '.$textColor.'"></i>';
            }

            print '&nbsp;&nbsp;&nbsp;&nbsp; </span>';
        }
        ?>
    </div>
</div>

초안을 만든 것인데, 일단 텍스트의 글자가 변경되어야 한다.

텍스트 색상을 적용하도록 만들어봤다.

이것도 코드 올려봄

<div class="list-cell list-cell--300">
   <div class="progress">
  <?php
    $countTmpArr = count($tmparr);
    $countDoneArr = count($work_remarks_arr_done);
    $percent = $countDoneArr / $countTmpArr * 100;
  ?>
  <div class="progress-bar <?=$barColor?>" role="progressbar" style="width: <?=$percent?>%;" aria-valuenow="<?=$percent?>" aria-valuemin="0" aria-valuemax="100">
    <?=$percent?>%
  </div>
</div>
<div class="row row-cols-auto mt-4 justify-content-center align-items-center">  
  <?php
    for($i=0;$i<count($tmparr);$i++) {
      $checkedIcon = in_array($tmparr[$i], $work_remarks_arr_done) ? '<i class="bi bi-check-circle-fill '.$textColor.'"></i>' : '<i class="bi bi-check-circle '.$textColor.'"></i>';
      print '<span class="'.$textColor.'">'.$tmparr[$i].' '.$checkedIcon.'&nbsp;&nbsp;&nbsp;&nbsp;</span>';
    }
  ?>
</div>
</div>

 

최종확정화면... 또 수정할수도 있지만,

일단락 시킴

					<div class="list-cell list-cell--300">
					   <div class="progress">
					  <?php
						$countTmpArr = count($tmparr);
						$countDoneArr = count($work_remarks_arr_done);
						$percent = $countDoneArr / $countTmpArr * 100;
					  ?>
					  <div class="progress-bar <?=$barColor?>" role="progressbar" style="width: <?=$percent?>%;" aria-valuenow="<?=$percent?>" aria-valuemin="0" aria-valuemax="100">
						<?=$percent?>%
					  </div>
					</div>
					<div class="row row-cols-auto mt-4 justify-content-center align-items-center">  
					  <?php
						for($i=0;$i<count($tmparr);$i++) {
						  $checkedIcon = in_array($tmparr[$i], $work_remarks_arr_done) ? '<i class="bi bi-check-circle-fill '.$textColor.'"></i>' : '&nbsp;&nbsp;&nbsp;';
						  print '<span class="'.$textColor.'">'.$tmparr[$i].' '.$checkedIcon.'&nbsp;</span>';
						}
					  ?>
					</div>
					</div>

 

최종실행화면

 

얼마든지 응용은 가능하지 않을까 싶다.~~

코딩은 외로운 나와의 치열한 싸움이다~