namirasoft-site-react 1.4.402 → 1.4.403

package/src/components/NSHeaderScreenshot.tsx

@@ -1,40 +1,40 @@
-// todo move to its own probject: this is Timify
-import { IBaseComponentProps } from "../props/IBaseComponentProps";
-import Styles from "./NSHeaderScreenshot.module.css"
-
-export interface NSHeaderScreenshotProps extends IBaseComponentProps
-{
-    project: string;
-    task: string;
-    time: string;
-    Countdown: string;
-}
-
-export function NSHeaderScreenshot(props: NSHeaderScreenshotProps)
-{
-    return (
-        <section className={Styles.ns_header_screenshot}>
-            <div className={Styles.ns_header_screenshot_left}>
-                <div className={Styles.ns_header_screenshot_item}>
-                    <img src="https://static.namirasoft.com/image/concept/project/white.svg" alt='' width={20} height={20} />
-                    <span>{props.project}</span>
-                </div>
-                <div className={Styles.ns_header_screenshot_item}>
-                    <img src="https://static.namirasoft.com/image/concept/gear/white.svg" alt='' width={20} height={20} />
-                    <span>{props.task}</span>
-                </div>
-                <div className={Styles.ns_header_screenshot_item}>
-                    <img src="https://static.namirasoft.com/image/concept/time/white.svg" alt='' width={20} height={20} />
-                    <span>{props.time}</span>
-                </div>
-                <div className={Styles.ns_header_screenshot_item}>
-                    <img src="https://static.namirasoft.com/image/concept/countdown/white.svg" alt='' width={20} height={20} />
-                    <span>{props.Countdown}</span>
-                </div>
-            </div>
-            <div>
-                <img src="https://static.namirasoft.com/image/concept/delete/blue.svg" alt='' width={20} height={20} />
-            </div>
-        </section >
-    );
+// todo move to its own probject: this is Timify
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+import Styles from "./NSHeaderScreenshot.module.css"
+
+export interface NSHeaderScreenshotProps extends IBaseComponentProps
+{
+    project: string;
+    task: string;
+    time: string;
+    Countdown: string;
+}
+
+export function NSHeaderScreenshot(props: NSHeaderScreenshotProps)
+{
+    return (
+        <section className={Styles.ns_header_screenshot}>
+            <div className={Styles.ns_header_screenshot_left}>
+                <div className={Styles.ns_header_screenshot_item}>
+                    <img src="https://static.namirasoft.com/image/concept/project/white.svg" alt='' width={20} height={20} />
+                    <span>{props.project}</span>
+                </div>
+                <div className={Styles.ns_header_screenshot_item}>
+                    <img src="https://static.namirasoft.com/image/concept/gear/white.svg" alt='' width={20} height={20} />
+                    <span>{props.task}</span>
+                </div>
+                <div className={Styles.ns_header_screenshot_item}>
+                    <img src="https://static.namirasoft.com/image/concept/time/white.svg" alt='' width={20} height={20} />
+                    <span>{props.time}</span>
+                </div>
+                <div className={Styles.ns_header_screenshot_item}>
+                    <img src="https://static.namirasoft.com/image/concept/countdown/white.svg" alt='' width={20} height={20} />
+                    <span>{props.Countdown}</span>
+                </div>
+            </div>
+            <div>
+                <img src="https://static.namirasoft.com/image/concept/delete/blue.svg" alt='' width={20} height={20} />
+            </div>
+        </section >
+    );
 }

package/src/components/NSID.tsx

@@ -1,159 +1,159 @@
-import React from 'react';
-import { BaseURLImageFormatter, IBaseComponentProps, NSCopy } from '../main';
-import { BaseUUID, CacheService, IStorage } from 'namirasoft-core';
-import { NamirasoftMap } from 'namirasoft-site-map';
-import { NSBaseMetaTable, NSBaseServer } from 'namirasoft-site';
-import { Mutex } from 'async-mutex';
-
-export interface NSIDProps extends IBaseComponentProps
-{
-	id: string;
-	map: NamirasoftMap | null;
-	storage: IStorage | null;
-}
-
-export interface NSIDState
-{
-	text?: string;
-}
-export interface NSIDInfo
-{
-	product: {
-		id: string;
-		name: string;
-		headline: string;
-		description: string;
-		logo: string;
-		link: string;
-	};
-	table: NSBaseMetaTable<NSBaseServer, any>;
-}
-
-export class NSID extends React.Component<NSIDProps, NSIDState>
-{
-	private static mutex: Mutex = new Mutex();
-	private static mutexes: { [product_id: string]: Mutex } = {};
-	private info: NSIDInfo | null;
-	public static getKey(info: NSIDInfo, id: string)
-	{
-		return `${info.product.id}:${info.table.name}:${id}`
-	}
-	public static getInfo(id: string, map?: NamirasoftMap | null)
-	{
-		try
-		{
-			let short = BaseUUID.getShort(id);
-			let namriasoft = map ?? new NamirasoftMap();
-			return namriasoft.getByShortName(short);
-		} catch (error)
-		{
-		}
-		return null;
-	}
-	public static getCache(info: NSIDInfo, storage: IStorage, id: string)
-	{
-		let key = NSID.getKey(info, id);
-		return new CacheService<string>(key, storage, 60, async () => "0.0.0", async () =>
-		{
-			if (info.table.back_end.get)
-			{
-				try
-				{
-					let columns: string[] = [];
-					info.table.forEachColumn(column =>
-					{
-						if (column.name.includes("name"))
-							columns.push(column.name);
-					});
-					let row = await info.table.back_end.get(id);
-					let values = columns.map(column => row[column]).filter(x => x);
-					if (values.length > 0)
-						return values.join(" ");
-					return row.name ?? row.description ?? "";
-				} catch (error)
-				{
-					console.error(error);
-				}
-			}
-			return "";
-		});
-	}
-	public static clearID(storage: IStorage, id: string, map?: NamirasoftMap | null)
-	{
-		let info = NSID.getInfo(id, map);
-		if (info)
-		{
-			let cache = NSID.getCache(info, storage, id);
-			cache.del();
-		}
-	}
-	constructor(props: NSIDProps)
-	{
-		super(props);
-		this.state = {};
-		this.info = NSID.getInfo(this.props.id, this.props.map);
-	}
-	override componentDidMount(): void
-	{
-		this.reload();
-	}
-	async reload()
-	{
-		if (!this.info)
-			return;
-		if (!this.props.id)
-			return;
-		let info = this.info;
-		let cache = null;
-		if (this.props.storage)
-		{
-			cache = NSID.getCache(info, this.props.storage, this.props.id);
-			cache.runGetOn = await NSID.mutex.runExclusive(async () =>
-			{
-				if (!NSID.mutexes[info.product.id])
-					NSID.mutexes[info.product.id] = new Mutex();
-				return NSID.mutexes[info.product.id];
-			});
-		}
-		if (cache)
-			cache.get().then(text =>
-			{
-				this.setState({ text });
-			});
-	}
-
-	override render()
-	{
-		if (!this.props.id)
-			return <></>;
-		if (!this.info)
-			return this.props.id;
-
-		let text = this.state.text;
-		if (!text)
-			text = this.props.id;
-
-		let href = "";
-		try
-		{
-			href = this.info.table.front_end.getViewLink(this.props.id + "");
-		} catch (error)
-		{
-		}
-		let formatter = new BaseURLImageFormatter();
-		return (
-			<NSCopy
-				value={this.props.id}
-				classList={["justify-content-start"]}
-			>
-				{
-					formatter.format({
-						text,
-						href,
-						image: { url: this.info.product.logo, alt: this.info?.product.logo }
-					})
-				}
-			</NSCopy>
-		);
-	}
+import React from 'react';
+import { BaseURLImageFormatter, IBaseComponentProps, NSCopy } from '../main';
+import { BaseUUID, CacheService, IStorage } from 'namirasoft-core';
+import { NamirasoftMap } from 'namirasoft-site-map';
+import { NSBaseMetaTable, NSBaseServer } from 'namirasoft-site';
+import { Mutex } from 'async-mutex';
+
+export interface NSIDProps extends IBaseComponentProps
+{
+	id: string;
+	map: NamirasoftMap | null;
+	storage: IStorage | null;
+}
+
+export interface NSIDState
+{
+	text?: string;
+}
+export interface NSIDInfo
+{
+	product: {
+		id: string;
+		name: string;
+		headline: string;
+		description: string;
+		logo: string;
+		link: string;
+	};
+	table: NSBaseMetaTable<NSBaseServer, any>;
+}
+
+export class NSID extends React.Component<NSIDProps, NSIDState>
+{
+	private static mutex: Mutex = new Mutex();
+	private static mutexes: { [product_id: string]: Mutex } = {};
+	private info: NSIDInfo | null;
+	public static getKey(info: NSIDInfo, id: string)
+	{
+		return `${info.product.id}:${info.table.name}:${id}`
+	}
+	public static getInfo(id: string, map?: NamirasoftMap | null)
+	{
+		try
+		{
+			let short = BaseUUID.getShort(id);
+			let namriasoft = map ?? new NamirasoftMap();
+			return namriasoft.getByShortName(short);
+		} catch (error)
+		{
+		}
+		return null;
+	}
+	public static getCache(info: NSIDInfo, storage: IStorage, id: string)
+	{
+		let key = NSID.getKey(info, id);
+		return new CacheService<string>(key, storage, 60, async () => "0.0.0", async () =>
+		{
+			if (info.table.back_end.get)
+			{
+				try
+				{
+					let columns: string[] = [];
+					info.table.forEachColumn(column =>
+					{
+						if (column.name.includes("name"))
+							columns.push(column.name);
+					});
+					let row = await info.table.back_end.get(id);
+					let values = columns.map(column => row[column]).filter(x => x);
+					if (values.length > 0)
+						return values.join(" ");
+					return row.name ?? row.description ?? "";
+				} catch (error)
+				{
+					console.error(error);
+				}
+			}
+			return "";
+		});
+	}
+	public static clearID(storage: IStorage, id: string, map?: NamirasoftMap | null)
+	{
+		let info = NSID.getInfo(id, map);
+		if (info)
+		{
+			let cache = NSID.getCache(info, storage, id);
+			cache.del();
+		}
+	}
+	constructor(props: NSIDProps)
+	{
+		super(props);
+		this.state = {};
+		this.info = NSID.getInfo(this.props.id, this.props.map);
+	}
+	override componentDidMount(): void
+	{
+		this.reload();
+	}
+	async reload()
+	{
+		if (!this.info)
+			return;
+		if (!this.props.id)
+			return;
+		let info = this.info;
+		let cache = null;
+		if (this.props.storage)
+		{
+			cache = NSID.getCache(info, this.props.storage, this.props.id);
+			cache.runGetOn = await NSID.mutex.runExclusive(async () =>
+			{
+				if (!NSID.mutexes[info.product.id])
+					NSID.mutexes[info.product.id] = new Mutex();
+				return NSID.mutexes[info.product.id];
+			});
+		}
+		if (cache)
+			cache.get().then(text =>
+			{
+				this.setState({ text });
+			});
+	}
+
+	override render()
+	{
+		if (!this.props.id)
+			return <></>;
+		if (!this.info)
+			return this.props.id;
+
+		let text = this.state.text;
+		if (!text)
+			text = this.props.id;
+
+		let href = "";
+		try
+		{
+			href = this.info.table.front_end.getViewLink(this.props.id + "");
+		} catch (error)
+		{
+		}
+		let formatter = new BaseURLImageFormatter();
+		return (
+			<NSCopy
+				value={this.props.id}
+				classList={["justify-content-start"]}
+			>
+				{
+					formatter.format({
+						text,
+						href,
+						image: { url: this.info.product.logo, alt: this.info?.product.logo }
+					})
+				}
+			</NSCopy>
+		);
+	}
 }

package/src/components/NSLabel.module.css

@@ -1,26 +1,26 @@
-.ns_label_title {
-    color: hsla(234, 64%, 22%, 1);
-    margin-bottom: 8px;
-    font-size: 16px;
-    font-weight: bold;
-    padding: 0px;
-    margin: 0px;
-    align-content: center;
-}
-
-.ns_label_desciption {
-    color: hsla(234, 64%, 22%, 1);
-    font-size: 16px;
-    padding: 0px;
-    margin: 0px;
-}
-
-.ns_label_item {
-    padding: 8px;
-    border-right: none !important;
-    align-content: center;
-}
-
-.ns_label_item:not(:last-child) {
-    border-right: 1px solid #ccc;
+.ns_label_title {
+    color: hsla(234, 64%, 22%, 1);
+    margin-bottom: 8px;
+    font-size: 16px;
+    font-weight: bold;
+    padding: 0px;
+    margin: 0px;
+    align-content: center;
+}
+
+.ns_label_desciption {
+    color: hsla(234, 64%, 22%, 1);
+    font-size: 16px;
+    padding: 0px;
+    margin: 0px;
+}
+
+.ns_label_item {
+    padding: 8px;
+    border-right: none !important;
+    align-content: center;
+}
+
+.ns_label_item:not(:last-child) {
+    border-right: 1px solid #ccc;
 }

package/src/components/NSLabel.tsx

@@ -1,48 +1,48 @@
-"use client";
-
-import Styles from './NSLabel.module.css'
-import React from "react";
-import { ReactNode } from "react";
-import { IBaseComponentProps } from '../props/IBaseComponentProps';
-import { StringFormatter } from '../main';
-
-export interface NSLabelProps extends IBaseComponentProps
-{
-    title: string;
-    desciption?: string;
-    children?: ReactNode;
-}
-
-export interface NSLabelState
-{ }
-
-export class NSLabel extends React.Component<NSLabelProps, NSLabelState>
-{
-    override render()
-    {
-        return (
-            <div id={this.props.id} className={`${Styles.ns_label_item} ${this.props.classList?.join(" ") ?? ""}`} style={this.props.style}>
-                <span className={`${Styles.ns_label_title} ns_font_16_bold`}>
-                    {this.props.title}
-                </span>
-                {
-                    this.props.desciption &&
-                    <div>
-                        <span className={`${Styles.ns_label_desciption}`}>
-                            {StringFormatter.toHTML(this.props.desciption)}
-                        </span>
-                    </div>
-                }
-                {
-
-                    this.props.children &&
-                    <>
-                        <div>
-                            {this.props.children}
-                        </div>
-                    </>
-                }
-            </div >
-        );
-    }
+"use client";
+
+import Styles from './NSLabel.module.css'
+import React from "react";
+import { ReactNode } from "react";
+import { IBaseComponentProps } from '../props/IBaseComponentProps';
+import { StringFormatter } from '../main';
+
+export interface NSLabelProps extends IBaseComponentProps
+{
+    title: string;
+    desciption?: string;
+    children?: ReactNode;
+}
+
+export interface NSLabelState
+{ }
+
+export class NSLabel extends React.Component<NSLabelProps, NSLabelState>
+{
+    override render()
+    {
+        return (
+            <div id={this.props.id} className={`${Styles.ns_label_item} ${this.props.classList?.join(" ") ?? ""}`} style={this.props.style}>
+                <span className={`${Styles.ns_label_title} ns_font_16_bold`}>
+                    {this.props.title}
+                </span>
+                {
+                    this.props.desciption &&
+                    <div>
+                        <span className={`${Styles.ns_label_desciption}`}>
+                            {StringFormatter.toHTML(this.props.desciption)}
+                        </span>
+                    </div>
+                }
+                {
+
+                    this.props.children &&
+                    <>
+                        <div>
+                            {this.props.children}
+                        </div>
+                    </>
+                }
+            </div >
+        );
+    }
 }

package/src/components/NSLabelErrorNotifier.module.css

@@ -1,3 +1,3 @@
-.ns_label_error_notifier_text {
-    color: #FF3F3F !important;
+.ns_label_error_notifier_text {
+    color: #FF3F3F !important;
 }

package/src/components/NSLabelErrorNotifier.tsx

@@ -1,36 +1,36 @@
-import Styles from "./NSLabelErrorNotifier.module.css";
-import { IBaseComponentProps } from "../props/IBaseComponentProps";
-import { useRef } from "react";
-import { SetTimeouService } from "namirasoft-core";
-
-export interface NSLabelErrorNotifierProps extends IBaseComponentProps
-{
-	error?: string;
-	clearError: () => void;
-}
-
-export function NSLabelErrorNotifier(props: NSLabelErrorNotifierProps)
-{
-	let service = useRef<SetTimeouService>(new SetTimeouService());
-	if (props.error)
-		service.current.setTimeoutIfNotCalledAgain(() =>
-		{
-			props.clearError();
-		}, 5000);
-	return <>
-		{
-			props.error && (
-				<div id={props.id} className="d-flex justify-content-start align-items-center gap-2 ms-2">
-					<img
-						className={""}
-						src="https://static.namirasoft.com/image/concept/danger/red.svg"
-						alt="Error Icon"
-						width={13}
-						height={13}
-					/>
-					<span className={Styles.ns_label_error_notifier_text}>{props.error}</span>
-				</div >
-			)
-		}
-	</>;
+import Styles from "./NSLabelErrorNotifier.module.css";
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+import { useRef } from "react";
+import { SetTimeouService } from "namirasoft-core";
+
+export interface NSLabelErrorNotifierProps extends IBaseComponentProps
+{
+	error?: string;
+	clearError: () => void;
+}
+
+export function NSLabelErrorNotifier(props: NSLabelErrorNotifierProps)
+{
+	let service = useRef<SetTimeouService>(new SetTimeouService());
+	if (props.error)
+		service.current.setTimeoutIfNotCalledAgain(() =>
+		{
+			props.clearError();
+		}, 5000);
+	return <>
+		{
+			props.error && (
+				<div id={props.id} className="d-flex justify-content-start align-items-center gap-2 ms-2">
+					<img
+						className={""}
+						src="https://static.namirasoft.com/image/concept/danger/red.svg"
+						alt="Error Icon"
+						width={13}
+						height={13}
+					/>
+					<span className={Styles.ns_label_error_notifier_text}>{props.error}</span>
+				</div >
+			)
+		}
+	</>;
 }

package/src/components/NSLayout.module.css

@@ -1,15 +1,15 @@
-.ns_container {
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-}
-
-.ns_layout_main {
-	padding: 24px;
-	display: flex;
-	flex-direction: column;
-	color: #fff;
-	background-attachment: fixed;
-	background-repeat: no-repeat;
-	background-size: cover;
+.ns_container {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+}
+
+.ns_layout_main {
+	padding: 24px;
+	display: flex;
+	flex-direction: column;
+	color: #fff;
+	background-attachment: fixed;
+	background-repeat: no-repeat;
+	background-size: cover;
 }