135 lines
4.5 KiB
HTML
135 lines
4.5 KiB
HTML
<!doctype html>
|
|
<title>Welcome To Gavilan College</title>
|
|
<link href="/data/gui/cropper.css" rel="stylesheet">
|
|
<script src="/data/gui/cropper.js"></script>
|
|
|
|
<style>
|
|
body, select { font-family: arial; font-size: 0.75rem; }
|
|
.line span { display: inline-block; width: 16%; }
|
|
div.line { border-bottom: 1px solid lightgrey; margin-bottom: 4px; }
|
|
.linehead span { font-weight: bold; }
|
|
.clicky { cursor:pointer; padding:0.3em; }
|
|
button { padding:0.5em; margin:0.5em; }
|
|
#myapp img { max-width:100%; max-height:30rem; }
|
|
#list { width:30%; display:inline-block; position:absolute; top:0; left:0; height:100%; overflow:scroll; }
|
|
#ed { width:60%; display:inline-block; position:absolute; top:0; left:30%; height:90%;}
|
|
</style>
|
|
|
|
<script src='/data/gui/lib/lodash.js'></script>
|
|
<script src='/data/gui/lib/vue-max.js'></script>
|
|
|
|
|
|
<div id="pic_editor">
|
|
|
|
<div id="list">
|
|
<h1>Photo Cropper</h1>
|
|
<div class="clicky" v-for="ff,i in files_match" v-on:click="swap_image(i)">
|
|
<span v-if="is_checked(ff)"><b>x </b></span>
|
|
[[ff.conf_name]]
|
|
</div>
|
|
<div class="clicky" v-for="ff,i in files_no_match" v-on:click="swap_image_b(i)"><span v-if="is_checked(ff)"><b>x </b></span> [[ff]]</div>
|
|
</div>
|
|
<div id="ed">
|
|
<img id='target' src='' />
|
|
<button v-on:click="save_crop">Make Crop</button>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<script>
|
|
|
|
{% autoescape false %}
|
|
var files_match = {{matches}}
|
|
var files_no_match = {{nomatches}}
|
|
var staff = {{staff}}
|
|
var checked = {{checked}}
|
|
{% endautoescape %}
|
|
|
|
var app = new Vue({
|
|
el: '#pic_editor',
|
|
data: {
|
|
msg: 'hello', active: false,
|
|
current_file: 0,
|
|
//current_filename: '',
|
|
files_match: files_match,
|
|
files_no_match: files_no_match,
|
|
checked: checked,
|
|
picDir: '/data/picsStaffdir/', // '/data/picsId/originals_20211022/'
|
|
staff: staff,
|
|
cropper: '',
|
|
image: '',
|
|
},
|
|
delimiters: ['[[', ']]'],
|
|
watch: { },
|
|
methods: {
|
|
// current_filename: function() { return this.files_match[this.current_file].filename },
|
|
current_filename: function() { return this.files_no_match[this.current_file] },
|
|
is_checked: function(x) { console.log(x); return this.checked.includes(x) },
|
|
swap_image: function(i) {
|
|
console.log("Swap: " + i)
|
|
this.current_file = i
|
|
this.cropper.replace(this.picDir + this.files_match[i].filename)
|
|
//this.cropper.replace('/data/picsUpload/' + this.files_match[i].filename)
|
|
},
|
|
swap_image_b: function(i) {
|
|
console.log("Swap b: " + i)
|
|
// this.current_file = i
|
|
this.current_file = this.files_no_match[ i ]
|
|
this.cropper.replace(this.picDir + this.files_no_match[i])
|
|
},
|
|
save_crop: function() {
|
|
var self = this
|
|
console.log(this.cropper.getData(true))
|
|
cr = this.cropper.getData(true)
|
|
|
|
|
|
fetch('/imagecrop/' + this.current_file + '/' + cr.x + '/' + cr.y + '/' + cr.width + '/' + cr.height
|
|
+ '/' + this.current_file, { method: 'GET' }).then(function (response) {
|
|
|
|
|
|
// fetch('/imagecrop/' + this.current_filename() + '/' + cr.x + '/' + cr.y + '/' + cr.width + '/' + cr.height
|
|
// + '/' + this.files_match[ this.current_file ].conf_goo, { method: 'GET' }).then(function (response) {
|
|
|
|
|
|
// The API call was successful!
|
|
if (response.ok) {
|
|
response.json().then( function(r2) {
|
|
console.log('I saved it yo')
|
|
console.log(r2.text)
|
|
self.checked.push(self.current_file)
|
|
} )
|
|
} else { return Promise.reject(response) }
|
|
}).then(function (data) {
|
|
}).catch(function (err) { console.warn('Something went wrong.', err); });
|
|
},
|
|
},
|
|
computed: { },
|
|
mounted: function() {
|
|
this.image = document.getElementById('target');
|
|
this.cropper = new Cropper(this.image, {
|
|
aspectRatio: 3 / 4,
|
|
crop(event) { console.log(event) },
|
|
});
|
|
/*var self = this;
|
|
fetch('dir_api_tester.php', { method: 'GET' }).then(function (response) {
|
|
// The API call was successful!
|
|
if (response.ok) {
|
|
response.json().then( function(r2) {
|
|
self.user = r2;
|
|
} )
|
|
} else { return Promise.reject(response) }
|
|
}).then(function (data) {
|
|
}).catch(function (err) { console.warn('Something went wrong.', err); });
|
|
*/
|
|
}
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|