README

WP预订插件UI模块

运行前端组装

要运行前端组装，只需运行

$ npm install # it will install JS dependencies and build `booking-js`
$ npm run build:css # build UI css

运行应用程序

此模块的前端逻辑期望检索初始应用程序状态以初始化应用程序。默认情况下，它是 window.EDDBK_APP_STATE，应在服务器上使用 wp_localize_script(...) 生成。

我们有两个独立的页面，它们需要不同的状态才能工作。预订页面和一个服务页面。因此，对于这两个页面，我们需要两个不同的应用程序状态。

服务页面

状态

服务页面上的预期状态结构（当用户打开某个服务进行编辑时）

{
  // List of all availabilities for this service.
  "availabilities": [
    {
      "id": 1,
      "fromDate": "2017-01-03",
      
      "repeats": "week",
      "repeatsEvery": 2,
      "repeatsOn": ["mon", "tue", "thu"],
      
      "repeatsEnds": "afterPeriod",
      "repeatsEndsPeriod": 12,
      
      "fromTime": "09:30:00",
      "toTime": "12:30:00"
    }
    // ... other availabilities
  ],
  // List of all available session lengths. 
  "sessions": [
    {
      "id": 1,
      "length": 120, // session length in seconds
      "price": 10.00 
    }
    // ... other sessions
  ],
  // Current service's bookings display options.
  "displayOptions": {
    "allowCustomerChangeTimezone": true
    // ... other options
  }
}

预订页面

状态

预订页面上的预期状态结构

{
  // Statuses that should be displayed on screen options
  "screenStatuses": [
    "draft", "approved", "scheduled", "pending", "completed"
  ],
  
  // List of all services. It will be used to filter bookings and for bookings editing.
  "services": [
    {
      "id": 1,
      "title": "Service Name",
      "color": "#ff7f50" // Service color needed to render it in the calendar
    }
  ]
}

端点

以下是预订页面所需的端点。路径不是真实的，这只是概念演示，需要后端提供所需的功能。

预订

GET /booking - 获取预订列表、筛选状态列表以及每个状态的项数、筛选项数。它应接受以下参数进行筛选

两个视图

• search - 用于筛选预订的搜索字符串。允许通过客户名称或客户电子邮件地址筛选预订。如果为空，则不进行搜索。例如：client@rebelcode.com,
• service - 用于筛选的服务。如果为空，则不进行服务筛选。例如：1,
• statuses - 启用的屏幕状态以筛选预订。例如：草稿,scheduled,
• status - 当前状态以筛选。例如：all 或 草稿。

日历筛选

• start - 获取预订的开始日期。例如："2017-07-11",
• end - 获取预订的结束日期。例如："2017-07-18".

列表视图筛选

• page - 分页的页码。例如：1,
• month - 要筛选的月份。如果为空，则不进行月份筛选。例如：1.

POST /booking - 创建一个预订。

UPDATE /booking/{id} - 通过ID更新预订。

DELETE /booking/{id} - 通过ID删除预订。

客户

此API端点是预订编辑功能所需的。当用户创建/编辑预订时，他可以搜索所有客户或创建新的客户。

GET /client?search={queryString} - 搜索客户。

POST /client - 创建新的客户。应接受以下两个字段

• name - 客户名称，
• email - 客户的电子邮件。