@enki-tek/fms-web-components 0.0.90 → 0.1.1

package/components/WidgetCard/Card.scss

@@ -0,0 +1,108 @@
+@import './../variable.scss';
+.card {
+    font-family: $bodyFonts;
+    background-color: #f8f8f8;
+    border-radius: calc((3*$rem)/4);
+    padding: $rem;
+    border-color: transparent;
+    min-height: 354px;
+    min-width: 355px;
+}
+.doublecard{
+    font-family: $bodyFonts;
+    background-color: #f8f8f8;
+    border-radius: calc((3*$rem)/4);
+    padding: $rem;
+    border-color: transparent;
+    min-height: 354px;
+    min-width: 712px; 
+}
+.state-card {
+    font-family: $bodyFonts;
+    background-color: #f8f8f8;
+    border-radius: calc((3*$rem)/4);
+    padding: $rem;
+    border-color: transparent;
+    background-color: $gray-200 !important;
+}
+.title{
+    font-size: $widget-card-title;
+    font-weight: $title-weight;
+}
+.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: #c0e4c1; /* Green */
+        color: #4CAF50;
+        padding: 5px 10px;
+        border-radius: 5px;
+    }
+    .overdue-tag {
+        background-color: #eba797; /* Green */
+        color: #c9443a;
+        padding: 5px 10px;
+        border-radius: 5px;
+    }
+    .progress-tag {
+        background-color: #e6be75; /* Green */
+        color: #db9833;
+        padding: 5px 10px;
+        border-radius: 5px;
+    }
+
+    .statecardtitle {
+        font-weight: 400;
+        float: right;
+        width: max-content;
+    }
+
+    .subtitle {
+        float: left;
+        font-size: 16px;
+        font-weight: 400;
+        width: max-content;
+    }
+
+    .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;
+    }

package/components/WidgetCard/SensorStatusCard.svelte

@@ -0,0 +1,130 @@
+<script>
+	import { Col, Row } from 'sveltestrap';
+	export let status = 'active';
+	export let title = '#RTD101';
+	export let time = '7 am to 12 pm';
+</script>
+
+<div class="state-card mb-2">
+	<Row>
+		<Col>
+			<div class="content float-start">
+				<div class="statecardtitle">{title}</div>
+			</div>
+		</Col>
+		<Col>
+			<div class="status float-end">
+				<span class={status == 'active' ? 'activeStatus' : 'errorStatus'}>
+					{status == 'active' ? 'active' : 'error'}</span
+				>
+			</div>
+		</Col>
+	</Row>
+	<Row>
+		<Col><div class="time mt-1 float-start">{time}</div></Col>
+	</Row>
+</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 {
+  font-family: Roboto;
+  background-color: #f8f8f8;
+  border-radius: 0.75rem;
+  padding: 1rem;
+  border-color: transparent;
+  min-height: 354px;
+  min-width: 355px;
+}
+.doublecard {
+  font-family: Roboto;
+  background-color: #f8f8f8;
+  border-radius: 0.75rem;
+  padding: 1rem;
+  border-color: transparent;
+  min-height: 354px;
+  min-width: 712px;
+}
+.state-card {
+  font-family: Roboto;
+  background-color: #f8f8f8;
+  border-radius: 0.75rem;
+  padding: 1rem;
+  border-color: transparent;
+  background-color: #E9ECEF !important;
+}
+.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: #c0e4c1; /* Green */
+  color: #4CAF50;
+  padding: 5px 10px;
+  border-radius: 5px;
+}
+.overdue-tag {
+  background-color: #eba797; /* Green */
+  color: #c9443a;
+  padding: 5px 10px;
+  border-radius: 5px;
+}
+.progress-tag {
+  background-color: #e6be75; /* Green */
+  color: #db9833;
+  padding: 5px 10px;
+  border-radius: 5px;
+}
+.statecardtitle {
+  font-weight: 400;
+  float: right;
+  width: max-content;
+}
+.subtitle {
+  float: left;
+  font-size: 16px;
+  font-weight: 400;
+  width: max-content;
+}
+.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;
+}</style>

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

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  SensorStatusCardProps */
+/** @typedef {typeof __propDef.events}  SensorStatusCardEvents */
+/** @typedef {typeof __propDef.slots}  SensorStatusCardSlots */
+export default class SensorStatusCard extends SvelteComponentTyped<{
+    title?: string | undefined;
+    time?: string | undefined;
+    status?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type SensorStatusCardProps = typeof __propDef.props;
+export type SensorStatusCardEvents = typeof __propDef.events;
+export type SensorStatusCardSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        title?: string | undefined;
+        time?: string | undefined;
+        status?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/components/WidgetCard/StateCard.svelte

@@ -0,0 +1,133 @@
+<script>
+    import { Col, Row } from 'sveltestrap';
+    export let state = "overdue";
+    export let title = 'Fertilizing';
+    export let subtitle = 'Basil- G1B2';
+    export let time = '7 am to 12 pm';
+</script>
+<div class="state-card mb-2">
+<Row>
+
+    <Col>
+        <div class="status">
+                <span class={state == "completed" ? "completed-tag" : (state == "inprogress" ? "progress-tag" : "overdue-tag")}>
+                    {state == "completed" ? "completed" : (state == "inprogress" ? "inprogress" : "overdue")}</span>
+        </div>
+    </Col>
+            <Col>
+        <div class="content">
+            <div class="statecardtitle">{title}</div>
+        </div>
+    </Col>
+</Row>
+<Row>
+    <Col>
+        <div class="subtitle">{subtitle}</div>
+    </Col>
+            <Col> <div class="time mt-1">{time}</div>
+    </Col>
+</Row>
+</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 {
+  font-family: Roboto;
+  background-color: #f8f8f8;
+  border-radius: 0.75rem;
+  padding: 1rem;
+  border-color: transparent;
+  min-height: 354px;
+  min-width: 355px;
+}
+.doublecard {
+  font-family: Roboto;
+  background-color: #f8f8f8;
+  border-radius: 0.75rem;
+  padding: 1rem;
+  border-color: transparent;
+  min-height: 354px;
+  min-width: 712px;
+}
+.state-card {
+  font-family: Roboto;
+  background-color: #f8f8f8;
+  border-radius: 0.75rem;
+  padding: 1rem;
+  border-color: transparent;
+  background-color: #E9ECEF !important;
+}
+.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: #c0e4c1; /* Green */
+  color: #4CAF50;
+  padding: 5px 10px;
+  border-radius: 5px;
+}
+.overdue-tag {
+  background-color: #eba797; /* Green */
+  color: #c9443a;
+  padding: 5px 10px;
+  border-radius: 5px;
+}
+.progress-tag {
+  background-color: #e6be75; /* Green */
+  color: #db9833;
+  padding: 5px 10px;
+  border-radius: 5px;
+}
+.statecardtitle {
+  font-weight: 400;
+  float: right;
+  width: max-content;
+}
+.subtitle {
+  float: left;
+  font-size: 16px;
+  font-weight: 400;
+  width: max-content;
+}
+.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;
+}</style>

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

