{"id":16446798,"url":"https://github.com/worthant/interactive-graph-ui","last_synced_at":"2026-04-13T06:50:44.503Z","repository":{"id":208098253,"uuid":"720566898","full_name":"worthant/interactive-graph-ui","owner":"worthant","description":"2-page website for canvas area validation with postgres db","archived":false,"fork":false,"pushed_at":"2024-05-18T15:25:37.000Z","size":11476,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-05-18T16:32:52.121Z","etag":null,"topics":["bash-script","java","js","jsf2","postgresql","tailwindcss","wildfly"],"latest_commit_sha":null,"homepage":"","language":"Java","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/worthant.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-11-18T21:52:18.000Z","updated_at":"2024-05-27T15:28:56.251Z","dependencies_parsed_at":"2024-05-15T16:06:22.946Z","dependency_job_id":"5de8ae6b-fefb-473c-8e28-73c0e27044bc","html_url":"https://github.com/worthant/interactive-graph-ui","commit_stats":{"total_commits":19,"total_committers":1,"mean_commits":19.0,"dds":0.0,"last_synced_commit":"95cf3a13ec12ba1eb10109eb2846a2010606f619"},"previous_names":["worthant/interactive-graph-ui"],"tags_count":3,"template":false,"template_full_name":"worthant/web3-jsf-eclipselink-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/worthant%2Finteractive-graph-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/worthant%2Finteractive-graph-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/worthant%2Finteractive-graph-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/worthant%2Finteractive-graph-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/worthant","download_url":"https://codeload.github.com/worthant/interactive-graph-ui/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240842786,"owners_count":19866647,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bash-script","java","js","jsf2","postgresql","tailwindcss","wildfly"],"created_at":"2024-10-11T09:48:52.602Z","updated_at":"2026-04-13T06:50:39.462Z","avatar_url":"https://github.com/worthant.png","language":"Java","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!-- Here is the main logo and name of your project --\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/worthant/interactive-graph-ui\"\u003e\n    \u003cpicture\u003e\n      \u003cimg src=\"resources/logo.png\" height=\"200\"\u003e\n    \u003c/picture\u003e\n    \u003ch1 align=\"center\"\u003e\n        Interactive graph UI\n        \u003ca aria-label=\"Перевод\" href=\"./README_RU.md\"\u003e\n            \u003cimg alt=\"\" src=\"https://img.shields.io/badge/translation-RU-red?style=for-the-badge\"\u003e\n        \u003c/a\u003e\n    \u003c/h1\u003e   \n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003c!-- Here are some cool labels for your project, delete those, that you don't need --\u003e\n\n\u003cp align=\"center\"\u003e\n   \u003ca aria-label=\"WildFly Version\" href=\"https://www.wildfly.org/\"\u003e\n      \u003cimg alt=\"\" src=\"https://img.shields.io/badge/WildFly-26.13-50FA7B?style=for-the-badge\u0026labelColor=000000\u0026color=50FA7B\"\u003e\n   \u003c/a\u003e\n   \u003ca aria-label=\"Java\" href=\"https://www.jetbrains.com/\"\u003e\n      \u003cimg alt=\"\" src=\"https://img.shields.io/badge/Java-17.0.8-FFD300?style=for-the-badge\u0026labelColor=000000\u0026color=FFD300\"\u003e\n   \u003c/a\u003e\n   \u003ca aria-label=\"Maven Project\" href=\"https://maven.apache.org/\"\u003e\n      \u003cimg alt=\"\" src=\"https://img.shields.io/badge/Maven-Project-FFA5FF?style=for-the-badge\u0026labelColor=000000\u0026color=FFAFFF\"\u003e\n   \u003c/a\u003e\n   \u003ca aria-label=\"JavaServer Faces Framework\" href=\"https://www.oracle.com/java/technologies/javaserverfaces.html\"\u003e\n      \u003cimg alt=\"\" src=\"https://img.shields.io/badge/JSF-Framework-orange?style=for-the-badge\u0026logo=java\u0026labelColor=000000\u0026color=FFFFFF\"\u003e\n   \u003c/a\u003e\n   \u003ca aria-label=\"Tailwind CSS Version\" href=\"https://tailwindcss.com/\"\u003e\n      \u003cimg alt=\"\" src=\"https://img.shields.io/badge/Tailwind_CSS-3.3.3-00CCFF?style=for-the-badge\u0026labelColor=000000\u0026color=00FFFF\"\u003e\n   \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cdetails open\u003e\n   \u003csummary\u003e\u003cb\u003eTable of Contents\u003c/b\u003e\u003c/summary\u003e\n\n- [Demonstration](#demo)\n- [Description](#descr)\n- [Technical Requirements](#requirements)\n- [Topics for Theoretical Defense](#defense)\n- [How to use my project](#user-manual)\n- [Theoretical Materials](#theoretical-materials)\n\n\u003c/details\u003e\n\n\u003ca id=\"demo\"\u003e\u003c/a\u003e\n\n## Demonstration 🎥\n\n| Youtube video |\n|------------------------|\n|https://youtu.be/ny15aofvGCI|\n\n\u003ca id=\"descr\"\u003e\u003c/a\u003e\n\n## Description 📝\n\n\u003e 👋 **Welcome to this laboratory project!**\n\u003e\n\u003e 🛠 **What is it?**  \n\u003e This is a modern web application built on the `JavaServer Faces` framework. Its architecture uses `2 facelets templates` for flexibility and modularity. The starting page provides general information and redirects to the main page with functionality. Server logic is implemented using `Managed Beans`, ensuring flexible and scalable data processing.\n\u003e\n\u003e 🎯 **The goal of the site**  \n\u003e To make the process of entering coordinates of points and checking their hit in a given area as convenient and intuitive as possible. My `UI` was developed with a focus on good `UX` 😎\n\u003e\n\u003e ---\n\u003e\n\u003e 📌 **Main features**\n\u003e\n\u003e - 🖥 **Interactive Data Entry**: Use intuitive interface elements to enter coordinates.\n\u003e - 📊 **Dynamic Graph**: Visualization of the area and points on the coordinate plane in real-time.\n\u003e - 🔒 **Server-Side Validation**: Reliable verification of entered data is ensured through Managed Beans.\n\u003e\n\u003e ---\n\u003e\n\u003e 🚀 **Want to know more?** [Check out the user manual](#user-manual) and dive into the amazing world of this web application! 💻\n\n\u003ca id=\"requirements\"\u003e\u003c/a\u003e\n\n## Technical Requirements\n\n|![graph](resources/graph.png)|\n|-----------------------------|\n\n### Goal: Develop a web application based on the JavaServer Faces Framework\n\n#### 📋 Main parts of the application\n\n- [x] `Managed Beans`: Managed beans that contain server-side data processing logic.\n- [x] `index.xhtml`: The starting page containing general information and redirecting to the main page.\n- [x] `main.xhtml`: The main application page with a web form for entering coordinates and displaying results.\n\n#### 🎨 The `index.xhtml` start page should include\n\n1. [x] Header: Full name, group number, variant number.\n2. [x] Interactive Clock: Shows the current date and time, updates every 10 seconds.\n3. [x] Link: allows you to go to the main page of the application.\n\n#### 📊 The main `main.xhtml` page should include\n\n1. [x] A set of components: To set the coordinates of the point and the radius of the area according to the task variant. The use of additional component libraries may be required - [ICEfaces](http://www.icesoft.org/java/projects/ICEfaces/overview.jsf) (prefix \"ace\") and [PrimeFaces](http://www.primefaces.org/) (prefix \"p\").\n    - [x] Form: Sends data to the server via Managed Beans.\n    - [x] A set of fields: For setting the coordinates of the point and the radius of the area.\n2. [x] Validation: JavaScript- or JSF-validation of entered data.\n3. [x] 🟠 Interactive Element:\n    - [x] Dynamic visualization of results on the graph.\n    - [x] Graph update after each request.\n    - [x] An adaptive graph that changes its state depending on the selected radius.\n    - [x] The color of the points should depend on the fact of hitting/not hitting the area.\n4. [x] Results: A table with the results of previous checks, stored in a Managed Bean.\n5. [x] A link that allows you to return to the start page.\n\n#### Additional requirements for the application:\n\n- [x] All verification results must be stored in a PostgreSQL-managed database.\n- [x] Access to the DB must use the ORM EclipseLink.\n- [x] A Session-scoped Managed Bean should be used to manage the list of results.\n- [x] The configuration of managed beans should be set using parameters in the configuration file.\n- [x] The rules of navigation between the pages of the application should be defined in a separate configuration file.\n\n#### 🌐 Deployment\n\n- [x] The developed web application must be deployed on the `WildFly` server in standalone configuration, ports must be configured in accordance with the issued `portbase`, access to the http listener must be open to all IPs.\n\n\u003ca id=\"defense\"\u003e\u003c/a\u003e\n\n## Topics for preparation for laboratory defense\n\n1. [x] `JavaServer Faces` technology. Features, differences from `servlets` and `JSP`, advantages and disadvantages. Structure of a JSF application.\n2. [x] Using `JSP pages` and `Facelets templates` in JSF applications.\n3. [x] `JSF components` - implementation features, class hierarchy. Additional component libraries. The `event processing model` in JSF applications.\n4. [x] Data converters and validators.\n5. [x] Presentation of the `JSF` page on the `server side`. UIViewRoot class.\n6. [x] `Managed beans` - purpose, configuration methods. Managed beans context.\n7. [x] Configuration of JSF applications. The faces-config.xml file. FacesServlet class.\n8. [x] Navigation in JSF applications.\n9. [x] Access to the DB from Java applications. `JDBC` protocol, query formation, working with DBMS drivers.\n10. [x] `ORM concept`. ORM libraries in Java applications. Main APIs. Integration of ORM providers with JDBC drivers.\n11. [x] ORM libraries `Hibernate` and `EclipseLink`. Features, API, similarities and differences.\n12. [x] `JPA technology`. Features, API, integration with ORM providers.\n\n\u003ca id=\"user-manual\"\u003e\u003c/a\u003e\n\n## How to use my project\n\n### Docker\n\n\u003e [!TIP]\n\u003e For a quick setup to view the project (not suitable for profiling for the OPI course and Docker is not available on Helios)\n\n```bash\ngit clone git@github.com:worthant/interactive-graph-ui.git\ncd interactive-graph-ui\nmvn clean package\ndocker-compose up --build\n```\n\nConnect in browser:\n\n```bash\nhttp://localhost:32318/interactive-graph-ui-1.0-SNAPSHOT/\n```\n\n### Manual setup (for helios mainly)\n\n\u003e [!NOTE]\n\u003e I've included a fully functional standalone.xml config in the resources - you can check it out as an example and use it for the project.\n\n1. Follow all the steps from [my guide](https://github.com/worthant/web3-jsf-eclipselink-template/)\n2. Don't forget to create a database in studs:\n\n\u003e Connect with `psql -h pg -d studs`\n\n```sql\nCREATE TABLE point_model {\n  id SERIAL PRIMARY KEY,\n  x DOUBLE PRECISION NOT NULL,\n  y DOUBLE PRECISION NOT NULL,\n  r DOUBLE PRECISION NOT NULL\n}\n```\n\n3. Also, don't forget to forward the ports:\n\n```bash\nssh -L port:localhost:port sXXXXXX@se.ifmo.ru -p 2222\n```\n\n4. Done, go to the browser and enter:\n\n```bash\nhttp://localhost:port/interactive-graph-ui-1.0-SNAPSHOT/\n```\n\n\u003ca id=\"theory\"\u003e\u003c/a\u003e\n\n## Theoretical materials\n\n1. **JavaServer Faces**: [Official JSF documentation](https://docs.oracle.com/javaee/7/javaserver-faces-2-2/vdldocs-facelets/index.html)\n2. **ORM EclipseLink**: [EclipseLink documentation](https://www.eclipse.org/eclipselink/documentation/)\n3. **Lecture from se.ifmo**: [internet.pdf](https://se.ifmo.ru/~s367837/internet.pdf)\n4. **Sergei Nazemtsev's theory**: [theory.md](https://github.com/web-labs/Web-Lab-3/blob/main/theory.md)\n1. **ACID-transactions**: [habr](https://habr.com/ru/articles/555920/)\n1. **JSF Lifecycle**: [java-online](https://java-online.ru/jsf-lifecycle.xhtml)\n1. **Lombok**: [complete guide](https://auth0.com/blog/a-complete-guide-to-lombok/)\n1. **CSS Battle**: [css is fun!)](https://cssbattle.dev/)\n1. **Responsive CSS**: [vk - HASH](https://vk.com/wall-46465252_58953)\n5. **Tailwind CSS**: [tw](https://tailwindcss.com/)\n6. **Tailwind Components**: [for error pages and beautiful buttons](https://tailwindcomponents.com/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fworthant%2Finteractive-graph-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fworthant%2Finteractive-graph-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fworthant%2Finteractive-graph-ui/lists"}