tweak events wrapper for slab usage

uvalib · Nov 8, 2024 · 5117243 · 5117243
1 parent e229155
commit 5117243
Show file tree

Hide file tree

Showing 3 changed files with 155 additions and 71 deletions.
diff --git a/packages/data-wrap/README.md b/packages/data-wrap/README.md
@@ -1,76 +1,162 @@
-# \<data-wrap>
+# EventsData Class Usage
 
-This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.
+The `EventsData` class is part of the `data-wrap` package and is used to fetch event data from the LibCal API. It allows you to retrieve and work with event information, providing options to customize your requests with various parameters.
 
 ## Installation
 
-```bash
-npm i data-wrap
-```
+You can install the `data-wrap` package using npm:
 
-## Usage
+***
+npm install data-wrap
+***
 
-```html
-<script type="module">
-  import 'data-wrap/data-wrap.js';
-</script>
+## Importing EventsData
 
-<data-wrap></data-wrap>
-```
+To use the `EventsData` class in your project, import it as follows:
 
-## Linting and formatting
+***
+import { EventsData } from 'data-wrap';
+***
 
-To scan the project for linting and formatting errors, run
+## Constructor Parameters
 
-```bash
-npm run lint
-```
+When creating an instance of `EventsData`, you can provide an optional initialization object to configure your data fetching needs. The available parameters are:
 
-To automatically fix linting and formatting errors, run
+- `calId` (string): The calendar ID to fetch events from. Defaults to `'4299'` if not provided.
+- `lid` (string): The LibCal system ID (also referred to as `iid`). Defaults to `'863'` if not provided.
+- `limit` (number): The maximum number of events to fetch. Defaults to `100` if not provided.
+- `category` (string): The category ID to filter events by.
+- `query` (string): A search query to filter events.
 
-```bash
-npm run format
-```
+## Methods
 
-## Testing with Web Test Runner
+### fetchData()
 
-To execute a single test run:
+Fetches the event data from the LibCal API based on the configured parameters. Returns a promise that resolves to an object containing:
 
-```bash
-npm run test
-```
+- `items`: An array of `Event` objects.
+- `meta`: Metadata about the fetched data (e.g., `totalResults`).
 
-To run the tests in interactive watch mode run:
+## Example Usage
 
-```bash
-npm run test:watch
-```
+Below is an example of how to use the `EventsData` class to fetch and display events:
 
