### Install Dependencies and Setup Django Project

Source: https://github.com/royrdan/anycubic_cloud/blob/main/README.md

Installs necessary system packages, sets up a Python virtual environment, installs Django and other Python libraries, clones the project repository, configures Django settings, and runs database migrations.

```bash
sudo apt install -y git python3 python3-dev python3-virtualenv python-dbus libdbus-1-dev libglib2.0-dev
virtualenv anycubic_cloud
cd anycubic_cloud
source bin/activate
python3 -m pip install --upgrade pip
pip3 install django django-crispy-forms requests pyyaml desktop-notifier
mkdir src
cd src
git clone https://github.com/Royrdan/anycubic_cloud
mv anycubic_cloud anycubic_cloud_repo
django-admin startproject anycubic_cloud
SECRET_KEY=$(grep -h "SECRET_KEY" anycubic_cloud/anycubic_cloud/settings.py | sed 's/.* = //')
cp -r anycubic_cloud_repo/* anycubic_cloud
rm -rf anycubic_cloud_repo
sed -i "s/SECRET_KEY = <SECRET_KEY_HERE>/# SECRET_KEY = <see bottom of file>/" anycubic_cloud/anycubic_cloud/settings.py
echo "SECRET_KEY = $SECRET_KEY" >> anycubic_cloud/anycubic_cloud/settings.py
anycubic_cloud/manage.py migrate
anycubic_cloud/manage.py runserver
```

--------------------------------

### JavaScript Load Detail View Function

Source: https://github.com/royrdan/anycubic_cloud/blob/main/templates/base.html

Fetches and displays detailed information for a G-code file or printer job using a GET request. The retrieved HTML content is then loaded into a dialog box.

```javascript
function load_detail_view(event, this_item){
    event.preventDefault();
    target = this_item.attr('href');
    dialog = $('#info_dialog');
    $.get(
        url=target,
        function(data, status) {
            if (status == 'success') {
                dialog.html(data);
                show_dialog( dialog );
            }
        }
    )
};
```

--------------------------------

### Load Printer List via AJAX

Source: https://github.com/royrdan/anycubic_cloud/blob/main/home/templates/home/home.html

This function fetches the printer list from the server using an AJAX GET request and updates the '#printer_list' HTML element with the returned data.

```javascript
function load_printer_list(){
console.log('getting printer listing')
$.get( url="{% url 'printer_list' %}",
function(data, status) {
if (status == 'success'){
$('#printer_list').html(data)
}
}
);
};
```

--------------------------------

### Display Current Job Details

Source: https://github.com/royrdan/anycubic_cloud/blob/main/home/templates/home/current_job_list.html

Iterates through current jobs to display their G-code name, progress, last update time, pause status, print status, and start time.

```html
{% for job in current_jobs_detail %}
  {{job.gcode_name}}
  {{job.progress}}% Complete
  Last Updated: {{job.last_update_time}}
  Paused: {{job.pause}}
  Status: {{job.print_status}}
  Started: {{job.start_time}}
{% endfor %}
```

--------------------------------

### Load Current Job Detail List via AJAX

Source: https://github.com/royrdan/anycubic_cloud/blob/main/home/templates/home/home.html

This function fetches the current job detail list from the server using an AJAX GET request and updates the '#taskbar_job_progress' HTML element with the returned data.

```javascript
function load_current_job_detail_list(type){
console.log('getting current job detail listing')
$.get( url = {% url 'current_job_detail_list' %},
function(data, status){
if (status == 'success'){
$('#taskbar_job_progress').html(data)
}
}
);
};
```

--------------------------------

### Load Current Job List via AJAX

Source: https://github.com/royrdan/anycubic_cloud/blob/main/home/templates/home/home.html

This function fetches the current job list from the server using an AJAX GET request and updates the '#taskbar_job_progress' HTML element with the returned data.

```javascript
function load_current_job_list(type){
console.log('getting current job listing')
$.get( url = {% url 'current_job_list' %},
function(data, status){
if (status == 'success'){
$('#taskbar_job_progress').html(data)
}
}
);
};
```

--------------------------------

### JavaScript Show All Jobs Function

Source: https://github.com/royrdan/anycubic_cloud/blob/main/templates/base.html

Fetches and displays a list of all printer jobs. It makes a GET request to the job list URL and populates a dialog with the returned data, while hiding the current job dialog.

```javascript
function show_all_jobs() {
    $.get( url="{% url 'job_list' %}",
        function(data, status){
            if (status == 'success') {
                $('#all_jobs_dialog').html(data);
            }
        })
    $('#current_job_dialog').fadeOut();
    show_dialog( $('#all_jobs_dialog') );
};
```

