103 lines
6.1 KiB
Handlebars
103 lines
6.1 KiB
Handlebars
<div class="page-header">
|
|
<div>
|
|
<h2>Add API source</h2>
|
|
<p>Adjust the endpoint or refresh cadence for this API source.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card card-outline card-primary admin-form-card">
|
|
<div class="card-header">
|
|
<h3 class="card-title">API source details</h3>
|
|
</div>
|
|
<form id="api-source-form" method="post" action="/data-sources/api-sources" data-async-save data-async-save-close-url="/data-sources/api-sources" data-async-save-new-url="/data-sources/api-sources/new">
|
|
<div class="card-body">
|
|
<div class="row g-3 mb-4">
|
|
<div class="col-12 col-lg-6">
|
|
<label for="api-source-name" class="form-label">Name</label>
|
|
<input id="api-source-name" name="name" class="form-control" value="{{apiSource.name}}" required />
|
|
</div>
|
|
<div class="col-12 col-lg-6">
|
|
<label for="api-source-url" class="form-label">API URL</label>
|
|
<input id="api-source-url" name="api_url" type="url" class="form-control" value="{{apiSource.apiUrl}}" placeholder="https://example.com/api.json" required />
|
|
</div>
|
|
</div>
|
|
<div class="mb-4">
|
|
<h4 class="api-source-section-heading">Access and parsing</h4>
|
|
<div class="row g-3 align-items-end">
|
|
<div class="col-12 col-md-4">
|
|
<label for="api-source-auth-method" class="form-label">Auth method</label>
|
|
<select id="api-source-auth-method" name="auth_method" class="form-select" data-api-source-auth-method>
|
|
<option value="none" {{#if (eq apiSource.authMethod 'none')}}selected{{/if}}>None</option>
|
|
<option value="basic" {{#if (eq apiSource.authMethod 'basic')}}selected{{/if}}>Basic</option>
|
|
<option value="bearer" {{#if (eq apiSource.authMethod 'bearer')}}selected{{/if}}>Bearer token</option>
|
|
<option value="api_key_header" {{#if (eq apiSource.authMethod 'api_key_header')}}selected{{/if}}>API key header</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-12 col-md-8">
|
|
<label for="api-source-items-path" class="form-label">Items path</label>
|
|
<input id="api-source-items-path" name="items_path" class="form-control" value="{{apiSource.itemsPath}}" placeholder="items, results.data, or another array path" />
|
|
</div>
|
|
</div>
|
|
<div class="row mt-2">
|
|
<div class="col-12 col-md-8 offset-md-4">
|
|
<div class="form-text">Optional. Use dot notation to point at the array this source should iterate through.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mb-4" data-api-source-auth-details-section>
|
|
<h4 class="api-source-section-heading">Authentication details</h4>
|
|
<div class="row g-3 mb-3" data-api-source-auth-panel="basic" hidden>
|
|
<div class="col-12 col-md-6">
|
|
<label for="api-source-auth-username" class="form-label">Username</label>
|
|
<input id="api-source-auth-username" name="auth_username" class="form-control" value="{{apiSource.authUsername}}" autocomplete="username" />
|
|
</div>
|
|
<div class="col-12 col-md-6">
|
|
<label for="api-source-auth-password" class="form-label">Password</label>
|
|
<input id="api-source-auth-password" name="auth_password" type="password" class="form-control" value="{{apiSource.authPassword}}" autocomplete="current-password" />
|
|
</div>
|
|
</div>
|
|
<div class="row g-3 mb-3" data-api-source-auth-panel="bearer" hidden>
|
|
<div class="col-12">
|
|
<label for="api-source-auth-bearer-token" class="form-label">Bearer token</label>
|
|
<input id="api-source-auth-bearer-token" name="auth_bearer_token" type="password" class="form-control" value="{{apiSource.authBearerToken}}" autocomplete="off" />
|
|
</div>
|
|
</div>
|
|
<div class="row g-3 mb-3" data-api-source-auth-panel="api_key_header" hidden>
|
|
<div class="col-12 col-md-5">
|
|
<label for="api-source-auth-header-name" class="form-label">Header name</label>
|
|
<input id="api-source-auth-header-name" name="auth_header_name" class="form-control" value="{{apiSource.authHeaderName}}" placeholder="X-API-Key" />
|
|
</div>
|
|
<div class="col-12 col-md-7">
|
|
<label for="api-source-auth-header-value" class="form-label">Header value</label>
|
|
<input id="api-source-auth-header-value" name="auth_header_value" class="form-control" value="{{apiSource.authHeaderValue}}" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h4 class="api-source-section-heading">Refresh</h4>
|
|
<div class="row g-3">
|
|
<div class="col-12 col-md-4">
|
|
<label for="api-source-interval" class="form-label">Update interval</label>
|
|
<input id="api-source-interval" name="update_interval_value" type="number" min="1" class="form-control" value="{{apiSource.updateIntervalValue}}" required />
|
|
</div>
|
|
<div class="col-12 col-md-4">
|
|
<label for="api-source-interval-unit" class="form-label">Unit</label>
|
|
<select id="api-source-interval-unit" name="update_interval_unit" class="form-select">
|
|
<option value="seconds" {{#if (eq apiSource.updateIntervalUnit 'seconds')}}selected{{/if}}>Seconds</option>
|
|
<option value="minutes" {{#if (eq apiSource.updateIntervalUnit 'minutes')}}selected{{/if}}>Minutes</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-footer d-flex justify-content-end">
|
|
<div class="btn-group" role="group" aria-label="API source actions">
|
|
{{{saveActionButtons formId="api-source-form" saveLabel="Save" saveAndCloseLabel="Save and Close" saveAndNewLabel="Save and New" saveAndCloseValue="close" saveAndNewValue="new"}}}
|
|
<a class="btn btn-warning" href="/data-sources/api-sources" data-confirm-unsaved="You have unsaved changes. Leave this page?">Cancel</a>
|
|
<button type="submit" class="btn btn-outline-danger" disabled>Delete</button>
|
|
</div>
|
|
</div>
|
|
<script type="module" src="/assets/js/data-sources/api-source-form.js?v={{appVersion}}"></script>
|
|
</form>
|
|
</div>
|