traffic-exchange-prototype-js-lib

v1.0.18

Published

2 days ago

Task Manager Library

Downloads

1,007

0High
0Medium
0Low

koltsoviv

Traffic Exchange Prototype JS Library

The traffic-exchange-prototype-js-lib is a modular JavaScript library designed for managing tasks in a traffic exchange system. It supports integration with various frameworks such as React, Angular, and Vanilla JavaScript. This README provides usage examples, configuration, and API references to help you integrate the library effectively.

Installation

npm install traffic-exchange-prototype-js-lib

Configuration

Initialization

To use the library, initialize the TaskManagerApp instance with your app's configuration:

import { TaskManagerApp } from "traffic-exchange-prototype-js-lib";

const appConfig = {
    apiUrl: 'http://localhost:8585', // Base API URL
    appKey: '123456789',            // Your application key
};

const taskManagerApp = new TaskManagerApp(appConfig);
taskManagerApp.init(); // Initialize the library

Usage

React Example

This example demonstrates how to use the library in a React component:

import React, { useState, useEffect, useRef } from "react";
import { TaskManagerApp } from "traffic-exchange-prototype-js-lib";
import { Events } from "traffic-exchange-prototype-js-lib/types/events";

const appConfig = { apiUrl: 'http://localhost:8585', appKey: '123456789' };
const taskManagerApp = new TaskManagerApp(appConfig);
taskManagerApp.init();

export const TaskManager = () => {
    const [tasks, setTasks] = useState([]);
    const userID = "telegram_user_id";
    const isRegistered = useRef(false);

    useEffect(() => {
        if (isRegistered.current) return;

        taskManagerApp.registerEvent(Events.TaskClaimSucceed, (task) => {
            alert(`Task claimed: ${task.name}`);
        });

        taskManagerApp.registerEvent(Events.TaskClaimFailed, (task) => {
            alert(`Failed to claim task: ${task.name}`);
        });

        isRegistered.current = true;
    }, []);

    useEffect(() => {
        taskManagerApp.getTaskList(userID).then(setTasks);
    }, []);

    return (
        <div>
            {tasks.map(task => (
                <div key={task.id}>
                    <h3>{task.name}</h3>
                    <button onClick={() => taskManagerApp.claimProcess(userID, task)}>Claim</button>
                </div>
            ))}
        </div>
    );
};

export default TaskManager;

Angular Example

import { Component, OnInit } from '@angular/core';
import { TaskManagerApp } from 'traffic-exchange-prototype-js-lib';

@Component({
  selector: 'app-task-manager',
  template: `
    <div *ngFor="let task of tasks">
      <h3>{{ task.name }}</h3>
      <button (click)="claimTask(task)">Claim</button>
    </div>
  `,
})
export class TaskManagerComponent implements OnInit {
  tasks = [];
  taskManagerApp: TaskManagerApp;

  constructor() {
    this.taskManagerApp = new TaskManagerApp({
      apiUrl: 'http://localhost:8585',
      appKey: '123456789',
    });
    this.taskManagerApp.init();
  }

  ngOnInit(): void {
    this.taskManagerApp.getTaskList('telegram_user_id').then((tasks) => {
      this.tasks = tasks;
    });
  }

  claimTask(task: any): void {
    this.taskManagerApp.claimProcess('telegram_user_id', task);
  }
}

Vanilla JavaScript Example

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="path-to-traffic-exchange-prototype-js-lib.js"></script>
  <script>
    const appConfig = {
        apiUrl: 'http://localhost:8585',
        appKey: '123456789'
    };

    const taskManagerApp = new TaskManagerApp(appConfig);
    taskManagerApp.init();

    document.addEventListener('DOMContentLoaded', () => {
        taskManagerApp.getTaskList('telegram_user_id').then(tasks => {
            const taskContainer = document.getElementById('task-container');
            tasks.forEach(task => {
                const taskDiv = document.createElement('div');
                taskDiv.innerHTML = `
                    <h3>${task.name}</h3>
                    <button onclick="claimTask('${task.id}')">Claim</button>
                `;
                taskContainer.appendChild(taskDiv);
            });
        });

        window.claimTask = (taskId) => {
            const task = tasks.find(t => t.id === taskId);
            taskManagerApp.claimProcess('telegram_user_id', task);
        };
    });
  </script>
</head>
<body>
  <div id="task-container"></div>
</body>
</html>

API

TaskManagerApp

Methods

init(): Initializes the task manager library.
getTaskList(userID: string): Promise<TaskList>: Fetches the list of tasks for the user.
claimProcess(userID: string, task: Task): void: Claims the specified task.
goProcess(userID: string, task: Task): void: Processes the specified task.

Events

Events.TaskClaimSucceed: Triggered when a task is successfully claimed.
Events.TaskClaimFailed: Triggered when task claiming fails.

License

This project is licensed under the MIT License.