--------------------------------

### Load G-code List via AJAX

Source: https://github.com/royrdan/anycubic_cloud/blob/main/home/templates/home/home.html

This function fetches the G-code list from the server using an AJAX GET request and updates the '#gcode_list' HTML element with the returned data.

```javascript
function load_gcode_list(){
console.log('getting gcode listing')
$.get( url = {% url 'gcode_list' %},
function(data, status){
if (status == 'success'){
$('#gcode_list').html(data)
}
}
);
};
```

--------------------------------

### Click Event Handler for Details

Source: https://github.com/royrdan/anycubic_cloud/blob/main/home/templates/home/printer_list.html

Attaches a click event handler to elements with classes 'printer_link' and 'gcode_link' to load a detail view.

```javascript
$( '.printer_link, .gcode_link' ).click(function( event ) {
  load_detail_view( event, $( this ) );
});
```

--------------------------------

### Initialize Data Loading on Page Load

Source: https://github.com/royrdan/anycubic_cloud/blob/main/home/templates/home/home.html

This JavaScript code runs when the document is ready to load the initial lists of printers, G-codes, and current jobs.

```javascript
$( document ).ready(function(){ load_printer_list(); load_gcode_list(); load_current_job_list(); });
```

--------------------------------

### JavaScript Test Button Click Handler

Source: https://github.com/royrdan/anycubic_cloud/blob/main/templates/base.html

Handles the 'Test' button click event. It sends a POST request with category, command, and data to the test endpoint and displays the returned data or an error message.

```javascript
$('#test_button').click( function(event) {
    event.preventDefault();
    this_item = $(this);
    $.post(
        url="{% url 'test'%}",
        data={
            'csrfmiddlewaretoken': this_item.siblings('input[name=csrfmiddlewaretoken]').val(),
            'category': this_item.siblings('input[name=category]').val(),
            'command': this_item.siblings('input[name=command]').val(),
            'data': this_item.siblings('input[name=data]').val()
        },
        function(data, status) {
            if (status == 'success') {
                $('#test_return_data').text( data );
            }else{
                $('#test_return_data').text( 'Returned invalid data' );
            }
        }
    )
});
```

--------------------------------

### Printer/GCODE Info Dialog Click Handler

Source: https://github.com/royrdan/anycubic_cloud/blob/main/home/templates/home/gcode_list.html

jQuery event handler for clicks on printer or GCODE links. Calls the load_detail_view function.

```javascript
load_detail_view(event, $(this) );
```

--------------------------------

### Show All Jobs Button Click Handler

Source: https://github.com/royrdan/anycubic_cloud/blob/main/home/templates/home/current_job_list.html

Attaches a click event handler to the 'All Jobs' button to trigger the display of all jobs.

```javascript
$('button#all_jobs').click(function(event){ show_all_jobs(); });
```

--------------------------------

### Printer List Iteration

Source: https://github.com/royrdan/anycubic_cloud/blob/main/home/templates/home/printer_list.html

Iterates over a list of printers to display their information. Links are provided to individual printer detail views.

```html
{% for printer in printers %}

[![]({{printer.img}})](/printer/{{printer.id}})

[

{{printer.name}}  
Printing: {{printer.is_printing}}  
Status: {{printer.reason}}  
Updated: {{printer.last_update_time}}  


](/printer/{{printer.id}})

{% endfor %}
```

--------------------------------

### Gcode List Rendering

Source: https://github.com/royrdan/anycubic_cloud/blob/main/home/templates/home/gcode_list.html

Django template code to iterate over Gcode objects and display their image, name, and action buttons.

```html
{% for gcode in gcodes %}

[![]({{gcode.img}})](/gcode/{{gcode.id}})

[{{gcode.name|truncatechars:19}}](/gcode/{{gcode.id}})

   Print

{% csrf_token %}  Delete

{% endfor %}
```

--------------------------------

### JavaScript Print NOW Button Click Handler

Source: https://github.com/royrdan/anycubic_cloud/blob/main/templates/base.html

Handles the 'Print NOW' button click. It sends a POST request with print details (printer ID, G-code ID) to the server. Upon success or failure, it hides dialogs and shows a message.

