@enki-tek/fms-web-components 0.1.13 → 0.1.15

package/components/Layout/Page.svelte

@@ -3,26 +3,21 @@
 </script>
 
 <div class="main-content">
-	<div
-		class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 mb-3
-"
-	>
-		<Row class="d-flex flex-lg-row flex-column px-0" style="width:100%">
-			<Col md="7">
-				<header>
-					<div class="d-flex flex-row justify-content-start title">
-						<slot name="title" />
-					</div>
-				</header>
-			</Col>
-			<Col class="mt-1">
-				<slot name="actions" />
-			</Col>
-		</Row>
-		<Row>
-			<slot name="widget" />
-		</Row>
+	<div class="d-flex justify-content-between flex-wrap align-items-top mt-3 pb-2 px-0 flex-fill">
+		<Col md="7">
+			<header>
+				<div class="d-flex flex-row justify-content-start title">
+					<slot name="title" />
+				</div>
+			</header>
+		</Col>
+		<Col class="mt-1">
+			<slot name="actions" />
+		</Col>
 	</div>
+	<Row>
+		<slot name="widget" />
+	</Row>
 	<div>
 		<slot name="statuscard" />
 	</div>

package/components/StatusCard/GrayCard.svelte

@@ -0,0 +1,57 @@
+
+<div class=" m-2 gray-card">
+	<slot />
+</div>
+
+<style>@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
+@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap");
+.card {
+  border-color: transparent;
+  background-color: #ffffff;
+  padding: 1rem;
+  border-radius: 0.75rem;
+  font-family: Roboto;
+  min-height: 14rem;
+}
+.card-mini {
+  height: 6rem !important;
+  min-height: 6rem !important;
+}
+.title {
+  font-size: 24px;
+  font-weight: 400;
+}
+.text {
+  font-size: 12px;
+}
+.value {
+  font-size: 28px;
+}
+.index {
+  font-size: medium !important;
+}
+.box1 {
+  background-color: #D1E7DD;
+  width: fit-content;
+  border-radius: 0.3333333333rem;
+}
+.box2 {
+  background-color: #F8D7DA;
+  width: fit-content;
+  border-radius: 0.3333333333rem;
+}
+.sensor-box {
+  background-color: #6C757D;
+}
+.plain-card-title {
+  font-size: 20px;
+  font-weight: 400;
+}
+.gray-card {
+  border-color: transparent;
+  background-color: #F8F9FA;
+  padding: 1rem;
+  border-radius: 0.75rem;
+  font-family: Roboto;
+}</style>

package/components/StatusCard/GrayCard.svelte.d.ts

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  GrayCardProps */
+/** @typedef {typeof __propDef.events}  GrayCardEvents */
+/** @typedef {typeof __propDef.slots}  GrayCardSlots */
+export default class GrayCard extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type GrayCardProps = typeof __propDef.props;
+export type GrayCardEvents = typeof __propDef.events;
+export type GrayCardSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/components/StatusCard/PlainCard.svelte

@@ -0,0 +1,68 @@
+<script>
+	export let title = 'Sensor Alert and Notification';
+</script>
+
+<div class=" m-2 card">
+	<div class="row">
+		<div class="col plain-card-title">{title}</div>
+		<div class="col">
+			<div class="float-end">
+				<slot name="activity" />
+			</div>
+		</div>
+	</div>
+	<slot />
+</div>
+
+<style>@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
+@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap");
+.card {
+  border-color: transparent;
+  background-color: #ffffff;
+  padding: 1rem;
+  border-radius: 0.75rem;
+  font-family: Roboto;
+  min-height: 14rem;
+}
+.card-mini {
+  height: 6rem !important;
+  min-height: 6rem !important;
+}
+.title {
+  font-size: 24px;
+  font-weight: 400;
+}
+.text {
+  font-size: 12px;
+}
+.value {
+  font-size: 28px;
+}
+.index {
+  font-size: medium !important;
+}
+.box1 {
+  background-color: #D1E7DD;
+  width: fit-content;
+  border-radius: 0.3333333333rem;
+}
+.box2 {
+  background-color: #F8D7DA;
+  width: fit-content;
+  border-radius: 0.3333333333rem;
+}
+.sensor-box {
+  background-color: #6C757D;
+}
+.plain-card-title {
+  font-size: 20px;
+  font-weight: 400;
+}
+.gray-card {
+  border-color: transparent;
+  background-color: #F8F9FA;
+  padding: 1rem;
+  border-radius: 0.75rem;
+  font-family: Roboto;
+}</style>

package/components/StatusCard/PlainCard.svelte.d.ts

@@ -0,0 +1,29 @@
+/** @typedef {typeof __propDef.props}  PlainCardProps */
+/** @typedef {typeof __propDef.events}  PlainCardEvents */
+/** @typedef {typeof __propDef.slots}  PlainCardSlots */
+export default class PlainCard extends SvelteComponentTyped<{
+    title?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    activity: {};
+    default: {};
+}> {
+}
+export type PlainCardProps = typeof __propDef.props;
+export type PlainCardEvents = typeof __propDef.events;
+export type PlainCardSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        title?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        activity: {};
+        default: {};
+    };
+};
+export {};