-## Demoing with Storybook
-
-To run a local instance of Storybook for your component, run
-
-```bash
-npm run storybook
-```
-
-To build a production version of Storybook, run
-
-```bash
-npm run storybook:build
-```
-
-
-## Tooling configs
-
-For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.
-
-If you customize the configuration a lot, you can consider moving them to individual files.
-
-## Local Demo with `web-dev-server`
-
-```bash
-npm start
-```
-
-To run a local development server that serves the basic demo located in `demo/index.html`
+***
+import { EventsData } from 'data-wrap';
+
+const eventsData = new EventsData({
+  calId: '4299',        // Optional: Calendar ID
+  lid: '863',           // Optional: LibCal system ID
+  limit: 100,           // Optional: Number of events to fetch
+  category: '33496',    // Optional: Category ID to filter events
+  query: 'workshop',    // Optional: Search query
+});
+
+eventsData.fetchData().then(results => {
+  console.log(results);
+  // Process the results as needed
+  results.items.forEach(event => {
+    console.log(`Title: ${event.title}`);
+    console.log(`Start Time: ${new Date(event.start).toLocaleString()}`);
+    // Additional processing...
+  });
+}).catch(error => {
+  console.error('Error fetching events:', error);
+});
+***
+
+## HTML Example
+
+You can also use the `EventsData` class in an HTML file with a script module:
+
+***
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>EventsData Example</title>
+</head>
+<body>
+  <h2>Events List</h2>
+  <ul id="events"></ul>
+
+  <script type="module">
+    import { EventsData } from 'data-wrap';
+
+    const eventsData = new EventsData({
+      calId: '4299',
+      category: '33496',
+    });
+
+    eventsData.fetchData().then(results => {
+      const eventsList = document.getElementById('events');
+      results.items.forEach(event => {
+        const listItem = document.createElement('li');
+        listItem.textContent = event.title;
+        eventsList.appendChild(listItem);
+      });
+    }).catch(error => {
+      console.error('Error fetching events:', error);
+    });
+  </script>
+</body>
+</html>
+***
+
+## Notes
+
+- Ensure that you have network access to the LibCal API and the necessary permissions to fetch data.
+- The API key used in the `EventsData` class is hardcoded. If you need to use a different API key, you should modify the class accordingly.
+
+## API Reference
+
+### EventsData Class
+
+#### Properties
+
+- `category?: string`
+- `calId: string` (default: `'4299'`)
+- `lid: string` (default: `'863'`)
+- `limit: number` (default: `100`)
+- `query?: string`
+
+#### Methods
+
+- `fetchData(): Promise<{ items: Event[], meta: any }>`
+
+### Event Object
+
+An `Event` object returned in the `items` array has the following properties:
+
+- `id: number`
+- `title: string`
+- `allday?: boolean`
+- `start?: number` (timestamp)
+- `end?: number` (timestamp)
+- `description?: string`
+- `link?: string`
+- `location?: string`
+- `campusLocation?: string`
+- `category?: string`
+- `owner?: string`
+- `calendar?: { name: string; url: string }`
+- `registration?: boolean`
+- `registrationOpen?: boolean`
+- `registrationClosed?: boolean`
+- `seats?: number`
+- `seatsTaken?: number`
+- `physicalSeats?: number`
+- `physicalSeatsTaken?: number`
+- `onlineSeats?: number`
+- `onlineSeatsTaken?: number`
+- `waitList?: boolean`
+- `image?: string`
+- `futureDates?: { id: number; start: number }[]`
+- `registrationCost?: number`
+- `moreInfo?: string`
+- `setupTime?: number`
+- `teardownTime?: number`
+
+## Contributing
+
+If you find any issues or have suggestions for improvements, please open an issue or submit a pull request on the project's GitHub repository.
diff --git a/packages/data-wrap/demo/events.html b/packages/data-wrap/demo/events.html
@@ -18,7 +18,7 @@ <h2>Example of EventsData</h2>
 
     import { EventsData } from '../dist/src/index.js';
 
-    let eventsData = new EventsData({query:"data"});
+    let eventsData = new EventsData({calId:"4299", category:"33496"});
     eventsData.fetchData().then(results=>{
       console.log(results);
       document.getElementById('events').innerHTML = results.items.map(r=>`<li>${r.title}</li>`).join();

diff --git a/packages/data-wrap/src/EventsData.ts b/packages/data-wrap/src/EventsData.ts
@@ -2,14 +2,11 @@
 import { Event, parseEvent } from './Event.js';
 import { GeneralData } from './GeneralData.js';
 
-const eventsEndpointURL =
-  'https://api2.libcal.com/1.0/events?key=c45a1428103ed000ba4025e9970edf54&iid=863&cal_id=4299&limit=600&campus=&category=&days=365';
-const eventsSearchEndpointURL =
-  'https://api2.libcal.com/1.0/event_search?key=c45a1428103ed000ba4025e9970edf54&iid=863&cal_id=4299&limit=600&campus=&category=&days=365';
-
 export class EventsData extends GeneralData {
   public category?: string;
-
+  public calId: string = '4299'; // Default calId
+  public lid: string = '863'; // Default lid (iid)
+  public limit: number = 600; // Default limit
   items: Event[] = [];
 
   constructor(init?: Partial<EventsData>) {
@@ -18,12 +15,13 @@ export class EventsData extends GeneralData {
   }
 
   private endpointURL() {
-    let params = this.query ? `&search=${this.query}` : '';
-    params += this.limit ? `&limit=${this.limit}` : '';
-    params += this.category ? `&category=${this.category}` : '';
-    return this.query
-      ? `${eventsSearchEndpointURL}${params}`
-      : `${eventsEndpointURL}${params}`;
+    const baseUrl = 'https://api2.libcal.com/1.0/';
+    const endpoint = this.query ? 'event_search' : 'events';
+    let params = `?key=c45a1428103ed000ba4025e9970edf54&iid=${this.lid}&cal_id=${this.calId}&campus=&days=365`;
+    params += `&limit=${this.limit}`; // Use the limit property
+    if (this.query) params += `&search=${encodeURIComponent(this.query)}`;
+    if (this.category) params += `&category=${this.category}`;
+    return `${baseUrl}${endpoint}${params}`;
   }
 
   async fetchData() {