```javascript
$('#print_now').click(function(event){
    event.preventDefault();
    this_item = $(this);
    $.post(
        url=this_item.parent().attr('action'),
        data={
            'csrfmiddlewaretoken': this_item.siblings('input[name=csrfmiddlewaretoken]').val(),
            'action': 'print',
            'printer_id': this_item.siblings('select[name=printer_id]').val(),
            'gcode_id': this_item.siblings('input[name=gcode_id]').val()
        },
        function(data, status) {
            if (status == 'success') {
                $('.dialog').fadeOut();
                $('#message_text').text( data );
                show_dialog( $('#message_dialog') );
            }else{
                $('.dialog').fadeOut();
                $('#message_text').text( data );
                show_dialog( $('#message_dialog') );
            }
        }
    )
});
```

--------------------------------

### JavaScript Dialog and Print Function

Source: https://github.com/royrdan/anycubic_cloud/blob/main/templates/base.html

Handles showing dialogs by blurring the main content and fading in specific dialogs. Also includes a reusable function for print button clicks, setting up the form action and logging information.

```javascript
function show_dialog(dialog) {
    $('main').css('filter', 'blur(4px)');
    $('#select_block').fadeIn();
    dialog.fadeIn();
};

function print_button_clicked(this_item) {
    $('#printer_select_form').attr( 
        'action', "/gcode/" + this_item.siblings('input.gcode_id').val() 
    );
    $('#gcode_id').val(this_item.siblings('input.gcode_id').val());
    $('#printer_select_header').text( 'Print ' + this_item.siblings('input.gcode_name').val());
    console.log('Print ' + this_item.siblings('input.gcode_name').val());
    show_dialog( $('#printer_select') );
};
```

--------------------------------

### JavaScript Upload Button Click Handler

Source: https://github.com/royrdan/anycubic_cloud/blob/main/templates/base.html

Handles the 'UploadNow' button click. It checks if a filename is provided before fading out the upload form and showing the upload dialog.

```javascript
$('#upload').click( function() {
    if ($('#filename').val() != '') {
        $('#upload_form').fadeOut();
        show_dialog( $('#upload_dialog') );
    }
});
```

--------------------------------

### Displaying Print Jobs List

Source: https://github.com/royrdan/anycubic_cloud/blob/main/home/templates/home/job_list.html

Iterates through a list of jobs and displays their attributes. Use this template to show current and historical print job data.

```html
{% if jobs %}

{% for job in jobs %}

![]({{job.img}})

**{{job.gcode_name}}**  
ID: {{job.id}}  
Estimate: {{job.estimate}}  
Material: {{job.material}}  
Paused: {{job.pause}}  
Progress: {{job.progress}}  
Status: {{job.status}}  
Started: {{job.start_time}}  
End Time: {{job.end_time}}  
Last Updated: {{job.last_update_time}}  

{% endfor %}

{% else %} There are no current or previous jobs {% endif %}
```

--------------------------------

### Taskbar Job Progress Click Handler

Source: https://github.com/royrdan/anycubic_cloud/blob/main/home/templates/home/taskbar_job_progress.html

This jQuery code handles click events on the taskbar job progress element. It checks if there are current jobs; if not, it calls 'show_all_jobs()'. Otherwise, it fetches and displays detailed job information in a dialog.

```javascript
$('#taskbar_job_progress').click(function(event){ if ($(this).children('p1').text() == 'No Current Jobs') { show_all_jobs(); }else{ console.log('running get current job code') $.get( url="{% url 'current_job_detail_list' %}", function(data, status){ if (status == 'success'){ $('#current_job_dialog').html(data); }; }); show_dialog( $('#current_job_dialog') ); } });
```

--------------------------------

### Django Template - Printer Loop

Source: https://github.com/royrdan/anycubic_cloud/blob/main/templates/base.html

Iterates through a list of printers and displays their names. This is commonly used in forms or lists to present available printers to the user.

```html
{% for printer in printers %} {{printer.name}} {% endfor %}
```

--------------------------------

### JavaScript All Jobs Button Click Handler

Source: https://github.com/royrdan/anycubic_cloud/blob/main/templates/base.html

Attaches a click event handler to the 'All Jobs' button. This handler calls the show_all_jobs function to display all pending and completed printer jobs.

```javascript
$"button#all_jobs".click(function(event){
    show_all_jobs();
});
```

--------------------------------

### JavaScript Taskbar Button Click Handlers

Source: https://github.com/royrdan/anycubic_cloud/blob/main/templates/base.html

Attaches click event handlers to taskbar buttons for 'Upload' and 'Test'. These handlers trigger the display of corresponding dialog forms.

```javascript
$('#taskbar_upload').click( function() {show_dialog( $('#upload_form') );});
$('#taskbar_test').click(function() {show_dialog( $('#testing_form') );});
```

--------------------------------

### Handle Print Button Click

