-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathmain.html
More file actions
1 lines (1 loc) · 17.3 KB
/
Copy pathmain.html
File metadata and controls
1 lines (1 loc) · 17.3 KB
1
<!doctype html> <meta charset=utf-8 > <title>MyDiary</title> <meta name=description content=MyDiary > <meta name=theme-color content="#ffffff"> <meta name=viewport content="width=device-width, initial-scale=1"> <link href="/MyDiary/manifest.webmanifest" rel=manifest > <link href="/MyDiary/icons/maskable_icon_x192.png" rel=icon > <link href="/MyDiary/icons/maskable_icon_x192.png" rel=apple-touch-icon > <link href="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/css/bootstrap.min.css" rel=stylesheet > <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1/font/bootstrap-icons.min.css" rel=stylesheet > <link href="/MyDiary/static/styles/base.css" rel=stylesheet > <link href="/MyDiary/static/styles/themes/base.css" rel=stylesheet > <body class=base-theme > <script> matchMedia("(prefers-color-scheme: dark)").onchange = event => { document.querySelector("body").classList.add(event.matches ? "dark" : ""); }; if (matchMedia("(prefers-color-scheme: dark)").matches) { document.querySelector("body").classList.add("dark"); }; window.addEventListener('load', () => navigator.serviceWorker.register('/MyDiary/sw.js')); </script> <div class=my-progress-bar id=progress-bar hidden></div> <div class=window id=app > <modal id=startGDModal :title="$t('Connect to Google')" v-cloak> <p v-t="'message_sync_GD'"></p> <template v-slot:footer=""> <button class="btn btn-secondary" data-bs-dismiss=modal @click="isUseGD = false" v-t="'Disable'"></button> <button class="btn btn-primary" data-bs-dismiss=modal onclick="login()" v-t="'Login'"></button> </template> </modal> <modal id=setPassword :title="$t('Password setting')" v-cloak> <label class=form-field > <span class=form-label v-t="'New password'"></span> <input class=form-control v-model=password1 autocomplete=off > </label> <label class=form-field > <span class=form-label v-t="'New password (again)'"></span> <input class=form-control v-model=password2 autocomplete=off > </label> <label class=form-field > <span class=form-label v-t="'Security question'"></span> <input class=form-control v-model=question autocomplete=off > </label> <label class=form-field > <span class=form-label v-t="'Answer to security question'"></span> <input class=form-control v-model=answer autocomplete=off > </label> <small v-t="'message_password_modal'"></small> <template v-slot:footer=""> <button class="btn btn-secondary" data-bs-dismiss=modal v-t="'Do not change'"></button> <button class="btn btn-primary" data-bs-dismiss=modal @click=setPassword v-t="'Set'"></button> </template> </modal> <modal id=passwordModal :title="$t('Unlocking')" notfooter=true v-cloak> <label class=form-field > <span class=form-label v-t="'Password'"></span> <input class=form-control ref=passwordInput autocomplete=off > </label> <small v-text="$t('question_text', {q: question})"></small> </modal> <modal id=editDate :title="$t('Change date')" v-cloak> <label class=form-field > <span class=form-label v-t="'Date'"></span> <input class=form-control type=date v-model=today > </label> <template v-slot:footer=""> <a class="btn btn-primary" data-bs-dismiss=modal @click="changeDate(today)" v-t="'Go'"></a> </template> </modal> <header class="navbar main-navbar navbar-expand-lg"> <div class="container navbar-inner"> <span class=navbar-brand >MyDiary</span> <button class=navbar-toggler data-bs-target="#navbarSupportedContent" data-bs-toggle=collapse :aria-label="$t('Toggle navigation')"> <span class=navbar-toggler-icon ></span> </button> <div class="collapse navbar-collapse" id=navbarSupportedContent > <ul class=navbar-nav > <li class=nav-item > <a class=nav-link href="#dashboard" v-t="'Homepage'"></a> <li class=nav-item > <a class=nav-link href="#search" v-t="'Search'"></a> <li class=nav-item > <a class=nav-link href="#other" v-t="'Other'"></a> <li class=nav-item v-for="i in types"> <a class=nav-link :href="`#type/${i.uuid}`" v-if=i.page_title v-text=i.page_title ></a> </ul> </div> </div> </header> <div class="container search-page" v-if="options.page == 'search'" v-cloak> <h1 class="title text-center" v-t="'Search'"></h1> <div class="row justify-content-center"> <label class="input-group form-field"> <span class=input-group-text v-t="'Search'"></span> <input class=form-control type=search v-model.trim=options.q @input=update > </label> <label class="input-group form-field w-auto"> <span class=input-group-text v-t="'Type'"></span> <select class=form-select v-model=options.type @input=update > <option :value=undefined v-t="'Any'"> <option :value=i.uuid v-for="i in types" v-text=i.title :key=i.uuid > </select> </label> <label class="input-group form-field w-auto"> <span class=input-group-text v-t="'Tag'"></span> <select class=form-select v-model=options.tag @input=update > <option :value=undefined v-t="'Any'"> <option :value=i v-if=tags v-for="i in tags" v-text="'#'+i" :key=i > </select> </label> </div> <hr> <records :records=records ></records> </div> <div class="container tag-page" v-else-if="options.page == 'tag'" v-cloak> <header class="navbar records-header mb-2"> <div class="dropdown tags-menu" v-if="tags && tags.length"> <a class="dropdown-toggle h1" data-bs-toggle=dropdown v-text="'#'+options.tag"></a> <ul class="dropdown-menu tags-menu-list"> <li class=tags-menu-list-item v-for="i in tags" :key=i > <a class="dropdown-item tags-menu-list-link" v-if="i != options.tag" :href="getTagUrl(i)" v-text="'#'+i"></a> </ul> </div> <div class=h1 v-text="'#'+options.tag" v-else></div> </header> <records :records=records ></records> </div> <div class="other-page container" v-else-if="options.page == 'other'" v-cloak> <div class=row > <section class="col-lg-12 mb-5"> <h3 class=title v-t="'Information'"></h3> <table class=table > <tr> <td v-t="'Number of record types:'"> <td v-text="(types || []).length"> <tr> <td v-t="'Number of tags:'"> <td v-text="(tags || []).length"> <tr> <td v-t="'Number of records:'"> <td v-text=recordCount > </table> </section> <section class="col-lg-12 mb-5"> <h3 v-t="'Record types'"></h3> <div class="row types-list"> <div class="col-md-6 type-preview" v-for="type in types" :key=type.uuid > <i :class="`icon bi-${type.icon}`"></i> <span class=name v-text=type.title ></span> <small class=description v-text=type.description ></small> <div class=bottom > <div class=btn-group > <button class="btn btn-primary" @click='DB("put", "types", ({...type, isEnable: false }))' v-if=type.isEnable v-t="'Disable'"></button> <button class="btn btn-primary" @click='DB("put", "types", ({...type, isEnable: true }))' v-else v-t="'Enable'"></button> <button class="btn btn-danger" @click='DB("del", "types", type.uuid)' v-t="'Delete'"></button> </div> <div class=btn-group > <span class="btn btn-primary active" v-text=type.index ></span> <button class="btn btn-primary" @click='DB("put", "types", ({...type, index: --type.index }))'>-</button> <button class="btn btn-primary" @click='DB("put", "types", ({...type, index: ++type.index }))'>+</button> </div> </div> </div> </div> <button class="btn btn-primary btn-add-type" @click=addType v-t="'Load data type'"></button> </section> <section class="col-lg-6 mb-5"> <h3 v-t="'Integration with Google Drive'"></h3> <label class="form-field form-check"> <input class=form-check-input type=checkbox v-model=isUseGD > <span class=form-check-label v-t="'Use GD'"></span> </label> <label class="form-field input-group"> <span class=input-group-text v-t="'Synchronization interval (minutes)'"></span> <input class=form-control type=number v-model=syncInterval > </label> <button class="btn btn-danger mb-3" @click=deleteFromGD v-t="'Delete from GD'"></button> <div class=small v-t="'reboot_message'"></div> </section> <section class="col-lg-6 mb-5"> <h3 v-t="'Password'"></h3> <button class="btn btn-primary mb-5" data-bs-target="#setPassword" data-bs-toggle=modal v-t="'Install/change/uninstall'"></button> <h3 v-t="'Local data'"></h3> <button class="btn btn-danger m-1" @click=deleteAll v-t="'Delete'"></button> <button class="btn btn-primary m-1" @click=exportData v-t="'Export'"></button> <button class="btn btn-primary m-1" @click=importData v-t="'Import'"></button> </section> <section class="col-lg-12 mb-5"> <h3 v-t="'About site'"></h3> <p> <span v-text="$t('version', {v: '5.1'})"></span> <button class="btn btn-link" v-text="$t('Update')" @click=updateApp ></button> </p> <p v-t="'browser_support'"></p> <p v-t="'disclaimer'"></p> <a class=link href="/MyDiary/?redirect=off" target=_blank v-t="'Front page'"></a> <a class=link href="/MyDiary/convector.html" target=_blank v-t="'Convectors'"></a> <!--a class="link" href="/MyDiary/development.html" target="_blank" v-t="'Documentation'"></a--> <a class=link href="https://github.com/denis-gr/diary" target=_blank v-t="'Source Code'"></a> </section> </div> </div> <div class="container date-page" v-else-if="options.page == 'date'" v-cloak> <header class="records-header mb-2"> <button class="title h1 btn btn-link" data-bs-target="#editDate" data-bs-toggle=modal > <h1 v-text="getFormattedDate(options.date)"></h1> </button> <button class="btn btn-link align-text-bottom" @click='changeDay(-1)'><</button> <button class="btn btn-link align-text-bottom" @click='changeDay(+1)'>></button> </header> <records :records=records ></records> </div> <template v-for="i in types" v-else-if="options.page == 'type'" v-cloak> <component :is="`page-record-${i.uuid}`" v-if="options.type == i.uuid"></component> </template> <div class="container dashboard-page" v-else> <div class="row text-center"> <calendar id=calendar class=col-md-6 :first_date=options.date v-cloak></calendar> <div class="dashboard-tags col-md-6"> <h3 class=title v-t="'Tags'"></h3> <nav class=tags-list v-if=tags.length v-cloak> <a class=tags-list-link v-for="i in tags" :href="getTagUrl(i)" v-text=i ></a> </nav> <p class=error-text v-else v-cloak v-t="'No tags'"></p> </div> </div> <records :records=records ></records> </div> <div class=creation-menu id=creation-menu > <div class="creation-menu-inner btn-group-vertical"> <template v-for="i in types"> <button class="btn btn-outline-secondary" @click="callEditor(i.uuid)" v-if=i.isEnable :title=i.title > <i :class="`bi-${i.icon} icon`"></i> </button> </template> <button class="btn btn-outline-secondary btn-cls" onclick="toggleCreationMenu()" :title="$t('Close')"> <i class="bi-x icon"></i> </button> </div> <button class="btn btn-outline-secondary btn-opn" onclick="toggleCreationMenu()" :title="$t('Open post records menu')"> <i class="bi-plus icon"></i> </button> </div> <record-editor :type=i v-for="i in types" :key=i.uuid ></record-editor> </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/js/bootstrap.min.js" defer></script> <script> { const fun = () => { if (!location.hash.length) { location.hash = "#dashboard" }; window.options = {}; const temp = decodeURIComponent(location.hash).split(/[#/]/); window.options.page = temp[1]; window.options[temp[1]] = temp[2]; }; window.addEventListener("hashchange", fun); fun(); } </script> <div id=templates > <template id=modal-template > <div class="modal fade" tabindex=-1 > <div class="modal-dialog modal-lg modal-fullscreen-sm-down"> <div class=modal-content > <div class=modal-header > <h5 class=modal-title v-text=title ></h5> </div> <div class=modal-body > <slot></slot> </div> <div class=modal-footer v-if="!notfooter"> <slot name=footer ></slot> </div> </div> </div> </div> </template> <template id=calendar-template > <div class=calendar > <modal class=calendar-modal :title="$t('Change date')" :id="'edit'+id"> <div class="form-field input-group"> <span class=input-group-text v-t="'Year'"></span> <input class=form-control type=number v-model=year > </div> <div class="form-field input-group"> <span class=input-group-text v-t="'Month'"></span> <input class=form-control type=number v-model=month > </div> <template v-slot:footer=""> <button class="btn btn-primary" data-bs-dismiss=modal @click=update v-t="'Go'"></button> </template> </modal> <div class=header > <a class="title btn-link" data-bs-toggle=modal :data-bs-target="'#edit'+id" v-text=title ></a> </div> <div class=day-row > <span class=weekday v-t="'Mo'"></span> <span class=weekday v-t="'Tu'"></span> <span class=weekday v-t="'We'"></span> <span class=weekday v-t="'Th'"></span> <span class=weekday v-t="'Fr'"></span> <span class=weekday v-t="'Sa'"></span> <span class=weekday v-t="'Su'"></span> </div> <div class=day-row v-for="i in days"> <a v-for="j in i" v-text="j.getDate()" :href="$root.getDateUrl(j)" :class="getClassesDay(j)"></a> </div> </div> </template> <template id=records-list-template > <div class=records > <div class=load-text v-if="!records" v-t="'Loading...'">Loading...</div> <div class=error-text v-else-if="!records.length" v-t="'No records'" v-cloak></div> <ul class="row records-list" v-else> <li class="records-list-item col-sm-6" v-for="i in records"> <component :is="`record-${i.$type}`" :record=i :key="i.$id"></component> </ul> </div> </template> <template id=record-modal-temp > <div class=form > <div class="form-field input-group"> <input class=form-control type=date v-model="form.$date" :title="$t('Date')"> <input class=form-control type=time v-model="form.$time" :title="$t('Time')"> </div> {form} </div> </template> <template id=record-template > <div class=record > <div class=record-preview > <i :class="`bi-${type.icon} icon left`"></i> <div class=right > <div class=content @click="$root.callEditor(record.$type, record)"> {type_template} </div> <div class=bottom > <a class=date v-text="datetime(record)" :href="$root.getDateUrl(record.$date)"></a> <a class=tag v-for="tag in record.$tags" v-text="'#'+tag" :href="$root.getTagUrl(tag)"></a> </div> </div> </div> </div> </template> <template id=record-editor-template > <modal :title=type.title > <component :is="`modal-record-${type.uuid}`" :form=form ></component> <template v-slot:footer=""> <button class="btn btn-danger" data-bs-dismiss=modal @click=remove v-if="form.$id" v-t="'Delete'"></button> <button class="btn btn-primary" ref=cls v-show="!isValid" v-t="'Close'"></button> <button class="btn btn-primary" ref=btn v-show=isValid v-t="'Save'"></button> </template> </modal> </template> <template id=record-type-template > <div class=text-to-borders v-text=record.text ></div> </template> <template id=record-type-form-template > <div class=form-field > <label class=form-label >Текст</label> <autosize-textarea class=form-control v-model=form.text ></autosize-textarea> </div> </template> <template id=text-type-template > <div v-html=record.description ></div> </template> <template id=text-type-form-template > <div class=form-field > <label class=form-label >Описание</label> <autosize-textarea class=form-control v-model=form.description ></autosize-textarea> </div> <wysiwyg-editor v-model=form.content ></wysiwyg-editor> </template> <template id=idea-type-template > <div class=text-to-borders v-text=record.text ></div> </template> <template id=idea-type-form-template > <div class=form-field > <label class=form-label >Что за идея?</label> <autosize-textarea class=form-control v-model=form.text ></autosize-textarea> </div> </template> <template id=task-type-template > <div class=text-to-borders v-text=record.text :style="[new Date(record.$date + ' ' + record.$time) < new Date() ? { color: 'red' } : {}, record.isDone ? { color: 'green' } : {}]"></div> </template> <template id=task-type-form-template > <div class=form-field > <label class=form-label >Что за идея?</label> <autosize-textarea class=form-control v-model=form.text ></autosize-textarea> </div> <div class="form-check my-3"> <input class=form-check-input type=checkbox v-model=form.isDone > <label class=form-check-label > Задача выполнена. </label> </div> <div class=form-field v-if=form.isDone > <label class=form-label >Итоги</label> <autosize-textarea class=form-control v-model=form.conclusion ></autosize-textarea> </div> </template> <template id=rate-type-template > <div style="color: green;" v-if="record.rate == 5">Отличное</div> <div style="color: teal;" v-else-if="record.rate == 4">Хорошие</div> <div style="color: yellow;" v-else-if="record.rate == 3">Нормальное</div> <div style="color: orange;" v-else-if="record.rate == 2">Плохое</div> <div style="color: red;" v-else-if="record.rate == 1">Ужасное</div> </template> <template id=rate-type-form-template > <div class=form-field > <label class=form-label >Какое у вас сегодня настроение?</label> <select class=form-select v-model.number=form.rate > <option value=5 >Отличное <option value=4 >Хорошие <option value=3 >Нормальное <option value=2 >Плохое <option value=1 >Ужасное </select> </div> </template> </div> <script src="https://cdn.jsdelivr.net/npm/moment@2/moment.min.js" defer></script> <script src="https://cdn.jsdelivr.net/npm/moment@2/locale/ru.min.js" defer></script> <script src="https://cdn.jsdelivr.net/npm/idb@6/build/iife/index-min.js" defer></script> <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js" defer></script> <script src="https://cdn.jsdelivr.net/npm/vue-i18n@9/dist/vue-i18n.global.prod.js" defer></script> <script src="https://apis.google.com/js/api.js" defer></script> <script src="/MyDiary/static/js/google.js" defer></script> <script src="/MyDiary/static/js/base.js" defer></script> <script src="/MyDiary/static/js/db.js" defer></script> <script src="/MyDiary/static/js/vue.js" defer></script> <script src="/MyDiary/static/ckeditor5/script.js" defer></script>