package/components/StatusCard/StatusCard.scss

@@ -36,4 +36,18 @@
     background-color: $red-100;
     width: fit-content;
     border-radius: calc($rem/3);
+}
+.sensor-box{
+    background-color: $gray-600;
+}
+.plain-card-title{
+    font-size: $widget-card-title;
+    font-weight: $title-weight;
+}
+.gray-card{
+    border-color: transparent;
+    background-color: $gray-100;
+    padding: $rem;
+    border-radius: calc((3*$rem)/4);
+    font-family: $bodyFonts;
 }

package/components/StatusCard/StatusCard.svelte

@@ -1,10 +1,12 @@
 <script>
 	export let className = '';
 	export let small = false;
+	export let notify = false;
+	export let sensor = false;
 </script>
 
-<div class="col-12 col-md-6 col-sm-6 col-lg-6 col-xl-3">
-	<div class="m-2 card {className} {small? 'card-mini':''}">
+<div class="{sensor ? "col-12 col-md-12 col-sm-12 col-lg-12 col-xl-6" : "col-12 col-md-6 col-sm-6 col-lg-6 col-xl-3" } ">
+	<div class="{notify ? 'blip' : ''} m-2 card {className} {small ? 'card-mini' : ''}">
 		<slot />
 	</div>
 </div>
@@ -46,4 +48,32 @@
   background-color: #F8D7DA;
   width: fit-content;
   border-radius: 0.3333333333rem;
+}
+.sensor-box {
+  background-color: #6C757D;
+}
+.plain-card-title {
+  font-size: 20px;
+  font-weight: 400;
+}
+.gray-card {
+  border-color: transparent;
+  background-color: #F8F9FA;
+  padding: 1rem;
+  border-radius: 0.75rem;
+  font-family: Roboto;
+}
+.blip {
+  animation: blip 1s infinite; /* Continuous animation */
+}
+@keyframes blip {
+  0% {
+    box-shadow: 0 0 5px rgba(255, 193, 7, 0.5); /* Warning color */
+  }
+  50% {
+    box-shadow: 0 0 10px rgb(255, 193, 7); /* Stronger warning color */
+  }
+  100% {
+    box-shadow: 0 0 5px rgba(255, 193, 7, 0.5); /* Return to normal */
+  }
 }</style>

package/components/StatusCard/StatusCard.svelte.d.ts

