cgsmith/caloriethingy.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Provide context clues for user

Browse Source
This commit is contained in:
Chris Smith
2025-02-23 14:14:55 +01:00
parent 27395cc408
commit 5065174a07
9 changed files with 157 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

135
frontend/views/meal/upload.php
View File

@@ -1,10 +1,11 @@
<?php
use common\models\Meal;
use yii\helpers\Html;
use yii\widgets\ActiveForm;
/** @var yii\web\View $this */
/** @var common\models\Meal $model */
/** @var common\models\MealForm $model */
/** @var yii\widgets\ActiveForm $form */
$emoji = [
@@ -75,6 +76,8 @@ $this->registerJS(
});
"
);
$this->registerCssFile('@web/css/upload.css');
?>
<div class="meal-form container mt-5">
@@ -83,40 +86,43 @@ $this->registerJS(
<?php
$form = ActiveForm::begin(['options' => ['enctype' => 'multipart/form-data']]); ?>
<div class="mb-3">
<div class="input-group">
<input type="text" class="form-control" id="meal-description" placeholder="Add context (optional)" autofocus tabindex="1">
</div>
</div>
<?=$form->field($model, 'context')->textInput([
'class' => 'form-control mb-3',
'placeholder' => 'Add context (optional)',
'autofocus',
])->label(false) ?>
<div id="gesture-area" class="gesture-area">
Tap to take a picture or Long Press to upload a file
<img id="image-preview" src="#" alt="Image Preview" style="display: none; max-width: 100%;">
</div>
<?= Html::activeFileInput($model, 'picture', ['style' => 'display: none;', 'id' => 'file-input']) ?>
<?= $form->field($model, 'day')->textInput()->label(false); ?>
<input type="file" id="camera-input" accept="image/*" capture="environment" style="display: none;">
<input type="hidden" id="meal_day" value="Today">
<div id="metadata-fields">
<div class="mb-3">
<div class="btn-group d-flex justify-content-center" role="group">
<button id="prev-day-btn" class="btn btn-light" type="button">&lt;</button>
<button id="current-day-btn" class="btn btn-light" type="button" disabled>Today</button>
<button id="next-day-btn" class="btn btn-light" type="button" disabled>&gt;</button>
<button id="prev-day-btn" class="btn btn-light" type="button">&lt;</button>
<button id="current-day-btn" class="btn btn-light" type="button">Today</button>
<button id="next-day-btn" class="btn btn-light" type="button" disabled>&gt;</button>
</div>
</div>
<div class="btn-group d-flex justify-content-center" role="group">
<input type="radio" class="btn-check" name="meal_for" id="breakfast" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="breakfast">Breakfast</label>
<input type="radio" class="btn-check" name="meal_for" id="lunch" autocomplete="off">
<label class="btn btn-outline-primary" for="lunch">Lunch</label>
<input type="radio" class="btn-check" name="meal_for" id="dinner" autocomplete="off">
<label class="btn btn-outline-primary" for="dinner">Dinner</label>
<input type="radio" class="btn-check" name="meal_for" id="other" autocomplete="off">
<label class="btn btn-outline-primary" for="other">🤷</label>
</div>
<?= $form
->field($model, 'type')
->radioList($model->getTypeList(), [
'class' => 'btn-group d-flex justify-content-center',
'item' => function ($index, $label, $name, $checked, $value) {
$return = '<input class="btn-check" type="radio" value="'.$value.'" id="'.$value.'" name="' . $name . '" autocomplete="off" ' . ($checked ? "checked" : "") . '>';
$return .= '<label class="btn btn-outline-primary" for="'.$value.'">' . $label . '</label>';
return $return;
},
])
->label(false)
; ?>
</div>
<div class="mb-3 form-check mt-3">
@@ -128,33 +134,9 @@ $this->registerJS(
</div>
<?php ActiveForm::end(); ?>
<?php
ActiveForm::end(); ?>
</div>
<style>
#upload-title {
font-size: 2rem;
font-weight: bold;
min-height: 50px;
display: inline-block;
transition: color 0.2s ease-in-out;
}
#gesture-area {
-webkit-user-select: none; /* Safari */
-ms-user-select: none; /* IE 10+ and Edge */
user-select: none; /* Standard syntax */
-webkit-touch-callout: none; /* Prevents default callout on hold in iOS */
}
.gesture-area {
border: 2px dashed #ccc;
padding: 20px;
margin-bottom: 10px;
text-align: center;
}
</style>
<script>
const gestureArea = document.getElementById('gesture-area');
const fileInput = document.getElementById('file-input');
@@ -162,29 +144,22 @@ $this->registerJS(
const imagePreview = document.getElementById('image-preview'); // Get the image element
const body = document.body;
const prevDayBtn = document.getElementById('prev-day-btn');
const nextDayBtn = document.getElementById('next-day-btn');
const currentDayBtn = document.getElementById('current-day-btn'); // Changed to button
const autoUploadCheckbox = document.getElementById('auto-upload-checkbox');
fileInput.addEventListener('change', (event) => {
const file = event.target.files;
const file = event.target.files; // Corrected to access the first file
const reader = new FileReader();
reader.onload = (e) => {
imagePreview.src = e.target.result;
imagePreview.style.display = 'block';
}
if (file) {
const reader = new FileReader();
reader.onload = (e) => {
imagePreview.src = e.target.result;
imagePreview.style.display = 'block';
}
reader.readAsDataURL(file);
}
});
// Load checkbox state from localStorage
if (localStorage.getItem('autoUpload') === 'true') {
autoUploadCheckbox.checked = true;
@@ -197,6 +172,12 @@ $this->registerJS(
let currentDate = new Date();
let today = new Date(); // Store today's date
const prevDayBtn = document.getElementById('prev-day-btn');
const nextDayBtn = document.getElementById('next-day-btn');
const currentDayBtn = document.getElementById('current-day-btn'); // Changed to button
const day = document.getElementById('mealform-day'); // Changed to button
function updateDayDisplay() {
const diff = Math.floor((today - currentDate) / (1000 * 60 * 60 * 24)); // Difference in days
const options = {weekday: 'long'};
@@ -208,7 +189,6 @@ $this->registerJS(
} else {
currentDayBtn.textContent = currentDate.toLocaleDateString(undefined, options);
}
document.getElementById('meal_day').value = currentDayBtn.textContent;
// Disable "next" button if currentDate is today
nextDayBtn.disabled = (currentDate.toDateString() === today.toDateString());
@@ -221,11 +201,13 @@ $this->registerJS(
prevDayBtn.addEventListener('click', () => {
currentDate.setDate(currentDate.getDate() - 1);
day.value--;
updateDayDisplay();
});
nextDayBtn.addEventListener('click', () => {
currentDate.setDate(currentDate.getDate() + 1);
day.value++;
updateDayDisplay();
});
@@ -276,30 +258,5 @@ $this->registerJS(
fileInput.click();
});
}
/**
* Setup default buttons
*/
const breakfastBtn = document.getElementById('breakfast');
const lunchBtn = document.getElementById('lunch');
const dinnerBtn = document.getElementById('dinner');
const otherBtn = document.getElementById('other');
// Function to pre-select meal type based on time of day
function preselectMealType() {
const now = new Date();
const hour = now.getHours();
if (hour >= 6 && hour < 11) { // Breakfast time
breakfastBtn.click();
} else if (hour >= 11 && hour < 15) { // Lunch time
lunchBtn.click();
} else if (hour >= 15 && hour < 21) { // Dinner time
dinnerBtn.click();
} else {
otherBtn.click();
}
}
// Call the function to pre-select on page load
preselectMealType();
</script>
</div>