就在几年前,很难想象远程工作会成为日常生活的常态。但今天,这是很平常的事。很多员工都不愿意在交通高峰期花宝贵的时间上下班去一个大城市的中心。

相反,还有更多令人愉快的事情要做。你可以花这段时间读一本有趣的书,喝杯咖啡,爱抚你心爱的猫。坐在阳台上俯瞰大海,所有这些事情都可以做到。你觉得这只是个梦吗?不!它不仅是许多IT专业人员的日常生活。

基于这些具体的工作,公司的经理们可能有更多的担忧。它是关于追踪工作人员的位置和同步他们的工作时间表。在本文中,我将向您展示如何使用Webix组件和第三方解决方案来解决这些困难。

你可以找到完整的源代码和现场演示 在这里 .

应用概览

让我们想象一下,你管理的是一个所有员工都远程工作的IT部门。每个国家都位于欧洲国家之一。根据工作地点,雇员的当地时间可能略有不同。

作为一个好的管理者,你要时刻保持团队成员的名单。点击这个列表中的一些员工时,你可以很容易地了解他们的地理位置和当地时间。

我们已经计划好了我们的应用程序的功能。现在让我们考虑如何以这样的方式组织所有这些功能,使界面简单和方便用户。

首先,我们将把我们的应用程序分成两个条件部分。左边是管理地图的员工和按钮列表,右边是地理定位地图。

在浏览器中,我们的应用程序看起来像这样:

我们已经定义了应用程序的功能和接口。现在让我们继续实践,看看如何使用Webix组件和第三方解决方案实现所有这些。

准备好地面

要与Webix合作,我们需要首先包括其资源。对于我们的应用程序,我们可以使用标准的库的GOL版本。它可以在此下载,也可以通过CDN提供以下链接:

< 剧本 类型 = "案文/JavaS来文" SRC = "https://cdn.webix.com/edge/webix.js" >< / 剧本 >

除了核心图书馆外,我们还需要包括开放街道地图服务的资源,这些资源将作为互动地图使用。

为了您的方便,Webix开发人员创建了一个特殊的集成。它允许您初始化交互映射作为一个基本的Webix组件。要使用这个集成,您需要通过CDN通过以下链接连接其资源:

< 剧本 类型 = "案文/JavaS来文" SRC = "//cdn.webix.com/components/edge/openmap/openmap.js" >< / 剧本 >

创建布局

现在让我们看看我们应用程序的布局。这里值得注意的是,Webix在构建接口时使用声明式方法。意味着每个组件都是 Json 它存储了所有的特征 关键:价值 .

通过将这些对象相互嵌套,我们可以形成接口的结构。注意该接口是通过一个特殊的 webix.ui() 构造器,它使用具有现成布局的JSON对象。

我们已经完成了设计布局的理论。现在,让我们在实践中应用这些知识,并创建我们的应用程序的框架。

在概述接口时,我们决定将它分成两个垂直部分.在左边,我们将列出管理地图的员工和控件列表。地图将放在右边.将布局划分为列是通过 克尔斯 财产。在代码中看起来是这样的:

韦比克斯。 UI ( {
    克尔斯 : [
        {
            //清单和2个控制器的配置
        } ,
        {
            //地图的配置
        } ,
    ] ,
} ) ;

管理地图的员工列表和2个按钮将以行的形式放在左边的列中。这种布局的划分是通过 行 财产。我们布局的代码会是这样的:

韦比克斯。 UI ( {
    克尔斯 : [
        {
            行 : [
                { ... } , //按钮的配置
                { ... } , //按钮的配置
                { ... } //清单的配置
            ] ,
        } ,
        {
        //地图的配置
        } ,
    ] ,
} ) ;

我们已经包含了所有必要的来源,并形成了应用程序的布局。现在让我们看看如何配置接口的相关部分,实现上面提到的功能。

编制雇员名单