@@ -4,6 +4,8 @@
 export default class StatusCard extends SvelteComponentTyped<{
     className?: string | undefined;
     small?: boolean | undefined;
+    notify?: boolean | undefined;
+    sensor?: boolean | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -18,6 +20,8 @@ declare const __propDef: {
     props: {
         className?: string | undefined;
         small?: boolean | undefined;
+        notify?: boolean | undefined;
+        sensor?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/StatusCard/StatusCardBody.svelte

@@ -58,4 +58,18 @@
   background-color: #F8D7DA;
   width: fit-content;
   border-radius: 0.3333333333rem;
+}
+.sensor-box {
+  background-color: #6C757D;
+}
+.plain-card-title {
+  font-size: 20px;
+  font-weight: 400;
+}
+.gray-card {
+  border-color: transparent;
+  background-color: #F8F9FA;
+  padding: 1rem;
+  border-radius: 0.75rem;
+  font-family: Roboto;
 }</style>

package/components/StatusCard/StatusCardTitle.svelte

@@ -48,4 +48,18 @@
   background-color: #F8D7DA;
   width: fit-content;
   border-radius: 0.3333333333rem;
+}
+.sensor-box {
+  background-color: #6C757D;
+}
+.plain-card-title {
+  font-size: 20px;
+  font-weight: 400;
+}
+.gray-card {
+  border-color: transparent;
+  background-color: #F8F9FA;
+  padding: 1rem;
+  border-radius: 0.75rem;
+  font-family: Roboto;
 }</style>

package/components/WidgetCard/AlertFooter.svelte

@@ -0,0 +1,232 @@
+<script>
+	import { Col, Row } from 'sveltestrap';
+	export let text = 'need to swtch on the light';
+	export let color = false;
+	export let icon = 'warning_amber';
+	export let switchButton = false;
+	export let time = '10 mints ago';
+</script>
+
+<Row class="mt-2">
+	<Col
+		><div class={color ? 'plain-color-card' : 'plain-card'}>
+			<div>
+				<i class="material-icons px-1 pe-2 pt-1 warning-icon {color ? 'warning-icon-medium' : ''}"
+					>{icon}</i
+				>
+			</div>
+			<div class="pe-2 pt-1">{text}</div>
+		</div></Col
+	>
+	<Col md="3">
+		{#if switchButton}
+			<div class="float-end">
+				<label class="switch">
+					<input type="checkbox" />
+					<span class="slider" />
+				</label>
+			</div>
+		{:else}
+			<div class="float-end time-slot pt-2">{time}</div>
+		{/if}
+	</Col>
+</Row>
+
+<style>@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
+@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap");
+.card {
+  font-family: Roboto;
+  background-color: #ffffff;
+  border-radius: 0.75rem;
+  padding: 1rem;
+  border-color: transparent;
+  min-height: 22rem;
+}
+.state-card {
+  font-family: Roboto;
+  background-color: #f8f8f8;
+  border-radius: 0.75rem;
+  padding: 1rem;
+  border-color: transparent;
+  background-color: #E9ECEF !important;
+}
+.plain-card {
+  font-family: Roboto;
+  font-size: 16px;
+  border-radius: 0.75rem;
+  padding: 0.2rem;
+  width: fit-content;
+  display: flex;
+}
+.plain-color-card {
+  font-family: Roboto;
+  font-size: 12px;
+  border-radius: 0.75rem;
+  padding: 0.2rem;
+  width: fit-content;
+  background-color: antiquewhite;
+  display: flex;
+}
+.title {
+  font-size: 20px;
+  font-weight: 400;
+}
+.full-screen {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1000;
+  margin: 0;
+}
+.full-screen .card {
+  width: 100%;
+  height: 100%;
+  border-radius: 0;
+}
+.content {
+  font-size: 16px;
+}
+.status {
+  top: 10px;
+  right: 10px;
+  font-size: 12px;
+  float: left;
+}
+.completed-tag {
+  background-color: #E8F3EE;
+  color: #00750F;
+  border: 1px solid #C5E1D4;
+  padding: 5px 10px;
+  border-radius: 5px;
+}
+.overdue-tag {
+  background-color: #FFE9E8;
+  color: #FF4343;
+  border: 1px solid #FFC9C7;
+  padding: 5px 10px;
+  border-radius: 5px;
+}
+.progress-tag {
+  background-color: #FFF9E6;
+  color: #EA6D03;
+  padding: 5px 10px;
+  border: 1px solid #FFEFC1;
+  border-radius: 5px;
+}
+.inactive-tag {
+  background-color: #E9ECEF;
+  color: #6C757D;
+  padding: 5px 10px;
+  border: 1px solid #DEE2E6;
+  border-radius: 5px;
+}
+.statecardtitle {
+  font-weight: 400;
+  float: right;
+  width: 50%;
+}
+.subtitle {
+  float: left;
+  font-size: 16px;
+  font-weight: 400;
+  width: 100%;
+}
+.time {
+  float: right;
+  font-size: 12px;
+  color: #999;
+  width: max-content;
+}
+.activeStatus {
+  background-color: #c0e4c1;
+  /* Green */
+  color: #4CAF50;
+  padding: 5px 10px;
+  border-radius: 5px;
+}
+.errorStatus {
+  background-color: #eba797;
+  /* Green */
+  color: #c9443a;
+  padding: 5px 10px;
+  border-radius: 5px;
+}
+.badge {
+  font-family: Roboto;
+  background-color: #f8f8f8;
+  border-radius: 0.2rem;
+}
+.warning-icon {
+  color: orange;
+}
+.warning-icon-medium {
+  font-size: medium;
+}
+.time-slot {
+  font-size: 12px;
+  font-weight: 400;
+  color: #6C757D;
+}
+/* Toggle switch container */
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 70px;
+  height: 34px;
+}
+/* Hide default HTML checkbox */
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+/* Slider */
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  transition: 0.4s;
+  border-radius: 34px;
+}
+.slider:before {
+  position: absolute;
+  content: "OFF";
+  color: white;
+  font-size: 14px;
+  font-weight: bold;
+  text-align: center;
+  width: 100%;
+  line-height: 34px;
+  transition: 0.4s;
+  margin-left: 15px;
+}
+/* Circle (round icon) */
+.slider:after {
+  position: absolute;
+  content: "";
+  height: 26px;
+  width: 26px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  transition: 0.4s;
+  border-radius: 50%;
+}
+/* Checked state */
+input:checked + .slider {
+  background-color: #4CAF50;
+}
+input:checked + .slider:before {
+  padding-right: 50px;
+  content: "ON";
+}
+input:checked + .slider:after {
+  transform: translateX(36px);
+}</style>

package/components/WidgetCard/AlertFooter.svelte.d.ts

@@ -0,0 +1,31 @@
+/** @typedef {typeof __propDef.props}  AlertFooterProps */
+/** @typedef {typeof __propDef.events}  AlertFooterEvents */
+/** @typedef {typeof __propDef.slots}  AlertFooterSlots */
+export default class AlertFooter extends SvelteComponentTyped<{
+    color?: boolean | undefined;
+    icon?: string | undefined;
+    text?: string | undefined;
+    time?: string | undefined;
+    switchButton?: boolean | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type AlertFooterProps = typeof __propDef.props;
+export type AlertFooterEvents = typeof __propDef.events;
+export type AlertFooterSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        color?: boolean | undefined;
+        icon?: string | undefined;
+        text?: string | undefined;
+        time?: string | undefined;
+        switchButton?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};