From 33bbaf3de6e7427df4f0f1265be270a97430de52 Mon Sep 17 00:00:00 2001
From: JJ-8 <34778827+JJ-8@users.noreply.github.com>
Date: Fri, 2 Sep 2022 19:55:39 +0200
Subject: [PATCH 1/4] Make tasks exportable as Markdown

All tasks can now be bundled together to create one big document
of tasks that can be submitted as a writeup for a CTF.
This saves lots of time copying the tasks in a document one by one.

The user can choose to export all tasks or only the solved tasks.

Optionally, the user can supply a team name to add to the writeup since
that is often required if you want to submit it to an organization.

The export is done client side using the APIs of Hedgedoc.
---
 .../components/Dialogs/TaskExportDialog.vue   | 142 ++++++++++++++++++
 front/src/components/Task/TaskList.vue        |  16 ++
 2 files changed, 158 insertions(+)
 create mode 100644 front/src/components/Dialogs/TaskExportDialog.vue

diff --git a/front/src/components/Dialogs/TaskExportDialog.vue b/front/src/components/Dialogs/TaskExportDialog.vue
new file mode 100644
index 000000000..5d98b4027
--- /dev/null
+++ b/front/src/components/Dialogs/TaskExportDialog.vue
@@ -0,0 +1,142 @@
+<template>
+  <q-dialog ref="dialogRef" @hide="onDialogHide">
+    <q-card class="ctfnote-dialog">
+      <q-card-section class="row">
+        <div class="text-h6">Export tasks</div>
+        <q-space />
+        <q-btn v-close-popup icon="close" flat round dense />
+      </q-card-section>
+      <q-card-section>
+        <div>
+          <q-select
+            v-model="currentOption"
+            class="full-width"
+            label="Export Type"
+            :options="exportOptions"
+          />
+          <q-input v-model="teamName" label="Team name" />
+        </div>
+      </q-card-section>
+      <q-card-actions class="q-pr-md q-pb-md" align="right">
+        <q-btn flat color="warning" label="Cancel" @click="backClick" />
+        <q-btn color="positive" label="Export" @click="btnClick" />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script lang="ts">
+import { useDialogPluginComponent } from 'quasar';
+import { Ctf, Task } from 'src/ctfnote/models';
+import { defineComponent, ref } from 'vue';
+
+export default defineComponent({
+  props: {
+    ctf: { type: Object as () => Ctf, required: true },
+  },
+  emits: useDialogPluginComponent.emits,
+  setup() {
+    const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } =
+      useDialogPluginComponent();
+
+    const exportOptions = ['Solved tasks only', 'All tasks'];
+
+    return {
+      model: ref(''),
+      currentOption: ref(exportOptions[0]),
+      teamName: ref(''),
+      exportOptions,
+      dialogRef,
+      onDialogHide,
+      onDialogOK,
+      onDialogCancel,
+    };
+  },
+  computed: {},
+  methods: {
+    backClick() {
+      this.onDialogCancel();
+    },
+
+    async downloadTaskMarkdown(task: Task) {
+      const result = await fetch(task.padUrl + '/download/markdown');
+      let markdown = await result.text();
+      if (markdown.trimStart().substring(0, 1) != '#') {
+        //does not start with a title, manually adding...
+        markdown = `# ${task.title} - ${task.category}\n` + markdown;
+      }
+      return markdown;
+    },
+
+    async exportTasks(tasks: Task[]) {
+      let template = '';
+
+      // Add logo
+      if (this.ctf.logoUrl != null) {
+        template += `![CTF logo](${this.ctf.logoUrl})\n\n`;
+      }
+
+      // Add CTF title
+      template += `${this.ctf.title}\n===\n\n`;
+      // Add CTF date
+      template += `${this.ctf.startTime.toUTCString()} - ${this.ctf.endTime.toUTCString()}\n`;
+      // Add team name
+      if (this.teamName != '') {
+        template += `Team: ${this.teamName}\n`;
+      }
+
+      // Add flags table
+      const flagTasks = tasks.filter((f) => f.flag != '');
+      if (flagTasks.length > 0) {
+        template += '\n| Task | Flag |\n|---|---|\n';
+        template += flagTasks
+          .map((flagTask) => `| ${flagTask.title} | ${flagTask.flag} |`)
+          .join('\n');
+      }
+
+      template += '\n\n\n';
+
+      // Add tasks
+      template += (
+        await Promise.all(
+          tasks.flatMap((task) => this.downloadTaskMarkdown(task), this)
+        )
+      ).join('\n\n');
+
+      // download
+      const blob = new Blob([template], {
+        type: 'application/markdown',
+      });
+      const link = document.createElement('a');
+      link.href = URL.createObjectURL(blob);
+      link.download = this.ctf.title + '.md';
+      link.click();
+      URL.revokeObjectURL(link.href);
+    },
+
+    btnClick() {
+      let tasks = this.ctf.tasks;
+      if (this.currentOption == 'Solved tasks only') {
+        tasks = tasks.filter((t) => t.solved);
+      }
+
+      return this.exportTasks(
+        tasks
+          .sort((a, b) =>
+            a.title.toLowerCase().localeCompare(b.title.toLowerCase())
+          )
+          .sort((a, b) =>
+            a.category.toLowerCase().localeCompare(b.category.toLowerCase())
+          )
+      );
+    },
+  },
+});
+</script>
+
+<style scoped>
+.q-dialog-plugin {
+  width: 800px;
+  max-width: 90vw !important;
+}
+</style>
diff --git a/front/src/components/Task/TaskList.vue b/front/src/components/Task/TaskList.vue
index dc83760b5..497800412 100644
--- a/front/src/components/Task/TaskList.vue
+++ b/front/src/components/Task/TaskList.vue
@@ -90,6 +90,13 @@
           label="Import "
           @click="openImportTaskDialog"
         />
