feat: add panel_orientation field to DisplayType

eink/backend/database.py

@@ -256,6 +256,14 @@ async def ensure_schema_up_to_date(conn):
             )
         )
 
+    if "panel_orientation" not in columns:
+        await conn.execute(
+            text(
+                "ALTER TABLE display_types ADD COLUMN panel_orientation VARCHAR "
+                "DEFAULT 'landscape'"
+            )
+        )
+
     # Check 'layouts' table for recently added columns
     result = await conn.execute(text("PRAGMA table_info(layouts)"))
     columns = [row[1] for row in result.fetchall()]

eink/backend/handlers/items.py

@@ -17,6 +17,7 @@ def model_to_dict(self, item):
             include_fields={
                 "id",
                 "name",
+                "panel_orientation",
                 "width_mm",
                 "height_mm",
                 "panel_width_mm",

eink/backend/models.py

@@ -126,6 +126,7 @@ class DisplayType(Base):
 
     id = Column(String, primary_key=True)
     name = Column(String, nullable=False)
+    panel_orientation = Column(String, nullable=False, default="landscape")
     width_mm = Column(Integer, nullable=False)
     height_mm = Column(Integer, nullable=False)
     panel_width_mm = Column(Integer, nullable=False)

eink/frontend/src/components/dialogs/scene-item-settings-dialog.test.ts

@@ -30,6 +30,7 @@ describe('SceneItemSettingsDialog', () => {
   const mockDisplayTypes = [{ 
     id: 'dt1', 
     name: '7.5in', 
+    panel_orientation: 'landscape',
     width_px: 800, height_px: 480,
     width_mm: 160, height_mm: 100,
     colour_type: 'BW'
@@ -108,6 +109,7 @@ describe('SceneItemSettingsDialog', () => {
     const customDisplayTypes = [{ 
       id: 'dt1', 
       name: 'Custom', 
+      panel_orientation: 'landscape',
       width_px: 1000, height_px: 500,
       width_mm: 100, height_mm: 50,
       panel_width_mm: 100, panel_height_mm: 50,

eink/frontend/src/components/layout/layout-editor.test.ts

@@ -30,6 +30,7 @@ describe('LayoutEditor', () => {
   const mockDisplayTypes = [
     { 
         id: 'dt1', 
+        panel_orientation: 'landscape',
         width_mm: 100, 
         height_mm: 100,
         panel_width_mm: 90,

eink/frontend/src/components/views/display-types-view.test.ts

@@ -9,6 +9,7 @@ describe('DisplayTypesView', () => {
     {
       id: 'dt1',
       name: 'Display 1',
+      panel_orientation: 'landscape',
       width_mm: 200,
       height_mm: 150,
       panel_width_mm: 180,
@@ -22,6 +23,7 @@ describe('DisplayTypesView', () => {
     {
       id: 'dt2',
       name: 'Display 2',
+      panel_orientation: 'landscape',
       width_mm: 100,
       height_mm: 100,
       panel_width_mm: 80,

eink/frontend/src/components/views/display-types-view.ts

@@ -224,6 +224,7 @@ export class DisplayTypesView extends BaseResourceView {
     return {
       id: '',
       name: '',
+      panel_orientation: 'landscape',
       width_mm: 0,
       height_mm: 0,
       panel_width_mm: 0,
@@ -455,15 +456,24 @@ export class DisplayTypesView extends BaseResourceView {
           ` : html`
             ${this.viewMode === 'graphical' ? html`
               <form id="display-type-form" @submit="${this._handleSubmit}" @input="${() => { this.requestUpdate(); this._updateDirtyState(); }}">
-                <div class="form-group">
-                  <label>Identifier/Name</label>
-                  <input 
-                    type="text" 
-                    required 
-                    .value="${live(this.displayType?.name || '')}"
-                    @input="${(e: any) => this.displayType!.name = e.target.value}"
-                    placeholder="e.g. Living Room Display"
-                  >
+                <div class="row">
+                  <div class="form-group">
+                    <label>Identifier/Name</label>
+                    <input 
+                      type="text" 
+                      required 
+                      .value="${live(this.displayType?.name || '')}"
+                      @input="${(e: any) => this.displayType!.name = e.target.value}"
+                      placeholder="e.g. Living Room Display"
+                    >
+                  </div>
+                  <div class="form-group">
+                    <label>Panel Orientation</label>
+                    <select .value="${live(this.displayType?.panel_orientation || 'landscape')}" @change="${(e: any) => { this.displayType!.panel_orientation = e.target.value; this.requestUpdate(); this._updateDirtyState(); }}">
+                      <option value="landscape">Landscape</option>
+                      <option value="portrait">Portrait</option>
+                    </select>
+                  </div>
                 </div>
 
                 <div class="section-header">Device Dimensions</div>

eink/frontend/src/components/views/layouts-view.test.ts

@@ -22,6 +22,7 @@ describe('LayoutsView', () => {
     {
       id: 'dt1',
       name: 'Display Type 1',
+      panel_orientation: 'landscape',
       width_mm: 100,
       height_mm: 60,
       panel_width_mm: 90,

eink/frontend/src/services/HaApiClient.ts

@@ -6,6 +6,7 @@
 export interface DisplayType {
   id: string;
   name: string;
+  panel_orientation: 'landscape' | 'portrait';
   width_mm: number;
   height_mm: number;
   panel_width_mm: number;