TCD プラグイン Workflow

form.php

<?php
  $data['mail'] = null;
  
  if( $data['id'] ){
    $data['id'] = $data['id'];
  } else {
    $data['id'] = 'null';
  }
?>

  <?php echo "<style>"; ?>

    <?php if(isset($data['customcss'])) :
      echo $data['customcss'];
    endif; ?>

    .tcd-submit-button{
      display:inline-block;
      width:auto;
      font-weight:700;
      text-align:center;
      vertical-align:middle;
      -webkit-transition:all .25s ease-in-out;
      -moz-transition:all .25s ease-in-out;
      -o-transition:all .25s ease-in-out;
      -ms-transition:all .25s ease-in-out;
      transition:all .25s ease-in-out;

      <?php if($data['submitsize'] == 'l') : ?>
        width:100%; padding:.9em 1.3em .8em; font-size:150%;
      <?php endif; ?>

      <?php if($data['submitsize'] == 'm') : ?>
        width:300px; max-width:100%; padding:.9em 1.3em .8em; font-size:150%;     
      <?php endif; ?>

      <?php if($data['submitsize'] == 's') : ?>
        min-width:120px; max-width:100%; padding:.6em 1em .5em; font-size:110%;
      <?php endif; ?>

      <?php if($data['submitcol']) { echo "background-color:#" . $data['submitcol'] . ';'; } ?>
      <?php if($data['submittextcol']) { echo "color:#" . $data['submittextcol'] . ';'; } ?>
      <?php if($data['submitborderradius']) { echo "border-radius:" . $data['submitborderradius'] . 'px;'; } ?>
    }
    .tcd-submit-button:hover{
      <?php if($data['submithovercol']) { echo "background-color:#" . $data['submithovercol'] . ';'; } ?>
    }

    .workflow_left_td{
      <?php if($data['col2']) { echo "background-color:#" . $data['col2'] . '!important;'; } ?>
    }

    .workflow_right_td{
      <?php if(isset($data['mainbgcol'])) { echo "background-color:#" . $data['mainbgcol'] . '!important;'; } ?>
    }

    .workflow_top_th{
      <?php if($data['col1']) { echo "background-color:#" . $data['col1'] . '!important;'; } ?>
    }    
  <?php echo "</style>"; ?>

  <script type="text/javascript">
      var app = angular.module('app<?php echo $formId; ?>', [])
      app.controller('MainCtrl<?php echo $formId; ?>', function($scope, $http) {

        $scope.data = <?php echo json_encode($data); ?>;

        $scope.data.steps.forEach(function(step, i){
          if( $scope.data.steps[i].options ){
            $scope.data.steps[i].options = step.options.split("\n")
          }
        })

        $scope.confirmForm = function(){
          $scope.confirm = true
        }

        $scope.sendForm = function(){
          var str = "";
          var mail = "";

          $scope.data.steps.forEach(function(row){
            str = str + row.label1 + ': ' + row.answer
            str = str + '\r\n----------\r\n'

            if( row.type == 'email' ){
              mail = row.answer
            }
          })

          var obj = { action: "tcd_submit_form", data: str, steps: angular.toJson($scope.data.steps), mail:mail, id: <?php echo $data['id']; ?> }

          $http({
            url: "<?php echo $adminUrl; ?>",
            method: "POST",
            params: obj,
          }).then(function(res){
            <?php if(isset($data['redirect'])) : ?>
              window.location.href = '<?php echo $data["redirect"]; ?>';
            <?php else : ?>
              $scope.completed = true
            <?php endif; ?>
          })
        }

      })
  </script>
  <div ng-app="app<?php echo $formId; ?>" ng-controller="MainCtrl<?php echo $formId; ?>">

    <h2 class="text-center" ng-show="completed">
      <?php echo $data['completed']; ?>
    </h2>

    <form ng-submit="confirmForm()" ng-hide="completed">
      <table class="workflow_form table table-bordered tcd-workflow wf-form" style="table-layout:auto; background:#{{data.mainbgcol}}">
        <tr class="workflow_form_headline" style="color:#{{data.textcol1}}">
          <th class="text-center workflow_top_th" colspan="2">
            <b>{{data.title}}</b>
              <span ng-if="data.subtitle"><br/>{{data.subtitle}}</span>
          </th>
        </tr>
        <tr ng-repeat="row in data.steps">
          <td style="width:30%; vertical-align:middle" class="text-center workflow_left_td">
            <span style="color:#{{data.textcol2}};">{{row.label1}}<span ng-if=" row.required == '1' " style="color:firebrick">&nbsp;*</span></span>
          </td>

          <td class="workflow_right_td" ng-hide="confirm">
            <input style="background:#{{data.textboxcol}}" class="form-control" type="text" ng-if=" row.type == 'text' " ng-model="row.answer" ng-required=" row.required == '1' " />
            <input style="background:#{{data.textboxcol}}" class="form-control" type="email" ng-if=" row.type == 'email' " ng-model="row.answer" ng-required=" row.required == '1' " />
            <textarea style="background:#{{data.textboxcol}}" class="form-control" ng-if=" row.type == 'textarea' " ng-model="row.answer" ng-required=" row.required == '1' "></textarea>
            <fieldset ng-if=" row.type == 'radio' ">
              <div style="display:inline-block" ng-repeat="option in row.options track by $index">
                <input type="radio" id="{{option}}" value="{{option}}" ng-model="row.answer" />&nbsp;&nbsp;<label for="{{option}}">{{option}}</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              </div>
            </fieldset>
            <fieldset ng-if=" row.type == 'select' ">
              <select ng-required=" row.required == '1' " ng-model="row.answer">
                <option ng-repeat="option in row.options track by $index" value="{{option}}">{{option}}</option>
              </select>
            </fieldset>
          </td>
          <td ng-show="confirm">{{ row.answer }}</td>
        </tr>
      </table>
      <div class="<?php if($data['submitalign']) { echo "text-" . $data['submitalign']; } ?>" colspan="2" ng-hide="confirm">
        <input type="submit" class="tcd-submit-button" value="{{ data.submit ? data.submit : 'Confirm' }}" />
      </div>

      <div class="<?php if($data['submitalign']) { echo "text-" . $data['submitalign']; } ?>" colspan="2" ng-show="confirm">
        <button type="button" class="tcd-submit-button" ng-click="confirm = false"><?php _e('Cancel', 'tcd-contact-form'); ?></button>
        <button type="button" class="tcd-submit-button" ng-click="sendForm()"><?php _e('Send', 'tcd-contact-form'); ?></button>
      </div>
    </form>
  </div>