MathewFrancis/btc_horse
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updated shared screen styling

Browse Source
This commit is contained in:
MathewFrancis 2025-07-10 16:23:38 +05:30
parent 53bb9290c8
commit a6c1668fed
11 changed files with 97 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
btc-UI/src/app/components/activity-screen/activity-screen.css
View File

@ -0,0 +1,14 @@
body {
background-image: url('../../../assets/horse.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
}
.wrapper{
display: flex;
flex-direction: column;
justify-content: space-between;
}

35
btc-UI/src/app/components/activity-screen/activity-screen.html
View File

@ -1,8 +1,10 @@
<div class="d-flex min-vh-100">
<div class="flex-grow-1 d-flex flex-column">
<!-- Header Section: BT No, Date/Time, Venue, Race No (matching navbar style) -->
<div class="top-bar d-flex justify-content-between align-items-center px-3 py-2" style="background:#0d329f; color:white;">
<body>
<div class="d-flex min-vh-100 flex-column">
<!-- Header Section (Navbar) -->
<div class="top-bar d-flex justify-content-between align-items-center px-3 py-2"
style="background:#0d329f; color:white; height: 60px;">
<div class="d-flex align-items-center">
<span class="me-2"><b>B.T.No:1111</b></span>
<span class="date-time">{{ dateTime }}</span>
@ -17,14 +19,27 @@
</div>
</div>
<!-- Main Content -->
<div class="flex-grow-1 p-3">
<app-middle-section></app-middle-section>
<!-- Main Content Area (fills rest of screen) -->
<div class="flex-grow-1 d-flex flex-column wrapper" style="height: calc(100vh - 60px); margin-top: 2.8rem;">
<!-- Tablet View Touchpad -->
<div *ngIf="isTabletView" class="mt-3">
<app-touch-pad-menu [ticketingActive]="isTicketingActive"></app-touch-pad-menu>
<!-- 70%: Middle Section -->
<div style="flex: 0 0 56%;">
<app-middle-section [containerHeight]="'100%'"></app-middle-section>
</div>
<!-- 30%: Footer -->
<div style="flex: 0 0 10%; background-color: #469c7ba2; margin-bottom: 5rem;">
<!-- You can insert a component or HTML here -->
<div class="h-100 d-flex align-items-center justify-content-center">
<h5 class="mb-0">Live data goes here </h5>
</div>
</div>
</div>
</div>
</body>

3
btc-UI/src/app/components/middle-section/middle-section.component.css
View File

@ -23,10 +23,11 @@ div[style*="background-color: black"] .custom-cell {
.middle-section-container {
display: flex;
gap: 1rem;
height: 38vh;
width: 100%;
/* height is now controlled dynamically via [ngStyle] */
}
/* Desktop view (default) */
.main-table {
width: 60%;

3
btc-UI/src/app/components/middle-section/middle-section.component.html
View File

@ -1,5 +1,6 @@
<!-- Responsive Container -->
<div class="middle-section-container">
<div class="middle-section-container" [ngStyle]="{ height: containerHeight }">
<!-- Transaction Summary -->
<div class="transaction-summary">
<div

25
btc-UI/src/app/components/middle-section/middle-section.component.ts
View File

@ -1,15 +1,32 @@
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common'; // ✅ Import this
// import { Component } from '@angular/core';
// import { CommonModule } from '@angular/common'; // ✅ Import this
// @Component({
// selector: 'app-middle-section',
// standalone: true,
// imports: [CommonModule], // ✅ Add CommonModule here
// templateUrl: './middle-section.component.html',
// styleUrls: ['./middle-section.component.css']
// })
// export class MiddleSectionComponent {
// rows = Array.from({ length: 5 });
// summaryRows = Array.from({ length: 4 }); // 4 empty rows for now
// }
import { Component, Input } from '@angular/core';
import { CommonModule } from '@angular/common';
@Component({
selector: 'app-middle-section',
standalone: true,
imports: [CommonModule], // ✅ Add CommonModule here
imports: [CommonModule],
templateUrl: './middle-section.component.html',
styleUrls: ['./middle-section.component.css']
})
export class MiddleSectionComponent {
@Input() containerHeight: string = '50vh'; // default for home screen
rows = Array.from({ length: 5 });
summaryRows = Array.from({ length: 4 }); // 4 empty rows for now
}

2
btc-UI/src/app/constants/http-routs.ts
View File

@ -1,6 +1,6 @@
export class ApplicationHttpRouts {
private static readonly PROTOCOL: string = 'http';
private static readonly BACKEND_SERVER: string = '172.20.100.122';
private static readonly BACKEND_SERVER: string = '192.168.1.110';
private static readonly FRONT_PORT_NUMBER: string = '4200';
private static readonly PORT_NUMBER: string = '8083';
private static readonly SOCKET: string = `${this.PROTOCOL}://${this.BACKEND_SERVER}:${this.PORT_NUMBER}`;

2
btc-UI/src/app/home/home.component.html
View File

@ -17,7 +17,7 @@
<!-- Main Content -->
<div class="flex-grow-1 p-3">
<app-middle-section></app-middle-section>
<app-middle-section [containerHeight]="'38vh'"></app-middle-section>
<!-- Tablet View Touchpad -->
<div *ngIf="isTabletView" class="mt-3">

4
btc-UI/src/app/login/login.component.html
View File

@ -19,7 +19,7 @@
</div>
<!-- Scan Enable/Disable Toggle Button -->
<button
<!-- <button
type="button"
class="scan-toggle-btn"
(click)="toggleScan()"
@ -27,7 +27,7 @@
style="margin-bottom: 10px"
>
Scanner: {{ scanningEnabled ? "ON" : "OFF" }}
</button>
</button> -->
<!-- End Scan Toggle Button -->
<!-- Login Form -->

26
btc-UI/src/app/login/login.component.ts
View File

@ -221,19 +221,19 @@ export class LoginComponent implements OnInit, OnDestroy {
// 🖨️ Print logic commented out
// fetch('http://localhost:9100/print', {
// method: 'POST',
// headers: { 'Content-Type': 'application/json' },
// body: JSON.stringify(printData),
// })
// .then((res) => {
// if (!res.ok) throw new Error('Print failed');
// console.log('🖨️ Print successful');
// })
// .catch((err) => {
// console.error('‼️ Print failed', err);
// this.loginError = 'Login OK, but printing failed.';
// });
fetch('http://localhost:9100/print', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(printData),
})
.then((res) => {
if (!res.ok) throw new Error('Print failed');
console.log('🖨️ Print successful');
})
.catch((err) => {
console.error('‼️ Print failed', err);
this.loginError = 'Login OK, but printing failed.';
});
// ✅ Open secondary screen after login

BIN
btc-UI/src/assets/horse.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 558 KiB

BIN
btc-UI/src/assets/horse_cropped.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 373 KiB