namirasoft-site-react 1.4.1 → 1.4.3

package/src/components/NSPanel.tsx

@@ -1,20 +1,20 @@
-import { ReactNode } from "react";
-import Styles from './NSPanel.module.css';
-import { IBaseComponentProps } from "../props/IBaseComponentProps";
-
-export interface NSPanelProps extends IBaseComponentProps
-{
-    children: ReactNode;
-    grid: boolean;
-}
-export function NSPanel(props: NSPanelProps)
-{
-    return (
-        <section id={props.id}
-            className={`${props.grid ? Styles.ns_panel_grid : Styles.ns_panel_column} ${props.classList?.join(" ")}`}
-            style={props.style}
-        >
-            {props.children}
-        </section>
-    );
+import { ReactNode } from "react";
+import Styles from './NSPanel.module.css';
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+
+export interface NSPanelProps extends IBaseComponentProps
+{
+    children: ReactNode;
+    grid: boolean;
+}
+export function NSPanel(props: NSPanelProps)
+{
+    return (
+        <section id={props.id}
+            className={`${props.grid ? Styles.ns_panel_grid : Styles.ns_panel_column} ${props.classList?.join(" ")}`}
+            style={props.style}
+        >
+            {props.children}
+        </section>
+    );
 }

package/src/components/NSProductList.tsx

@@ -1,44 +1,44 @@
-import { useState, useEffect } from "react";
-import { NamirasoftAPIProductServer, ProductFullRow } from "namirasoft-api-product";
-import { NSCard } from "./NSCard";
-import { EnvService } from 'namirasoft-core'
-import { INSRouterProps } from "../routing/INSRouterProps";
-
-export interface NSProductListProps extends INSRouterProps
-{
-    scope: string;
-    name: string;
-}
-
-interface NSProductListState
-{
-    products: ProductFullRow[];
-}
-
-export function NSProductList(props: NSProductListProps)
-{
-    const [state, setState] = useState<NSProductListState>({ products: [] });
-
-    useEffect(() =>
-    {
-        let REACT_APP_BASE_URL_API_PRODUCT = new EnvService("REACT_APP_BASE_URL_API_PRODUCT", true).getString();
-        let server = new NamirasoftAPIProductServer(REACT_APP_BASE_URL_API_PRODUCT, props.notifier.onError );
-        server.filter.ListProducts(props.scope, props.name, null, null, null).then((products) =>
-        {
-            setState({ products: products.rows });
-        }).catch(() => { });
-
-        // eslint-disable-next-line react-hooks/exhaustive-deps 
-    }, []);
-
-    return (
-        <div className="d-flex gap-3 flex-wrap justify-content-between container">
-            {state.products.map((product: ProductFullRow) =>
-            {
-                return (
-                    <NSCard key={product.id} link={{ href: product.link ?? "" }} title={product.name} image={{ src: product.logo ?? '', alt: product.name }} />
-                );
-            })}
-        </div>
-    );
+import { useState, useEffect } from "react";
+import { NamirasoftAPIProductServer, ProductFullRow } from "namirasoft-api-product";
+import { NSCard } from "./NSCard";
+import { EnvService } from 'namirasoft-core'
+import { INSRouterProps } from "../routing/INSRouterProps";
+
+export interface NSProductListProps extends INSRouterProps
+{
+    scope: string;
+    name: string;
+}
+
+interface NSProductListState
+{
+    products: ProductFullRow[];
+}
+
+export function NSProductList(props: NSProductListProps)
+{
+    const [state, setState] = useState<NSProductListState>({ products: [] });
+
+    useEffect(() =>
+    {
+        let REACT_APP_BASE_URL_API_PRODUCT = new EnvService("REACT_APP_BASE_URL_API_PRODUCT", true).getString();
+        let server = new NamirasoftAPIProductServer(REACT_APP_BASE_URL_API_PRODUCT, props.notifier.onError );
+        server.filter.ListProducts(props.scope, props.name, null, null, null).then((products) =>
+        {
+            setState({ products: products.rows });
+        }).catch(() => { });
+
+        // eslint-disable-next-line react-hooks/exhaustive-deps 
+    }, []);
+
+    return (
+        <div className="d-flex gap-3 flex-wrap justify-content-between container">
+            {state.products.map((product: ProductFullRow) =>
+            {
+                return (
+                    <NSCard key={product.id} link={{ href: product.link ?? "" }} title={product.name} image={{ src: product.logo ?? '', alt: product.name }} />
+                );
+            })}
+        </div>
+    );
 }

package/src/components/NSRange.module.css

@@ -1,67 +1,67 @@
-.ns_range_parent {
-	width: 100%;
-	max-width: 1150px;
-}
-
-.ns_range_time_item {
-	z-index: 99;
-	text-align: center;
-	max-width: 48px;
-	display: inline-block;
-	height: 60px;
-	position: relative;
-	border-width: 1px;
-	border-color: #DCDCDC;
-	border-style: groove;
-}
-
-.ns_range_time_box_full {
-	background-color: #fff;
-	border-radius: 5px;
-	position: relative;
-	box-shadow: 0 3px 6px 0 rgb(0 0 0 / 7%);
-	overflow-x: scroll;
-}
-
-.ns_range_time_box_full::-webkit-scrollbar {
-	height: 6px;
-}
-
-.ns_range_time_box_full::-webkit-scrollbar-track {
-	background-color: #c0c0c0;
-	border-radius: 6px;
-}
-
-.ns_range_time_box_full::-webkit-scrollbar-thumb {
-	background: #141B5C;
-	border-radius: 6px;
-}
-
-.ns_range_time_line {
-	position: absolute;
-	height: 100%;
-}
-
-.ns_time_line_title {
-	color: #141B5C;
-	margin-bottom: 16px;
-}
-
-.ns_range_time_item span {
-	color: #141B5C;
-	width: 100%;
-	display: inline-block;
-	background-color: #DCDCDC;
-	border-bottom: 1px solid #DCDCDC;
-	font-weight: 500;
-}
-
-@media screen and (min-width: 992px) {
-	.ns_range_time_box_full {
-		overflow: hidden;
-	}
-
-	.ns_range_time_item {
-		width: 4.166666%;
-	}
+.ns_range_parent {
+	width: 100%;
+	max-width: 1150px;
+}
+
+.ns_range_time_item {
+	z-index: 99;
+	text-align: center;
+	max-width: 48px;
+	display: inline-block;
+	height: 60px;
+	position: relative;
+	border-width: 1px;
+	border-color: #DCDCDC;
+	border-style: groove;
+}
+
+.ns_range_time_box_full {
+	background-color: #fff;
+	border-radius: 5px;
+	position: relative;
+	box-shadow: 0 3px 6px 0 rgb(0 0 0 / 7%);
+	overflow-x: scroll;
+}
+
+.ns_range_time_box_full::-webkit-scrollbar {
+	height: 6px;
+}
+
+.ns_range_time_box_full::-webkit-scrollbar-track {
+	background-color: #c0c0c0;
+	border-radius: 6px;
+}
+
+.ns_range_time_box_full::-webkit-scrollbar-thumb {
+	background: #141B5C;
+	border-radius: 6px;
+}
+
+.ns_range_time_line {
+	position: absolute;
+	height: 100%;
+}
+
+.ns_time_line_title {
+	color: #141B5C;
+	margin-bottom: 16px;
+}
+
+.ns_range_time_item span {
+	color: #141B5C;
+	width: 100%;
+	display: inline-block;
+	background-color: #DCDCDC;
+	border-bottom: 1px solid #DCDCDC;
+	font-weight: 500;
+}
+
+@media screen and (min-width: 992px) {
+	.ns_range_time_box_full {
+		overflow: hidden;
+	}
+
+	.ns_range_time_item {
+		width: 4.166666%;
+	}
 }

package/src/components/NSRange.tsx

@@ -1,83 +1,83 @@
-import { useEffect, useState } from 'react';
-import Styles from './NSRange.module.css';
-import { IBaseComponentProps } from '../props/IBaseComponentProps';
-
-import { Color } from "../Color";
-
-export interface NSRangeRow
-{
-	start_time: Date;
-	end_time: Date;
-	percentage: number;
-}
-
-export interface INSRangeProps extends IBaseComponentProps
-{
-	data: NSRangeRow[];
-	title?: string;
-}
-
-export function NSRange(props: INSRangeProps)
-{
-	const [Widths, setWidths] = useState<string[]>([]);
-	const [positions, setPositions] = useState<string[]>([]);
-
-	useEffect(() =>
-	{
-		const widths = props.data?.map((data) =>
-		{
-			const minutes = calculateMinutesBetween(data.start_time, data.end_time);
-			return convertToPercentage(minutes);
-		});
-		const positions = props.data?.map((data) =>
-		{
-			const minutes = calculateMinutesBetween(new Date('2023-08-14T00:00:00'), data.start_time);
-			return convertToPercentage(minutes);
-		});
-		setWidths(widths);
-		setPositions(positions);
-	}, [props.data]);
-
-	const calculateMinutesBetween = (start_time: Date, end_time: Date): number =>
-	{
-		const difference_in_milliseconds = Math.abs(start_time.getTime() - end_time.getTime());
-		const difference_in_minutes = Math.floor(difference_in_milliseconds / 1000 / 60);
-		return difference_in_minutes;
-	};
-
-	const convertToPercentage = (minute: number): string =>
-	{
-		const width = ((minute * 100) / 1440).toString();
-		return `${width}%`;
-	};
-
-	return (
-		<div className={`${Styles.ns_range_parent} ${props.classList?.join(" ")}`} style={props.style}>
-			<h5 className={Styles.ns_time_line_title}>{props.title}</h5>
-			<div className="col-12 px-0">
-				<div className={` ${Styles.ns_range_time_box_full} d-flex justify-content-start`}>
-					<div>
-						{
-							props.data?.map((data, index) =>
-								<span
-									key={index}
-									className={Styles.ns_range_time_line}
-									style={{
-										background: Color.getColor(data?.percentage),
-										width: Widths[index] || '0%',
-										left: positions[index] || '%0'
-									}}>
-								</span>
-							)
-						}
-					</div>
-					{[...Array(24).keys()].map(hour => (
-						<div key={hour} className={Styles.ns_range_time_item}>
-							<span>{hour.toString().padStart(2, '0')}:00</span>
-						</div>
-					))}
-				</div>
-			</div>
-		</div>
-	);
+import { useEffect, useState } from 'react';
+import Styles from './NSRange.module.css';
+import { IBaseComponentProps } from '../props/IBaseComponentProps';
+
+import { Color } from "../Color";
+
+export interface NSRangeRow
+{
+	start_time: Date;
+	end_time: Date;
+	percentage: number;
+}
+
+export interface INSRangeProps extends IBaseComponentProps
+{
+	data: NSRangeRow[];
+	title?: string;
+}
+
+export function NSRange(props: INSRangeProps)
+{
+	const [Widths, setWidths] = useState<string[]>([]);
+	const [positions, setPositions] = useState<string[]>([]);
+
+	useEffect(() =>
+	{
+		const widths = props.data?.map((data) =>
+		{
+			const minutes = calculateMinutesBetween(data.start_time, data.end_time);
+			return convertToPercentage(minutes);
+		});
+		const positions = props.data?.map((data) =>
+		{
+			const minutes = calculateMinutesBetween(new Date('2023-08-14T00:00:00'), data.start_time);
+			return convertToPercentage(minutes);
+		});
+		setWidths(widths);
+		setPositions(positions);
+	}, [props.data]);
+
+	const calculateMinutesBetween = (start_time: Date, end_time: Date): number =>
+	{
+		const difference_in_milliseconds = Math.abs(start_time.getTime() - end_time.getTime());
+		const difference_in_minutes = Math.floor(difference_in_milliseconds / 1000 / 60);
+		return difference_in_minutes;
+	};
+
+	const convertToPercentage = (minute: number): string =>
+	{
+		const width = ((minute * 100) / 1440).toString();
+		return `${width}%`;
+	};
+
+	return (
+		<div className={`${Styles.ns_range_parent} ${props.classList?.join(" ")}`} style={props.style}>
+			<h5 className={Styles.ns_time_line_title}>{props.title}</h5>
+			<div className="col-12 px-0">
+				<div className={` ${Styles.ns_range_time_box_full} d-flex justify-content-start`}>
+					<div>
+						{
+							props.data?.map((data, index) =>
+								<span
+									key={index}
+									className={Styles.ns_range_time_line}
+									style={{
+										background: Color.getColor(data?.percentage),
+										width: Widths[index] || '0%',
+										left: positions[index] || '%0'
+									}}>
+								</span>
+							)
+						}
+					</div>
+					{[...Array(24).keys()].map(hour => (
+						<div key={hour} className={Styles.ns_range_time_item}>
+							<span>{hour.toString().padStart(2, '0')}:00</span>
+						</div>
+					))}
+				</div>
+			</div>
+		</div>
+	);
 }