Source: https://github.com/royrdan/anycubic_cloud/blob/main/home/templates/home/gcode.html

Attaches a click event handler to the print button to fade out the info dialog and trigger the print_button_clicked function.

```javascript
$( "button.print_button" ).click(function() {
  $( "#info_dialog" ).fadeOut();
  print_button_clicked( $(this) );
});
```

--------------------------------

### Print Button Click Handler

Source: https://github.com/royrdan/anycubic_cloud/blob/main/home/templates/home/gcode_list.html

jQuery event handler for the print button click. Calls the print_button_clicked function.

```javascript
print_button_clicked( $(this) );
```

--------------------------------

### Handle Delete Button Click

Source: https://github.com/royrdan/anycubic_cloud/blob/main/home/templates/home/gcode.html

Attaches a click event handler to the delete button to fade out the info dialog and trigger the delete_button_clicked function.

```javascript
$( "button.delete_button" ).click(function(event) {
  $( "#info_dialog" ).fadeOut();
  delete_button_clicked( event, $(this) );
});
```

--------------------------------

### Django Template - Logout URL

Source: https://github.com/royrdan/anycubic_cloud/blob/main/templates/base.html

Generates a URL for the logout view. This is typically used in a link to allow users to log out of the application.

```html
{% url 'logout_view' %}
```

--------------------------------

### Set Auto-Refresh Intervals

Source: https://github.com/royrdan/anycubic_cloud/blob/main/home/templates/home/home.html

These JavaScript intervals are used to periodically refresh the current job list and the printer/G-code lists to ensure up-to-date information.

```javascript
setInterval(function(){ load_current_job_list(); }, 30000);
```

```javascript
setInterval(function(){ load_gcode_list(); load_printer_list(); }, 200000);
```

--------------------------------

### Django Template - Message Display

Source: https://github.com/royrdan/anycubic_cloud/blob/main/templates/base.html

Conditionally displays a message to the user upon page load. It uses jQuery to show a message dialog if a 'message' variable is present in the context.

```html
{% if message %}
$(document).ready( function() {
    $('#message_text').text( '{{message}}' );
    show_dialog( $('#message_dialog') );
});
{% endif %}
```

--------------------------------

### Display Current Jobs or 'No Current Jobs' Message

Source: https://github.com/royrdan/anycubic_cloud/blob/main/home/templates/home/taskbar_job_progress.html

This Django template snippet conditionally renders the progress of current jobs or a 'No Current Jobs' message based on the 'current_jobs' variable. It iterates through jobs to display their name and progress percentage.

```html
{% if current_jobs %} {% for job in current_jobs %} Printing: {{job.gcode_name}} {{job.progress}}% Complete {% endfor %} {% else %} No Current Jobs {% endif %}
```

--------------------------------

### Delete Button Click Handler

Source: https://github.com/royrdan/anycubic_cloud/blob/main/home/templates/home/gcode_list.html

jQuery event handler for the delete button click. Calls the delete_button_clicked function with event and this context.

```javascript
delete_button_clicked( event, $(this) );
```

--------------------------------

### JavaScript Delete Function

Source: https://github.com/royrdan/anycubic_cloud/blob/main/templates/base.html

Handles the deletion of G-code files via a POST request. It uses CSRF tokens for security and updates the UI by reloading the G-code list and showing a success message.

```javascript
function delete_button_clicked(event, this_item) {
    event.preventDefault();
    $.post(
        url=this_item.parent().attr('action'),
        data={
            'csrfmiddlewaretoken': this_item.siblings('input[name=csrfmiddlewaretoken]').val(),
            'action': 'delete'
        },
        function(data, status) {
            if (status == 'success') {
                load_gcode_list();
                $('#message_text').text( data );
                show_dialog( $('#message_dialog') );
            }
        }
    );
};
```

--------------------------------

### JavaScript Dialog Hide Handler

Source: https://github.com/royrdan/anycubic_cloud/blob/main/templates/base.html

Handles hiding all dialogs when the overlay background is clicked. It resets the main content's filter and fades out the overlay and all dialog elements.

```javascript
function hide_dialog() {
    $('main').css('filter', 'blur(0px)');
    $('#select_block').fadeOut();
    $('.dialog').fadeOut();
};

$('#select_block').click(function(event){
    hide_dialog();
});
```

--------------------------------

### Django Template - CSRF Token

Source: https://github.com/royrdan/anycubic_cloud/blob/main/templates/base.html

Includes the CSRF token for form submissions in Django templates. This is essential for security when performing POST requests.

```html
{% csrf_token %}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.