From 283b48b75104ecd7b116f87b4f21026f718c9227 Mon Sep 17 00:00:00 2001
From: tim000x3 <timeister@mac.com>
Date: Fri, 18 Apr 2025 06:35:17 -0400
Subject: [PATCH] Refactor program configuration modal: move optional position
 offsets to collapsible advanced options section

---
 web/public/templates/program-config.html | 126 ++++++++++++++---------
 1 file changed, 78 insertions(+), 48 deletions(-)

diff --git a/web/public/templates/program-config.html b/web/public/templates/program-config.html
index 0a40870..aad98bf 100644
--- a/web/public/templates/program-config.html
+++ b/web/public/templates/program-config.html
@@ -22,22 +22,6 @@
                         <input class="form-control form-control-sm" type="text" ng-model="program.subtitle"></input>
                         <label>Summary</label>
                         <textarea class="form-control form-control-sm" ng-model="program.summary"></textarea>
-                        <label>Start Position Offset (optional)</label>
-                        <div class="form-row mb-3">
-                            <div class="col">
-                                <input class="form-control form-control-sm" type="text" ng-model="seekPositionTime" placeholder="Min:Sec (leave blank for start of file)">
-                                <small class="form-text text-muted">Format: minutes:seconds (e.g. 5:30)</small>
-                            </div>
-                        </div>
-                        <label>End Position Offset (optional)
-                            <span class="text-danger pull-right">{{error.endPosition}}</span>
-                        </label>
-                        <div class="form-row mb-3">
-                            <div class="col">
-                                <input class="form-control form-control-sm" type="text" ng-model="endPositionTime" placeholder="Min:Sec (leave blank for end of file)">
-                                <small class="form-text text-muted">Format: minutes:seconds (e.g. 10:45)</small>
-                            </div>
-                        </div>
                         <label>Rating</label>
                         <input class="form-control form-control-sm" type="text" ng-model="program.rating"></input>
                         <label>Icon</label>
@@ -46,6 +30,32 @@
                         <div class="text-center">
                             <img class="img" ng-src="{{program.icon}}" style="max-width: 200px;"></img>
                         </div>
+                        
+                        <div class="card mt-3">
+                            <div class="card-header" ng-click="trackAdvancedOpen = !trackAdvancedOpen" style="cursor: pointer;">
+                                <h6 class="mb-0">Advanced Options <i class="float-right" ng-class="{'fa fa-chevron-down': !trackAdvancedOpen, 'fa fa-chevron-up': trackAdvancedOpen}"></i></h6>
+                            </div>
+                            <div class="collapse" ng-class="{'show': trackAdvancedOpen}">
+                                <div class="card-body">
+                                    <label>Start Position Offset (optional)</label>
+                                    <div class="form-row mb-3">
+                                        <div class="col">
+                                            <input class="form-control form-control-sm" type="text" ng-model="seekPositionTime" placeholder="Min:Sec (leave blank for start of file)">
+                                            <small class="form-text text-muted">Format: minutes:seconds (e.g. 5:30)</small>
+                                        </div>
+                                    </div>
+                                    <label>End Position Offset (optional)
+                                        <span class="text-danger pull-right">{{error.endPosition}}</span>
+                                    </label>
+                                    <div class="form-row mb-3">
+                                        <div class="col">
+                                            <input class="form-control form-control-sm" type="text" ng-model="endPositionTime" placeholder="Min:Sec (leave blank for end of file)">
+                                            <small class="form-text text-muted">Format: minutes:seconds (e.g. 10:45)</small>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
                     </div>
                     <div ng-if="program.type === 'movie'">
                         <label>Movie Title
@@ -56,22 +66,6 @@
                         <input class="form-control form-control-sm" type="text" ng-model="program.subtitle"></input>
                         <label>Summary</label>
                         <textarea class="form-control form-control-sm" ng-model="program.summary"></textarea>
-                        <label>Start Position Offset (optional)</label>
-                        <div class="form-row mb-3">
-                            <div class="col">
-                                <input class="form-control form-control-sm" type="text" ng-model="seekPositionTime" placeholder="Min:Sec (leave blank for start of file)">
-                                <small class="form-text text-muted">Format: minutes:seconds (e.g. 5:30)</small>
-                            </div>
-                        </div>
-                        <label>End Position Offset (optional)
-                            <span class="text-danger pull-right">{{error.endPosition}}</span>
-                        </label>
-                        <div class="form-row mb-3">
-                            <div class="col">
-                                <input class="form-control form-control-sm" type="text" ng-model="endPositionTime" placeholder="Min:Sec (leave blank for end of file)">
-                                <small class="form-text text-muted">Format: minutes:seconds (e.g. 10:45)</small>
-                            </div>
-                        </div>
                         <label>Rating</label>
                         <input class="form-control form-control-sm" type="text" ng-model="program.rating"></input>
                         <label>Icon</label>
