1
0
Fork 0
mirror of https://github.com/Luzifer/sii.git synced 2024-12-30 12:11:15 +00:00
sii/cmd/sii-editor/frontend/index.html
Knut Ahlers b515c32f98
Multi stop route planning (#2)
* Add support for multi-job creation

Signed-off-by: Knut Ahlers <knut@ahlers.me>

* Fix: Ensure at least one unit of cargo is transported

Signed-off-by: Knut Ahlers <knut@ahlers.me>

* Multi-stop route planning

Signed-off-by: Knut Ahlers <knut@ahlers.me>

* Linter + fix of weird char deletion

Signed-off-by: Knut Ahlers <knut@ahlers.me>
2020-01-04 15:33:43 +01:00

302 lines
16 KiB
HTML

<html>
<title>SII-Editor</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="/asset/combine.css">
<link rel="stylesheet" href="/asset/fontawesome/css/all.min.css">
<link rel="stylesheet" href="/asset/app.css">
<div id="app">
<b-navbar toggleable="lg" type="dark" variant="primary" class="mb-2">
<b-navbar-brand href="#">SII-Editor</b-navbar-brand>
<b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
<b-collapse id="nav-collapse" is-nav>
<b-navbar-nav>
<b-nav-item-dropdown :text="selectedProfile ? `${profiles[selectedProfile].profile_name} (${profiles[selectedProfile].company_name})` : 'Select Profile'">
<b-dropdown-item
@click="selectProfile(id)"
v-for="(profile, id) in profiles"
:key="id"
>
{{ profile.profile_name }} ({{ profile.company_name }})
</b-dropdown-item>
</b-nav-item-dropdown>
</b-navbar-nav>
</b-collapse>
</b-navbar>
<b-container v-if="selectedProfile">
<b-row>
<b-col cols="12" lg="5" xl="4" order="1" order-lg="0" class="mb-4">
<b-list-group flush>
<b-list-group-item
@click="autoLoad = !autoLoad"
button
:active="autoLoad"
>
<span><i :class="{ 'fa': true, 'fa-fw': true, 'mr-1': true, 'fa-sync-alt': true, 'fa-spin': autoLoad }"></i>Latest Save</span><br>
<small>Toggles automatic loading of latest save</small>
</b-list-group-item>
<b-list-group-item
button
:active="selectedSave === save.id"
@click="selectSave(save.id)"
v-for="save in sortedSaves"
v-if="save.name !== 'Autosave' || showAutosaves || selectedSave === save.id"
:key="save.id"
>
<div class="d-flex w-100 justify-content-between">
<span>
<i :class="{ 'fa': true, 'fa-fw': true, 'mr-1': true, 'fa-truck': selectedSave !== save.id, 'fa-truck-loading': selectedSave === save.id && !saveLoading, 'fa-spinner': selectedSave === save.id && saveLoading, 'fa-pulse': selectedSave === save.id && saveLoading }"></i>
{{ save.name.replace('@@noname_save_game@@', 'Save') || 'Autosave' }}
</span>
<small>{{ moment(save.save_time).fromNow() }}</small>
</div>
</b-list-group-item>
</b-list-group>
<div class="text-center">
<b-btn class="mt-2" @click="showAutosaves = !showAutosaves">Toggle Autosaves</b-btn>
</div>
</b-col>
<b-col class="text-center mb-4" cols="12" lg="7" xl="8" v-if="!selectedSave">
<div class="d-none d-lg-block">
<i class="fa fa-hand-point-left fa-4x mb-3"></i><br>
Please select a save at the left
</div>
<div class="d-lg-none">
<i class="fa fa-hand-point-down fa-4x mb-3"></i><br>
Please select a save at the bottom
</div>
</b-col>
<b-col class="text-center pt-4 mb-4" cols="12" lg="7" xl="8" v-else-if="saveLoading">
<i class="fa fa-spinner fa-pulse fa-4x mb-3"></i><br>
Loading save...
</b-col>
<b-col cols="12" lg="7" xl="8" order="0" order-lg="1" class="mb-4" v-else>
<b-row>
<b-col cols="12" xl="6" class="mb-3">
<b-card header="Game info">
<b-input-group prepend="Money" class="mb-2">
<b-form-input
v-model="save.money"
class="text-right"
type="number"
max="2147483647"
min="0"
ref="eco_money"
></b-form-input>
<b-input-group-append>
<b-button
@click="setEconomy('money', save.money)"
:disabled="!validInt(save.money)"
>Set</b-button>
</b-input-group-append>
</b-input-group>
<b-input-group prepend="XP" class="mb-2">
<b-form-input
v-model="save.experience_points"
class="text-right"
type="number"
max="2147483647"
min="0"
ref="eco_xp"
></b-form-input>
<b-input-group-append>
<b-button
@click="setEconomy('xp', save.experience_points)"
:disabled="!validInt(save.experience_points)"
>Set</b-button>
</b-input-group-append>
</b-input-group>
</b-card>
</b-col>
<b-col cols="12" xl="6" class="mb-3">
<b-card no-body header="Truck status">
<b-card-body :class="truckClass">
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="760" height="360" viewbox="0 0 760 360" preserveAspectRatio id="svg73" sodipodi:docname="truck_grp.svg" inkscape:version="0.92.4 5da689c313, 2019-01-14"><defs id="defs77"/><sodipodi:namedview pagecolor="#ffffff" bordercolor="#666666" borderopacity="1" objecttolerance="10" gridtolerance="10" guidetolerance="10" inkscape:pageopacity="0" inkscape:pageshadow="2" inkscape:window-width="2556" inkscape:window-height="1393" id="namedview75" showgrid="false" inkscape:snap-bbox="false" inkscape:zoom=".66184211" inkscape:cx="-129.04307" inkscape:cy="35.079803" inkscape:window-x="0" inkscape:window-y="45" inkscape:window-maximized="0" inkscape:current-layer="svg73" inkscape:snap-text-baseline="false"/><path inkscape:connector-curvature="0" id="truck" d="m51.080083 87.484352-39.28125 97.724608v92.90625c0 6.47406 4.522608 12.38672 12.59961 12.38672H46.632817C63.502558 228.0995 128.28394 218.82629 157.06641 271.2324h71.15234c31.72209-49.80697 104.55521-40.59246 108.21094 18.66016h20.01172c0-25.06269-27.3824-70.27539-57.81055-70.27539H159.29102l.71875-131.792974zM104.38867 247.22264c-24.572308.172-44.359788 18.77732-44.236321 41.59375.123467 22.81631 20.110659 41.2372 44.683591 41.17968 24.57293-.0573 44.461-18.56994 44.46094-41.38671l-.002-.41602c-.24693-22.81549-20.33393-41.14267-44.90625-40.9707zm175.71094.0c-24.57231.172-44.35982 18.77732-44.23633 41.59375.12349 22.81631 20.11066 41.2372 44.6836 41.17968 24.57293-.0573 44.46099-18.56994 44.46093-41.38671l-.002-.41602c-.24693-22.81549-20.33394-41.14267-44.90625-40.9707z" style="fill:#000;fill-rule:nonzero;stroke-width:1.98951471;stroke-linecap:round;stroke-miterlimit:4;stroke-dashoffset:0;marker-start:none;marker-mid:none;marker-end:none"/><path inkscape:connector-curvature="0" id="trailer" d="M208.13477 47.953102 208.00781 207.32029 747.71094 207.2031V48.498024zM559.54102 219.86131c-30.42815.0-57.81053 45.21064-57.81055 70.27344h20.06445c3.55237-57.57751 72.41046-64.09942 93.6211-38.46094l-.0645 2.33594h20.06641l-.0664-2.33594c21.21061-25.63848 90.06873-19.11657 93.6211 38.46094h20.00195c-3e-5-25.0628-27.38436-70.27344-57.8125-70.27344zm15.06836 27.36133c-24.57231.172-44.35981 18.77732-44.23633 41.59375.12349 22.81631 20.11262 41.23714 44.68554 41.17968 24.57294-.0573 44.45905-18.56994 44.45899-41.38671l-.002-.41602c-.24693-22.81549-20.33394-41.14271-44.90624-40.9707zm98.35546.0c-24.57231.172-44.35982 18.77732-44.23632 41.59375.12349 22.81631 20.11068 41.23714 44.68359 41.17968 24.57294-.0573 44.461-18.56994 44.46094-41.38671l-.002-.41602c-.24693-22.81549-20.33391-41.14271-44.90625-40.9707z" style="fill:#ccc;fill-rule:nonzero;stroke-width:1.98951471;stroke-linecap:round;stroke-miterlimit:4;stroke-dashoffset:0;marker-start:none;marker-mid:none;marker-end:none"/><path stroke-miterlimit="4" id="window" d="m118.28646 110.25706.20881 60.00242-93.545075 9.18226 26.459875-68.9908z" style="fill:#ccc;fill-rule:nonzero;stroke-width:1.98951471;stroke-linecap:round;stroke-miterlimit:4;stroke-dashoffset:0;marker-start:none;marker-mid:none;marker-end:none" inkscape:connector-curvature="0"/><path style="stroke-width:1;stroke:#000;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none" id="cargo" d="m625.7003 58.018686-69.26701 37.602085s22.2644 13.358649 22.01702 12.369119l69.76176-37.354708zm52.19618 27.137148-71.09531 39.699536s16.38118 9.3785 17.72406 10.33158l72.10706-39.692768c-.16807-.08697-18.73581-10.338348-18.73581-10.338348zm20.03941 13.928297-71.24606 38.838999v62.09291l71.74082-38.83899zm-142.49214.24737s17e-5 62.092769-.16475 62.010309c-.16491-.0824 67.45271 38.92162 67.45271 38.92162l.49476-61.84555-18.30628-10.39004-.24737 23.25392-7.91623-10.39005-7.91624 1.73167-5.68979-8.16361-6.18455 1.23693.24738-23.50131z" inkscape:connector-curvature="0"/><text y="219.30014" x="86.675941" style="font-style:normal;font-weight:400;font-size:40px;line-height:1.25;text-align:center;letter-spacing:0;word-spacing:0;text-anchor:middle;fill:#fff;fill-opacity:1;stroke:none" id="text51"><tspan y="219.30014" x="86.675941" id="truckdmg" sodipodi:role="line">{{ dmgTruck.toFixed(0) }}%</tspan></text><text y="141.94373" x="357.04852" style="font-style:normal;font-weight:400;font-size:40px;line-height:1.25;text-align:center;letter-spacing:0;word-spacing:0;text-anchor:middle;fill:#fff;fill-opacity:1;stroke:none" id="text54"><tspan y="141.94373" x="357.04852" id="trailerdmg" sodipodi:role="line">{{ dmgTrailer.toFixed(0) }}%</tspan></text><text y="159.75394" x="659.46777" style="font-style:normal;font-weight:400;font-size:40px;line-height:1.25;text-align:center;letter-spacing:0;word-spacing:0;text-anchor:middle;fill:#fff;fill-opacity:1;stroke:none" id="text54-3"><tspan y="159.75394" x="659.46777" id="cargodmg" sodipodi:role="line" style="font-size:24px">{{ dmgCargo.toFixed(0) }}%</tspan></text></svg>
</b-card-body>
</b-card>
</b-col>
<b-col cols="12" xl="6" class="mb-3">
<b-card header="Repairs">
<b-button-group class="w-100">
<b-button @click="executeRepair('truck')">Truck</b-button>
<b-button @click="executeRepair('trailer')">Trailer</b-button>
<b-button @click="executeRepair('cargo')">Cargo</b-button>
<b-button @click="executeRepair('all')">Everything</b-button>
</b-button-group>
</b-card>
</b-col>
<b-col cols="12" xl="6" class="mb-3">
<b-card header="Trailer">
<b-input-group>
<b-form-select
:disabled="!save.trailer_attached"
v-model="save.attached_trailer"
:options="ownedTrailers"
placeholder="No own trailer attached"
></b-form-select>
<b-input-group-append>
<b-button
@click="attachTrailer"
:disabled="!save.trailer_attached"
>Set</b-button>
</b-input-group-append>
</b-input-group>
</b-card>
</b-col>
<b-col cols="12" xl="6" class="mb-3">
<b-card header="Add Job to Route">
<b-form @submit.prevent="createJob">
<b-form-group
label="Source Company"
label-for="source-company"
>
<b-form-select
id="source-company"
:options="companySelectItems"
v-model="newJob.origin_reference"
required
></b-form-select>
</b-form-group>
<b-form-group
label="Target Company"
label-for="target-company"
>
<b-form-select
id="target-company"
:options="companySelectItems"
v-model="newJob.target_reference"
required
></b-form-select>
</b-form-group>
<b-form-group
label="Cargo"
label-for="cargo"
>
<b-form-select
id="cargo"
:options="cargoSelectItems"
v-model="newJob.cargo_reference"
required
></b-form-select>
</b-form-group>
<b-form-group
label="Weight (in tons)"
label-for="weight"
>
<b-form-input
id="weight"
class="text-right"
v-model="newJob.weight"
type="number"
required
min="1"
max="200"
></b-form-input>
</b-form-group>
<div class="text-center">
<b-btn
type="submit"
>
Add Job
</b-btn>
</div>
</b-form>
</b-card>
</b-col>
<b-col cols="12" xl="6" class="mb-3">
<b-card header="Planned route">
<b-list-group class="mb-2" flush v-if="plannedRoute.length > 0">
<b-list-group-item
v-for="(job, idx) in plannedRoute"
:key="idx"
>
<div class="d-flex w-100 justify-content-between">
<span>
<span>
<i class="fa fa-fw fa-box mr-1"></i>
<strong>{{ job.weight }}t {{ cargo[job.cargo_reference].name }}</strong>
</span><br>
<small>
From <strong>{{ companyNameFromReference(job.origin_reference) }}</strong><br>
To <strong>{{ companyNameFromReference(job.target_reference) }}</strong>
</small>
</span>
<b-btn
@click="removeJob(idx)"
variant="danger"
>
<i class="fa fa-fw fa-trash"></i>
</b-btn>
</div>
</b-list-group-item>
</b-list-group>
<div class="text-center">
<b-btn
@click="createRoute"
:disabled="plannedRoute.length == 0"
>
Create Jobs for Route
</b-btn>
</div>
</b-card>
</b-col>
</b-row>
</b-col>
</b-row>
</b-container>
<b-container v-else>
<b-row>
<b-col class="text-center">
<i class="fa fa-hand-point-up fa-4x mb-3"></i><br>
Please select a profile above
</b-col>
</b-row>
</b-container>
<b-modal
centered
hide-footer
hide-header
no-close-on-backdrop
no-close-on-esc
size="sm"
:visible="showSaveModal"
>
<div class="text-center">
<i class="fa fa-spinner fa-pulse fa-4x mb-3"></i><br>
Modifying save-game...
</div>
</b-modal>
</div>
<script type="application/javascript" src="/asset/combine.js"></script>
<script type="application/javascript" src="/asset/app.js"></script>
</html>