@resulbeser1/air-command-ui-components
Version:
UI Components for Air Command System
994 lines (973 loc) • 45.8 kB
JavaScript
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
import { useState, useRef, useEffect } from 'react';
/******************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
var __assign = function() {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
function __awaiter(thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
}
function __generator(thisArg, body) {
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
while (g && (g = 0, op[0] && (_ = 0)), _) try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
if (y = 0, t) op = [op[0] & 2, t.value];
switch (op[0]) {
case 0: case 1: t = op; break;
case 4: _.label++; return { value: op[1], done: false };
case 5: _.label++; y = op[1]; op = [0]; continue;
case 7: op = _.ops.pop(); _.trys.pop(); continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
if (t[2]) _.ops.pop();
_.trys.pop(); continue;
}
op = body.call(thisArg, _);
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
}
}
function __spreadArray(to, from, pack) {
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
if (ar || !(i in from)) {
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
ar[i] = from[i];
}
}
return to.concat(ar || Array.prototype.slice.call(from));
}
typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
var e = new Error(message);
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
};
var variants = {
default: function () { return ({
backgroundColor: "#5876EE",
color: "#FFFFFF",
border: "none",
display: "flex",
justifyContent: "center",
alignItems: "center",
}); },
outline: function (size, isDark) { return ({
backgroundColor: "transparent",
color: isDark ? "#FFFFFF" : "#424242",
border: "1px solid ".concat(isDark ? "#424242" : "#E2E2E2"),
display: "flex",
justifyContent: "center",
alignItems: "center",
}); },
subtle: function () { return ({
backgroundColor: "transparent",
color: "#5876EE",
border: "none",
display: "flex",
justifyContent: "center",
alignItems: "center",
}); },
danger: function () { return ({
backgroundColor: "#DC2626",
color: "#FFFFFF",
border: "none",
display: "flex",
justifyContent: "center",
alignItems: "center",
}); },
dangerIcon: function () { return ({
backgroundColor: "#DC2626",
color: "#FFFFFF",
border: "none",
display: "flex",
justifyContent: "center",
alignItems: "center",
}); },
icon: function (size) { return ({
backgroundColor: "#5876EE",
color: "#FFFFFF",
border: "none",
width: size === "sm" ? "32px" : "40px",
height: size === "sm" ? "32px" : "40px",
padding: size === "sm" ? "6px" : "8px",
justifyContent: "center",
alignItems: "center",
display: "flex",
}); },
iconOutline: function (size, isDark) { return ({
backgroundColor: isDark ? "transparent" : "#FFFFFF",
color: isDark ? "#FFFFFF" : "#1D1B1D",
border: "1px solid ".concat(isDark ? "#FFFFFF" : "#E0E0E0"),
width: size === "sm" ? "32px" : "40px",
height: size === "sm" ? "32px" : "40px",
padding: size === "sm" ? "6px" : "8px",
justifyContent: "center",
alignItems: "center",
display: "flex",
}); },
dangerOutline: function () { return ({
backgroundColor: "transparent",
color: "#DC2626",
border: "1px solid #DC2626",
display: "flex",
justifyContent: "center",
alignItems: "center",
}); },
showHistory: function () { return ({
backgroundColor: "#BDC311",
color: "#424242",
border: "none",
display: "flex",
justifyContent: "center",
alignItems: "center",
fontFamily: "Inter",
fontWeight: 500,
fontStyle: "normal",
fontSize: "12px",
lineHeight: "18px",
letterSpacing: "0%",
}); },
};
var Button = function (_a) {
var children = _a.children, onClick = _a.onClick, _b = _a.variant, variant = _b === void 0 ? "default" : _b, _c = _a.size, size = _c === void 0 ? "default" : _c, style = _a.style, icon = _a.icon, theme = _a.theme;
// Theme prop'u varsa onu kullan, yoksa localStorage'tan oku
var currentTheme = theme || localStorage.getItem("theme") || "light";
var isDark = currentTheme === "dark";
var sizeStyle = size === "sm"
? {
height: "32px",
padding: "4px 8px",
fontSize: "12px",
lineHeight: "18px",
}
: {
height: "40px",
padding: "8px 12px",
fontSize: "14px",
lineHeight: "24px",
};
var isShowHistoryVariant = variant === "showHistory";
var fontStyle = isShowHistoryVariant
? {
fontFamily: "Inter",
fontWeight: 500,
fontSize: "12px",
lineHeight: "18px",
letterSpacing: "0%",
}
: {};
var baseStyle = __assign(__assign(__assign(__assign(__assign({}, sizeStyle), variants[variant](size, isDark)), fontStyle), { borderRadius: "4px", fontFamily: "Inter", fontWeight: 500, letterSpacing: "0px", cursor: "pointer", display: "flex", alignItems: "center", gap: "10px" }), style);
return (jsxs("button", { onClick: onClick, style: baseStyle, children: [icon && (jsx("span", { style: { display: "flex", alignItems: "center" }, children: icon })), children] }));
};
var Dialog = function (_a) {
var isOpen = _a.isOpen, onClose = _a.onClose, title = _a.title, children = _a.children, _b = _a.theme, theme = _b === void 0 ? "dark" : _b, _c = _a.showCloseButton, showCloseButton = _c === void 0 ? true : _c, _d = _a.blurBackground, blurBackground = _d === void 0 ? true : _d, _e = _a.maxWidth, maxWidth = _e === void 0 ? "500px" : _e;
if (!isOpen)
return null;
var backdropStyle = {
position: "fixed",
top: 0,
left: 0,
width: "100vw",
height: "100vh",
backgroundColor: "rgba(0, 0, 0, 0.6)",
display: "flex",
alignItems: "center",
justifyContent: "center",
zIndex: 9999,
backdropFilter: blurBackground ? "blur(4px)" : "none",
};
var dialogStyle = {
backgroundColor: theme === "dark" ? "#1F1F23" : "#FFFFFF",
color: theme === "dark" ? "#FFFFFF" : "#000000",
padding: "24px",
borderRadius: "8px",
minWidth: "300px",
maxWidth: maxWidth,
width: "90%",
position: "relative",
boxShadow: theme === "dark"
? "0 8px 32px rgba(0, 0, 0, 0.4)"
: "0 8px 32px rgba(0, 0, 0, 0.15)",
border: theme === "dark" ? "1px solid #404040" : "1px solid #E5E7EB",
};
var titleStyle = {
marginTop: 0,
marginBottom: "20px",
fontSize: "20px",
fontWeight: 600,
fontFamily: "Inter, sans-serif",
color: theme === "dark" ? "#FFFFFF" : "#111827",
};
var closeButtonStyle = {
position: "absolute",
top: "16px",
right: "16px",
border: "none",
background: "transparent",
fontSize: "24px",
cursor: "pointer",
color: theme === "dark" ? "#FFFFFF" : "#6B7280",
width: "32px",
height: "32px",
display: "flex",
alignItems: "center",
justifyContent: "center",
borderRadius: "4px",
transition: "background-color 0.2s ease",
};
return (jsx("div", { style: backdropStyle, onClick: onClose, children: jsxs("div", { style: dialogStyle, onClick: function (e) { return e.stopPropagation(); }, children: [title && jsx("h3", { style: titleStyle, children: title }), jsx("div", { style: { marginBottom: showCloseButton ? "16px" : "0" }, children: children }), showCloseButton && (jsx("button", { onClick: onClose, style: closeButtonStyle, onMouseEnter: function (e) {
e.currentTarget.style.backgroundColor =
theme === "dark" ? "#404040" : "#F3F4F6";
}, onMouseLeave: function (e) {
e.currentTarget.style.backgroundColor = "transparent";
}, children: "\u00D7" }))] }) }));
};
var DeleteConfirmationDialog = function (_a) {
var isOpen = _a.isOpen, onClose = _a.onClose, onConfirm = _a.onConfirm, aircraftCallsign = _a.aircraftCallsign, _b = _a.theme, theme = _b === void 0 ? "dark" : _b, _c = _a.labels, labels = _c === void 0 ? {} : _c;
if (!isOpen)
return null;
var isDark = theme === "dark";
// Default labels
var defaultLabels = {
deleteTitle: "Delete",
confirmQuestion: "Are you sure you want to delete aircraft",
warningText: "This action cannot be undone. The aircraft will be permanently removed from the system.",
cancel: "Cancel",
delete: "Delete",
};
var finalLabels = __assign(__assign({}, defaultLabels), labels);
// Overlay styles
var overlayStyles = {
position: "fixed",
top: 0,
left: 0,
right: 0,
bottom: 0,
backgroundColor: "rgba(0, 0, 0, 0.5)",
display: "flex",
alignItems: "center",
justifyContent: "center",
zIndex: 1000,
backdropFilter: "blur(8px)",
};
// Dialog container styles
var dialogStyles = {
width: "508px",
height: "280px",
borderRadius: "4px",
backgroundColor: isDark ? "#171215" : "#FFFFFF",
boxShadow: isDark
? "0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.2)"
: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
display: "flex",
flexDirection: "column",
overflow: "hidden",
};
// Header styles
var headerStyles = {
width: "508px",
height: "64px",
display: "flex",
justifyContent: "space-between",
alignItems: "center",
borderBottom: "1px solid ".concat(isDark ? "#374151" : "#E5E7EB"),
paddingTop: "16px",
paddingRight: "20px",
paddingBottom: "16px",
paddingLeft: "20px",
};
// Content styles
var contentStyles = {
width: "508px",
height: "144px",
minWidth: "192px",
minHeight: "80px",
display: "flex",
flexDirection: "column",
gap: "20px",
padding: "20px",
flex: 1,
};
// Footer styles
var footerStyles = {
width: "508px",
height: "72px",
display: "flex",
justifyContent: "flex-end",
alignItems: "center",
gap: "10px",
borderTop: "1px solid ".concat(isDark ? "#374151" : "#E5E7EB"),
paddingTop: "16px",
paddingRight: "20px",
paddingBottom: "16px",
paddingLeft: "20px",
};
// Text styles
var titleStyles = {
fontSize: "18px",
fontWeight: 600,
color: isDark ? "#F9FAFB" : "#111827",
margin: 0,
fontFamily: "Inter, sans-serif",
};
var questionStyles = {
fontSize: "16px",
fontWeight: 500,
color: isDark ? "#F9FAFB" : "#111827",
margin: 0,
fontFamily: "Inter, sans-serif",
};
var descriptionStyles = {
fontSize: "14px",
fontWeight: 400,
color: isDark ? "#D1D5DB" : "#6B7280",
margin: 0,
fontFamily: "Inter, sans-serif",
lineHeight: "1.5",
};
// Close button styles
var closeButtonStyles = {
background: "none",
border: "none",
fontSize: "24px",
color: isDark ? "#9CA3AF" : "#6B7280",
cursor: "pointer",
padding: "0",
width: "24px",
height: "24px",
display: "flex",
alignItems: "center",
justifyContent: "center",
};
return (jsx("div", { style: overlayStyles, onClick: onClose, children: jsxs("div", { style: dialogStyles, onClick: function (e) { return e.stopPropagation(); }, children: [jsxs("div", { style: headerStyles, children: [jsxs("h2", { style: titleStyles, children: [finalLabels.deleteTitle, " ", aircraftCallsign] }), jsx("button", { style: closeButtonStyles, onClick: onClose, children: "\u00D7" })] }), jsxs("div", { style: contentStyles, children: [jsxs("p", { style: questionStyles, children: [finalLabels.confirmQuestion, " ", aircraftCallsign, "?"] }), jsx("p", { style: descriptionStyles, children: finalLabels.warningText })] }), jsxs("div", { style: footerStyles, children: [jsx(Button, { variant: "outline", onClick: onClose, theme: theme, style: {
backgroundColor: "transparent",
border: "1px solid #424242",
}, children: finalLabels.cancel }), jsx(Button, { variant: "danger", onClick: onConfirm, theme: theme, children: finalLabels.delete })] })] }) }));
};
var Select = function (_a) {
var label = _a.label, options = _a.options, value = _a.value, onChange = _a.onChange, _b = _a.multiSelect, multiSelect = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.required, required = _d === void 0 ? false : _d, error = _a.error, _e = _a.theme, theme = _e === void 0 ? "light" : _e, placeholder = _a.placeholder, style = _a.style, dropdownBackgroundColor = _a.dropdownBackgroundColor, inputBackgroundColor = _a.inputBackgroundColor;
var isDark = theme === "dark";
var _f = useState(false), open = _f[0], setOpen = _f[1];
var dropdownRef = useRef(null);
var isSelected = function (val) {
return Array.isArray(value) ? value.includes(val) : value === val;
};
var displayValue = function () {
if (!value || (Array.isArray(value) && value.length === 0)) {
return (placeholder || (multiSelect ? "Select Options" : "Select an Option"));
}
if (!multiSelect) {
var selected = options.find(function (o) { return o.value === value; });
return (selected === null || selected === void 0 ? void 0 : selected.label) || value;
}
// Multi-select logic
if (Array.isArray(value)) {
var selectedLabels = options
.filter(function (o) { return value.includes(o.value); })
.map(function (o) { return o.label; });
if (selectedLabels.length === 1) {
return selectedLabels[0];
}
return "".concat(selectedLabels.length, " Selected");
}
return "";
};
var handleChange = function (val) {
if (multiSelect && Array.isArray(value)) {
if (value.includes(val)) {
onChange(value.filter(function (v) { return v !== val; }));
}
else {
onChange(__spreadArray(__spreadArray([], value, true), [val], false));
}
}
else {
onChange(val);
setOpen(false);
}
};
useEffect(function () {
var handleClickOutside = function (e) {
if (dropdownRef.current &&
!dropdownRef.current.contains(e.target)) {
setOpen(false);
}
};
document.addEventListener("mousedown", handleClickOutside);
return function () { return document.removeEventListener("mousedown", handleClickOutside); };
}, []);
return (jsxs("div", { ref: dropdownRef, style: __assign({ display: "flex", flexDirection: "column", fontFamily: "Inter, sans-serif", gap: 4, width: "140px", position: "relative" }, style), children: [label && (jsxs("label", { style: { fontSize: 14, fontWeight: 500 }, children: [label, required && jsx("span", { style: { color: "red" }, children: " *" })] })), jsxs("div", { style: {
width: "100%",
height: 40,
border: error
? "1px solid red"
: open
? "2px solid #5876EE"
: "1px solid ".concat(isDark ? "#424242" : "#ccc"),
borderRadius: 4,
backgroundColor: inputBackgroundColor || (isDark ? "#333333" : "#FFFFFF"),
color: isDark ? "#FFFFFF" : "#1a1a1a",
display: "flex",
alignItems: "center",
justifyContent: "space-between",
padding: "0 8px",
fontSize: 14,
lineHeight: "24px",
cursor: disabled ? "not-allowed" : "pointer",
position: "relative",
}, onClick: function () { return !disabled && setOpen(!open); }, children: [jsx("span", { style: {
color: !value || (Array.isArray(value) && value.length === 0)
? isDark
? "#888888"
: "#666666"
: isDark
? "#FFFFFF"
: "#1a1a1a",
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap",
}, children: displayValue() }), jsx("span", { style: {
fontSize: 12,
color: isDark ? "#888888" : "#666666",
transform: open ? "rotate(180deg)" : "rotate(0deg)",
transition: "transform 0.2s ease",
}, children: "\u25BC" })] }), open && (jsx("div", { style: {
position: "absolute",
top: "100%",
left: 0,
right: 0,
marginTop: 4,
width: "100%",
backgroundColor: dropdownBackgroundColor || (isDark ? "#1D1B1D" : "#FFFFFF"),
border: "1px solid ".concat(isDark ? "#424242" : "#E0E0E0"),
borderRadius: 4,
display: "flex",
flexDirection: "column",
boxSizing: "border-box",
zIndex: 10000,
boxShadow: isDark
? "0 4px 12px rgba(0,0,0,0.3)"
: "0 4px 12px rgba(0,0,0,0.1)",
maxHeight: "200px",
overflowY: "auto",
}, children: options.map(function (option) { return (jsxs("label", { style: {
display: "flex",
alignItems: "center",
gap: multiSelect ? 10 : 0,
padding: "8px 12px",
minHeight: 32,
fontSize: 14,
lineHeight: "24px",
color: isDark ? "#FFFFFF" : "#1a1a1a",
cursor: "pointer",
backgroundColor: isSelected(option.value)
? isDark
? "#5876EE20"
: "#5876EE10"
: "transparent",
}, onMouseEnter: function (e) {
e.currentTarget.style.backgroundColor = isDark
? "#424242"
: "#F5F5F5";
}, onMouseLeave: function (e) {
e.currentTarget.style.backgroundColor = isSelected(option.value)
? isDark
? "#5876EE20"
: "#5876EE10"
: "transparent";
}, onClick: function (e) {
e.stopPropagation();
handleChange(option.value);
}, children: [multiSelect && (jsx("input", { type: "checkbox", checked: isSelected(option.value), onChange: function () { return handleChange(option.value); }, style: {
width: 16,
height: 16,
borderRadius: 4,
accentColor: "#5876EE",
} })), option.label] }, option.value)); }) })), error && jsx("span", { style: { color: "red", fontSize: 12 }, children: error })] }));
};
var AIRCRAFT_TYPES = [
"COMMERTIAL",
"MILITARY",
"DRONE",
"UNKNOWN",
];
var CLASSIFICATIONS = [
"FRIENDLY",
"HOSTILE",
"NEUTRAL",
"UNKNOWN",
];
var UpdateAircraftDialog = function (_a) {
var isOpen = _a.isOpen, onClose = _a.onClose, onUpdate = _a.onUpdate, aircraft = _a.aircraft, _b = _a.theme, theme = _b === void 0 ? "dark" : _b, _c = _a.labels, labels = _c === void 0 ? {} : _c;
var _d = useState(""), type = _d[0], setType = _d[1];
var _e = useState(""), classification = _e[0], setClassification = _e[1];
var _f = useState(false), isLoading = _f[0], setIsLoading = _f[1];
var isDark = theme === "dark";
// Default labels
var defaultLabels = {
updateTitle: "Update",
cancel: "Cancel",
update: "Update",
updating: "Updating...",
close: "Close",
type: "Type",
classification: "Classification",
};
var finalLabels = __assign(__assign({}, defaultLabels), labels);
useEffect(function () {
if (aircraft) {
setType(aircraft.type || "");
setClassification(aircraft.classification || "");
}
}, [aircraft]);
var handleUpdate = function () { return __awaiter(void 0, void 0, void 0, function () {
var updates, error_1;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
if (!aircraft)
return [2 /*return*/];
setIsLoading(true);
_a.label = 1;
case 1:
_a.trys.push([1, 4, 5, 6]);
updates = {};
if (type !== aircraft.type) {
updates.type = type;
}
if (classification !== aircraft.classification) {
updates.classification = classification;
}
if (!(Object.keys(updates).length > 0)) return [3 /*break*/, 3];
return [4 /*yield*/, onUpdate(updates)];
case 2:
_a.sent();
_a.label = 3;
case 3:
onClose();
return [3 /*break*/, 6];
case 4:
error_1 = _a.sent();
console.error("Error updating aircraft:", error_1);
return [3 /*break*/, 6];
case 5:
setIsLoading(false);
return [7 /*endfinally*/];
case 6: return [2 /*return*/];
}
});
}); };
var handleCancel = function () {
if (aircraft) {
setType(aircraft.type || "");
setClassification(aircraft.classification || "");
}
onClose();
};
if (!isOpen)
return null;
// Backdrop style
var backdropStyle = {
position: "fixed",
top: 0,
left: 0,
width: "100vw",
height: "100vh",
backgroundColor: "rgba(0, 0, 0, 0.3)",
display: "flex",
alignItems: "center",
justifyContent: "center",
zIndex: 9999,
backdropFilter: "blur(8px)",
};
// Dialog container style - exactly 360x314 as specified
var dialogStyle = {
width: "360px",
height: "314px",
backgroundColor: isDark ? "#171215" : "#FFFFFF",
borderRadius: "4px",
position: "relative",
boxShadow: "0px 0px 20px 0px #00000040",
border: isDark ? "1px solid #404040" : "1px solid #E5E7EB",
display: "flex",
flexDirection: "column",
overflow: "visible", // Allow dropdowns to overflow
opacity: 1,
transform: "rotate(0deg)",
};
// Header style
var headerStyle = {
width: "360px",
height: "64px",
justifyContent: "space-between",
opacity: 1,
borderBottomWidth: "1px",
borderBottomStyle: "solid",
borderBottomColor: isDark ? "#404040" : "#E5E7EB",
paddingTop: "16px",
paddingRight: "20px",
paddingBottom: "16px",
paddingLeft: "20px",
display: "flex",
alignItems: "center",
};
var titleStyle = {
margin: 0,
fontSize: "18px",
fontWeight: 600,
color: isDark ? "#FFFFFF" : "#111827",
fontFamily: "Inter, sans-serif",
};
// Close button style
var closeButtonStyle = {
border: "none",
background: "transparent",
cursor: "pointer",
width: "32px",
height: "32px",
display: "flex",
alignItems: "center",
justifyContent: "center",
borderRadius: "4px",
padding: "8px",
gap: "10px",
opacity: 1,
transition: "background-color 0.2s ease",
};
// Content style
var contentStyle = {
width: "360px",
height: "178px",
padding: "20px",
flex: 1,
display: "flex",
flexDirection: "column",
gap: "16px",
overflow: "visible", // Allow dropdowns to overflow
};
// Footer style
var footerStyle = {
padding: "0 20px 16px 20px", // Reduced bottom padding from 20px to 16px
display: "flex",
justifyContent: "flex-end",
alignItems: "center", // Center buttons vertically
gap: "12px",
borderTop: "1px solid ".concat(isDark ? "#404040" : "#E5E7EB"),
paddingTop: "16px", // Reduced top padding from 20px to 16px
};
return (jsx("div", { style: backdropStyle, onClick: handleCancel, children: jsxs("div", { style: dialogStyle, onClick: function (e) { return e.stopPropagation(); }, children: [jsxs("div", { style: headerStyle, children: [jsxs("h2", { style: titleStyle, children: [finalLabels.updateTitle, " ", (aircraft === null || aircraft === void 0 ? void 0 : aircraft.callsign) || (aircraft === null || aircraft === void 0 ? void 0 : aircraft.callSign) || (aircraft === null || aircraft === void 0 ? void 0 : aircraft.id)] }), jsx("button", { onClick: handleCancel, style: closeButtonStyle, onMouseEnter: function (e) {
e.currentTarget.style.backgroundColor = isDark
? "#404040"
: "#F3F4F6";
}, onMouseLeave: function (e) {
e.currentTarget.style.backgroundColor = "transparent";
}, children: jsx("img", { src: "/Close.svg", alt: finalLabels.close, style: {
width: "16px",
height: "16px",
filter: isDark ? "invert(1)" : "none",
} }) })] }), jsxs("div", { style: contentStyle, children: [jsx(Select, { label: "Type", options: AIRCRAFT_TYPES.map(function (type) { return ({
label: type.charAt(0) + type.slice(1).toLowerCase(),
value: type,
}); }), value: type, onChange: function (value) { return setType(value); }, theme: theme, style: { width: "320px" }, dropdownBackgroundColor: isDark ? "#171215" : "#FFFFFF", inputBackgroundColor: "transparent" }), jsx(Select, { label: "Classification", options: CLASSIFICATIONS.map(function (classification) { return ({
label: classification.charAt(0) +
classification.slice(1).toLowerCase(),
value: classification,
}); }), value: classification, onChange: function (value) { return setClassification(value); }, theme: theme, style: { width: "320px" }, dropdownBackgroundColor: isDark ? "#171215" : "#FFFFFF", inputBackgroundColor: "transparent" })] }), jsxs("div", { style: footerStyle, children: [jsx(Button, { variant: "outline", onClick: handleCancel, theme: theme, style: { minWidth: "80px" }, children: finalLabels.cancel }), jsx(Button, { variant: "default", onClick: handleUpdate, theme: theme, style: { minWidth: "80px" }, children: isLoading ? finalLabels.updating : finalLabels.update })] })] }) }));
};
var Navbar = function (_a) {
var user = _a.user, onLogout = _a.onLogout, onThemeToggle = _a.onThemeToggle, onLanguageToggle = _a.onLanguageToggle;
return (jsxs("div", { style: {
width: "100%",
height: "50px",
display: "flex",
justifyContent: "space-between",
alignItems: "center",
backgroundColor: "#5876EE",
fontFamily: "Inter, sans-serif",
padding: "0 16px",
boxSizing: "border-box",
}, children: [jsxs("div", { style: {
display: "flex",
alignItems: "center",
gap: "12px",
}, children: [jsx("img", { src: "/AIRCommand.svg", alt: "Logo", style: { width: 142.47, height: 16.5 } }), jsx("span", { style: {
fontSize: "17px",
lineHeight: "20px",
color: "#FFFFFF",
} })] }), jsxs("div", { style: {
display: "flex",
alignItems: "center",
gap: "10px",
}, children: [jsxs("span", { style: {
color: "#FFFFFF",
fontSize: "14px",
fontWeight: 400,
}, children: ["Welcome ", jsx("strong", { children: user.name }), " ", jsxs("span", { style: { opacity: 0.6 }, children: ["(", user.role, ")"] })] }), jsx("button", { onClick: onThemeToggle, style: {
width: "32px",
height: "32px",
border: "1px solid #FFFFFF",
borderRadius: "4px",
backgroundColor: "transparent",
display: "flex",
alignItems: "center",
justifyContent: "center",
padding: 0,
}, children: jsx("img", { src: "public/light.svg", alt: "theme", style: { width: 18, height: 18 } }) }), jsx("button", { onClick: onLanguageToggle, style: {
height: "32px",
width: "32px", // Kompakt boyut için
padding: "0",
backgroundColor: "transparent",
border: "1px solid #FFFFFF",
borderRadius: "4px",
color: "#FFFFFF",
fontWeight: 500,
cursor: "pointer",
fontSize: "14px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}, children: "En" }), jsx("button", { onClick: onLogout, style: {
height: "32px",
padding: "0 12px",
backgroundColor: "transparent",
border: "1px solid #FFFFFF",
borderRadius: "4px",
color: "#FFFFFF",
fontWeight: 500,
cursor: "pointer",
}, children: "Logout" })] })] }));
};
var Table = function (_a) {
var columns = _a.columns, data = _a.data, selectedRowId = _a.selectedRowId, _b = _a.selectedRowIds, selectedRowIds = _b === void 0 ? [] : _b, // Multi-select için
onRowClick = _a.onRowClick, _c = _a.theme, theme = _c === void 0 ? "dark" : _c, _d = _a.sortConfigs, sortConfigs = _d === void 0 ? [] : _d, onSortChange = _a.onSortChange;
var containerStyle = {
width: "768px",
height: "100%",
transform: "rotate(0deg)",
opacity: 1,
backgroundColor: theme === "dark" ? "#171215" : "#FFFFFF",
boxSizing: "border-box",
display: "flex",
flexDirection: "column",
fontFamily: "Inter, sans-serif",
overflow: "hidden",
};
var getColumnStyle = function (columnKey) {
var widths = {
callsign: "140px",
type: "160px",
classification: "160px",
latitude: "140px",
longitude: "140px",
};
return {
width: widths[columnKey] || "100px",
minWidth: widths[columnKey] || "100px",
padding: "8px",
display: "flex",
alignItems: "center",
fontSize: "14px",
fontWeight: 500,
lineHeight: "20px",
color: theme === "dark" ? "#FFFFFF" : "#000000",
whiteSpace: "nowrap",
};
};
var getClassificationStyle = function (classification) {
var colors = {
friendly: "#32CD32",
neutral: "#4D4DFF",
unknown: "#B2BEB5",
hostile: "#FF2400",
};
return {
color: colors[classification.toLowerCase()] || "#FFFFFF",
fontWeight: 600,
};
};
var getClassificationDotColor = function (classification) {
var dotColors = {
friendly: "#32CD32",
neutral: "#4D4DFF",
unknown: "#B2BEB5",
hostile: "#FF2400",
};
return dotColors[classification.toLowerCase()] || "#FFFFFF";
};
var getCellContent = function (key, row) {
var value = row[key];
if (key === "classification") {
var style = getClassificationStyle(value);
var dotColor = getClassificationDotColor(value);
return (jsxs(Fragment, { children: [jsx("div", { style: {
width: 8,
height: 8,
borderRadius: "50%",
backgroundColor: dotColor,
marginRight: 6,
} }), jsx("span", { style: style, children: value })] }));
}
if (key === "latitude" || key === "longitude") {
return parseFloat(String(value)).toFixed(4);
}
if (key === "altitude") {
return value ? "".concat(value, " ft") : "-";
}
if (key === "heading") {
return value ? "".concat(value, "\u00B0") : "-";
}
if (key === "speed") {
return value ? "".concat(value, " kts") : "-";
}
if (key === "lastUpdate") {
if (!value)
return "-";
var date = new Date(Number(value));
return date.toLocaleTimeString();
}
return value;
};
var getSortConfig = function (columnKey) {
return sortConfigs.find(function (config) { return config.column === columnKey; });
};
var handleHeaderClick = function (column, event) {
if (!column.sortable || !onSortChange)
return;
var isCtrlPressed = event.ctrlKey || event.metaKey;
onSortChange(column.key, isCtrlPressed);
};
var getSortIndicator = function (columnKey) {
var sortConfig = getSortConfig(columnKey);
if (!sortConfig)
return null;
var arrowIcon = sortConfig.direction === "asc"
? "/icons/arrow-up.svg"
: "/icons/arrow-down.svg";
var priorityText = sortConfigs.length > 1 ? " ".concat(sortConfig.priority) : "";
return (jsxs("div", { style: { display: "flex", alignItems: "center", gap: "2px" }, children: [jsx("img", { src: arrowIcon, alt: sortConfig.direction === "asc" ? "↑" : "↓", width: 12, height: 12 }), priorityText && (jsx("span", { style: { fontSize: "10px", fontWeight: 600 }, children: priorityText }))] }));
};
return (jsxs("div", { style: containerStyle, children: [jsx("div", { style: {
display: "flex",
height: 40,
}, children: columns.map(function (col) { return (jsxs("div", { style: __assign(__assign({}, getColumnStyle(col.key)), { fontWeight: 700, color: "#5876EE", gap: "4px", cursor: col.sortable ? "pointer" : "default", justifyContent: "space-between" }), onClick: function (e) { return handleHeaderClick(col, e); }, children: [jsx("span", { children: col.label }), col.sortable && getSortIndicator(col.key)] }, col.key)); }) }), jsxs("div", { style: {
flex: 1,
overflowY: "auto",
display: "flex",
flexDirection: "column",
scrollbarWidth: "none", // Firefox
msOverflowStyle: "none", // IE/Edge
position: "relative", // rectangle için
}, className: "custom-scroll-container", children: [jsx("div", { style: {
position: "absolute",
top: 0,
right: 0,
width: "5px", // 8px'den 5px'e
height: "60px", // 40px'den 60px'e
backgroundColor: "transparent", // Şeffaf arka plan
borderRadius: "4px",
border: "1px solid #424242", // Border eklendi
opacity: 0.7, // 0.8'den 0.7'ye
pointerEvents: "none",
zIndex: 2,
margin: "4px",
} }), data.map(function (row, idx) { return (jsx("div", { style: {
display: "flex",
cursor: "pointer",
backgroundColor: selectedRowIds.includes(row.id)
? "#BDC311" // Multi-select color (green-yellow)
: selectedRowId === row.id
? "#c6c616" // Single select color (yellow)
: idx % 2 === 1
? theme === "dark"
? "#1D1B1D"
: "#F5F5F5"
: theme === "dark"
? "transparent"
: "#FFFFFF",
borderTop: selectedRowIds.includes(row.id)
? "1px solid rgba(255, 255, 255, 0.2)"
: "none",
borderBottom: selectedRowIds.includes(row.id)
? "1px solid rgba(255, 255, 255, 0.2)"
: "none",
}, onClick: function (event) { return onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(row.id, event); }, children: columns.map(function (col) { return (jsxs("div", { style: getColumnStyle(col.key), children: [" ", getCellContent(col.key, row)] }, col.key)); }) }, row.id)); })] })] }));
};
var TextInput = function (_a) {
var label = _a.label, placeholder = _a.placeholder, value = _a.value, onChange = _a.onChange, _b = _a.type, type = _b === void 0 ? "text" : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.required, required = _d === void 0 ? false : _d, error = _a.error, _e = _a.theme, theme = _e === void 0 ? "dark" : _e;
var isDark = theme === "dark";
return (jsxs("div", { style: {
display: "flex",
flexDirection: "column",
fontFamily: "Inter, sans-serif",
gap: "8px",
width: "100%",
}, children: [label && (jsxs("label", { style: {
fontSize: "14px",
fontWeight: 500,
color: isDark ? "#FFFFFF" : "#1a1a1a", // Tema göre label rengi
}, children: [label, required && jsx("span", { style: { color: "red" }, children: " *" })] })), jsx("input", { type: type, placeholder: placeholder, value: value, onChange: onChange, disabled: disabled, style: {
width: "100%",
height: "40px",
border: error ? "1px solid red" : "1px solid #424242",
borderRadius: "4px",
backgroundColor: "transparent",
color: isDark ? "#FFFFFF" : "#1a1a1a",
padding: "0 12px",
fontSize: "14px",
lineHeight: "24px",
cursor: disabled ? "not-allowed" : "text",
outline: "none",
boxSizing: "border-box",
}, onFocus: function (e) {
if (!error) {
e.target.style.borderColor = "#5876EE";
}
}, onBlur: function (e) {
if (!error) {
e.target.style.borderColor = "#424242";
}
} }), error && jsx("span", { style: { color: "red", fontSize: "12px" }, children: error })] }));
};
var Icon = function (_a) {
var name = _a.name, _b = _a.alt, alt = _b === void 0 ? "" : _b, _c = _a.className, className = _c === void 0 ? "" : _c; _a.theme;
// Light tema için tema ikonlarını filtreleyerek koyu renge çevir
var iconStyle = {
width: "18px",
height: "18px",
filter: "none", // Tema ikonları için filtreleme kaldırıldı
};
return (jsx("img", { src: "/icons/".concat(name, ".svg"), alt: alt, className: className, style: iconStyle }));
};
var placeholder = "init";
export { Button, DeleteConfirmationDialog, Dialog, Icon, Navbar, Select, Table, TextInput, UpdateAircraftDialog, placeholder };
//# sourceMappingURL=index.es.js.map