implement data model binding

This commit is contained in:
2026-01-16 08:12:11 +01:00
parent 67b337b84e
commit ac5ca2beb6
18 changed files with 1219 additions and 551 deletions

View File

@@ -83,6 +83,7 @@
border-radius: 12px;
background-color: #666666;
position: relative;
cursor: pointer;
}
.settings-toggle.active {
@@ -147,7 +148,7 @@
}
</style>
</head>
<body class="settings-screen">
<body class="settings-screen" data-model="settings">
<!-- App Bar -->
<div class="app-bar">
<div class="btn-icon" onclick="goBack()"><img src="../icons/back.tga" style="width: 24px; height: 24px;"/></div>
@@ -161,8 +162,8 @@
<div class="user-card">
<div class="user-avatar">U</div>
<div class="user-info">
<div class="user-name">User Name</div>
<div class="user-email">user@example.com</div>
<div class="user-name">{{ user_name }}</div>
<div class="user-email">{{ user_email }}</div>
</div>
<span class="settings-action">></span>
</div>
@@ -174,9 +175,10 @@
<div class="settings-icon">W</div>
<div class="settings-content">
<div class="settings-title">Wi-Fi</div>
<div class="settings-subtitle">Connected to Home_Network</div>
<div class="settings-subtitle" data-if="wifi">Connected to {{ wifi_network }}</div>
<div class="settings-subtitle" data-if="!wifi">Off</div>
</div>
<div class="settings-toggle active">
<div class="settings-toggle" data-class-active="wifi" data-event-click="wifi = !wifi">
<div class="settings-toggle-thumb"></div>
</div>
</div>
@@ -184,9 +186,10 @@
<div class="settings-icon">B</div>
<div class="settings-content">
<div class="settings-title">Bluetooth</div>
<div class="settings-subtitle">Off</div>
<div class="settings-subtitle" data-if="bluetooth">On</div>
<div class="settings-subtitle" data-if="!bluetooth">Off</div>
</div>
<div class="settings-toggle">
<div class="settings-toggle" data-class-active="bluetooth" data-event-click="bluetooth = !bluetooth">
<div class="settings-toggle-thumb"></div>
</div>
</div>
@@ -195,7 +198,7 @@
<div class="settings-content">
<div class="settings-title">Airplane Mode</div>
</div>
<div class="settings-toggle">
<div class="settings-toggle" data-class-active="airplane_mode" data-event-click="airplane_mode = !airplane_mode">
<div class="settings-toggle-thumb"></div>
</div>
</div>
@@ -232,7 +235,7 @@
<div class="settings-icon">B</div>
<div class="settings-content">
<div class="settings-title">Battery</div>
<div class="settings-subtitle">85% - About 12h remaining</div>
<div class="settings-subtitle">{{ battery_percent }}% - {{ battery_remaining }}</div>
</div>
<span class="settings-action">></span>
</div>
@@ -240,7 +243,7 @@
<div class="settings-icon">S</div>
<div class="settings-content">
<div class="settings-title">Storage</div>
<div class="settings-subtitle">45.2 GB used of 128 GB</div>
<div class="settings-subtitle">{{ storage_used }}</div>
</div>
<span class="settings-action">></span>
</div>
@@ -269,9 +272,10 @@
<div class="settings-icon">L</div>
<div class="settings-content">
<div class="settings-title">Location</div>
<div class="settings-subtitle">On - High accuracy</div>
<div class="settings-subtitle" data-if="location">On - High accuracy</div>
<div class="settings-subtitle" data-if="!location">Off</div>
</div>
<div class="settings-toggle active">
<div class="settings-toggle" data-class-active="location" data-event-click="location = !location">
<div class="settings-toggle-thumb"></div>
</div>
</div>