Improve homepage demo list

Cargo.lock

@@ -52,6 +52,21 @@ dependencies = [
  "tracing-test",
 ]
 
+[[package]]
+name = "android-tzdata"
+version = "0.1.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e999941b234f3131b00bc13c22d06e8c5ff726d1b6318ac7eb276997bbb4fef0"
+
+[[package]]
+name = "android_system_properties"
+version = "0.1.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "819e7219dbd41043ac279b19830f2efc897156490d7fd6ea916720117ee66311"
+dependencies = [
+ "libc",
+]
+
 [[package]]
 name = "anstream"
 version = "0.6.15"
@@ -275,6 +290,7 @@ dependencies = [
  "async-trait",
  "axum",
  "base64 0.22.1",
+ "chrono",
  "clap",
  "common",
  "csdemo",
@@ -433,6 +449,21 @@ version = "1.0.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "baf1de4339761588bc0619e3cbc0120ee582ebb74b53b4efbf79117bd2da40fd"
 
+[[package]]
+name = "chrono"
+version = "0.4.38"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a21f936df1771bf62b77f047b726c4625ff2e8aa607c01ec06e5a05bd8463401"
+dependencies = [
+ "android-tzdata",
+ "iana-time-zone",
+ "js-sys",
+ "num-traits",
+ "serde",
+ "wasm-bindgen",
+ "windows-targets 0.52.6",
+]
+
 [[package]]
 name = "ciborium"
 version = "0.2.2"
@@ -528,6 +559,7 @@ checksum = "9226dbc05df4fb986f48d730b001532580883c4c06c5d1c213f4b34c1c157178"
 name = "common"
 version = "0.1.0"
 dependencies = [
+ "chrono",
  "serde",
 ]
 
@@ -751,6 +783,7 @@ checksum = "158fe8e2e68695bd615d7e4f3227c0727b151330d3e253b525086c348d055d5e"
 dependencies = [
  "bitflags 2.6.0",
  "byteorder",
+ "chrono",
  "diesel_derives",
  "itoa",
  "serde_json",
@@ -1420,6 +1453,29 @@ dependencies = [
  "tracing",
 ]
 
+[[package]]
+name = "iana-time-zone"
+version = "0.1.61"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "235e081f3925a06703c2d0117ea8b91f042756fd6e7a6e5d901e8ca1a996b220"
+dependencies = [
+ "android_system_properties",
+ "core-foundation-sys",
+ "iana-time-zone-haiku",
+ "js-sys",
+ "wasm-bindgen",
+ "windows-core",
+]
+
+[[package]]
+name = "iana-time-zone-haiku"
+version = "0.1.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f31827a206f56af32e590ba56d5d2d085f558508192593743f16b2306495269f"
+dependencies = [
+ "cc",
+]
+
 [[package]]
 name = "ident_case"
 version = "1.0.1"
@@ -4209,6 +4265,15 @@ version = "0.4.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "712e227841d057c1ee1cd2fb22fa7e5a5461ae8e48fa2ca79ec42cfc1931183f"
 
+[[package]]
+name = "windows-core"
+version = "0.52.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "33ab640c8d7e35bf8ba19b884ba838ceb4fba93a4e8c65a9059d08afcfc683d9"
+dependencies = [
+ "windows-targets 0.52.6",
+]
+
 [[package]]
 name = "windows-registry"
 version = "0.2.0"

backend/Cargo.toml

@@ -16,7 +16,7 @@ tracing = { version = "0.1.40", features = ["async-await"] }
 tracing-subscriber = "0.3.18"
 futures-util = "0.3"
 
-diesel = { version = "2.2", features = ["serde_json"] }
+diesel = { version = "2.2", features = ["serde_json", "chrono"] }
 diesel-async = { version = "0.5", features = ["postgres"] }
 serde_json = "1.0.128"
 diesel_async_migrations = { version = "0.15" }
@@ -36,3 +36,5 @@ clap = { version = "4.5", features = ["derive"] }
 phf = { version = "0.11", features = ["macros"] }
 
 uuid = { version = "1.10", features = ["v7"] }
+
+chrono = { version = "0.4", features = ["serde"] }

backend/src/api/demos.rs

@@ -68,6 +68,7 @@ async fn list(
             .or_insert(common::BaseDemoInfo {
                 id: demo.demo_id,
                 map: info.map,
+                uploaded_at: demo.uploaded_at,
                 team2_score: 0,
                 team3_score: 0,
             });
@@ -81,9 +82,9 @@ async fn list(
         }
     }
 
-    // TODO
     // Sort this
     let mut output = demos.into_values().collect::<Vec<_>>();
+    output.sort_unstable_by_key(|d| d.uploaded_at);
 
     Ok(axum::response::Json(output))
 }

backend/src/models.rs

@@ -23,7 +23,7 @@ pub struct NewDemo {
 pub struct Demo {
     pub steam_id: String,
     pub demo_id: String,
-    pub uploaded_at: diesel::data_types::PgTimestamp,
+    pub uploaded_at: chrono::naive::NaiveDateTime,
 }
 
 #[derive(Queryable, Selectable, Insertable, Debug)]

common/Cargo.toml

@@ -5,3 +5,4 @@ edition = "2021"
 
 [dependencies]
 serde = { version = "1", features = ["derive"] }
+chrono = { version = "0.4", features = ["serde"] }

common/src/lib.rs

@@ -2,6 +2,7 @@
 pub struct BaseDemoInfo {
     pub id: String,
     pub map: String,
+    pub uploaded_at: chrono::naive::NaiveDateTime,
     pub team2_score: i16,
     pub team3_score: i16,
 }

frontend/src/lib.rs

@@ -15,10 +15,46 @@ pub enum DemoUploadStatus {
 
 #[leptos::component]
 pub fn demo_list_entry(demo: common::BaseDemoInfo) -> impl leptos::IntoView {
+    let style = stylers::style! {
+        "DemoListEntry",
+        .entry {
+            display: inline-grid;
+
+            grid-template-columns: auto auto auto;
+
+            border: solid #030303aa 1px;
+            margin-top: 5px;
+            margin-bottom: 5px;
+        }
+
+        .score, .map {
+            padding-left: 5px;
+            padding-right: 5px;
+
+            margin-top: auto;
+            margin-bottom: auto;
+        }
+
+        .date {
+            display: inline-grid;
+
+            grid-template-columns: auto;
+            grid-template-rows: auto auto;
+        }
+    };
+
     view! {
+        class=style,
         <li>
             <A href=format!("demo/{}/scoreboard", demo.id)>
-                <span>{demo.map} - {demo.id} - {demo.team2_score}:{demo.team3_score}</span>
+                <div class="entry">
+                    <span class="score">{demo.team2_score}:{demo.team3_score}</span>
+                    <div class="date">
+                        <span>{demo.uploaded_at.format("%Y-%m-%d").to_string()}</span>
+                        <span>{demo.uploaded_at.format("%H-%M-%S").to_string()}</span>
+                    </div>
+                    <span class="map">{demo.map}</span>
+                </div>
             </A>
         </li>
     }