@@ -0,0 +1,29 @@
+/** @typedef {typeof __propDef.props}  StateCardProps */
+/** @typedef {typeof __propDef.events}  StateCardEvents */
+/** @typedef {typeof __propDef.slots}  StateCardSlots */
+export default class StateCard extends SvelteComponentTyped<{
+    title?: string | undefined;
+    time?: string | undefined;
+    subtitle?: string | undefined;
+    state?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type StateCardProps = typeof __propDef.props;
+export type StateCardEvents = typeof __propDef.events;
+export type StateCardSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        title?: string | undefined;
+        time?: string | undefined;
+        subtitle?: string | undefined;
+        state?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/components/WidgetCard/WidgetCard.svelte

@@ -0,0 +1,152 @@
+<script>
+	import { onMount } from 'svelte';
+	import { Col, Row } from 'sveltestrap';
+	export let title;
+	export let resizable = false;
+	export let widthOnly = true;
+	export let resizeQuotient = 2;
+	export let cardLength = 1;
+	let maximized = false;
+	let element = null;
+	const toggleMaximize = () => {
+		maximized = !maximized;
+		if (!maximized) {
+			element.style.width = element.getBoundingClientRect().width / resizeQuotient + 'px';
+			if (!widthOnly) {
+				element.style.height = element.getBoundingClientRect().height / resizeQuotient + 'px';
+			}
+
+			return;
+		}
+		element.style.width = element.getBoundingClientRect().width * resizeQuotient + 'px';
+		if (!widthOnly) {
+			element.style.height = element.getBoundingClientRect().height * resizeQuotient + 'px';
+		}
+	};
+</script>
+
+<div bind:this={element}>
+	<div class="m-2 {cardLength == 1 ? "card" : "doublecard"}">
+		<Row>
+			<Col>
+				<div class="title fw-normal">{title}</div>
+			</Col>
+			{#if resizable}
+				<Col>
+					<div class="float-end">
+						<i on:click={toggleMaximize} class="material-icons"
+							>{!maximized ? 'zoom_out_map' : 'zoom_in_map'}</i
+						>
+					</div>
+				</Col>
+			{/if}
+		</Row>
+		<Row>
+			<slot />
+		</Row>
+	</div>
+</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 {
+  font-family: Roboto;
+  background-color: #f8f8f8;
+  border-radius: 0.75rem;
+  padding: 1rem;
+  border-color: transparent;
+  min-height: 354px;
+  min-width: 355px;
+}
+.doublecard {
+  font-family: Roboto;
+  background-color: #f8f8f8;
+  border-radius: 0.75rem;
+  padding: 1rem;
+  border-color: transparent;
+  min-height: 354px;
+  min-width: 712px;
+}
+.state-card {
+  font-family: Roboto;
+  background-color: #f8f8f8;
+  border-radius: 0.75rem;
+  padding: 1rem;
+  border-color: transparent;
+  background-color: #E9ECEF !important;
+}
+.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: #c0e4c1; /* Green */
+  color: #4CAF50;
+  padding: 5px 10px;
+  border-radius: 5px;
+}
+.overdue-tag {
+  background-color: #eba797; /* Green */
+  color: #c9443a;
+  padding: 5px 10px;
+  border-radius: 5px;
+}
+.progress-tag {
+  background-color: #e6be75; /* Green */
+  color: #db9833;
+  padding: 5px 10px;
+  border-radius: 5px;
+}
+.statecardtitle {
+  font-weight: 400;
+  float: right;
+  width: max-content;
+}
+.subtitle {
+  float: left;
+  font-size: 16px;
+  font-weight: 400;
+  width: max-content;
+}
+.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;
+}</style>

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

