<!DOCTYPE html>
<html lang="en">

## setuppage.html - The setup page showing a database setup

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>System Setup</title>
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<link rel="stylesheet" href="/static/w3.css">
<link rel="stylesheet" href="/static/w3-colors-flat.css">
<link rel="stylesheet" href="/static/indipyweb.css">
<script src="/static/htmx.min.js"></script>
<script src="/static/sse.js"></script>
<script src="/static/indipyweb.js"></script>

<body class="w3-flat-clouds">

  <header class="w3-container w3-flat-silver w3-block">
    <p class="w3-margin-right w3-left"><a href="/" class="w3-button w3-black w3-ripple w3-round w3-medium">Devices</a></p>
    <p class="w3-right"><a href="/logout" class="w3-button w3-black w3-ripple w3-round w3-small">Logout</a></p>
    <p class="w3-right"><a href="/edit" class="w3-button w3-black w3-ripple w3-round w3-small w3-margin-right">Edit</a></p>
    <h3>System Setup</h3>
  </header>

## Create backup button

<div class="w3-content" style="max-width:400px;margin-top:8vh">
    <p><button hx-get="/setup/backupdb" hx-target="#backupfile" class="w3-button w3-black w3-ripple w3-round" style="width:100%">Create backup file</button></p>
    <p id="backupfile"></p>
</div>

<div class="w3-content" style="max-width:600px;margin-top:5vh;">
  <div style="margin-left:5px;margin-right:5px">
    <p>As users are created, they will be set into the database file 'indipyweb.db'. If the file cannot be found a new file containing a single user will be created.  The values set below are also saved in the database and will be read when the service is restarted.</p>
    <p>The folder containing the database file should be set as a command line argument, if not set the current working directory will be used.</p>
    <p>To move the file, create a backup using the above button, and move and rename the backup file.<p>
    <p>If web host and port are set on the command line, they will have priority, if not set, then the values from the database will be used.</p>
  </div>
</div>

## webhost

<div class="w3-content" style="max-width:400px;margin-top:5vh">

  <div>
    <button onclick="btntogglenhide(this, 'Close','Set web service host/IP', 'webhost', 'webhostconfirm')" class="w3-button w3-black w3-ripple w3-round" style="width:100%">Close</button>
  </div>

  <div id="webhost" class="w3-container w3-card" style="margin-top:1vh">
        <h3>Web service host/IP</h3>
        <p>Current value: ${currentwebhost}</p>
        <p id="storedwebhost">Stored value: ${storedwebhost}</p>
    <form hx-post="/setup/webhost" hx-target="#webhostconfirm" hx-swap="outerHTML">
      <p><label for="webhostinput">Set new stored value:</label>
        <input class="w3-input" type="text" id="webhostinput" name="webhostinput" value="${storedwebhost}" required /></p>
      <p class="w3-center">
        <button class="w3-button w3-black w3-ripple w3-round" type="submit">Submit</button></p>
    </form>
    <p id="webhostconfirm"></p>
  </div>

</div>

## webport

<div class="w3-content" style="max-width:400px;margin-top:5vh">

  <div>
    <button onclick="btntogglenhide(this, 'Close','Set web service port', 'webport', 'webportconfirm')" class="w3-button w3-black w3-ripple w3-round" style="width:100%">Close</button>
  </div>

  <div id="webport" class="w3-container w3-card" style="margin-top:1vh">
        <h3>Web service port</h3>
        <p>Current value: ${currentwebport}</p>
        <p id="storedwebport">Stored value: ${storedwebport}</p>
    <form hx-post="/setup/webport" hx-target="#webportconfirm" hx-swap="outerHTML">
      <p><label for="webportinput">Set new stored value:</label>
        <input class="w3-input" type="text" id="webportinput" name="webportinput" value="${storedwebport}" required /></p>
      <p class="w3-center">
        <button class="w3-button w3-black w3-ripple w3-round" type="submit">Submit</button></p>
    </form>
    <p id="webportconfirm"></p>
  </div>

</div>

## indihost

<div class="w3-content" style="max-width:400px;margin-top:5vh">

  <div>
    <button onclick="btntogglenhide(this, 'Close','Set INDI server host/IP', 'indihost', 'indihostconfirm')" class="w3-button w3-black w3-ripple w3-round" style="width:100%">Close</button>
  </div>

  <div id="indihost" class="w3-container w3-card" style="margin-top:1vh">
        <h3>INDI server host/IP</h3>
        <p>Current value: ${currentindihost}</p>
        <p id="storedindihost">Stored value: ${storedindihost}</p>
    <form hx-post="/setup/indihost" hx-target="#indihostconfirm" hx-swap="outerHTML">
      <p><label for="indihostinput">Set new stored value:</label>
        <input class="w3-input" type="text" id="indihostinput" name="indihostinput" value="${storedindihost}" required /></p>
      <p class="w3-center">
        <button class="w3-button w3-black w3-ripple w3-round" type="submit">Submit</button></p>
    </form>
    <p id="indihostconfirm"></p>
  </div>

</div>

## indiport

<div class="w3-content" style="max-width:400px;margin-top:5vh">

  <div>
    <button onclick="btntogglenhide(this, 'Close','Set INDI server port', 'indiport', 'indiportconfirm')" class="w3-button w3-black w3-ripple w3-round" style="width:100%">Close</button>
  </div>

  <div id="indiport" class="w3-container w3-card" style="margin-top:1vh">
        <h3>INDI server port</h3>
        <p>Current value: ${currentindiport}</p>
        <p id="storedindiport">Stored value: ${storedindiport}</p>
    <form hx-post="/setup/indiport" hx-target="#indiportconfirm" hx-swap="outerHTML">
      <p><label for="indiportinput">Set new stored value:</label>
        <input class="w3-input" type="text" id="indiportinput" name="indiportinput" value="${storedindiport}" required /></p>
      <p class="w3-center">
        <button class="w3-button w3-black w3-ripple w3-round" type="submit">Submit</button></p>
    </form>
    <p id="indiportconfirm"></p>
  </div>

</div>

## blobfolder

<div class="w3-content" style="max-width:400px;margin-top:5vh">

  <div>
    <button onclick="btntogglenhide(this, 'Close','Set BLOBs folder', 'blobfolder', 'blobfolderconfirm')" class="w3-button w3-black w3-ripple w3-round" style="width:100%">Close</button>
  </div>

  <div id="blobfolder" class="w3-container w3-card" style="margin-top:1vh">
        <h3>BLOB folder</h3>
        <p>Current value: ${currentblobfolder}</p>
        <p id="storedblobfolder">Stored value: ${storedblobfolder}</p>
    <form hx-post="/setup/blobfolder" hx-target="#blobfolderconfirm" hx-swap="outerHTML">
      <p><label for="blobfolderinput">Set new stored value:</label>
        <input class="w3-input" type="text" id="blobfolderinput" name="blobfolderinput" value="${storedblobfolder}" /></p>
      <p class="w3-center">
        <button class="w3-button w3-black w3-ripple w3-round" type="submit">Submit</button></p>
    </form>
    <p id="blobfolderconfirm"></p>
  </div>

</div>

<div class="w3-content" style="max-width:600px;margin-top:2vh;margin-bottom:2vh;">
  <div style="margin-left:5px;margin-right:5px">
    <p>The BLOB folder should be an existing folder on the web server, if set, then BLOBs transmitted from the INDI server will be saved to that folder.</p>
    <p>It will be necessary for the system administrator to clear out old BLOB files, otherwise the folder could increase to an unwanted size.</p>
  </div>
</div>


</body>
</html>
