使用 React-Leaflet 来开发座位管理系统

1 年 ago

科, 颖

1 minute

增加功能

正在添加功能。

请参考以下文章。

我参考了这篇文章。

首先

(Note: This translation is in traditional Chinese characters. If you prefer simplified Chinese characters, please let me know.)

原因是公司的座位管理方式。
即使进入令和时代，座位的管理仍然是通过PowerPoint进行的。
参考了LINE的文章后，也发现了相同的描述，
座位信息的可信度很低，即使突然要来上班也无法确定是否真的有空位。
而且因为下周和下个月的座位信息还没有，即使假设从下个月开始重新回到公司，
也只能附上一句话然后更新PowerPoint。
因此，得出了需要具备可信度和即时性的Web系统座位管理的结论。

開發的經過 de

有三个理由。
首先，是因为没有任何一个免费的座位管理系统具备我所需的功能。
可以通过搜索座位管理系统来了解，即使有免费试用，也找不到永久免费的选项。

第二个原因是为了自己的学习。

虽然也可以使用我之前提到的文章中的内容，但因为我个人想学习React，所以我想用React-Leaflet搭建系统。

但是由于没有关于使用React-Leaflet构建系统的文章或其他资源，所以我最终选择进行开发。

因为我们想要将第三个系统变为可以进行座位预订的指定期间功能。这个功能在我们参考的文章中并没有提到。

完成的东西 de

最终成品的效果就是这样的。

您可以通过左上角的选择框切换楼层和日期，了解当天的座位信息。同时，您也可以注册固定座位，而不是使用指定的时间段。

无法做的事情 zuò de

座席の追加（DBから直接ポチポチする必要があります）　管理モードを追加しました
オフィスの追加（DBから直接ポチポチ、画像を自分で加工する必要があります）
期間指定の座席の削除（この日からこの日の座席を一気に空席に、ということはできません）
権限判定（誰でも座席を空席にすることができます）

技术要素

Sqlite3

React和Express+Sqlite3分别用于前端和后端。
因为是第一次尝试，对React和Express都遇到了困难。
由于是第一次尝试，代码有些混乱，请谅解。

代码 (daima)

代码已在GitHub上公开。

使用方法

只需要进行代码克隆并运行npm start，应该就可以正常工作。
然后，请根据自己的办公室设置进行相应更改。

请更改办公室的图片。可以参考座位预约应用程序前端的public文件夹中的office.png文件进行更改。您也可以参考seat-reservation-app-front\public\office.xlsx文件作为模板。如果是1100×620的图片大小就可以了。

请更改seat-reservation-app-rest-api\app\db\sqlite3-database.db中的floor_master。可以从相同文件夹的csv文件进行导入。

艰苦的斗争

我在React-Leaflet部分遇到了一些困难。

Leafletだとこんな感じでdivのIDからオブジェクトを指定できるがReactだと・・・？？？

var mapobj = L.map('mapDiv',{zoomControl:false});
mapobj.setView([35.36063,138.72731],10);

正确答案是使用地图。

const parentMap = useMap();
parentMap.setView(e.popup._latlng, parentMap.getZoom());

これも普通だとonでバインドできるがReactだと・・・？？？？

map.on('popupopen', function(e) {
  // PopupEvent e
  // e.type
  // e.target
  // e.sourceTarget
  // e.popup
});

正确答案是使用useMapEvents。

const mapEvents = useMapEvents({
  popupopen(e) {
    setTimeout(function(){
      parentMap.setView(e.popup._latlng, parentMap.getZoom());
    }, 10);
  }
})

我还在其他很多地方遇到了困惑，但是我选择略过不说。

总结

在一些细节上我曾经很困扰，但是随着对React的理解加深，最终能够达到预期的结果，感觉很不错。

如果有时间的话，我们希望添加座席和办公室并实施管理模式。