Template:TrainingVideo: Difference between revisions

From PRS
Jump to navigation Jump to search
Newer edit →
VisualWikitext
Created page with "<!-- ============================================================ TEMPLATE: Template:TrainingVideo Save this page at: Template:TrainingVideo USAGE ON ANY TRAINING PAGE: {{TrainingVideo | title = Quick Access – In & Out Board – Staff Timesheets | module = Module 3 | duration = 4:32 | updated = April 2026 | summary = This module walks you through the Quick Access panel, showin..."
 
No edit summary
Line 1: Line 1:
<!-- ============================================================
<templatestyles src="Template:TrainingVideo/styles.css" /><div class="training-page-wrap"><div class="training-meta"><span class="training-tag">{{{module|Training}}}</span> <span class="training-meta-item">⏱ {{{duration|}}}</span> <span class="training-meta-item">Updated {{{updated|}}}</span></div><div class="training-section-label">Overview</div><div class="training-overview">{{{summary|No summary provided.}}}</div><div class="training-content-grid"><div class="training-video-col"><div class="training-video-wrap"><video controls preload="metadata" class="training-video-player"><source src="{{filepath:{{{videofile|}}}}}" type="video/mp4" />Your browser does not support HTML5 video.</video><div class="ts-controls"><div class="ts-progress-track"><div class="ts-progress-fill"></div><div class="ts-progress-marker" data-time="17"></div><div class="ts-progress-marker" data-time="48"></div><div class="ts-progress-marker" data-time="87"></div><div class="ts-progress-marker" data-time="130"></div><div class="ts-progress-marker" data-time="171"></div><div class="ts-progress-marker" data-time="212"></div><div class="ts-progress-marker" data-time="247"></div></div><div class="ts-ctrl-row"><span class="ts-time-display">0:00 / {{{duration|--:--}}}</span></div></div><div class="training-video-footer"><span class="training-video-title">{{{title|Training Video}}}</span> <span class="training-video-dur">{{{duration|}}}</span></div></div><div class="training-lower-grid"><div class="training-info-card"><div class="training-card-title">✓ Key Points</div>{{{keypoints|No key points provided.}}}</div><div class="training-info-card"><div class="training-card-title">🔗 See Also</div>{{{seealso|No related pages.}}}</div></div></div><div class="training-transcript-col"><div class="training-transcript-card"><div class="training-transcript-header"><span class="training-transcript-title">📋 Transcript</span> <span class="training-transcript-hint">Click any line to jump</span></div><div class="ts-scroll-body"><div class="ts-entry" data-time="17"><span class="ts-time">0:17</span> <span class="ts-text">Welcome to Quick Access. This panel is available from every screen via the toolbar at the top right.</span></div><div class="ts-entry" data-time="48"><span class="ts-time">0:48</span> <span class="ts-text">Click <i>In &amp; Out Board</i> to open the attendance log. Staff are listed alphabetically.</span></div><div class="ts-entry" data-time="87"><span class="ts-time">1:27</span> <span class="ts-text">To mark a staff member as arrived, click their name and select <i>Check In</i>. The timestamp records automatically.</span></div><div class="ts-entry" data-time="130"><span class="ts-time">2:10</span> <span class="ts-text">Departures follow the same process — open the board and select <i>Check Out</i>.</span></div><div class="ts-entry" data-time="171"><span class="ts-time">2:51</span> <span class="ts-text">The Timesheets tab now shows today's entries, populated automatically from the board.</span></div><div class="ts-entry" data-time="212"><span class="ts-time">3:32</span> <span class="ts-text">To correct an entry, re-open the board, click the record, and choose <i>Edit Record</i>.</span></div><div class="ts-entry" data-time="247"><span class="ts-time">4:07</span> <span class="ts-text">Head to Timesheet Summary to export the daily report as CSV or PDF.</span></div></div></div></div></div>
    TEMPLATE: Template:TrainingVideo
   
    Save this page at: Template:TrainingVideo
   
    USAGE ON ANY TRAINING PAGE:
    {{TrainingVideo
    | title      = Quick Access – In & Out Board – Staff Timesheets
    | module    = Module 3
    | duration  = 4:32
    | updated    = April 2026
    | summary    = This module walks you through the Quick Access panel,
                    showing how to record staff arrivals and departures via
                    the In & Out Board and how those entries feed directly
                    into Staff Timesheets.
    | videofile  = Quick_Access_In_and_Out_Board.mp4
    | transcript =
        0:17|Welcome to Quick Access. This panel is available from every screen via the toolbar at the top right.
        0:48|Click ''In & Out Board'' to open the attendance log. Staff are listed alphabetically.
        1:27|To mark a staff member as arrived, click their name and select ''Check In''. The timestamp records automatically.
        2:10|Departures follow the same process — open the board and select ''Check Out''.
        2:51|The Timesheets tab now shows today's entries, populated automatically from the board.
        3:32|To correct an entry, re-open the board, click the record, and choose ''Edit Record''.
        4:07|Head to Timesheet Summary to export the daily report as CSV or PDF.
    | seealso    =
        * [[Setting Up Staff Profiles]]
        * [[Generating Payroll Reports]]
        * [[Leave & Absence Management]]
    | keypoints  =
        * Use Quick Access from any screen — no navigation required.
        * In & Out entries auto-populate the daily timesheet.
        * Corrections can be made within the same session.
        * Export to CSV or PDF from the Timesheet summary view.
    }}
    ============================================================ -->
 