+        <q-fab-action
+          color="accent"
+          push
+          icon="file_download"
+          label="Export "
+          @click="openExportTasksDialog"
+        />
       </q-fab>
     </q-page-sticky>
   </div>
@@ -102,6 +109,7 @@ import { useStoredSettings } from 'src/extensions/storedSettings';
 import { defineComponent, ref, provide } from 'vue';
 import TaskEditDialogVue from '../Dialogs/TaskEditDialog.vue';
 import TaskImportDialogVue from '../Dialogs/TaskImportDialog.vue';
+import TaskExportDialogVue from '../Dialogs/TaskExportDialog.vue';
 import TaskCards from './TaskCards.vue';
 import TaskTable from './TaskTable.vue';
 import { useQuasar } from 'quasar';
@@ -257,6 +265,14 @@ export default defineComponent({
         },
       });
     },
+    openExportTasksDialog() {
+      this.$q.dialog({
+        component: TaskExportDialogVue,
+        componentProps: {
+          ctf: this.ctf,
+        },
+      });
+    },
   },
 });
 </script>

From 60b275bea2668c1aaff46127a1131a736ad9751e Mon Sep 17 00:00:00 2001
From: JJ-8 <34778827+JJ-8@users.noreply.github.com>
Date: Mon, 5 Sep 2022 09:14:25 +0200
Subject: [PATCH 2/4] Drop logo in export template

As of https://github.com/TFNS/CTFNote/pull/185#discussion_r962318520
---
 front/src/components/Dialogs/TaskExportDialog.vue | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/front/src/components/Dialogs/TaskExportDialog.vue b/front/src/components/Dialogs/TaskExportDialog.vue
index 5d98b4027..9182ba56d 100644
--- a/front/src/components/Dialogs/TaskExportDialog.vue
+++ b/front/src/components/Dialogs/TaskExportDialog.vue
@@ -71,11 +71,6 @@ export default defineComponent({
     async exportTasks(tasks: Task[]) {
       let template = '';
 
-      // Add logo
-      if (this.ctf.logoUrl != null) {
-        template += `![CTF logo](${this.ctf.logoUrl})\n\n`;
-      }
-
       // Add CTF title
       template += `${this.ctf.title}\n===\n\n`;
       // Add CTF date

From 6b4c6920704c40b20e629dcc70299404589c22c8 Mon Sep 17 00:00:00 2001
From: JJ-8 <34778827+JJ-8@users.noreply.github.com>
Date: Mon, 5 Sep 2022 09:15:05 +0200
Subject: [PATCH 3/4] Fix markdown MIME type in export

As of https://github.com/TFNS/CTFNote/pull/185#discussion_r962318694
---
 front/src/components/Dialogs/TaskExportDialog.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/front/src/components/Dialogs/TaskExportDialog.vue b/front/src/components/Dialogs/TaskExportDialog.vue
index 9182ba56d..f5e1335b5 100644
--- a/front/src/components/Dialogs/TaskExportDialog.vue
+++ b/front/src/components/Dialogs/TaskExportDialog.vue
@@ -100,7 +100,7 @@ export default defineComponent({
 
       // download
       const blob = new Blob([template], {
-        type: 'application/markdown',
+        type: 'text/markdown',
       });
       const link = document.createElement('a');
       link.href = URL.createObjectURL(blob);

From a44dc6acf4335c64f9507047eced86165e253663 Mon Sep 17 00:00:00 2001
From: XeR <XeR@users.noreply.github.com>
Date: Wed, 7 Sep 2022 11:35:46 -0100
Subject: [PATCH 4/4] Export: add markdown line break after date

Current exporter prints the date and the team name like this:
```
$start - $end\n
Team: $team
```

Markdown renderers will print those lines on the same line:
```
$start - $end Team: $team
```

The proper way to force a new line is to end the first line with two spaces.

> When you do want to insert a <br /> break tag using Markdown, you end a line
> with two or more spaces, then type return.

Source: https://daringfireball.net/projects/markdown/syntax#p
---
 front/src/components/Dialogs/TaskExportDialog.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/front/src/components/Dialogs/TaskExportDialog.vue b/front/src/components/Dialogs/TaskExportDialog.vue
index f5e1335b5..d0bf346ef 100644
--- a/front/src/components/Dialogs/TaskExportDialog.vue
+++ b/front/src/components/Dialogs/TaskExportDialog.vue
@@ -74,7 +74,7 @@ export default defineComponent({
       // Add CTF title
       template += `${this.ctf.title}\n===\n\n`;
       // Add CTF date
-      template += `${this.ctf.startTime.toUTCString()} - ${this.ctf.endTime.toUTCString()}\n`;
+      template += `${this.ctf.startTime.toUTCString()} - ${this.ctf.endTime.toUTCString()}  \n`;
       // Add team name
       if (this.teamName != '') {
         template += `Team: ${this.teamName}\n`;