@@ -80,6 +74,32 @@
                         <div class="text-center">
                             <img class="img" ng-src="{{program.icon}}" style="max-width: 200px;"></img>
                         </div>
+                        
+                        <div class="card mt-3">
+                            <div class="card-header" ng-click="movieAdvancedOpen = !movieAdvancedOpen" style="cursor: pointer;">
+                                <h6 class="mb-0">Advanced Options <i class="float-right" ng-class="{'fa fa-chevron-down': !movieAdvancedOpen, 'fa fa-chevron-up': movieAdvancedOpen}"></i></h6>
+                            </div>
+                            <div class="collapse" ng-class="{'show': movieAdvancedOpen}">
+                                <div class="card-body">
+                                    <label>Start Position Offset (optional)</label>
+                                    <div class="form-row mb-3">
+                                        <div class="col">
+                                            <input class="form-control form-control-sm" type="text" ng-model="seekPositionTime" placeholder="Min:Sec (leave blank for start of file)">
+                                            <small class="form-text text-muted">Format: minutes:seconds (e.g. 5:30)</small>
+                                        </div>
+                                    </div>
+                                    <label>End Position Offset (optional)
+                                        <span class="text-danger pull-right">{{error.endPosition}}</span>
+                                    </label>
+                                    <div class="form-row mb-3">
+                                        <div class="col">
+                                            <input class="form-control form-control-sm" type="text" ng-model="endPositionTime" placeholder="Min:Sec (leave blank for end of file)">
+                                            <small class="form-text text-muted">Format: minutes:seconds (e.g. 10:45)</small>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
                     </div>
                     <div ng-if="program.type === 'episode'">
                         <label>Show Title
@@ -100,22 +120,6 @@
                         <input class="form-control form-control-sm" type="number" ng-model="program.episode"></input>
                         <label>Summary</label>
                         <textarea class="form-control form-control-sm" ng-model="program.summary"></textarea>
-                        <label>Start Position Offset (optional)</label>
-                        <div class="form-row mb-3">
-                            <div class="col">
-                                <input class="form-control form-control-sm" type="text" ng-model="seekPositionTime" placeholder="Min:Sec (leave blank for start of file)">
-                                <small class="form-text text-muted">Format: minutes:seconds (e.g. 5:30)</small>
-                            </div>
-                        </div>
-                        <label>End Position Offset (optional)
-                            <span class="text-danger pull-right">{{error.endPosition}}</span>
-                        </label>
-                        <div class="form-row mb-3">
-                            <div class="col">
-                                <input class="form-control form-control-sm" type="text" ng-model="endPositionTime" placeholder="Min:Sec (leave blank for end of file)">
-                                <small class="form-text text-muted">Format: minutes:seconds (e.g. 10:45)</small>
-                            </div>
-                        </div>
                         <label>Rating</label>
                         <input class="form-control form-control-sm" type="text" ng-model="program.rating"></input>
                         <label>Icon</label>
@@ -142,6 +146,32 @@
                                 </div>
                             </div>
                         </div>
+                        
+                        <div class="card mt-3">
+                            <div class="card-header" ng-click="episodeAdvancedOpen = !episodeAdvancedOpen" style="cursor: pointer;">
+                                <h6 class="mb-0">Advanced Options <i class="float-right" ng-class="{'fa fa-chevron-down': !episodeAdvancedOpen, 'fa fa-chevron-up': episodeAdvancedOpen}"></i></h6>
+                            </div>
+                            <div class="collapse" ng-class="{'show': episodeAdvancedOpen}">
+                                <div class="card-body">
+                                    <label>Start Position Offset (optional)</label>
+                                    <div class="form-row mb-3">
+                                        <div class="col">
+                                            <input class="form-control form-control-sm" type="text" ng-model="seekPositionTime" placeholder="Min:Sec (leave blank for start of file)">
+                                            <small class="form-text text-muted">Format: minutes:seconds (e.g. 5:30)</small>
+                                        </div>
+                                    </div>
+                                    <label>End Position Offset (optional)
+                                        <span class="text-danger pull-right">{{error.endPosition}}</span>
+                                    </label>
+                                    <div class="form-row mb-3">
+                                        <div class="col">
+                                            <input class="form-control form-control-sm" type="text" ng-model="endPositionTime" placeholder="Min:Sec (leave blank for end of file)">
+                                            <small class="form-text text-muted">Format: minutes:seconds (e.g. 10:45)</small>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
                     </div>
                 </div>
                 <div class="modal-footer">