前端Bani Yas

为公司创建一个前端网站,使用设计者提供的单页模板,为叶念创建所有的功能用于后端网络服务和Api交流

提供的网站组件有：

功能：

a)

a1.选择出发地点和到达地点;

a2.从服务器获取地点的列表。默认按照字母排序。

用户 (如果该用户已登录)使用的地点将在列表的最上方。

选择 (selection) 使用自动补全 (从数据库，而不是从浏览历史) From (出发) 和 To (到达) 地点。自动补全将根据用户的历史得到填充 (fill) ，系统将保存用户每次使用这个应用的数据 (出发和到达) 。

b)

b1.输入出发时间包括时和分。这是一个选项栏，而不需要填写。

c)

c1.搜索行驶路径;通过使用出发时间 (可选) ，出发地 (from/source) 和目的地 (to/target)

的输入，查询行驶路径

2.Routes LIst行驶路径列表

在用户搜索查询后,此组件将会出现:

搜索结果(Search result)在左边,这一行驶路径(route)的时刻表1(schedule)会出现

默认情况下,如果用户之前没有输入出发时间那么搜索(search)使用当前给出的serve时间
但是如果用户输入了出发时间,那么搜索(Search)使用给出的出发时间,从所给出的地点出发(depart),然后到达目的地的行驶路径,根据最早到达的时间排序,限制为5条行驶路径结果,路径允许在同一车站换乘到不同的公共汽车/火车上,换乘在同一车站发生不需要考虑步行和换乘的最小换乘空间

来自结果 (result) 的公共汽车和火车的时刻表，包括：

        o 编号

        o 时刻表 (出发 (from) 地的出发时间，到达 (to) 地的到达时间)

        o 总行驶时长

        o 线路的换乘/改变数量

        o 所有用户选择此行驶路径的数量。 (关于这点，可在 4.Search history (搜索历史)了解更多)

        o 这是一个搜索结果 (search results) 的例子，举例说明在 13:00 时，从 A 离开，然后到达 B。

        1 A to B => departure time -> 13:00:00 arrival time -> 13: 14:00 Bus Line 3, 14 minutes, 0 (换乘) .

        1 A to B => departure time -> 13:02:00 arrival time -> 13:22:00 Bus Line 2, Train

Line 4, 22 minutes, 1 transfer

        1 A to B => departure time -> 13:01:00 arrival time -> 13:35:00 Bus Line 2, Bus Line

1, Bus Line 5, 36 minutes, 2 transfer

3.Map View地图视图

在布局的右边会展示地图,地点坐标将包括:

a:根据数据库记录,在地图上会有标注地理位置的点(dot)和该地理位置的名字

b:如果用户点击这个点(dot),一个悬浮框会出现在附近,框内会有这个地点的图片,名字和简短的介绍,若用户点击其他区域,悬浮框会消失

c:对于触发地点和目的地,在地图上为它们清晰可见的点(不同于普通区域)

d.如果用户点击结果列表(result list)上的行驶路线,该行驶路径要显示在地图上,火车用实线表示,公共汽车用虚线表示

e:当在地图上画出时,每条公共汽车/火车线路应有不同的颜色

f:显示不同的车辆线路类型的图标:每条线路颜色不同,实线表示火车,虚线表示公共汽车

4.Route selection history行驶路径被选中的历史记录

系统保存所有用户选择的所有路径:

a:任何时候用户点击结果列表上的行驶路径,该行驶路径就会被保存到数据库

b:系统会保存全部用户做的选择

c:当行驶路线显示在结果列表中时,相同路径被选中的总数量显示出来.相同行驶路径的意思是:相同的出发点和相同的目的地,不用考虑出发时间

5.User Authentication用户认证

a:登录和注销应该在同一页,不需要再直接询问

b:登录

当用户点击登录链接时,显示登录模式

在登录对话框,有用户名和密码的输入框

在用户登录后登录链接会变成注销链接,当下用户名会显示在注销链接的旁边

两种认证用户会有不同的身份,如果用户是admin则显示admin menu当用户名被输入,令牌被收到后,令牌将保存在client上以供进一步的请求也在页面刷新之后

c:注销

显示重置,显示登录链接,用户名和相应的功能消失

6.Admin Menu管理员菜单:

Admin menu只有在用户登录,而且是以admin角色登录时,才能被显示出来.以下是Admin所需要的功能:

a:地点

1.创建地点

2.修改地点

3.删除地点

前端Bani Yas相关推荐

合格前端系列第十弹-揭秘组件库一二事
2019独角兽企业重金招聘Python工程师标准>>> 一.写在前面 1.灵感来源我平常比较喜欢对一些东西做一些记录和总结,其中包括一些组件,积累的量比较多的时候,发现零散的堆积已 ...
etcd 笔记（02）— etcd 安装（apt 或 yum 安装、二进制包安装、Docker 安装 etcd、etcd 前端工具etcdkeeper）
1. 使用 apt 或 yum 安装 etcd 命令如下: sudo apt-get install etcd 或者 sudo yum install etcd 这样安装的缺点是:安装的 etcd 版 ...
【牛腩新闻发布系统】开始前端03
前言: 后台代码写好后,开始按照设计实现前端,之前有做过关于网页的东西,不过是用Dreamweaver做的静态,不能实现和数据库的交互,如果只是单纯学界面设计的话,用Dreamweaver容易上手,在 ...
LLVM Clang前端编译与调试
LLVM Clang前端编译与调试 iOS 关于编译 o 一.Objective-C 编译过程 o 为什么需要重新编译? o 编译步骤 o 二.编译步骤的详细说明 o 1.预处理 o 2.编译 o 词 ...
Clang：LLVM 的 C 语言家族前端
Clang:LLVM 的 C 语言家族前端 Clang 项目为LLVM 项目的 C 语言家族(C.C++.Objective C/C++.OpenCL.CUDA 和 RenderScript)中,提供 ...
TensorFlow Frontend前端
TensorFlow Frontend前端 TensorFlow前端有助于将TensorFlow模型导入TVM. Supported versions: • 1.12 and below Tested ...
Clang：LLVM的C语言家族前端
Clang:LLVM的C语言家族前端 Clang项目为LLVM 项目的C语言家族(C,C ++,Objective C / C ++,OpenCL,CUDA和RenderScript)中的语言提供了语 ...
前端的单页面模式和多页面模式
一.前言前端部分的搭建,需要考虑使用哪种模式进行页面之间的跳转交互, 而项目内的页面交互,不可避免的需要相互之间的数据共享. 这就引出了本篇博客的目的,一起来谈谈:项目前端部分的构建方式以及数据共享 ...
JavaScript—— 前端编程语言
JavaScript 前端编程语言 http://caibaojian.com/javascript/ 转载于:https://www.cnblogs.com/highpointengineer/ ...