app-diagram.drawio.svg

<svg host="65bd71144e" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="2321px" height="1191px" viewBox="-0.5 -0.5 2321 1191" content="&lt;mxfile&gt;&lt;diagram id=&quot;YGDjGopetWaHU4nbopor&quot; name=&quot;Page-1&quot;&gt;7VtJc+O2Ev41qkymKiySILgcPV4mh0kq5XEqZ4iEJGQoguFi2e/Xv8bGxaRkyqLscZV9sCgQaAC9ft2AFuhy+/C1IPnmD57QdOHaycMCXS1c13FcGz5Ey6NqwQiphnXBEt2pbfjO/kd1ox63rllCy17HivO0Ynm/MeZZRuOq10aKgu/63VY87c+akzUdNHyPSTps/Ycl1Ua1hthu23+nbL0xMzu2frMlprNuKDck4btOE7peoMuC80o9bR8uaSqYZ/iixt3sedssrKBZNWWAqwbck7TWe1u4fgpDv6w4UIAFVo961/5/NTcvfiulTC6gg+vlINcv7Xt4WovPizw3tGB+RU690VtvKLsFr7OEiiXZ8Hq3YRX9npNYvN2BBkHbptqm8M2Bx3taVAxkcZGydQZtFc8bmt2Na16I7vSh06QZ8ZXyLa2KR+jy0Neux/7XXSthFxm5bXrijXQr0Xq1bmi3rIcHzf1xSaDTJWHvkcTvlCS0OIswZmA76rPdH2G7G4yw3Z+B6c4LuD7krxlS5iQ7SVB/0t1fpKzuCpbf8GJr6C6LpzPBvtRk/eZhx6m64+yz4msSb4R7hSVJd8Vr8JUgCHJPRfOGKv+Z8h3L1oKz2YpLkvtWNLqZrkJ+Bio3rNwoeuDnK5aRinHB2k8JyBgaYhjDsuqX9NcpE0mKBS03O1IJO7C5+PedpJVumEbilt23o7+RH3Ty3LAbwbycxkyErQvJUF7Dli9FO0m3YnfieUnKUj3RKp5K/xuPFYMk5UuwX2kGknYFO1SPsWh/nErzIo5pqdd6TzcsTqW8H3P4uFlyAmu/yVOSia8b9kMKazo3lGzBXDc8UXPsSCIbxUoLsqqOZsItXdepZEMpnEImtPQbi2lWAssn0virYPeSX0rGeb1MharZRm9WVIjvZiq5O7aVtFbCu1EyTdG6gxIyWV53BVikcG2VGl/xp8YzgY7R8BWYM3ykFEiW0qiF/qxKw5g1qde0dce6A3CnmqwEqYgAq0YVKhL/kBpWl1RrRMGFCHdmChhNtiL6qP9yedkaQoRSGSo3Lx2abFjJCVImFFRrQ9oLg8+vUNhqd0EZ2WriahpNNuYpn05VuYIYGCji2EXHLUjKZCustDvLRK95WhgXlDTMdrxzYizP7kf7JrJ3wj1CI9E+nANjwd6ehvvv9XLLDqjtyQH0ElzID63kGyY0allXlYxmOyZXRxKhRkSytqzaYKvUC0Lurom0Bh2U35jsGfNtzjOaVefWCtc+q1YMoPcICkTOiFrMohX4fNDbCOyKVoSl79t2A2+C7YZns11/IKW/80RG65srmlLxoCNEtizz86LiA0ZNBBbWgaMwgbjWK1XhM9HLfWrz1qtY8RyagKfYq38mex2aq3SJl7DPgqczSN3fV9GQyxCS+q2ggDVp0nXBZevRUyazI4mKtH403V5HyONOIIZeBCBRcbbs3bWnpu/RofxdT3dL44pkawkM98w3UqXxxnzQ09kg+aMFQGP6RbC5HOhfs9NJKhnMWUaYHHScPXraQQh7VO0VTKRjDksqbaJUBrOhBQUjsO/EQ9sJco2sqsF7PpoRwjuuKKlq1U13ByD0KBG0MC5QXAnpZd9UYSKZOZkVLEVflbXan7SrlT54VQu6vx7NoTcpZeJjrdLFFrY9xwl8L7BxGLo9oxlx1p7nWKEHHRF2IxjoDy0oCBwr8k9339Go+z6mYHSylnbCN2nxtlZEDbiZdOiJxG3lW0XmowWPHcu2GymC+PtxGoUW9kdAW2AFyAG9AKUBtmFvKH0nCC2TPp1U5g73iP9dMRJF2ArDlzHSDy2znJMYOYw575CRPkKW9zI+4tBCc/Dx9Oxvr58xhPYeDAyH/El3bfnf/iTyx2k17s93Cmh2Y64qGpSybtWtFQiGmbc8UyX8Niia8Gl9/nwwDs58ArGPifoEol8b0bts4v/wIGLFaJqUH0cRH0cRh7nxcRTxcRSx+DiKePdHEUcDEy/wrTCyA+wj28WuHQXPJUkIY8txHZ1SAaIZgSUh4OQwmAGWDMudJ5QUTr6ZcNGcUXSTtckg4Lw53J5zFZ3IEQVvBJwyNQSyaMqzqo7QHsFofCF9FoAKJvr8y+siI+n+JPDVDcM/p2GI4oHTs4VQVAfwSNHAs7xoaANRaEVzmMCwUnC09oR7tOe5Y7/Xq5gdcz74RDkXquZ19uKE9MNzeNwwsjw80Cx3JAFEtoXxiHeNLHsGzRo5QjhanvilOd8Rl8G6meBNv2D5goxslhSxk4YdThBPMJV9rNWZYC9LXcyUCz5r8AIyXTUpnwKfkPfJQwQAteTAwVOfyFdxeTkxJOpsrb+/NHksj00ej8gBIemxppK9kLGyMuA/5mU1PduBXDPnRVOdv2clOWY7uparsDVP1uo7fciPyrmuaM5LERVAyx+3ygyAr9vJBG7pqlZAnGQxuBxTK8g5OHkJrKeeUPfpXqa80nss6H81K+hWHThOHc62KpeUtzOP5mtvzjYhapOdy4XJb+TTUcnNrSIuuLbSeU7aObp6bvgXsl6TdSezqs33DtMnpq3SmywGyd2WJgJnCYW6J3FthMqysi6EnI9naHpkMUCHr+HSdmzFlN/e1hmLTc3hRvwaYjL1rwWpaibqMeqHFUKSBwa/T1AboshCyHFcDClfFNl9gIvbpK2LQtzAshEKoxDZ2A69kUOxMIgsP5oB6w5vpj0bNs+IPdorS2VH7G+W62nTTMyKTMiPeZYwFX1ljaWBAAkFz6+qeLaC0hsKsKBFBxo6SDjUuYUzrIL/REmfd077cJwgsCInCj0vwI6HzUnvYQNBvuVjF3suCtwwdMw9iJ6FhDNc+TE3zw5e/nrDDC1Nm1JD99oXBI5Gq3qXvl7ltpcTzqUaUf/Szb6kbeyC5kwZmzPrDZuT/eM1CPbpr3Te0kFeK0V7cp/wl84NhkXv4k2rm6Yy9iSHSthqRQsFgXX2NOJVW18qp/pp79m8nhfFrm/ZGPkYIRcHqF9SxpHluHbnb1hSQ2BafuNPEcZjmCO0Ld+dwaaGVzHe0qZuaV2SZUp/Jrv655BZKMtprGNJSpXWf1jGmGWIg5EITMLDDuBqz/ziu8UXYxeTAhvGeA6O3Mi1ETYo+VR8AV/bn1ir657tD9XR9f8B&lt;/diagram&gt;&lt;/mxfile&gt;">
    <defs/>
    <g>
        <rect x="0" y="0" width="2320" height="1190" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe center; width: 2318px; height: 1px; padding-top: 7px; margin-left: 1px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                <font style="font-size: 24px;">
                                    App
                                </font>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="1160" y="19" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    App
                </text>
            </switch>
        </g>
        <rect x="20" y="50" width="2270" height="60" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 2268px; height: 1px; padding-top: 80px; margin-left: 21px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                <font style="font-size: 20px;">
                                    Header
                                </font>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="1155" y="84" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    Header
                </text>
            </switch>
        </g>
        <rect x="390" y="260" width="330" height="890" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe center; width: 328px; height: 1px; padding-top: 267px; margin-left: 391px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                <font style="">
                                    <span style="font-size: 20px;">
                                        NewPastTripForm
                                        <br/>
                                    </span>
                                    <br/>
                                    <font style="font-size: 14px;">
                                        Each trip should have the following info:
                                        <br/>
                                        <br/>
                                    </font>
                                    * Fishing destination (domestic/int'l)
                                    <br/>
                                    <br/>
                                    * Freshwater or Saltwater
                                    <br/>
                                    <br/>
                                    * River or Lake
                                    <br/>
                                    <br/>
                                    * Fish species: trout, salmon, bass, etc
                                    <br/>
                                    <br/>
                                    * Location: Country, state, county
                                    <br/>
                                    <br/>
                                    * Access: vehicle type/boat/plane/hiking
                                    <br/>
                                    <br/>
                                    * Fishing method: wading, raft, etc
                                    <br/>
                                    <br/>
                                    * Regulations and Licenses
                                    <br/>
                                    <br/>
                                    * Private or public water fees?
                                    <br/>
                                    <br/>
                                    * Time of year
                                    <br/>
                                    <br/>
                                    *Time of day
                                    <br/>
                                    <br/>
                                    * Travel time to destination
                                    <br/>
                                    <br/>
                                    *River flow levels in cfs or gauge height in feet
                                    <br/>
                                    <br/>
                                    * Fly fishing tackle used: rod weight &amp; length, reel size, fly line and leader
                                    <br/>
                                    <br/>
                                    * Flies used: name, size and color
                                    <br/>
                                    <br/>
                                    * Fish caught: species, amount, size
                                    <br/>
                                </font>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="555" y="281" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="14px" text-anchor="middle">
                    NewPastTripForm...
                </text>
            </switch>
        </g>
        <rect x="400" y="1050" width="310" height="90" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe center; width: 308px; height: 1px; padding-top: 1057px; margin-left: 401px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 20px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                Submit
                                <br/>
                                <font style="font-size: 14px;">
                                    Clicking this button will add a past trip and show the PastTripsList component
                                </font>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="555" y="1077" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="20px" text-anchor="middle">
                    Submit...
                </text>
            </switch>
        </g>
        <rect x="730" y="260" width="380" height="890" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe center; width: 378px; height: 1px; padding-top: 267px; margin-left: 731px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                <font style="font-size: 20px;">
                                    PastTripDetail
                                </font>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="920" y="281" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="14px" text-anchor="middle">
                    PastTripDetail
                </text>
            </switch>
        </g>
        <rect x="740" y="1050" width="360" height="90" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 358px; height: 1px; padding-top: 1095px; margin-left: 741px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 20px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                Update/Delete
                                <br/>
                                <font style="font-size: 14px;">
                                    Clicking this button allows user to update or delete a past trip.
                                </font>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="920" y="1101" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="20px" text-anchor="middle">
                    Update/Delete...
                </text>
            </switch>
        </g>
        <rect x="20" y="190" width="2270" height="960" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe center; width: 2268px; height: 1px; padding-top: 197px; margin-left: 21px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 20px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                TripsControl
                                <br/>
                                <font style="font-size: 16px;">
                                    All trip-related components will live in this component.
                                </font>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="1155" y="217" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="20px" text-anchor="middle">
                    TripsControl...
                </text>
            </switch>
        </g>
        <rect x="45.5" y="250" width="441.85" height="771.96" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe center; width: 440px; height: 1px; padding-top: 257px; margin-left: 47px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                <font style="">
                                    <font style="font-size: 21px;">
                                        TripsList
                                    </font>
                                    <br/>
                                    <font style="font-size: 16px;">
                                        All trips will be listed here. There will eventually be a feature where they can render a list of trips by type (past or future)
                                    </font>
                                    <br/>
                                </font>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="266" y="269" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    TripsList...
                </text>
            </switch>
        </g>
        <rect x="71.01" y="328.56" width="387.73" height="178.14" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 386px; height: 1px; padding-top: 418px; margin-left: 72px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 20px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                Trip
                                <br/>
                                <br/>
                                <font style="font-size: 16px;">
                                    Clicking a trip will show its details.
                                </font>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="265" y="424" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="20px" text-anchor="middle">
                    Trip...
                </text>
            </switch>
        </g>
        <rect x="71.01" y="585.88" width="387.73" height="168.25" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 386px; height: 1px; padding-top: 670px; margin-left: 72px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 20px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                Trip
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="265" y="676" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="20px" text-anchor="middle">
                    Trip
                </text>
            </switch>
        </g>
        <rect x="71.01" y="823.4" width="387.73" height="158.35" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 386px; height: 1px; padding-top: 903px; margin-left: 72px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 20px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                Trip
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="265" y="909" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="20px" text-anchor="middle">
                    Trip
                </text>
            </switch>
        </g>
        <rect x="496.89" y="250" width="355.12" height="878.87" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe center; width: 353px; height: 1px; padding-top: 257px; margin-left: 498px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                <font style="font-size: 16px;">
                                    <span style="">
                                        NewTripForm (Past)
                                        <br/>
                                        <br/>
                                        **This will be the same component as the one for future trips.**
                                        <br/>
                                    </span>
                                    <br/>
                                    <font style="font-size: 16px;">
                                        Each past trip will render the following fields:
                                        <br/>
                                        <br/>
                                    </font>
                                    * Fishing destination (domestic/int'l)
                                    <br/>
                                    <br/>
                                    * Freshwater or Saltwater
                                    <br/>
                                    <br/>
                                    * River or Lake
                                    <br/>
                                    <br/>
                                    * Fish species: trout, salmon, bass, etc
                                    <br/>
                                    <br/>
                                    * Location: Country, state, county
                                    <br/>
                                    <br/>
                                    * Access: vehicle type/boat/plane/hiking
                                    <br/>
                                    <br/>
                                    * Fishing method: wading, raft, etc
                                    <br/>
                                    <br/>
                                    * Regulations and Licenses
                                    <br/>
                                    <br/>
                                    * Private or public water fees?
                                    <br/>
                                    <br/>
                                    * Time of year
                                    <br/>
                                    <br/>
                                    *Time of day
                                    <br/>
                                    <br/>
                                    * Travel time to destination
                                    <br/>
                                    <br/>
                                    *River flow levels in cfs or gauge height in feet
                                    <br/>
                                    <br/>
                                    * Fly fishing tackle used: rod weight &amp; length, reel size, fly line and leader
                                    <br/>
                                    <br/>
                                    * Flies used: name, size and color
                                    <br/>
                                    <br/>
                                    * Fish caught: species, amount, size
                                    <br/>
                                </font>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="674" y="271" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="14px" text-anchor="middle">
                    NewTripForm (Past)...
                </text>
            </switch>
        </g>
        <rect x="45.51" y="1031.85" width="444.49" height="98.97" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe center; width: 442px; height: 1px; padding-top: 1039px; margin-left: 47px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 16px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                <font style="">
                                    <span style="font-size: 20px;">
                                        Add a Trip
                                    </span>
                                    <br/>
                                    <br/>
                                    <font style="font-size: 16px;">
                                        Clicking this button will show a form where a user can add a trip to their journal.
                                    </font>
                                    <br/>
                                </font>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="268" y="1055" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="16px" text-anchor="middle">
                    Add a Trip...
                </text>
            </switch>
        </g>
        <rect x="509.45" y="1031.24" width="330.55" height="89.07" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 329px; height: 1px; padding-top: 1076px; margin-left: 510px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                <font style="font-size: 18px;">
                                    Submit
                                    <br/>
                                </font>
                                <br/>
                                <font style="font-size: 16px;">
                                    Clicking this button will add a trip to the list.
                                </font>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="675" y="1080" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="14px" text-anchor="middle">
                    Submit...
                </text>
            </switch>
        </g>
        <rect x="859.33" y="248.87" width="327.03" height="879.69" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe center; width: 325px; height: 1px; padding-top: 256px; margin-left: 860px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 16px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                <font style="font-size: 15px;">
                                    <span style="font-size: 20px;">
                                        NewTripForm (Future)
                                        <br/>
                                    </span>
                                    <br/>
                                    **This will be the same component as the one for past trips.**
                                    <br/>
                                    <br/>
                                    <font style="font-size: 15px;">
                                        Each future trip will render the following fields:
                                        <br/>
                                    </font>
                                    <br/>
                                    * Domestic or international
                                    <br/>
                                    <br/>
                                    * Guided or unguided
                                    <br/>
                                    <br/>
                                    * Freshwater or saltwater
                                    <br/>
                                    <br/>
                                    * Fish species: trout, salmon, etc.
                                    <br/>
                                    <br/>
                                    * Air travel costs
                                    <br/>
                                    <br/>
                                    * Passport or visa
                                    <br/>
                                    <br/>
                                    * Fishing and lodging expenses
                                    <br/>
                                    <br/>
                                    * Deposit payment terms
                                    <br/>
                                    <br/>
                                    * Refund cancellation policies
                                    <br/>
                                    <br/>
                                    * Clothing requirements
                                    <br/>
                                    <br/>
                                    * Climate info
                                    <br/>
                                    <br/>
                                    * Fishing requirements: rod, reel, line, leader
                                    <br/>
                                    <br/>
                                    * Required flies list
                                    <br/>
                                    <br/>
                                    * Baggage and luggage policies
                                    <br/>
                                    <br/>
                                    * Trip &amp; medical evacuation insurance
                                    <br/>
                                    <br/>
                                    * Fishing licenses
                                    <br/>
                                    <br/>
                                    * Cell &amp; wifi communications/tools
                                    <br/>
                                    <br/>
                                    * Gratuity guidelines
                                    <br/>
                                </font>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="1023" y="272" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="16px" text-anchor="middle">
                    NewTripForm (Future)...
                </text>
            </switch>
        </g>
        <rect x="1197.92" y="248.87" width="336.65" height="880" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe center; width: 335px; height: 1px; padding-top: 256px; margin-left: 1199px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                <font style="">
                                    <span style="font-size: 20px;">
                                        TripDetails
                                    </span>
                                    <br/>
                                    <br/>
                                    <font style="font-size: 16px;">
                                        Trip details will conditionally render depending on whether the trip is a past or future trip.
                                    </font>
                                    <br/>
                                </font>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="1366" y="270" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="14px" text-anchor="middle">
                    TripDetails...
                </text>
            </switch>
        </g>
        <rect x="1210" y="1031.24" width="310" height="89.07" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 308px; height: 1px; padding-top: 1076px; margin-left: 1211px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 18px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                Update/Delete
                                <br/>
                                <font style="font-size: 16px;">
                                    Clicking this button will allow a user to edit or delete a trip.
                                </font>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="1365" y="1081" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="18px" text-anchor="middle">
                    Update/Delete...
                </text>
            </switch>
        </g>
        <rect x="1546.05" y="249.12" width="341.65" height="880.62" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe center; width: 340px; height: 1px; padding-top: 256px; margin-left: 1547px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                <font style="">
                                    <span style="font-size: 20px;">
                                        EditTripForm
                                    </span>
                                    <br/>
                                    <br/>
                                    <font style="font-size: 16px;">
                                        Edit a past trip's details here. The edit form will render different fields depending on the trip's type (past or future)
                                    </font>
                                    <br/>
                                </font>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="1717" y="270" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="14px" text-anchor="middle">
                    EditTripForm...
                </text>
            </switch>
        </g>
        <rect x="1898.96" y="248.56" width="370.95" height="880" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe center; width: 369px; height: 1px; padding-top: 256px; margin-left: 1900px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                <font style="">
                                    <span style="font-size: 20px;">
                                        ReusableTripForm
                                    </span>
                                    <br/>
                                    <br/>
                                    <font style="font-size: 16px;">
                                        Will render different form fields based on the trip's type (past or future)
                                    </font>
                                    <br/>
                                </font>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="2084" y="270" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="14px" text-anchor="middle">
                    ReusableTripForm...
                </text>
            </switch>
        </g>
    </g>
    <switch>
        <g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/>
        <a transform="translate(0,-5)" xlink:href="https://www.diagrams.net/doc/faq/svg-export-text-problems" target="_blank">
            <text text-anchor="middle" font-size="10px" x="50%" y="100%">
                Text is not SVG - cannot display
            </text>
        </a>
    </switch>
</svg>