因为我们不得不把员工名单显示为 列表 ,我们将使用列表组件。为了满足我们的需求,这个小部件的基本配置如下:

{
    看法 : "list" ,
    身份证 : "list_id" ,
    模板 : "#name#, #position#" ,
    选择 : 真实的 ,
    无边界的 : 真实的 ,
    乌拉圭网址 : "./data/list_data.json"
}

所有的Webix组件都可以通过 看法 财产。为了引用小部件并使用其API,我们通过 身份证 财产。

列表中的每个元素将包含雇员的姓名及其职位。这种显示是通过 模板 属性,它包含一个带有相应数据键的字符串( #name# ).

除此之外,我们还可以通过 选择 属性和隐藏小部件边界通过 无边界的 配置。

它只保留加载存储在单独的JSON文件中的数据。您可以使用URL属性来完成此操作,该属性将文件的相应路径作为值。这里值得注意的是,类似的数据属性仅用于加载存储在客户端的数据。

员工名单准备好了。让我们添加两个额外的按钮来控制地图并把它们放在列表的上方。这些控件的配置如下:

{ 身份证 : "show_all_locations" , 看法 : "button" , 标签 : "展示所有地点" , 通信服务系统 : "webix_primary" } ,
{ 身份证 : "clear_all_locations" , 看法 : "button" , 标签 : "清除所有地点" } ,
{ /* list */ }

除此之外 身份证 和 看法 属性,我们通过 标签 财产。顶部控制器将通过 通信服务系统 财产。就这样。接口的左侧完全完成了。在浏览器中,我们将看到以下结果:

创建地图

确定员工的地理位置需要适当的地图。为此,我们将使用 开放街道地图 服务。它允许使用指定坐标的特殊标记标记地图上的某些点。也可以将弹出式消息附加到这些标记上。

正如您所知,Webix团队的开发人员总是在关注组件的可用性。它还涉及与第三方解决方案的集成。开放街头的服务也不例外。基于此,我们可以将映射初始化为一个常规的Webix组件。地图的配置如下:

{
    看法 : "open-map" ,
    身份证 : "map" ,
    快速移动 : 5 ,
    居中 : 中心点
}

除此之外 身份证 和 看法 属性,我们可以通过 快速移动 属性并指定具有中心点坐标的数组 居中 财产。

此外,这些坐标将用于返回最初的地图位置。所以我们把它们放在 中心点 变量:

康斯特 中心点 = [ 48.679314021314354 , 22.274143952644422 ] ;

仅此而已。我们已经创建了应用程序接口,我们所需要的只是让它具有互动性。

使应用程序互动

我们的应用程序的大部分操作将涉及到与地图的交互。有鉴于此,我们需要发送请求,并等待直到映射API被完全加载。这是使用 getMap() 方法,它将真实值作为参数。此参数允许方法返回将解析到映射对象的承诺。

$$ ( "map" ) . 地图 ( 真实的 ) . 然后 ( 地图 =& 吨 ; {
//所有行动将在这里描述
} ) ;

在回调函数体中,我们需要描述所有与映射API相关的应用程序操作。让我们从员工名单开始。

雇员名单及标记

对于名单上的每个雇员,我们需要在地图上显示他们的位置。点击相应的列表项是合乎逻辑的。在地图上,我们将显示一个标记和一个弹出窗口,其中包含关于员工的信息:姓名、城市、国家和当地时间。

要显示弹出式消息,我们可以创建一个单独的函数。为了让弹出更有活力,让我们在3秒后隐藏它。为了实现所有这些特性,我们的函数需要一个员工数据对象和一个标记对象。整个代码的功能如下:

功能 展示会 ( 项目 , 标记 ) {
    康斯特 时间的 = 新的 约会日期 ( ) . 托诺卡莱弦 ( "en-GB" , {
        时空 : 项目. 时间区 ,
        数据集 : "short" ,
        定时器 : "short" ,
    } ) ;
   
    如果 ( 做个标记。 Ispopup开放 ( ) ) {
        做个标记。 闭路电视 ( ) . 弹出窗口 ( ) ;
        清除超时 ( 项目. 波普_定时器 ) ;
        项目. 波普_定时器 = 无价值的 ;
    }
   
    做个标记。 连接弹出器 (
        ` < b > 姓名 : </ b > $ { 项目. 姓名 }
        < b > 位置 : </ b > $ { 项目. 位置 }
        < b > 位置 : </ b > $ { 项目. 位置 }
        < b > 当地时间 : </ b > $ { 时间的 } ` ,
        { 按钮 : 假的 , 关闭点击 : 假的 }
    ) . 弹出式 ( ) ;
   
    项目. 波普_定时器 = 规定超时时间 ( 功能 ( ) {
        做个标记。 闭路电视 ( ) . 弹出窗口 ( ) ;
    } , 3000 ) ;
   
    名单。 更新项目 ( 项目. 身份证 , 项目 ) ;
    地图。 塞特维尤 ( 项目. 坐标 ) ;
}

在开始的时候,我们通过一个字符串接收到员工的日期和当地时间。 toLocaleString() 方法 约会日期 上课。方法取一个区域( “en-GB” 以及具有日期和时间配置的对象。

在此对象中,我们指定存储在每个雇员数据中的时差( 时间区 以及显示日期和时间的参数。返回的价值会储存在 时间的 在生成弹出消息时将使用变量。

接下来,我们通过它的标记创建一个弹出窗口 bindPopup() 方法及显示此弹出式 openPopup() 方法。注意,第一个方法将具有相应消息的字符串作为参数。

在描述函数时,我们定义了弹出窗口将在30秒后隐藏。为此,我们需要创建一个计时器,它使用相应的弹出窗口关闭并删除弹出窗口。 closePopup() 和 unbindPopup() 方法。

为了能够提前重置计时器,必要时,我们使用 波普_定时器 钥匙。在此之后,我们需要通过 updateItem() 方法。

在计时器删除弹出窗口之前,再次显示弹出窗口时,会出现这样的需求。为了避免这种情况,我们需要在创建一个新的弹出状态之前检查弹出状态。

我们可以通过 isPopupOpen() 一种标记的方法。如果弹出窗口打开,我们关闭并删除它,以及重置计时器并从员工数据中删除其值:

如果 ( 做个标记。 Ispopup开放 ( ) ) {
    做个标记。 闭路电视 ( ) . 弹出窗口 ( ) ;
    清除超时 ( 项目. 波普_定时器 ) ;
    项目. 波普_定时器 = 无价值的 ;
}

最后,我们需要把弹出窗口显示的标记器放在中间。这是通过 setView() 方法,它采用一个具有相应坐标的数组.顺便说一下,每个雇员的位置坐标存储在其数据对象中,使用的是 坐标 钥匙。

现在回到员工名单。让我们处理点击列表项时触发的事件。处理程序的全部代码如下:

名单。 附加物 ( "onItemClick" , 功能 ( 身份证 ) {
    康斯特 项目 = 名单。 图腾 ( 身份证 ) ;
    如果 ( 项目. 标记 ) {
        展示会 ( 项目 , 项目. 标记 ) ;
    } 其他的 {
        项目. 标记 = L. 标记 ( 项目. 坐标 ) . 地址 ( 地图 ) ;
        项目. 标记 . 在…上 ( "click" , 功能 ( 电子伏 ) {
            展示会 ( 项目 , EV。 目标 ) ;
            名单。 选择 ( 项目. 身份证 ) ;
        } ) ;
        展示会 ( 项目 , 项目. 标记 ) ;
    }
} ) ;

首先,让我们获取事件启动的列表项的数据对象。做这个,我们可以利用 getItem() 方法,需要 身份证 是目标元素。其次,需要检查所选雇员的数据对象是否包括标记数据。

如果标记已经存在,我们只需要使用先前创建的标记显示它的弹出窗口。 showPopup() 职能。

否则,我们会使用 L.marker() 方法,它采用员工的坐标。在此之后,我们通过 addTo() 方法和显示它的弹出式使用已知的 showPopup() 职能。

但还不止这些!我们还需要显示弹出时,点击地图上的这个标记。为此,我们必须处理点击此标记时触发的事件。有一个特别的 on() 方法。在处理器内部,我们通过 showPopup() 方法并通过 select() 方法。

完成了。现在,当您从列表中选择任何员工时,这个小部件将在地图上用一个特殊标记标记他的位置,并显示带有详细信息和本地时间的弹出消息。当点击地图上的标记时,同样的行为也会发生。

管理地图的控制

我们还必须设置2个控件来管理地图。第一个控件将用标记标记地图上所有员工的地理位置,第二个控件将完全清除地图。

让我们从点击"显示所有位置"按钮开始。处理程序的全部代码如下:

$$ ( "show_all_locations" ) . 附加物 ( "onItemClick" , 功能 ( ) {
    名单。 未选择的 ( ) ;
    名单。 数据 . 各 ( 功能 ( 奥比 ) {
        如果 ( ! 《行动纲领》。 标记 ) {
            《行动纲领》。 标记 = L. 标记 ( 《行动纲领》。 坐标 ) . 地址 ( 地图 ) ;
            《行动纲领》。 标记 . 在…上 ( "click" , 功能 ( 电子伏 ) {
                展示会 ( 奥比 , EV。 目标 ) ;
                名单。 选择 ( 《行动纲领》。 身份证 ) ;
            } ) ;
        }
    } ) ;
    地图。 塞特维尤 ( 中心点 ) ;
} ) ;

由于列表中选定的元素与地图上的标记直接相关,我们首先需要清除这些元素的选择。这是通过使用 unselectAll() 方法。

接下来,我们使用 each() 方法并检查其中是否包含标记数据。如果元素不包括标记,我们就创建一个新的标记并将其附加到地图上。

《行动纲领》。 标记 = L. 标记 ( 《行动纲领》。 坐标 ) . 地址 ( 地图 ) ;

在此之后,我们需要处理此标记上的单击,以便显示弹出窗口并在列表中选择相应的雇员。

《行动纲领》。 标记 . 在…上 ( "click" , 功能 ( 电子伏 ) {
    展示会 ( 奥比 , EV。 目标 ) ;
    名单。 选择 ( 《行动纲领》。 身份证 ) ;
} ) ;

最后,我们将地图重置为存储在中间点变量中的初始坐标。

地图。 塞特维尤 ( 中心点 ) ;

现在我们开始"清除所有位置"按钮。当点击这个控件时,我们的应用程序应该会清除地图。为此,也需要处理单击事件。处理程序的全部代码如下:

$$ ( "clear_all_locations" ) . 附加物 ( "onItemClick" , 功能 ( ) {
    名单。 未选择的 ( ) ;
    名单。 数据 . 各 ( 功能 ( 奥比 ) {
        如果 ( 《行动纲领》。 标记 ) {
            《行动纲领》。 标记 . 移走 ( ) ;
            《行动纲领》。 标记 = 无价值的 ;
        }
    } ) ;
    地图。 塞特维尤 ( 中心点 ) ;
} ) ;

在这里,我们执行与前一个处理程序相同的操作,即:
-重新选择清单项目
-浏览包括标记在内的元素,删除这些标记并清除相应数据
-将地图重置为最初的坐标

就这样。现在,当点击相应的控件时,用户将能够查看列表中所有人的位置,并在必要时清除地图。

结论

你可以找到完整的源代码和现场演示 在这里 .

在这篇文章中,我们已经讨论了Webix组件与第三方解决方案的集成。 开放街道地图 地图。现在您知道如何创建一个小型应用程序来查看员工的位置和跟踪他们的本地时间。如果你有任何问题,请在下面的评论中问他们。