add usage of templates when creating new photo logs

src/views/CameraCapture.vue

@@ -224,9 +224,9 @@ export default {
 				return
 			}
 
-			let r = Math.floor(Math.random() * 256).toString(16)
+			let r = Math.floor(Math.random() * 256).toString(16).padStart(2, '0')
-			let g = Math.floor(Math.random() * 256).toString(16)
+			let g = Math.floor(Math.random() * 256).toString(16).padStart(2, '0')
-			let b = Math.floor(Math.random() * 256).toString(16)
+			let b = Math.floor(Math.random() * 256).toString(16).padStart(2, '0')
 
 			let color = '#' + r + g + b
 
@@ -333,7 +333,7 @@ html, body {
 }
 
 #take_photo .camera_btn {
-	margin-top: 5vh;
+	margin-top: 2vh;
 	display: inline-block;
 	background-color: #7ec090;
 	color: white;
@@ -344,7 +344,7 @@ html, body {
 }
 
 #take_photo .n-button {
-	margin-top: 5vh;
+	margin-top: 2vh;
 }
 
 .camera_btn:hover {

src/views/CreateLog.vue

@@ -51,7 +51,6 @@
 				</n-space>
 			</n-card>
 
-			<transition-group name="slide-cards">
 			<draggable
 				:list="slides"
 				item-key="id"
@@ -121,7 +120,6 @@
 				</div>
 			</template>
 			</draggable>
-			</transition-group>
 			
 		</n-space>
 		</n-space>
@@ -165,6 +163,45 @@
 						<n-date-picker v-model:value="date" type="date" clearable />
 					</n-form-item>
 
+					<n-collapse>
+							<n-collapse-item title="Use a Template" name="1">
+								<n-form-item label="Use this template as a starting point:" path="title">
+									<n-select v-model:value="selected_template" :options="templates_select_options" clearable />
+								</n-form-item>
+
+								<n-form-item label="And fill all slots with photos in the order of the following photo groups:" path="title">
+									<n-dynamic-input
+										v-model:value="selected_photo_groups"
+										@create="()=>null"
+										show-sort-button
+									>
+										<template #default="{value, index}">
+											<n-select
+												:value="value"
+												@update:value="(value) => selected_photo_groups[index]=value"
+												:options="photogroups_select_options"
+											/>
+										</template>
+									</n-dynamic-input>
+								</n-form-item>
+
+								<n-dynamic-input
+									:value="[3]"
+									show-sort-button
+									:min="1"
+									:max="1"
+								>
+									<template #default>
+										<n-select
+											:value="3"
+											:options="photogroups_select_options"
+											disabled
+										/>
+									</template>
+								</n-dynamic-input>
+							</n-collapse-item>
+					</n-collapse>
+
 					<template #footer>
 						<n-space justify="end">
 							<n-button @click="navigateBack">Cancel</n-button>
@@ -220,6 +257,9 @@ export default {
 			start_slide_image: null,
 			slides: [],
 
+			selected_template: null,
+			selected_photo_groups: [],
+
 			selectPhotosModal: false,
 			selectedSlide: null,
 			max_photos_per_slide: 3,
@@ -244,17 +284,19 @@ export default {
 		return { message, render_date: ref(false) }
 	},
 	mounted() {
-		if (this.isValidId()) {
+		if (this.photoGroups.length == 0) {
-			this.isLoadingData = true
-
 			this.$store.dispatch('loadPhotoGroups').then(() => {
-				this.photoGroups = this.$store.getters.photoGroups
 				this.$store.dispatch('loadPhotosInAllGroups')
 			})
+		}
 
+		if (this.isValidId()) {
+			this.isLoadingData = true
 			this.findPhotoLog().then(() => {
 				this.updateLocalData()
 			})
+		} else {
+			this.$store.dispatch('loadPhotoLogTemplateList')
 		}
 	},
 	watch: {
@@ -289,7 +331,49 @@ export default {
 				return date_str
 			}
 			return '1970-01-01'
-		}
+		},
+		templates_select_options() {
+			let list = this.$store.state.photoLogTemplateList
+			if (list !== null) {
+				list.sort((a,b) => {
+					return a.date < b.date ? 1 : -1
+				})
+				list = list.map(({id, title}) => {return {
+					label: title,
+					value: id,
+				}})
+				return list
+			}
+			return null
+		},
+		photoGroups() {
+			let groups = this.$store.state.photoGroups
+			if (groups !== null && groups.length > 0) {
+				groups = [...groups].sort((a,b) => {
+					if (a.date === null) return 1
+					if (b.date === null) return -1
+					return a.date > b.date ? -1 : 1
+				})
+				// move group with id 1 ("unsorted"-group) to front
+				let index = groups.indexOf(groups.filter(g=>g.id==1)[0])
+				groups.unshift(groups.splice(index, 1)[0])
+				return groups
+			}
+			return []
+		},
+		photogroups_select_options() {
+			if (this.photoGroups.length > 0) {
+				let options = []
+				for (const idx in this.photoGroups) {
+					options.push({
+						value: this.photoGroups[idx].id,
+						label: this.photoGroups[idx].name,
+					})
+				}
+				return options
+			}
+			return []
+		},
 	},
 	methods: {
 		saveChanges() {
@@ -351,7 +435,15 @@ export default {
 				this.$store.dispatch('addNewPhotoLog', {title:this.title, date:this.dateStr}).then(id => {
 					if (id > -1 && id !== null) {
 						this.id = id
-						this.$router.push({name: 'CreateLog', params: {e: id}})
+						this.selected_photo_groups.push(3)
+						this.$router.push({
+							name: 'CreateLog',
+							params: {e: id},
+							query: {
+								template: this.selected_template,
+								groups: JSON.stringify(this.selected_photo_groups)
+							}
+						})
 					} else {
 						this.message.error('Something went wrong. Please try again later.')
 					}
@@ -393,6 +485,40 @@ export default {
 				}
 			})
 		},
+		find_tagged_image_in_group(photogroup_id, tag_id) {
+			let photos_in_group = this.$store.state.photos[photogroup_id]
+			for (const photo of photos_in_group) {
+				if (photo.tag != null && photo.tag.id == tag_id) {
+					return photo.id
+				}
+			}
+			photogroup_id
+			tag_id
+		},
+		fill_slots_in_template(template, photogroups_ids) {
+			let slides = []
+
+			for(const slide_nr in template) {
+				let slide = []
+				for(const index in template[slide_nr]) {
+					let slide_element = template[slide_nr][index]
+					if (slide_element.type == 'photo') {
+						slide.push(slide_element.id)
+					} else if (slide_element.type == 'tag') {
+						for(const group_id of photogroups_ids) {
+							let found_photo_id = this.find_tagged_image_in_group(group_id, slide_element.id)
+							if (found_photo_id != null) {
+								slide.push(found_photo_id)
+								break
+							}
+						}
+					}
+				}
+				slides.push(slide)
+			}
+			photogroups_ids
+			return slides
+		},
 		updateLocalData() {
 			let found_log = null
 			this.$store.dispatch('loadPhotoLog', this.id).then(() => {
@@ -402,10 +528,27 @@ export default {
 					this.date = new Date(found_log.date).getTime()
 					this.render_date = found_log.render_date
 					this.start_slide_image = found_log.start_slide_image
-					this.slides = found_log.slides
 					
-					for(const idx in this.slides) {
+					if (this.$route.query.template) {
-						this.slides[idx] = this.slides[idx].filter((s)=>s!==null)
+						let template_id = this.$route.query.template
+						let template = this.$store.state.photoLogTemplateList.filter(t => t.id == template_id)
+						if (template.length != 0) {
+							template = template[0]
+						} else {
+							template = []
+						}
+
+						this.render_date = template.render_date
+						this.start_slide_image = template.start_slide_image
+
+						let photogroups_ids = JSON.parse(this.$route.query.groups)
+						this.slides = this.fill_slots_in_template(template.slides, photogroups_ids)
+					} else {
+						this.slides = found_log.slides
+
+						for(const idx in this.slides) {
+							this.slides[idx] = this.slides[idx].filter((s)=>s!==null)
+						}
 					}
 
 					this.isLoadingData = false