Khi người dùng đăng nhập thành công, hệ thống sẽ hiển thị giao diện như sau:
Hình 3.17. Màn hình chính của ứng dụng Motel Management Bảng 3.6. Bảng mô tả màn hình chính STT Tên 1 2 3 rvRoom 4 fab
Nút Button (nút nhấn) gốc cuối màn hình có chức năng thêm phòng vào cơ sở dữ liệu. Giao diện thêm phòng sẽ được trình bày trong mục 3.12.
Hình 3.18. Phím chức năng thêm phòng
Code xử lý hiển thị màn hình thêm phòng:
fab.setOnClickListener {
startActivity(Intent(this, RoomActivity::class.java))
}
Code xử lý tải dữ liệu lên màn hình:
rvRoom.apply{
layoutManager =
LinearLayoutManager(this@MainActivity,
LinearLayoutManager.VERTICAL, false)
}
listRoom =
SplashScreenActivity.listRooms.filter{ p: Room -> (p.userId == auth.uid && !p.deleted) } as ArrayList<Room>
/GetDataAsyncTask().execute()
listRoomUnFull =arrayListOf()
roomAdapter = RoomAdapter(this,
listRoomUnFull) rvRoom.adapter = roomAdapter roomAdapter.addLoading()
Trong danh sách Phòng, mỗi một hàng thể như vậy sẽ thể hiện thông tin cơ bản về phòng.
Hình 3.19. Các hàng trong danh sách phòng của màn hình chính
Trong hàng đầu tiên thể hiện: tên phòng, giá tiền, tổng số người đang ở trọ, tổng các hóa đơn, trạng thái phòng. Và đặt biệt có một nhãn kế bên tên phòng thể hiện tổng số hóa đơn chưa thanh toán. Khi nhấn vào sẽ hiện giao diện hiển thị danh sách các hóa đơn chưa thanh toán. Giao diện này sẽ được đề cập ở mục 3.6.
Bảng 3.7. Mô tả chi tiết của từng dòng trong danh sách phòng
STT Nội dung 1 Phòng 3 2 108 3 1,600,000 đ 4 11 5 136 6 Active/ Empty
Trong một item nếu người dùng lướt sang trái hoặc phải sẽ có thêm các chức năng như hai hình dưới đây. Tuy nhiên nếu phòng đang trống thì chỉ có thể thực hiện kéo bên phải.
Hình 3.20. Hình ảnh chi tiết về hai chức năng khi lướt item qua bên trái
Các chức năng bao gồm:
➢ Icon đầu tiên: Chỉnh sửa thông tin phòng. Giao diện sẽ được trình bày tài mục 3.14.
➢ Icon thứ hai: Với biểu tượng thùng rác thể hiện chức năng xóa phòng ra khỏi cơ sở dữ liệu.
Hình 3.21. Hình ảnh chi tiết về hai chức năng khi lướt item qua bên phải (adsbygoogle = window.adsbygoogle || []).push({});
Các chức năng này chỉ hoạt động với các phòng có trạng thái Active (có người) bao gồm:
➢ Add Bill: Thêm một hóa đơn cho phòng chức năng này sẽ được giới thiệu ở mục 3.14.
➢ Write Index: Ghi chỉ số gồm điện, nước, tiền phòng của phòng. Chức năng này cũng sẽ được giới thiệu ở mục 3.15.
Để tăng trải nghiệm người dùng, tại giao diện này cung cấp chức năng tìm kiếm phòng theo tên phòng. Ví dụ hình dưới đây khi tìm kiếm tên phòng là “phòng” hệ thống sẽ lọc dữ liệu và hiển thị lại màn hình như sau:
Hình 3.22. Màn hình tìm kiếm phòng
Code xử lý tìm kiếm phòng:
var filterRoom: Filter = object : Filter() {
override fun performFiltering(charSequence: CharSequence): FilterResults {
var filterList:ArrayList<Room> =arrayListOf()
if (charSequence.isEmpty()){
filterList.addAll(listRoomFull) }else{
val charFilter:String=charSequence.toString().toLowerCase().trim()
for (room:Room in listRoomFull){
if (room.roomName.toLowerCase().contains(charFilter)){
filterList.add(room) } } }
val result=FilterResults()
result.values=filterList return result }
override fun publishResults(charSequence: CharSequence, filterResults:
FilterResults) { listRoom.clear()
listRoom.addAll(filterResults.values as List<Room>) notifyDataSetChanged() }
}
Ngoài các chức năng đã nêu trên, giao diện chính còn chứa các chức năng trong menu sẽ được trình bày chi tiết sau.
➢ Truy cập vào giao diện Dashboard (trang quản lý) của user – trình bày ở mục 3.7.