Add color hexcodes to old devices

oursky · May 28, 2024 · 895a971 · 895a971
2 parents 138de71 + 2e5ebf9
commit 895a971
Show file tree

Hide file tree

Showing 10 changed files with 230 additions and 269 deletions.
diff --git a/src/pages/model/[model]/color/[color].astro b/src/pages/model/[model]/color/[color].astro
@@ -4,7 +4,7 @@ import "/src/styles/upload.css";
 import "/src/styles/pyscript.css";
 import deviceJson from "../../../../scripts/device_info.json";
 import { DEVICE_MANAGER } from "../../../../scripts/deviceManager";
-import type { Device } from "../../../../scripts/model";
+import type { Device, ModelValue } from "../../../../scripts/model";
 import ErrorPage from "../../../../components/ErrorPage.astro";
 import { ModelEnum } from "../../../../scripts/parse";
 
@@ -20,8 +20,8 @@ export async function getStaticPaths() {
       DEVICE_MANAGER.getDeviceListByModel(_modelId);
     allModelDevices.forEach((d: Device) => {
       const modelColorInfo = {
-        params: { model: _modelId, color: d.color.id },
-        props: { targetModel: _modelId, targetColor: d.color.id },
+        params: { model: _modelId, color: d.color?.id ?? "default" },
+        props: { targetModel: _modelId, targetColor: d.color?.id ?? "default" },
       };
       modelColorAll.push(modelColorInfo);
     });
@@ -40,7 +40,9 @@ const deviceDetail: Device | undefined = DEVICE_MANAGER.getModelColorDevice(
 const sameModelDevices: Device[] =
   DEVICE_MANAGER.getDeviceListByModel(_targetModel);
 
-if (deviceDetail == null) {
+const model: ModelValue | undefined = DEVICE_MANAGER.getModel(_targetModel);
+
+if (deviceDetail == null || model == null) {
   return Astro.redirect("/404");
 }
 ---
@@ -104,8 +106,7 @@ if (deviceDetail == null) {
   <div class="mockup-content">
     <div class="mockup-lg-left">
       <header class="device-header">
-        <h2 class="device-header__name">{deviceDetail.name}</h2>
-        <p class="device-header__desc">{deviceDetail.desc}</p>
+        <h2 class="device-header__name">{model.name}</h2>
       </header>
       <div class="device">
         <div class="upload__inner-box">
@@ -145,30 +146,37 @@ if (deviceDetail == null) {
           }px, We support jpg, png and psd
         </p>
         <ul class="file-list"></ul>
-        <div class="color-section">
-          <h3 class="color-section__heading">COLOR</h3>
-          <p class="color-section__description">{deviceDetail.color.name}</p>
-          <div class="color-picker-scrollable">
-            <ul class="color-picker">
-              {
-                sameModelDevices.map((d) => (
-                  <li class="color-picker-item-container">
-                    <a
-                      href={`/model/${targetModel}/color/${d.color.id}`}
-                      style={{ backgroundColor: d.color.hexcode }}
-                      class={`color-picker-item ${
-                        d.color.id === targetColor
-                          ? "color-picker-item--selected"
-                          : ""
-                      }`}
-                      data-tippy-content={d.color.name}
-                    />
-                  </li>
-                ))
-              }
-            </ul>
-          </div>
-        </div>
+        {
+          deviceDetail.color == null ? undefined : (
+            <div class="color-section">
+              <h3 class="color-section__heading">COLOR</h3>
+              <p class="color-section__description">
+                {deviceDetail.color.name}
+              </p>
+              <div class="color-picker-scrollable">
+                <ul class="color-picker">
+                  {sameModelDevices.map((d) =>
+                    d.color == null ? undefined : (
+                      <li class="color-picker-item-container">
+                        <a
+                          href={`/model/${targetModel}/color/${d.color.id}`}
+                          style={{ backgroundColor: d.color.hexcode }}
+                          class={`color-picker-item ${
+                            d.color.id === targetColor
+                              ? "color-picker-item--selected"
+                              : ""
+                          }`}
+                          data-tippy-content={d.color.name}
+                        />
+                      </li>
+                    ),
+                  )}
+                </ul>
+              </div>
+            </div>
+          )
+        }
+
         <button disabled class="generate-btn">Generate product mockups</button>
         <button style="display:none" class="start-mockup-btn"
           >Generate product mockups</button

diff --git a/src/pages/type/[type].astro b/src/pages/type/[type].astro
@@ -217,15 +217,6 @@ const brandList: string[] = ["all", ...nonEmptyBrands];
                             )}
                             <div class="device-grid__hover-blur d-none" />
                             <div class="device-grid__overlay d-none">
-                              <header class="device-grid__overlay-header">
-                                <h3 class="device-grid__overlay-device-name">
-                                  {thumbnail.device.short_name ??
-                                    thumbnail.device.name}
-                                </h3>
-                                <p class="device-grid__overlay-device-desc">
-                                  {thumbnail.device.desc}
-                                </p>
-                              </header>
                               <button class="device-grid__overlay-pick-btn">
                                 Pick it
                               </button>

diff --git a/src/scripts/brand.json b/src/scripts/brand.json
@@ -41,7 +41,9 @@
     "galaxy-s-duos",
     "galaxy-s4",
     "galaxy-note-5",
-    "galaxy-y"
+    "galaxy-y",
+    "samsung-tv-d8000",
+    "samsung-tv-es8000"
   ],
   "dell": ["dell-xps-13", "dell-xps-15"],
   "lg": ["lg-55lw5600", "lg-tm2792"],

diff --git a/src/scripts/deviceManager.ts b/src/scripts/deviceManager.ts
@@ -35,12 +35,21 @@ export class DeviceManager {
     return undefined;
   }
 
+  public getModel(modelId: ModelEnum): model.ModelValue | undefined {
+    return this.allDeviceModels[modelId];
+  }
+
   public getModelColorDevice(
     modelId: ModelEnum,
-    colorId: string,
+    colorId: string | "default",
   ): model.Device | undefined {
     const devices = this.getDeviceListByModel(modelId);
-    const result = devices.filter((d) => d.color.id === colorId);
+    const result = devices.filter((d) => {
+      const matchDefault = d.color == null && colorId === "default";
+      const matchColorId = d.color != null && d.color.id === colorId;
+
+      return matchDefault || matchColorId;
+    });
     if (result.length === 0) {
       return undefined;
     }