CreateFromExistingSidebar.html

<?!= HtmlService.createHtmlOutputFromFile('StyleSheet').getContent(); ?>
<div class="sidebar roster roster-create-from-existing">
  <p>
    Roster Lookup Data
  </p>
  <table id="roster-lookup-options-table" class="table sidebar-value-block" width="100%">
    <tr>
      <td>
        <label style="cursor:help" title="Select the sheet name.">Sheet: </label>
      </td>
      <td colspan="2">
        <div class="block form-group">
          <input type="text" id="sidebar-lookup-sheetname" placeholder="Sheet name" value="" style="width:10em;margin-top:1px;">
          <button class="narrow-button" title="Use selected sheet" onclick="utils.updateRange('', 'sidebar-lookup-sheetname');">↘</button>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <label style="cursor:help" title="Select the range of names.">Name: </label>
      </td>
      <td colspan="2">
        <div class="block form-group">
          <input type="text" id="sidebar-lookup-person-name-range" placeholder="Range" value="" style="width:10em;margin-top:1px;">
          <button class="narrow-button" title="Use selected range" onclick="utils.updateRange('sidebar-lookup-person-name-range', '');">↘</button>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <label style="cursor:help" title="Select the range of timeslots.">Timeslot: </label>
      </td>
      <td colspan="2">
        <div class="block form-group">
          <input type="text" id="sidebar-lookup-timeslot-range" placeholder="Range" value="" style="width:10em;margin-top:1px;">
          <button class="narrow-button" title="Use selected range" onclick="utils.updateRange('sidebar-lookup-timeslot-range', '');">↘</button>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <label style="cursor:help" title="Select the range of timestamps.">Submitted on: </label>
      </td>
      <td colspan="2">
        <div class="block form-group">
          <input type="text" id="sidebar-lookup-timestamp-range" placeholder="Range" value="" style="width:10em;margin-top:1px;">
          <button class="narrow-button" title="Use selected range" onclick="utils.updateRange('sidebar-lookup-timestamp-range', '');">↘</button>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <label style="cursor:help" title="Number of days for data to retend (used to remove old data).">Retention days: </label>
      </td>
      <td colspan="2">
        <input type="text" id="sidebar-lookup-data-retention-days" value="" required/>
      </td>
    </tr>
  </table>
  <p>
    Roster Fillup Data
  </p>
  <table id="roster-fillup-options-table" class="table sidebar-value-block" width="100%">
    <tr>
      <td>
        <label style="cursor:help" title="Select the sheet name.">Sheet: </label>
      </td>
      <td colspan="2">
        <div class="block form-group">
          <input type="text" id="sidebar-fillup-sheetname" placeholder="Sheet name" value="" style="width:10em;margin-top:1px;">
          <button class="narrow-button" title="Use selected sheet" onclick="utils.updateRange('', 'sidebar-fillup-sheetname');">↘</button>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <label style="cursor:help" title="Select the range of names.">Name: </label>
      </td>
      <td colspan="2">
        <div class="block form-group">
          <input type="text" id="sidebar-fillup-person-name-range" placeholder="Range" value="" style="width:10em;margin-top:1px;">
          <button class="narrow-button" title="Use selected range" onclick="utils.updateRange('sidebar-fillup-person-name-range', '');">↘</button>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <label style="cursor:help" title="Select the range of timeslot (to be fill up regularly).">Timetable: </label>
      </td>
      <td colspan="2">
        <div class="block form-group">
          <input type="text" id="sidebar-fillup-timeslot-range" placeholder="Range" value="" style="width:10em;margin-top:1px;">
          <button class="narrow-button" title="Use selected range" onclick="utils.updateRange('sidebar-fillup-timeslot-range', '');">↘</button>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <label style="cursor:help" title="Select the range of last updated on.">Last updated on: </label>
      </td>
      <td colspan="2">
        <div class="block form-group">
          <input type="text" id="sidebar-fillup-timestamp-range" placeholder="Range" value="" style="width:10em;margin-top:1px;">
          <button class="narrow-button" title="Use selected range" onclick="utils.updateRange('sidebar-fillup-timestamp-range', '');">↘</button>
        </div>
      </td>
    </tr>
  </table>
  <div class="block sidebar-button-group">
    <button class="action" id="sidebar-save-button">Save</button>
  </div>
  <div id="sidebar-status"></div>
</div>

<div class="sidebar bottom">
  <div id="static-loader" class="show-inline gray">Created by <a href="https://github.com/ryancyq/roster-google-sheets-add-on"><img class="logo" width="20" src="https://avatars.githubusercontent.com/ryancyq?v=3&s=20s"></a></div>
  <div id="dynamic-loader" class="hidden">
    <div class="loader">
      <svg class="circular" viewBox="30 30 30 30">
        <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/>
      </svg>
    </div>
  </div>
</div>

<!-- Use a templated HTML printing scriptlet to import JavaScript. -->
<?!= HtmlService.createHtmlOutputFromFile('JavaScript').getContent(); ?>
<?!= HtmlService.createHtmlOutputFromFile('CreateFromExistingJavaScript').getContent(); ?>