<!-- ── Inline styles (scoped to this template) ── -->
<templatestyles src="Template:TrainingVideo/styles.css" />
 
<div class="training-page-wrap">
 
<!-- ── Page meta ── -->
<div class="training-meta">
<span class="training-tag">{{{module|Training}}}</span>
<span class="training-meta-item">⏱ {{{duration|}}}</span>
<span class="training-meta-item">Updated {{{updated|}}}</span>
</div>
 
<!-- ── Overview ── -->
<div class="training-section-label">Overview</div>
<div class="training-overview">{{{summary|No summary provided.}}}</div>
 
<!-- ══════════════════════════════════════════
    MAIN CONTENT: Video + Transcript sidebar
    ══════════════════════════════════════════ -->
<div class="training-content-grid">
 
  <!-- Left: video card -->
  <div class="training-video-col">
    <div class="training-video-wrap">
 
      <!-- Native HTML5 video player -->
      <video controls preload="metadata" class="training-video-player">
        <source src="{{filepath:{{{videofile|}}}}}" type="video/mp4" />
        Your browser does not support HTML5 video.
      </video>
 
      <!-- Custom progress bar (driven by Common.js) -->
      <div class="ts-controls">
        <div class="ts-progress-track">
          <div class="ts-progress-fill"></div>
          <!-- Timestamp markers: add one per transcript entry, times in seconds -->
          <div class="ts-progress-marker" data-time="17"></div>
          <div class="ts-progress-marker" data-time="48"></div>
          <div class="ts-progress-marker" data-time="87"></div>
          <div class="ts-progress-marker" data-time="130"></div>
          <div class="ts-progress-marker" data-time="171"></div>
          <div class="ts-progress-marker" data-time="212"></div>
          <div class="ts-progress-marker" data-time="247"></div>
        </div>
        <div class="ts-ctrl-row">
          <span class="ts-time-display">0:00 / {{{duration|--:--}}}</span>
        </div>
      </div>
 
      <div class="training-video-footer">
        <span class="training-video-title">{{{title|Training Video}}}</span>
        <span class="training-video-dur">{{{duration|}}}</span>
      </div>
    </div><!-- /training-video-wrap -->
 
    <!-- ── Key Points ── -->
    <div class="training-lower-grid">
      <div class="training-info-card">
        <div class="training-card-title">✓ Key Points</div>
        {{{keypoints|No key points provided.}}}
      </div>
 
      <!-- ── See Also ── -->
      <div class="training-info-card">
        <div class="training-card-title">🔗 See Also</div>
        {{{seealso|No related pages.}}}
      </div>
    </div>
  </div><!-- /training-video-col -->
 
  <!-- Right: transcript sidebar -->
  <div class="training-transcript-col">
    <div class="training-transcript-card">
      <div class="training-transcript-header">
        <span class="training-transcript-title">📋 Transcript</span>
        <span class="training-transcript-hint">Click any line to jump</span>
      </div>
      <div class="ts-scroll-body">
 
        <!--
          TRANSCRIPT ENTRIES
          Each entry needs:
            class="ts-entry"
            data-time="[seconds]"  ← used by Common.js to sync
 
          Format below: one <div> per timestamp.
          The ts-time span shows the label; ts-text shows the line.
 
          TO ADD/EDIT ENTRIES: duplicate a ts-entry block and update
          data-time (in seconds) and the text inside ts-text.
        -->
 
        <div class="ts-entry" data-time="17">
          <span class="ts-time">0:17</span>
          <span class="ts-text">Welcome to Quick Access. This panel is available from every screen via the toolbar at the top right.</span>
        </div>
        <div class="ts-entry" data-time="48">
          <span class="ts-time">0:48</span>
          <span class="ts-text">Click <i>In &amp; Out Board</i> to open the attendance log. Staff are listed alphabetically.</span>
        </div>
        <div class="ts-entry" data-time="87">
          <span class="ts-time">1:27</span>
          <span class="ts-text">To mark a staff member as arrived, click their name and select <i>Check In</i>. The timestamp records automatically.</span>
        </div>
        <div class="ts-entry" data-time="130">
          <span class="ts-time">2:10</span>
          <span class="ts-text">Departures follow the same process — open the board and select <i>Check Out</i>.</span>
        </div>
        <div class="ts-entry" data-time="171">
          <span class="ts-time">2:51</span>
          <span class="ts-text">The Timesheets tab now shows today's entries, populated automatically from the board.</span>
        </div>
        <div class="ts-entry" data-time="212">
          <span class="ts-time">3:32</span>
          <span class="ts-text">To correct an entry, re-open the board, click the record, and choose <i>Edit Record</i>.</span>
        </div>
        <div class="ts-entry" data-time="247">
          <span class="ts-time">4:07</span>
          <span class="ts-text">Head to Timesheet Summary to export the daily report as CSV or PDF.</span>
        </div>
 
      </div><!-- /ts-scroll-body -->
    </div><!-- /training-transcript-card -->
  </div><!-- /training-transcript-col -->
 
</div><!-- /training-content-grid -->
</div><!-- /training-page-wrap -->

Revision as of 04:10, 22 April 2026

<templatestyles src="Template:TrainingVideo/styles.css" />

Training ⏱ Updated
Overview
No summary provided.
<video controls preload="metadata" class="training-video-player"><source src="" type="video/mp4" />Your browser does not support HTML5 video.</video>
0:00 / --:--
Training Video
✓ Key Points
No key points provided.
🔗 See Also
No related pages.
📋 Transcript Click any line to jump
0:17 Welcome to Quick Access. This panel is available from every screen via the toolbar at the top right.
0:48 Click In & Out Board to open the attendance log. Staff are listed alphabetically.
1:27 To mark a staff member as arrived, click their name and select Check In. The timestamp records automatically.
2:10 Departures follow the same process — open the board and select Check Out.
2:51 The Timesheets tab now shows today's entries, populated automatically from the board.
3:32 To correct an entry, re-open the board, click the record, and choose Edit Record.
4:07 Head to Timesheet Summary to export the daily report as CSV or PDF.
Retrieved from "https://prsdigital.com.au/wiki/index.php?title=Template:TrainingVideo&oldid=673"