Maintenance and sites

Asset Card `<smart-asset-card>`

AssetCard is one machine as maintenance sees it: how long it has run, when it is next due for service, how it is doing and what is open against it.

Getting Started with React AssetCard Component

The Smart.Industrial React components need React 18 or later, because they render through react-dom/client. The steps use Vite with its react-ts template.

The complete demo in React is on the demo page, file by file.

1 Create a Vite + React + TypeScript app

npm create vite@latest my-smart-app -- --template react-ts

```
cd my-smart-app
```
then
```
npm install
```

2 Install Smart.Industrial

npm install smart-industrial

3 Import styles and render the component

The sample replaces the content of src/App.tsx. It imports the stylesheets and the AssetCard component, sets the properties the demo sets and handles the workOrderRequest event. It compiles under the template's strict TypeScript settings.

import 'smart-industrial/source/styles/smart.default.css';
import 'smart-industrial/source/styles/smart.industrial-elements.css';
import 'smart-industrial/source/styles/smart.industrial.css';
import { AssetCard } from 'smart-industrial/react/assetcard';

function App() {
  // Raised when the operator sends a request for work on the asset.
  const handleWorkOrderRequest = (event: CustomEvent) => {
    const { assetId, text, priority } = event.detail;
    // The component waits. The application carries out the request here.
    console.log('workOrderRequest', assetId, text, priority);
  };

  return (
    <AssetCard
      name="Feed pump P-101"
      assetId="P-101"
      model="KSB Etanorm 65-200"
      location="Pump house, bay 2"
      serviceInterval={2000}
      onWorkOrderRequest={handleWorkOrderRequest}
    />
  );
}

export default App;

The template's src/main.tsx renders App and needs no change.

Each component has an entry point of its own, and the sample imports from it. The entry point with all the components, smart-industrial/react, puts every component into the bundle, about 2.5 MB minified. Built with Vite, the Faceplate sample has 390 kB of JavaScript, React included, with smart-industrial/react/faceplate.

4 Run the dev server

npm run dev

Vite prints the URL of the application, usually http://localhost:5173/.

TypeScript Support

The types ship with smart-industrial. A type-only import of the component and its props uses import type, which the template's verbatimModuleSyntax requires:

import type { AssetCard, AssetCardProps } from 'smart-industrial/react/assetcard';

Each on* callback receives a CustomEvent whose detail is typed for that event, so the editor lists its fields. A handler typed (event: CustomEvent) => void, as in the sample, accepts it as well.

The keyboard interaction, roles and announcements of the component are on its accessibility page; they are the same in React.