== ИД(5) Прикажување патека помеѓу простории

''Има два начини за навигација помеѓу простории:
1. Со внесување на сегашна локација и посакувана дестинација 
2. Со клик на копчето за навигација на дадена просторија
''

**Ќе го разгледаме начинот 2 бидејќи е поинтуитивен за користење.**


----

 ''Корисникот клика на просторијата до која сака да се насочи и се појавува менито за детални информации на просторијата. Со клик на копчето **"Navigate"** започнува процесот за навигација.''

[[Image(nav_1.png)]]

----


[[Image(nav_3.png)]]

* ''За навигација се потребни параметрите **"from"** и **"to"**''. Начинот 2. се разликува од 1. во тоа што за параметар **"from"**, **секогаш го зема главниот влез на мапата** кој се поставува при цртање на истата. Всушност ова се случува секогаш кога параметарот **"from"** е изоставен.

* Со користење на **httpService"** се праќа барање до Spring апкликацијата за навигација, каде што се наоѓа графот.

{{{
httpService.setAuthenticated() 
}}} 
''поставува Authorization заглавје во барањето и укажува дека треба да се автентицира овој повик, со користење на JWT.''

----

'' За да се изврши методот за навигација кој одговара на повикот од React апликацијата, прво треба да се вратиме малку назад, до самото вчитување на страната. Во Spring апликацијата, при секое вчитување на поглед на мапа, се иницијализира **"тежински граф"** за дадената мапа, кој ги содржи како јазли, патеките помеѓу просториите'' .


[[Image(nav_5*.png)]]

Функцијата 
{{{
graphService.construct(floors)
}}}

e задолжена за креирање на графот кои ги поврзува сите соби на сите спратови на мапата. За секој спрат се прави следното:
* **Парсирање на податоците (json) на фигурите кои се поставени на тој спрат, односно креирање јазли**
* **Вчитување и поврзување на јазлите во графот.**


[[Image(nav_11.png)]]

За да се креираат јазли прво се десеријализираат податоците за сите фигури од JSON формат во **Shape** објект. 

**JSON репрезентација на фигура:**

{{{

{"x":689,"y":465,
"radiusX":5,"radiusY":7,
"tailHeight":12,"fill":"#f60000",
"stroke":"#1b1b1b","strokeWidth":1,
"draggable":true,"name":"mapObj",
"shadowForStrokeEnabled":false,
"obj_name":"Pin4 [1F]",
\"connected_pins\":[\"Stairs6 [1F]\",\"Pin6 [1F]\",\"Pin5 [1F]\"],
\"description":"","floor_num":1},"className":"InfoPin"}

}}}

Структурата на **Shape** e соодветна со структурата на JSON репрезентацијата на фигурата.

[[Image(nav_7.png)]]

Целата идеја на оваа функција е да креира јазли т.е **MapNode** и за секој јазол, да зачува со кој други јазли е тој поврзан, со цел лесно составување на графот подоцна. Имињата на поврзаните јазли се наоѓаат во **"connected_pins"** од JSON'от.

----

Следен чекор е да се креира графот.

[[Image(nav_12.png)]]

Се зачувуваат имињата на јазлите во хеш мапа: име на јазол -> инстанца на јазол. ''(Ова се прави бидејќи во JSON форматот конекциите на сегашниот јазел се чуваат само според името на фигурата, па за лесен и ефикасен пристап се користи оваа хеш мапа.)''

На крај се воспоставуваат врските помеѓу јазлите, односно се креираат ребра

----

''Сега имаме доволно информации за да се упатуваме кон методот кој го опслужува барањето за навигација, пратено од React апликацијата.''

[[Image(nav_4.png)]]

Се очекува дека пратените параметри **"from"** и **"to"** се имиња на соби, но не е задолжително. Се користи функцијата 
{{{
graph.findNodeConnectedToEntrance(nodeName)
}}}

за да се најде влезот асоциран со собата пратена како параметар, бидејќи собите не се чуваат како јазли во графот.

''Откако ќе се најдат имињата на соодветните јазли, се праќаат на функцијата 
{{{
graph.findRoute(from,to)
}}}

која претставува имплементација на Djikstra алгоритмот за наоѓање најкратка патека во граф. Оваа функција како резултат ја враќа пронајдената патека, како листа од **"MapNode"**. 
Патеката се враќа како одговор до React аплкацијата.''

----

Вратената патека ја користи функцијата drawRoute(path), која е задолжена за цртање на патеката за навигација на самата мапа.

[[Image(nav_10.png)]]

Главна функционалност на овој метод е да црта навигациски линии и тоа цртање да изгледа добро визуелно

[[Image(nav_13.png)]]

На крај, исцртаната патека.

[[Image(nav_14.png)]]