character endpoint

src/pages/Characters.vue

@@ -1,12 +1,21 @@
 <script setup lang="ts">
 
+import {mammonAddCharacterUrl} from "@/mammon";
+import {storeToRefs} from "pinia";
+import {CharacterLabel, useCharactersStore} from "@/characters";
+
+const {characters} = storeToRefs(useCharactersStore());
+
 const addCharacter = () => {
-    window.location.replace("http://localhost:8080/oauth2/authorization/esi");
+    window.location.replace(mammonAddCharacterUrl);
 }
 </script>
 
 <template>
     <div class="grid mb-2 mt-4">
-        <button class="justify-self-end" @click="addCharacter">Add chacarcter</button>
+      <button class="justify-self-end" @click="addCharacter">Add chacarcter</button>
+      <div v-for="character in characters" :key="character.characterId" class="flex items-center mb-2">
+        <CharacterLabel :character="character" />
+      </div>
     </div>
 </template>

src/pages/Rules.vue

@@ -1,10 +1,21 @@
 <script setup lang="ts">
+import {mammonAddCharacterUrl} from "@/mammon";
+import {storeToRefs} from "pinia";
+import {CharacterLabel, useCharactersStore} from "@/characters";
+import {PencilSquareIcon} from "@heroicons/vue/24/outline";
 
+const {characters} = storeToRefs(useCharactersStore());
 
+const addCharacter = () => {
+  window.location.replace(mammonAddCharacterUrl);
+}
 </script>
 
 <template>
-    <div class="mt-4">
-
+  <div class="grid mb-2 mt-4">
+    <div v-for="character in characters" :key="character.characterId" class="flex items-center mb-2">
+      <CharacterLabel class="flex grow" :character="character" />
+      <button class="btn-icon ms-2" @click=""><PencilSquareIcon /></button>
     </div>
-</template>
+  </div>
+</template>