@tomorrowos/sdk 1.1.5 → 1.1.7

package/templates/cms-starter/public/panel.css

@@ -1144,3 +1144,359 @@ button.danger {
   justify-content: center;
   margin-top: 1.15rem;
 }
+
+.playlist-item-rule-summary {
+  margin: 0 0 0.45rem;
+  font-size: 0.75rem;
+  color: #444;
+  white-space: pre-line;
+}
+
+.playlist-item-add-rule {
+  width: 100%;
+  margin-bottom: 0.45rem;
+}
+
+.tag-rule-modal-card {
+  width: min(92vw, 480px);
+  padding: 0;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.tag-rule-modal-body {
+  overflow: auto;
+  padding: 1.25rem;
+  min-height: 0;
+}
+
+.tag-rule-modal-actions {
+  justify-content: flex-end;
+  margin-top: 0.35rem;
+}
+
+.tag-rule-divider {
+  border: 0;
+  border-top: 1px solid #e4e4e7;
+  margin: 1.15rem 0 1rem;
+}
+
+.item-schedule-heading {
+  margin-top: 0;
+}
+
+.item-schedule-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.65rem 0.85rem;
+  margin: 0.75rem 0;
+}
+
+.item-schedule-grid label {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  font-size: 0.8rem;
+  color: #444;
+}
+
+.item-schedule-grid input {
+  font: inherit;
+  padding: 0.4rem 0.45rem;
+  border: 1px solid #d4d4d8;
+  border-radius: 8px;
+  background: #fff;
+}
+
+.item-schedule-repeats {
+  margin: 0.15rem 0 0.4rem;
+  font-size: 0.8rem;
+  color: #444;
+}
+
+.item-schedule-days {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.35rem;
+}
+
+.item-schedule-day {
+  padding: 0.3rem 0.45rem;
+  font-size: 0.78rem;
+  border-radius: 999px;
+}
+
+.item-schedule-day.is-on {
+  background: var(--brand-primary);
+  border-color: color-mix(in srgb, var(--brand-primary) 82%, #000);
+}
+
+.tag-rule-modal-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+
+.tag-rule-modal-header h2 {
+  margin: 0;
+  font-size: 1.15rem;
+}
+
+.tag-rule-close {
+  border: 0;
+  background: transparent;
+  font-size: 1.4rem;
+  line-height: 1;
+  padding: 0 0.15rem;
+  cursor: pointer;
+  color: #444;
+}
+
+.tag-rule-asset-name {
+  margin: 0.35rem 0 1rem;
+  color: #6b7280;
+  font-size: 0.92rem;
+  word-break: break-all;
+}
+
+.tag-rule-section {
+  margin: 0 0 0.35rem;
+  font-size: 1rem;
+}
+
+.tag-rule-sentence {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.4rem;
+  margin: 0.85rem 0 0.75rem;
+  font-size: 0.95rem;
+}
+
+.tag-rule-sentence select {
+  font: inherit;
+  padding: 0.28rem 0.4rem;
+  border: 1px solid #d4d4d8;
+  border-radius: 8px;
+  background: #fff;
+}
+
+.tag-rule-selected {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.35rem;
+  margin-bottom: 0.55rem;
+}
+
+.tag-rule-selected:empty {
+  display: none;
+}
+
+.tag-rule-add {
+  position: relative;
+}
+
+.tag-rule-add input {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0.7rem 0.8rem;
+  border: 1px solid #d4d4d8;
+  border-radius: 10px;
+  font: inherit;
+  font-size: 0.95rem;
+}
+
+.tag-rule-options {
+  position: absolute;
+  z-index: 2;
+  left: 0;
+  right: 0;
+  top: calc(100% + 4px);
+  margin: 0;
+  padding: 0.25rem 0;
+  list-style: none;
+  background: #fff;
+  border: 1px solid #e4e4e7;
+  border-radius: 10px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
+  max-height: 180px;
+  overflow: auto;
+}
+
+.tag-rule-options button {
+  display: block;
+  width: 100%;
+  text-align: left;
+  border: 0;
+  background: transparent;
+  padding: 0.45rem 0.75rem;
+  font: inherit;
+  cursor: pointer;
+}
+
+.tag-rule-options button:hover,
+.tag-rule-options button:focus {
+  background: #f4f4f5;
+}
+
+.playlist-item-rule {
+  display: grid;
+  gap: 0.35rem;
+  margin: 0.45rem 0 0.55rem;
+}
+
+.playlist-item-rule-label {
+  display: grid;
+  gap: 0.25rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+
+.playlist-item-rule-op,
+.playlist-item-rule-tags,
+.device-tag-add input,
+#screenTagFilter {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0.4rem 0.5rem;
+  border: 1px solid #d6d3ce;
+  border-radius: 6px;
+  font: inherit;
+  font-size: 0.8rem;
+  background: #fff;
+}
+
+.device-tags {
+  margin-top: 0.75rem;
+  padding-top: 0.75rem;
+  border-top: 1px solid #e4e1dc;
+}
+
+.device-tags-label {
+  font-size: 0.75rem;
+  font-weight: 600;
+  margin-bottom: 0.35rem;
+}
+
+.device-tag-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.35rem;
+  margin-bottom: 0.45rem;
+}
+
+.device-tag-empty {
+  font-size: 0.75rem;
+  color: #71717a;
+}
+
+.device-tag-chip {
+  border: 1px solid #d6d3ce;
+  background: #fff;
+  border-radius: 999px;
+  padding: 0.15rem 0.55rem;
+  font-size: 0.75rem;
+  cursor: pointer;
+}
+
+.device-tag-add {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.4rem;
+  margin-bottom: 0.85rem;
+}
+
+.device-tag-add > button {
+  padding: 0.4rem 0.65rem;
+  font-size: 0.8rem;
+  line-height: normal;
+  border-radius: 6px;
+}
+
+.device-tag-add input {
+  flex: 1 1 8rem;
+  width: auto;
+}
+
+#pairedDevicesSection > .field-label,
+.screen-tag-toolbar .field-label {
+  display: grid;
+  gap: 0.3rem;
+  margin: 0;
+  max-width: 18rem;
+  font-size: 0.85rem;
+  font-weight: 600;
+}
+
+.screen-tag-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  gap: 0.75rem;
+  margin: 0.75rem 0 1rem;
+}
+
+.manage-tag-list {
+  list-style: none;
+  margin: 0.75rem 0;
+  padding: 0;
+  display: grid;
+  gap: 0.4rem;
+}
+
+.manage-tag-row {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+
+.manage-tag-row > span {
+  flex: 1;
+  min-width: 0;
+  word-break: break-all;
+}
+
+.manage-tag-rename,
+.manage-tag-create input {
+  flex: 1;
+  min-width: 0;
+  box-sizing: border-box;
+  padding: 0.4rem 0.5rem;
+  border: 1px solid #d4d4d8;
+  border-radius: 8px;
+  font: inherit;
+}
+
+.manage-tag-create {
+  display: flex;
+  gap: 0.4rem;
+}
+
+.manage-tag-empty {
+  color: #71717a;
+  font-size: 0.85rem;
+}
+
+.manage-tag-error {
+  min-height: 1.2em;
+  margin: 0.6rem 0 0;
+  color: #b42318;
+  font-size: 0.85rem;
+}
+
+.device-tag-picker {
+  position: relative;
+  flex: 1 1 8rem;
+  min-width: 0;
+}
+
+.device-tag-picker input {
+  width: 100%;
+}
+
+.device-tag-picker .tag-rule-options {
+  z-index: 5;
+}

package/templates/cms-starter-v0/cms-panel/index.html

@@ -58,6 +58,16 @@
 
         <section class="card" id="pairedDevicesSection">
           <h2>Paired devices</h2>
+          <p class="hint">
+            Screen tags choose which playlist items this screen plays. Adding or removing a tag updates the screen on its own — publish the playlist again only when you first assign it.
+          </p>
+          <div class="screen-tag-toolbar">
+            <label class="field-label">
+              Show screens with tag
+              <input id="screenTagFilter" type="text" placeholder="screen-a" autocomplete="off" />
+            </label>
+            <button type="button" id="manageTagsBtn">Manage tags</button>
+          </div>
           <div id="devicesGrid" class="devices-grid">
             <p class="devices-empty" id="devicesEmpty">No paired devices yet.</p>
           </div>
@@ -129,7 +139,9 @@
           <h2>Assets</h2>
           <button type="button" class="primary" id="addAssetBtn" title="Add image or video">+</button>
         </div>
-        <p class="hint playlist-assets-hint">Drag ⋮⋮ to reorder assets. Save playlist to keep the new order.</p>
+        <p class="hint playlist-assets-hint">
+          Drag ⋮⋮ to reorder. Add rule chooses which screens and which times play that asset. No tags means every screen. No schedule means all the time. Save the playlist to apply.
+        </p>
         <input
           type="file"
           id="fileInput"
@@ -150,6 +162,79 @@
       </aside>
     </div>
 
+    <div id="manageTagsModal" class="modal hidden" role="dialog" aria-modal="true" aria-labelledby="manageTagsTitle">
+      <div class="modal-backdrop" data-close-manage-tags="1"></div>
+      <div class="modal-card tag-rule-modal-card">
+        <div class="tag-rule-modal-body">
+        <div class="tag-rule-modal-header">
+          <h2 id="manageTagsTitle">Tags</h2>
+          <button type="button" class="tag-rule-close" data-close-manage-tags="1" aria-label="Close">×</button>
+        </div>
+        <p class="hint">A tag that is still selected on a screen or an asset cannot be deleted.</p>
+        <ul id="manageTagList" class="manage-tag-list"></ul>
+        <div class="manage-tag-create">
+          <input id="manageTagInput" type="text" placeholder="New tag" autocomplete="off" />
+          <button type="button" id="manageTagAddBtn" class="primary">Add tag</button>
+        </div>
+        <p id="manageTagError" class="manage-tag-error"></p>
+        </div>
+      </div>
+    </div>
+
+    <div id="tagRuleModal" class="modal hidden" role="dialog" aria-modal="true" aria-labelledby="tagRuleTitle">
+      <div class="modal-backdrop" data-close-tag-rule-modal="1"></div>
+      <div class="modal-card tag-rule-modal-card">
+        <div class="tag-rule-modal-body">
+        <div class="tag-rule-modal-header">
+          <h2 id="tagRuleTitle">Where and when it plays</h2>
+          <button type="button" class="tag-rule-close" data-close-tag-rule-modal="1" aria-label="Close">×</button>
+        </div>
+        <p class="tag-rule-asset-name" id="tagRuleAssetName"></p>
+        <h3 class="tag-rule-section">Screens</h3>
+        <p class="hint">No tags means it plays on every screen of the playlist.</p>
+        <p class="tag-rule-sentence">
+          <span>Play on screens with</span>
+          <select id="tagRuleMatch" aria-label="Tag match">
+            <option value="any">any of</option>
+            <option value="all">all of</option>
+            <option value="notAll">not all of</option>
+            <option value="notAny">none of</option>
+          </select>
+          <span>these tags</span>
+        </p>
+        <div id="tagRuleSelected" class="tag-rule-selected"></div>
+        <div class="tag-rule-add">
+          <input id="tagRuleAddInput" type="text" placeholder="Add a tag" autocomplete="off" />
+          <ul id="tagRuleOptions" class="tag-rule-options hidden" role="listbox"></ul>
+        </div>
+        <hr class="tag-rule-divider" />
+        <h3 class="tag-rule-section item-schedule-heading">Schedule</h3>
+        <p class="hint">Leave a field blank for no limit. If the end time is earlier than the start time, playback continues past midnight.</p>
+        <div class="item-schedule-grid">
+          <label>From date<input type="date" id="itemScheduleStartDate" /></label>
+          <label>Until date<input type="date" id="itemScheduleEndDate" /></label>
+          <label>From time<input type="time" id="itemScheduleStartTime" /></label>
+          <label>Until time<input type="time" id="itemScheduleEndTime" /></label>
+        </div>
+        <p class="item-schedule-repeats">Repeats on</p>
+        <div class="item-schedule-days" role="group" aria-label="Days, Monday through Sunday">
+          <button type="button" class="item-schedule-day is-on" data-item-schedule-day="0" aria-pressed="true">Mon</button>
+          <button type="button" class="item-schedule-day is-on" data-item-schedule-day="1" aria-pressed="true">Tue</button>
+          <button type="button" class="item-schedule-day is-on" data-item-schedule-day="2" aria-pressed="true">Wed</button>
+          <button type="button" class="item-schedule-day is-on" data-item-schedule-day="3" aria-pressed="true">Thu</button>
+          <button type="button" class="item-schedule-day is-on" data-item-schedule-day="4" aria-pressed="true">Fri</button>
+          <button type="button" class="item-schedule-day is-on" data-item-schedule-day="5" aria-pressed="true">Sat</button>
+          <button type="button" class="item-schedule-day is-on" data-item-schedule-day="6" aria-pressed="true">Sun</button>
+        </div>
+        <p id="itemScheduleError" class="manage-tag-error"></p>
+        <div class="modal-actions tag-rule-modal-actions">
+          <button type="button" id="tagRuleCancelBtn">Cancel</button>
+          <button type="button" id="tagRuleApplyBtn" class="primary">Apply</button>
+        </div>
+        </div>
+      </div>
+    </div>
+
     <div id="publishModal" class="modal hidden" role="dialog" aria-modal="true">
       <div class="modal-backdrop" data-close-modal="1"></div>
       <div class="modal-card">