@@ -0,0 +1,35 @@
+/** @typedef {typeof __propDef.props}  WidgetCardProps */
+/** @typedef {typeof __propDef.events}  WidgetCardEvents */
+/** @typedef {typeof __propDef.slots}  WidgetCardSlots */
+export default class WidgetCard extends SvelteComponentTyped<{
+    title: any;
+    resizable?: boolean | undefined;
+    widthOnly?: boolean | undefined;
+    resizeQuotient?: number | undefined;
+    cardLength?: number | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type WidgetCardProps = typeof __propDef.props;
+export type WidgetCardEvents = typeof __propDef.events;
+export type WidgetCardSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        title: any;
+        resizable?: boolean | undefined;
+        widthOnly?: boolean | undefined;
+        resizeQuotient?: number | undefined;
+        cardLength?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/components/WidgetCard/WidgetCardBody.svelte

@@ -0,0 +1,13 @@
+<script>
+</script>
+
+<div class="widget-card-body">
+	<slot />
+</div>
+
+<style>
+	.widget-card-body {
+		width: 100%;
+		position: relative;
+	}
+</style>

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

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

package/components/common.scss

@@ -786,4 +786,8 @@
     font-style: normal;
     font-weight: 400;
     line-height: normal;
+}
+
+:global(.bg-dark) {
+    background-color: $bg-dark !important;
 }

package/components/variable.scss

@@ -40,6 +40,8 @@ $warning: #FFBA3A;
 $warning-dark: #997404;
 $warning-light: #FFF3CD;
 
+$bg-dark: #05445E;
+
 $gray-900: #212529;
 $gray-800: #343A40;
 $gray-700: #495057;
@@ -49,6 +51,7 @@ $gray-400: #CED4DA;
 $gray-300: #DEE2E6;
 $gray-200: #E9ECEF;
 $gray-100: #F8F9FA;
+$gray-1000: #F7F8F8;
 
 $green-900: #051B11;
 $green-800: #0A3622;
@@ -97,8 +100,8 @@ $blue-500: rgba(13, 110, 253, 1);
 $Title-Color: #152536;
 
 // cardicon color private
-$gray-cardicon:#444;
-$white-cardicon:#B8B8B8;
+$gray-cardicon: #444;
+$white-cardicon: #B8B8B8;
 
 $box-shadow-green: rgba(11, 235, 49, 0.25);
 //Button sizes
@@ -123,4 +126,11 @@ $highShadow: 0px 1px 16px 0px rgba(0, 0, 0, 0.10);
 
 // transition variable hover
 
-$transitionTimeHover:.3s;
+$transitionTimeHover: .3s;
+$rem: 1rem;
+$status-card-title : 24px;
+$status-card-text : 12px;
+$status-card-value : 28px;
+$widget-card-title : 20px;
+$sidebar-title : 16px;
+$title-weight: 400;