Implement git status display

src/lib/server/git.ts

@@ -43,7 +43,9 @@ export async function getRepoStatus(): Promise<RepoStatus> {
     clean: status.isClean(),
     ahead: status.ahead,
     behind: status.behind,
-    changes: status.files,
+    // Need to map changed files to a new object or we get a JSON serialize
+    // error
+    changes: status.files.map(f => ({ ...f })),
   };
 }
 

src/routes/admin/+page.svelte

@@ -9,6 +9,17 @@
 
   // Git setup
   let gitUrl = '';
+
+  async function submitSwitchToGit() {
+    await api().admin.git.init(gitUrl);
+  }
+
+  // Git controls
+  let commitMessage = '';
+
+  async function gitCommit() {
+    await api().admin.git.commit(commitMessage);
+  }
 </script>
 
 <svelte:head>
@@ -45,14 +56,46 @@
             {/if}
           </p>
 
+          <!-- Push/pull -->
+          {#if data.repo.behind}
+          <button on:click={() => api().admin.git.push()}>Push</button>
+          {:else if data.repo.ahead}
+          <button on:click={() => api().admin.git.pull()}>Pull</button>
+          {/if}
+
+          <!-- Commit -->
+           {#if !data.repo.clean}
+
+           <h3>Changes</h3>
+
+           <ul>
+             {#each data.repo.changes as change}
+              {#if change.from}
+              <li>Rename {change.from} to ({change.path})</li>
+              {:else if change.index === '?'}
+              <li>Create {change.path}</li>
+              {:else if change.index === 'D'}
+              <li>Delete {change.path}</li>
+              {:else}
+              <li>Update {change.path}</li>
+              {/if}
+             {/each}
+           </ul>
+
+           <form on:submit|preventDefault={gitCommit}>
+             <input required type="text" name="commit-message" id="commit-message" placeholder="Commit message" bind:value={commitMessage}>
+             <input type="submit" value="Commit changes">
+           </form>
+           {/if}
+
           {:else}
           <h2>Git is currently not in use</h2>
 
           You can use a Git repository to back up your portfolio data. Enter the
           clone URL for an empty Git repository and it will be set up for you.
 
-          <form>
-            <input type="text" name="git-url" id="git-url" placeholder="git@github.com:MaddyGuthridge/Minifolio.git" bind:value={gitUrl}>
+          <form on:submit|preventDefault={submitSwitchToGit}>
+            <input required type="text" name="git-url" id="git-url" placeholder="git@github.com:MaddyGuthridge/Minifolio.git" bind:value={gitUrl}>
             <input type="submit" value="Switch to a Git repository">
           </form>
           {/if}