Skip to main content

Monitor Activities

Use this Task Flow​

Before continuing, make sure you have followed the instructions to install the strudel-cli.

From the root of your app, run the following on the command line:

strudel add-taskflow my-taskflow --template monitor-activities

Generated Files​

my-taskflow
├── _config
│  ├── taskflow.config.ts
│  └── taskflow.types.ts
├── _layout.tsx
├── calendar.tsx
├── detail.tsx
└── index.tsx

Pages​

index.tsx​

URL Route: /
First page of the Monitor Activities Task Flow. Displays a list of records that a user can drill into.

detail.tsx​

URL Route: /detail
Detail page of the Monitor Activities Task Flow. When a user drills into a record, this page displays a more data about that particular activity.

calendar.tsx​

URL Route: /calendar
(Work in progress) Calendar page of the Monitor Activities Task Flow. Displays all activities by date in a calendar visualization.

Configuration​

This Task Flow can be configured from the taskflow.config.ts file in the _config directory of the generated template files.

taskflow.config.ts
import { MonitorActivitiesConfig } from './taskflow.types';

export const taskflow: MonitorActivitiesConfig = {
	data: {
		items: {
			/**
			 * Source of the data for the initial list of items.
			 */
			source: 'data/default/monitor-activities/experiments.json',
			/**
			 * Field name for the unique ID in the data source.
			 */
			idField: 'id',
		},
		detail: {
			/**
			 * Source of the data for the detail view of a single item.
			 */
			source: 'data/default/monitor-activities/experiment_detail.json',
			/**
			 * Field name for the unique ID in the data source.
			 */
			idField: 'id',
		},
	},
};